Creating the Initial Design

1
Creating the Initial Design

• Do v. dont

2
Borrow

• Good quality, tested techniques
• Users already understand features
• Reduced design and implementation effort
• - within boundaries -- i.e. look and feel
  patent concerns

3
Existing Frameworks

• Windows
• Macintosh
• X/Motif
• Java/Swing

4
Advantages

• Style guide describes features, advice
• Software tools may exist

5
Existing Applications

• Incorporate good existing tools where needed --
  spreadsheets and databases, for example
• saves development time
• users already familiar with these
• commercial grade

6
Existing Interaction Techniques

• Programs whose interfaces serve as models of good
  practice
• Be knowledgeable about these commonly used
  programs
• Example tool palette v. menus

7
Tool palette v. menus

• Select enter a mode
• graphical spec
• Mode ok because
• cursor indicates mode
• user is aware
• easy to get out
• icons show choices
• pack well
• good to rep graphics

• Select one-time action
• text shows choices
• list representation
• better for hard-to-draw operations

8
Modes

• Considered bad
• example - vi -- what you type can be text or a
  command, depending on the mode, little feedback
  to tell you which is which

9
Geometry and Motion

• Small targets harder and slower to hit with a
  mouse than big targets
• long mouse movements slower than short ones
• icons pack differently than text
• more keystrokes -gt slower
• switching mouse lt-gtkeyboard slower

10
Memory Considerations

• Recognize v. recall
• hard to remember from step to step
• have help available where needed
• info used together should be presented together
• interface should present key info (like mode)

11
Problem-Solving Concerns

• Interface should help user select relevant
  operations
• label ops to match user tasks
• feedback on results
• undo
• gray out irrelevant choices

12
Attention Concerns

• To get users attention
• big change in display
• near where user is looking
• auditory signals harder to ignore

13
Be conventional

• Users will be happier with familiar techniques

14
Support diversity

• Different users may prefer different interaction
  styles
• physical limitations may prevent use of certain
  features
• mouse v. keyboard for blind users, or problems w/
  motor control
• multi-key combination

15
The Clustering Principle

• Organize the screen into visually separate blocks
  of similar controls, preferably with a title for
  each block of controls
• similar commands on same menu
• buttons for a given function grouped together and
  visually delineated (box, white space, color)

16
Why cluster?

• Helps users search for the command they need
• Helps user acquire conceptual organization of the
  program

17
Visibility Reflects Usefulness

• Make frequently used controls obvious, visible,
  and easy to access
• Hide or shrink controls used less often

18
Why VRU?

• Users can quickly search small set of controls
• more extended search okay for rare functions

19
Intelligent Consistency Principle

• Use similar screens for similar functions
• once users learn where controls are on one
  screen, they can apply this knowledge to other
  screens
• Screens shouldnt look alike if they do
  drastically different things

20
Color as Supplement

• Dont rely on color to carry information
• Use color sparingly to emphasize info provided
  through other means

21
Color whys

• Easier to misuse color than to use it well
• mean of color varies w/ culture
• (red danger, death, life)
• color-blindness
• Design in blackwhite -- add color judiciously
  later

22
Reduced Clutter Principle

• Dont put too much on the screen
• See earlier principles
• one or two type styles
• small number of colors