157212 week 11 lecture 2 User Interface Design

1
157212 week 11 lecture 2User Interface Design
2
Why study user interfaces?

• Good UIs are critical to success
• UI programming is
• easy (sophisticated algorithms not required)
• straightforward (can immediately correct
  mistakes)
• fun (results are immediately visible)
• rational (apply simple rules)
• UI design is not graphic design

3
Cardinal axiom

• A user interface is well-designed when the
  program behaves exactly how the user thought it
  would.
• user is happy user in control S/W correctly
  interprets users actions
• loss of control ? depression, frustration(Learne
  d Helplessness)
• All the other rules are just corollaries

4
User and program models

• User model Users idea of whats happening
• Program model Programs idea of whats
  happening (i.e., whats actually happening)
• Successful UI when program model corresponds to
  user model
• Speak users language
• Follow real-world conventions, make information
  appear in natural and logical order
• Use metaphors from real world

5
Example

• Pictures in documents are
• embedded in word processor (e.g., Word)
• not embedded in HTML
• With WYSIWYG HTML editor (e.g., FrontPage), what
  do you do?
• change user model (describe in manual, explain
  with popup dialog box)
• change program model (make copy of picture in
  subfolder)

6
How do you get the user model?

• Ask the users!
• The 50-cent usability test
• Usually 5-6 people is enough, will start to see
  consensus
• Dont need formal usability lab, or people off
  the street
• Just sketch or prototype and ask your neighbor

7
User models are simple

• If your program model is nontrivial, its
  probably wrong

Click here
This window comes to top!
(invisible sheets in Excel)
8
Choices

• Every time you provide an option, you're asking
  the user to make a decision.

This is definitely the most stupidest wizard
dialog in the history of the Windows operating
system.
9
Too much freedom is dangerous
floating menu bar
huge system tray
How many users want these?
10
Metaphors
vs.

• Also desktop, folders, paintbrush, ...

11
Affordance

• afford to make available or provide naturally
• (door with metal plate affords pushing)

vs.
(30 usability)
(100 usability)
12
Affordance (cont.)
Where to grab?
Where to click?
What to drag?
13
Consistency, not creativity

• A foolish consistency is the hobgoblin of little
  minds Emerson
• Application should be consistent with itself and
  with other programs
• Examples FrontPage, Visio
• Beware of creativity
• Less like user model
• More work to implement
• Do not leverage future/hidden features
• Just because Microsoft does it, doesn't mean
  it's right
• Examples Tab from name to password, Netscapes
  reimplementation of common controls

14
Make explanations brief

• Users dont read the manual
• May not have the manual (on airplane, demo
  version)
• Too busy / distracted / impatient
• Users dont read anything
• advanced too busy
• novice hope defaults are ok
• in-between try to read but get confused

vs.
15
Many users are intimidated by computers
vs.
vs.
(no dialog)
Which is better for an intimidated user?
16
Users cant control the mouse well

• Whats the problem?
• sub-optimal pointing devices
• bad conditions (dirty, old, or cheap mouse
  crowded desk)
• medical disabilities (young, old, arthritis, ...)
• in a hurry
• Mile-high menu bar
• Macintosh slam mouse to top, get menu
• Windows ½ by ¼-inch target
• Easiest places to point four corners
• (Windows 95 start menu blunder 2 pixels from
  corner)
• 0, 1, or n
• All ngt1 are not equally likely (window close to
  edge should snap in place)

17
Dont tax the users memory

• Make objects, actions, and options visible
• User should not have to remember (too much)
  information

18
Some bad designs
adaptive menu
office assistant
19
The bell curve

• Users lie on a bell curve
• 98 can use a TV
• 70 can use Windows
• 15 can use Linux
• 1 can program
• Users are not all idiots
• But, the easier you make the program, the more
  people can use it(10 more usable ? 50 more
  users)

20
Activity-based UI

• Two ways of designing UI
• What features should be there?
• Greeting card example add text, add picture,
  get predesigned card from library, send by email,
  print
• What activities will users do?
• Greeting card example birthday greeting, party
  invitation, anniversary greeting(leads to
  unexpected features remind to send next year)
• Example
• Excel was designed for financial
  number-crunching, but many use it for lists
• Improv was to be killer app for NeXT
• great for complicated multi-dimensional financial
  models
• painful for lists

21
Open-ended vs. sequential operation

• History of UI goes back-and-forth
• user-in-control (command-line, Word, ...)
• sequential steps (wizards, ...)

vs.
22
Visual perception
color constancy
font spacing
color-blind 8 of men, 0.5 of women
23
Web-safe colors
dithering may produce other colors
216 can be reproduced on all displays (including
8-bit)
24
Dangers of color
Driving at night where the street lights are
yellow
traffic lightis green
traffic lightis yellow
25
Beyond WIMP

• WIMP (windows, icons, menus, pointers)
• WYSIWYG
• Importance of language
• grouping, conditionals, referring to objects not
  immediately visible or future
• support novice and power-user
• provide concrete and abstract ways of
  manipulation
• keyboard shortcuts / macros
• Shared control
• Delegation of routine or complex tasks to computer

26
Shneiderman's "Eight Golden Rules of Interface
Design"

• 1 Strive for consistency.
• Consistent sequences of actions should be
  required in similar situations identical
  terminology should be used in prompts, menus, and
  help screens and consistent commands should be
  employed throughout.

27
2

• Enable frequent users to use shortcuts.
• As the frequency of use increases, so do the
  user's desires to reduce the number of
  interactions and to increase the pace of
  interaction. Abbreviations, function keys, hidden
  commands, and macro facilities are very helpful
  to an expert user.

28
3

• Offer informative feedback.
• For every operator action, there should be some
  system feedback. For frequent and minor actions,
  the response can be modest, while for infrequent
  and major actions, the response should be more
  substantial.

29
4

• Design dialog to yield closure.
• Sequences of actions should be organized into
  groups with a beginning, middle, and end. The
  informative feedback at the completion of a group
  of actions gives the operators the satisfaction
  of accomplishment, a sense of relief, the signal
  to drop contingency plans and options from their
  minds, and an indication that the way is clear to
  prepare for the next group of actions

30
5

• Offer simple error handling.
• As much as possible, design the system so the
  user cannot make a serious error. If an error is
  made, the system should be able to detect the
  error and offer simple, comprehensible mechanisms
  for handling the error.

31
6

• Permit easy reversal of actions.
• This feature relieves anxiety, since the user
  knows that errors can be undone it thus
  encourages exploration of unfamiliar options. The
  units of reversibility may be a single action, a
  data entry, or a complete group of actions.

32
7

• Support internal locus of control.
• Experienced operators strongly desire the sense
  that they are in charge of the system and that
  the system responds to their actions. Design the
  system to make users the initiators of actions
  rather than the responders.

33
8

• Reduce short-term memory load.
• The limitation of human information processing in
  short-term memory requires that displays be kept
  simple, multiple page displays be consolidated,
  window-motion frequency be reduced, and
  sufficient training time be allotted for codes,
  mnemonics, and sequences of actions.

34
UI Design

• User interface design isnt about icons and
  buttons any more than graphic design is about
  typefaces and bleeds. They are both about
  creating experiences and communicating emotions
  and information.

35
Multimedia UI

• Three steps of multimedia user interface design
  are
• 1 identifying the audience and message
• 2 determining the use setting
• 3 creating a user experience

36

• It is important to understand
• who your audience is
• what you are trying to say
• Need to consider issues such as
• how old the users are
• what kind of experience and structure they prefer
• are the users familiar with multimedia or not?
• what is the best look and feel to convey your
  message?

37

• is also important to understand how the system
  will be used
• at home, work, or a public place
• on a PC, handheld device, or a public kiosk
• personal, one-to-one, or involving many people
• short-term or long-term use

38

• It is necessary to decide what kind of user
  experience to aim for
• should it take the form of a journey?
• should it be like a conversation?
• should it be like reading a storybook?
• should it be like listening to a story?

39
(No Transcript)
40

• Reduce users effort to a minimum
• nothing should be more than three clicks away
• this is a problem with hierarchical structures
• A good interface should be transparent
• interface itself should go unnoticed
• users should focus on what they are doing not on
  how to do it
• functionality can be imbedded in the content

41
A good interface

• Should anticipate what a user may want to do at
  any given time
• things are relevant only at a certain time
• provide only the anticipated functionality
• the right function given at the right time
• create a dynamic experience
• support the less is more philosophy

42
Questions

• Next week
• Dot net framework and exam preview