User interface design

High-level goals

A good user interface enables users to get their job done efficiently, easily, and enjoyably.

Not about:

• Making programmer's job easy by exposing underlying functionality as directly as possible.
• Providing the largest feature set possible.
• Giving users what they say they want (your users are not good UI designers). (But listen carefully to your users anyway!)
  “If I had asked people what they wanted, they would have said faster horses.” — Henry Ford.

A few principles will help guide your designs.

Know your users. Design to them.

• frequent or occasional user?
• novice or knowledgeable?
• training expected?
• You are not like the user: user testing is required.
• Infrequent/novice users : gentle learning curve, discoverability
  • Discoverability: can learn features, interaction
  • Protection from dangerous actions, no loaded guns (video)
  • Clarity: Simple, clear displays
  • Consistency with other applications
  • Use metaphors to communicate (e.g., icons)
  • No (loaded guns)
  • Intermittent, knowledgeable users : Focus on discoverable features, reduced memory burden
    • Internally consistent appearance and actions
    • Clear visual structure
    • Protection from dangerous action for safe exploration
  • Frequent/power users : Optimize for efficient interaction
    • Powerful actions, short interaction sequences
    • Rapid response times
    • Rich controls, shortcuts for common actions
    • Exploit muscle memory
    • Information-rich displays
    • Customization and macros

  UI as dialogue

• App needs to be good conversation partner
  • Ratify actions quickly
  • Be responsive (e.g., highlighting)
  • Show progress on longer actions
• Work out the conversations
  • Use a set of use cases to figure out what users will have to do.
  • Eliminate unnecessary user actions.
  • Aim for short interactions with clear progress: intermediate goal satisfaction (cf. DisneyWorld ride lines)
  • Use testing to find your blind spots (as developer).
  • May need to write testing scripts for human testers. Key (as usual): coverage.
• Choosing the right interaction paradigm: direct manipulation vs. I/O vs. ?
  • Goal: app feels like extension of user
  • Example: driving a car vs. programming/remote-controlling a car, or Word vs. TeX.
  • UI abstracts underlying application state (the model)
  • Abstraction does not need to match the implementation
  • Good implementation strategy: Model != View != Controller
  • Good abstraction: Model = View = Controller
  • Less direct styles:
    • Menu selection/hierarchical navigation
    • Form fill-in + submit
    • Command languages
• GUI helps by restricting the vocabulary
  • Channels `utterances´ (user actions) into meaningful directions
  • Reduces memorization
• Use modes well
  • Modes: states of UI that restrict interactions.
  • Modes help with restricted context-sensitive vocabulary
  • Avoid overusing modes and trapping users in modes.
• Interaction time scales
• <1/60s: biologically imperceptible: faster than neurons
• <1/30: fast enough for continuous-feedback tasks (e.g., mouse tracking)
• <1/10s: imperceptible delay for discrete actions, e.g. button clicks.
• <1/2s: fast but noticeable (ok for command-response interaction)
• 1/2s-5s: increasingly annoying but user stays focused
• 5s-10s: User starts to lose attention.
• 10s-1 min$: User becomes distracted and productivity declines. App needs to support parallel activities.
• >1 min: Significant loss of productivity. User leaves for coffee.

Learning and memory

• Goal: interface that users can learn to use sufficiently quickly and can remember how to use.
  • Obvious controls
    • Easy to find and identify
    • Don't set up user for a fall: disable invalid/dangerous actions
  • Avoid overload
    • Human can only hold 7 things in their head at once
    • Avoid long menus, lots of buttons
    • Design visuals carefully for rapid comprehension
• Context-sensitive help
  • Task-focused rather than feature-focused (unlike most modern apps!)
• Exploit spatial memory
  • Tap into humans ability remember to things spatially: e.g., the memory palace.
  • Each window or dialogue is a place you can go—make it a place user wants to be in.
  • Avoid unnecessary places to learn about and navigate between.
  • Make navigation simple, clear, easy.
  • Big-picture overviews help users stay oriented
    • bird's eye views
    • menus with highlights
• Exploit motor memory (esp. for power users)
  • Frequent users remember UI in their muscles.
  • Make actions to get an effect consistent so motor memory can carry users through without thinking.

Visual design

• Avoid visual clutter
  • Use space shading, color rather than lines to organize information.
  • Use low-contrast separators
  • Maximize “information/ink ratio” (Tufte)
• Aim for visual consistency
  • Large apps need a written style guide to keep look and feel consistent as app evolves.
  • E.g., buttons that change state vs. buttons that navigate vs. buttons that expose hidden information: user should be able to distinguish.
• Employ visual features as an additional communication channel.
  • Shape (up to 15)
  • Color (up to 24)
  • Size, length, thickness: up to 6.
  • Orientation: up to 24
  • Texture
  • Differing perceptual capabilities of some users (esp. for color) ⇒ cannot rely solely on visual features to communicate, but they can complement the information that is there in another form.

Useful reading

• Envisioning Information, Edward Tufte.
• Principles of Computer Graphics, by Foley and Van Dam. Ch 8.2-8.3, 9
• About Face 2.0, Cooper and Reimann.