UI design principles

Lecture 22

CS 2112 Fall 2024

 Goals and non-goals
• Goal: Usability
• Ef cient, easy, enjoyable completion of tasks

• Focus on user experience (UX) not

programmer priorities

• Non-goals:
• Exposing functionality with minimal code

• Providing as many features as possible

• Giving users what they think they want

“If I had asked my customers what they wanted,
they would have said a faster horse.” –Henry Ford
fi
 Principle 1:
Know your user
 Design to your user
• Frequent or occasional?
• Novice or knowledgeable?
• Training?
• Don’t design for yourself—
you are not the user
• Understand needs: talk to/watch users

Know your user.

 Novice users
• Gentle learning curve: discoverability
• Standard way for user to nd all functionality

• vs: “long press”

• Protection from dangerous actions

• Clarity: simple displays, consistency with
other applications and real world
• E.g., using icons as metaphors

Know your user.

fi
 Discoverability

Know your user.

 No loaded guns

Know your user.

 Frequent/power users
• Optimize for ef cient interaction.
• Usability ≠ user-friendly
• Powerful actions, short interaction sequences (e.g., hotkeys)
• Rapid response times
• Rich controls, shortcuts for common actions
• Exploit muscle memory
• Information-rich displays
• Customization and macros

Know your user.

fi
 Power-User UI

feature-rich
information-dense
ef cient actions

Know your user.

fi
 Principle 2:
UI is a dialogue
 UI: good conversation partner?

• Goal: good user experience (UX)

• Ratify actions quickly
• Be responsive
(e.g., highlight buttons and other affordances)

• Show progress of longer actions

Know your user. UI is a dialogue.

 Know the conversations
• Identify and storyboard use cases to
gure out what users will have to do
• Eliminate unnecessary user actions
(e.g., needless con rmation dialogs)
• Short interactions with clear progress:
intermediate goal satisfaction
• User testing to nd your blind spots (as
developer)
• Testing scripts help human testers to
achieve coverage
Know your user. UI is a dialogue.
fi
fi
fi
 Storyboarding and prototyping
• Avoiding design lock-in — early feedback
loops avoid polishing a bad design.
• Storyboard 3 designs and discard 2!
collect
requirements

analysis storyboard

design
prototype
implement
 Direct manipulation vs. I/O

Know your user. UI is a dialogue.

 Interaction paradigms
• Direct manipulation: the UI is the
underlying data/behavior model
• User view: Model = View = Controller

• Implementation: Model ≠ View ≠ Controller

• I/O: UI generates output when input

provided (UI ≠ model)
• e.g., menus, submitted forms, command shells

Know your user. UI is a dialogue.

 Interaction time scales
• 1/60s: biologically imperceptible: faster than neurons

• 1/30s: just 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 and productivity declines.

• 10s–1 min: User highly distracted. App must support parallel

activities to keep focus.

• >1 min: Huge loss of productivity. User leaves for coffee, chats
with friends.

Know your user. UI is a dialogue.

 Modes
• Modes: states of UI that
limit the possible
interactions.
• Good: restricted context-
sensitive action “vocabulary”
simpli es user interaction on
current task

• Bad: can be confusing and

can trap users

• Moral: use judiciously

Know your user. UI is a dialogue.
fi
 Modes gone bad: cascading dialogs

Know your user. UI is a dialogue.

 x g: the context-sensitive mouse

Know your user. UI is a dialogue.

fi
 Principle 3:
Aid Memory
“The advantage of a bad memory is that
one enjoys several times the same good things
for the rst time.”
― Friedrich Nietzsche
fi
 Keep models simple

user interface

model

• Good models of data and operations are

easier to learn and to remember
• based on familiar abstractions

• describable as narrow interface with simple spec

 Trash model

class Trash {
/** Move file to trash but remember where it was. */
void discard (File f);

/** Remove file from trash and

* restore it to its previous location. */
void putBack(File f);

/** Permanently delete all files in the trash. */

void emptyTrash();
}

Simple, familiar, narrow

 Rule of 7

• Humans can hold at most 7 things in their

head at once

Avoid long menus, arrays of buttons

Avoid complex modes

Know your user. UI is a dialogue. Aid memory.

 Spatial memory
• Human spatial memory is amazingly good
(e.g., memory palaces).
Good UIs exploit it

• Each window or dialogue or mode is a

“place” for interaction
• make it a nice place to be

• avoid unnecessary places/modes

• make navigation easy, obvious

• Big-picture views strengthen spatial sense

Know your user. UI is a dialogue. Aid memory.
 Spatial organization

• Place things that belong together close by

• related functionality

• used in same work ows

Know your user. UI is a dialogue. Aid memory.

fl
 Muscle memory
• Frequent users don’t need to look – UI is
programmed into their muscles
action needed to activate functionality
should be consistent
• e.g., gray out menu items, don’t remove them

Know your user. UI is a dialogue. Aid memory.

 Context-sensitive help
• Help should be about what user is doing
now.
task-focused rather than feature-focused
(unlike many modern apps!)
modes provide context

Know your user. UI is a dialogue. Aid memory.

 Principle 4:
Visual design matters
 Avoid visual clutter

Tufte. Envisioning Information

Know your user. UI is a dialogue. Aid memory.Visual design matters.

 Avoid visual clutter

• Maximize information/“ink” ratio

• Use low-contrast separators to organize
• space shading, color instead of lines

Know your user. UI is a dialogue. Aid memory.Visual design matters.

 Good use of color and contrast?

Know your user. UI is a dialogue. Aid memory.Visual design matters.

 Use high contrast,
avoid chromatic aberration

Low-contrast text is
not much fun to read.
And it gets harder if the font size is small.

Know your user. UI is a dialogue. Aid memory.Visual design matters.

 Visual consistency
• For novice users, be externally consistent
with existing apps and real world
• For expert users, be internally consistent
• e.g., buttons that navigate vs. buttons that change
state vs. buttons that expose new information

• write style guide

so developers
maintain
consistency.

Know your user. UI is a dialogue. Aid memory.Visual design matters.

 Visual features
• Shape: up to 15
• Color: up to 24
• But: color perception varies!
• 8% M, 0.4% F have altered perception
color should only complement other
sources of information

• Size, length, thickness: up to 6

• Orientation: up to 24
Know your user. UI is a dialogue. Aid memory.Visual design matters.
UI design principles
• Know your user

• UI is a dialogue

• Aid memory

• Visual design matters