SIMS 213: User Interface Design

1
SIMS 213 User Interface Design Development

• Marti Hearst
• Thurs, Jan 24, 2002

2
Announcements

• Sign up for the is213 mailing list
• Mail to majordomo_at_sims
• subscribe is213
• Do the necessary email exchanges
• Today
• Jon Conhaim, E-Berkeley
• Several candidate class projects

3
Readings

• Do indicated readings before the class
• Required
• Course Reader (available early next week)
• Jakob Nielsens Usability Engineering
• Jeff Johnson, GUI Bloopers
• For next Tuesday
• Read Bloopers Ch. 1
• Read Nielsen Chs. 3 and 4

4
Class Projects

• Design, prototype, and evaluate an interface
• Iterate four times
• Emphasis on web-based interfaces
• Ok to redesign an existing interface
• MUST work in groups of 3-4 people
• Team structure
• Students will assess amount of work being done by
  others in the group

5
Teams vs. Managed Groups
Teams good performance are inseparable

• Managed Groups
• strong leader
• individual accountability
• organizational purpose
• individual work products
• efficient meetings
• measures performance by influence on others
• delegates work

• Teams
• shared leadership
• individual mutual accountability
• specific team purpose
• collective work products
• open-ended meetings
• measures performance from work products
• does real work together

6
Team Action Items

• Meet and get used to each other
• Figure out strengths of team members
• Assign each person a role
• responsible for seeing work is organized done
• not responsible for doing it themselves
• Roles

• group manager (coordinate big picture)
• documentation (writing)

• design (visual interaction)
• software
• user testing

7
Assignment Project Proposal

• Decide on project goals and members
• Use class list to exchange ideas
• Recommendations
• Find a project for which you have ready access to
  people who would be real users of the system
• Look at the projects from last time to get a
  feeling for the scope.
• Due date
• Proposals due Tuesday Feb 5th (lt 2 weeks)
• Well give feedback and might ask you to revise
  it.

8
Why is Usability Important?

• Good design promotes
• Effectiveness and efficiency
• Feelings of satisfaction, enjoyment
• Bad design threatens
• Safety
• Accuracy

9
How to do good design
10
Good vs. Bad Design

• It is important to avoid bad design
• It is often easy to detect a bad design just
  try it with a few users
• It can be fun to spot the flows
• UI Hall of Shame http//www.iarchitect.com/mshame.
  htm
• UIs Greatest Bloopers
• It is much harder to teach / learn good design
• Look at appreciate good examples
• Follow best practices
• Be willing to redesign
• Get lots of practice!

11
Good vs. Bad Design

• UI design is humbling
• Your attempt may work right, look great
• But users may not be able to use it
• Dont take it personally! Thats why we iterate!

12
Studying Good Examples

• Some sites just do things well
• Amazon has pioneered many excellent interaction
  designs for the web
• Suggesting related products in an effective way
• Useful and timely content
• Tabs to organize main kinds of content
• 1-click purchasing
• Good checkout mechanism
• Yahoo also (although the structure of the
  hierarchy is now broken)
• Epicurious.com an excellent recipe site

13
Studying Good Examples

• Good design ideas can be taken too far

14
Amazons use of tabs last year

• What are the motivations?

15
Amazons current use of tabs

• What are the motivations?
• More or less effective than earlier?

16
Amazons current use of tabs

• What are the motivations?
• More or less effective than earlier?

17
Metaphor in User Interfaces
18
Metaphor and Analogy

• Metaphor
• L. metaphora, fr. to carry over, transfer meta
  beyond, over
• The transference of the relation between one set
  of objects to another set for the purpose of
  brief explanation (Websters revised)
• Analogy
• A resemblance of relations an agreement or
  likeness between things in some circumstances or
  effects, when the things are otherwise entirely
  different. (Websters revised)
• 1. Similarity in some respect between things that
  are otherwise dissimilar "the operation of a
  computer presents an interesting analogy to the
  working of the brain (WordNet)
• 2 (logic) inference that if things agree in
  some respects they probably agree in others
  (WordNet)

19
Metaphor

• Lakoff Johnson
• ...the way we think, what we experience, and
  what we do every day is very much a matter of
  metaphor.''
• in our language thinking - argument is war
• he attacked every weak point ... criticisms
  right on target ... if you use that strategy
• We can use metaphor to highlight certain features
  suppress others
• There is some systematicity to the transference

20

• What are some example interface metaphors?

21
Direct Manipulation uses a Metaphor

• Metaphor
• Computer objects as visible, moveable objects
• Consequences
• Items represented as icons
• Items can be picked up and moved on a surface
• Items can be thrown out
• Items can be copied
• Do we really want to have to drag them to a
  photocopier?
• How much is too much?

22
Direct Manipulation Metaphor

• DLITE makes heavy use of direct manipulation
  metaphors
• But it isnt supposed to be just like in the real
  world
• Retain what works, omit the rest

23
The Desktop Metaphor

• Started at Xerox PARC
• Xerox Star (see video)
• Bitmapped screens made it possible
• Not meant to be a real desktop
• Idea is to organize information in a way to allow
  people to use it in the way they user information
  on their desktops
• Allow windows to overlap make the screen act as
  if there were objects on it
• Apple took it farther
• Waste basket, etc
• Microsoft took it to extremes
• Microsoft Bob a recognized failure

24
Macintosh Desktop
25
Calderas Desktop
26
Microsoft Bobs Desktop Metaphor
27
Microsoft Bobs Livingroom Almost not a
metaphor anymore!
28
Selection Dialog Boxes

• How are they using metaphors?
• How are they breaking them?
• Do they work well or is there a better
  alternative?

29
SPSS Selection Dialog
30
SPSS Selection Dialog
31
Identify the mis-matched metaphors(from the
Interface Hall of Shame)

• The classic (from the mac desktop)
• To eject a disk you drag it to the trashcan

32
Identify the mis-matched metaphors(from the
Interface Hall of Shame)

• VCR buttons to control a printer??

33
Identify the mis-matched metaphors(from the
Interface Hall of Shame)

• Using tabs to make arbitrary groups