CSE 440: Introduction to HCI

User Interface Design, Prototyping, and Evaluation!

Lecture 04: Design Principles I

Instructor: Amy Zhang, 1/14/2021

 Today’s Topics
• UI Hall of Fame or Shame
• Design Principles: Learnability
• How do people learn a new UI?
• How can we design more learnable UIs?
• Affordances, recognition, consistency, metaphors, mapping, visibility
• How does learning break down?
• Group work time!
UI Hall of Fame and Shame
A tale of two cities…
A tale of two cities…
 Which interface is easier to learn? Why?

What about efficiency?

Safety?
How do people learn a new UI?
reading a manual? X

consult the help page /

anthropomorphized
paperclip?
taking a class? X X
Learn by Doing

• A user has a goal they want to achieve

• “Get rid of the redeye from my
photo”
• The user explores the interface for
features that satisfy the goal
 Learn by Doing
• Only when they are stuck, do they resort to seeking help or
going back to read instructions
Learn by Watching
• Since people mostly learn by doing when it comes to UIs, we should
know the user’s goals when we design.
• The UI should itself communicate how it works and how to use it.
This doesn’t mean lots of explanatory text (because people will
oftentimes ignore that).
How can we design more
learnable UIs?
Design in Affordances
• Affordances refer to both the perceived and actual properties of
a thing—primarily, the visual cues and properties that clue us in to
how the thing could be operated.
Technology affordances are
often based in affordances
from the physical world
Some affordances, like the underlined hyperlink, have become an affordance all
on its own, without reference to any physical metaphor.
 Feedback

• actions should have immediate visible effects

• low-level feedback (button press, highlight on hover, cursor change)
• high-level feedback (new page loads)
 Activity
• Use Javascript to obscure
all the text on a webpage.
• What do the affordances
tell you nonverbally?
• Are any of the affordances
lying to you?
• (yellkey is down today! Link
will be pasted in chat)

[Link]
Using Recognition over Recall
 Recognition vs. Recall
• Recognition: remembering with the help of a visual cue
• uses knowledge in the world (external information)
• Recall: remembering with no help
• uses knowledge in the head (memorization)
• Recognition is much easier!!
Use Multiple Interaction Styles
Consistency
 Consistency
• Similar things should look and act similarly
• Different things should look different
• Types of Consistency
• Internal consistency - within your application
• e.g., same terminology and layout throughout
• External consistency - with other applications
• e.g., common widget appearance
• e.g., design patterns common across applications
Metaphors
Metaphors
A way to bring the outside world into your
interface so the user has less to learn.

Desktop metaphor:
Not a perfect attempt to simulate a real
desktop
But it leverages knowledge of files, folders,
trash
Explains why some windows can be
overlapping each other
 Should you use metaphors?

Advantages
• Highly learnable when appropriate
• Hooks into a user’s existing mental model easily
Use it if you have a good
one, but don’t stretch to
Dangers
force one if you don’t!
• May be constraining
• Metaphors always break down at some point
• Metaphors can be not useful
• Metaphors can die
Not a useful metaphor
 Dead Metaphors
Lost the original imagery of their meaning
Mapping
 Mapping

The physical arrangement of controls should match

arrangement of function
Visibility and Exposing State
Visible Selection State

• When the user selects an object

to operate on, highlight the
object somehow. Don’t just leave
the selection invisible and
implicit.
• Visible selection provides
important feedback that the
selection operation was
successful; it also shows the
current state of the selection if
the user has forgotten what was
previously selected.
Visible Navigation State
Self-Disclosure
• A technique for making a
command language more visible,
helping the user learn the
available commands and syntax.
• Self-disclosure is useful for
interfaces that have both a
traditional GUI (with menus and
forms and possibly direct
manipulation) as well as a
command language (for
scripting).
 Visible Modes
• Modes = state changer: Same action, different results (ex: Caps Lock key,
Shift key)
• Need clear visibility of the currently active mode
How does learning break down?
 Models
• There are 3 models in UI Design:
• System model (implementation model) - how the system actually works
• Interface model (manifest model) - the model the interface presents to the
user
• User mental model (conceptual model) - how the user thinks the system
works
• Mismatch between system and interface model should always happen to some
degree
• Same for mismatch between user and system.
User’s Mental Model could be Wrong
 Norman’s Execution/Evaluation Cycle
The lamp did indeed
increase the light in the
room [goal satisfied] The knob rotated. The
lamp is emitting light.
Evaluate The lamp seems to work
Goals
Interpret [hear “click”
State sound, see light
from lamp]
Goals
Observe
Increase light in the room
State

Form Intention System

[lamp light turns on]
Change
To turn on the lamp Develop
Action Plan

Execute
Walk to the lamp, reach for the
knob, twist the knob Actions

[walk, reach, twist]

 Norman’s Execution/Evaluation Cycle
Gulf of Evaluation
The lamp did indeed
increase the light in the
room [goal satisfied] The knob rotated. The
lamp is emitting light.
Evaluate The lamp seems to work
Goals
Interpret [hear “click”
State sound, see light
from lamp]
Goals
Observe
Increase light in the room
State

Form Intention System

[lamp light turns on]
Change
To turn on the lamp Develop
Action Plan

Execute
Walk to the lamp, reach for the
Actions
Gulf of Execution
knob, twist the knob

[walk, reach, twist]

 Activity
• Design a new thermostat that communicates its true model (switch) to a new
user
• Consider:
• Would it work to print an explanation on the thermostat? If so, what
exactly would it say?
• Think about a sink faucet: why is it easy to tell whether it’s a valve or a
switch?
• Is the problem with the old thermostat a gulf of execution or a gulf of
evaluation?
• Sketch a design by yourself first and submit: [Link]
nNKFQRdvxx4XuFp78 (will be pasted in chat)
• We’ll get into our teams, and you’ll share your sketch
• Then, you’ll transition to work on 1b for the reminder of the class.
• Have a good presentation and feedback session on Friday!
• 2a is out - there will be group presentations in class next Tuesday.