User interface design

High-level goal: Usability

A good user interface enables users to get their job done efficiently, easily, and enjoyably. User interface design focuses on users and their experience of using the system. on

We have been focusing on the needs of programmers, but for user interface design, we worry about users and how they interact with the system rather than:

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 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. Talking to users helps!
Infrequent/novice users : gentle learning curve, discoverability
- Intermittent but 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
  - Usable ≠ "User friendly"
  - 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