Design Principles Flashcards
1
Q
Visibility
A
The mind is excellent at noticing and interpreting cues in the world
- We use those cues to reason about how things work, cause and effect
- Much everyday knowledge is in the world, not in the head
- So visibility is one of the most important aspects in design
2
Q
Visibility of System Status
A
- Providing cues in the interface that help the user recognise:
- What actions are possible?
- How do I do it?
- What happened?
- Where did I get to?
- Ideally, without having to think much
3
Q
Visibility - Key Points
A
- Out of sight, out of mind!
- Discoverability: the ease in which users can
- Find out what they are possible actions are
- Navigate the interface and find what they are looking for
- Visibility of system status
- Only by knowing the current system status can you change it
- A lack of information equates to a lack of control
- Lack of visible response leads users to think their action had no effect
- Multiple clicks because system didn’t respond …
4
Q
Affordances
A
Affordances are the possible actions in the relation between a user and an object
- Affordances arise from the relationship of
- Properties of the object
- Capabilities of the user
- In relation, object properties and user capabilities determine how the object could possibly be used
5
Q
Affordances in Design
A
- Affordances are a central concept in design
- The idea is that we can design objects so that
- they “tell us” what we can do with them
- we can perceive how to use them
- The concept has its roots in Gestalt psychology:
- “The meaning … of a thing seems to be
perceived just as immediately as its colour …” - a fruit says ‘Eat me’, water says ‘Drink me’
- “The meaning … of a thing seems to be
6
Q
Affordances of Objects
A
- Objects invite actions
- The mailbox ‘invites’ the mailing of a letter
- Objects tell us what to do with them
- The handle wants to be grasped
- Objects have a demand character
- “When affordances are taken advantage of, the user knows what to do just by looking: no picture, label or instruction needed”
(Don Norman)
7
Q
Physical Affordances
A
- Properties of objects that afford certain actions
- Hard controls in user interfaces
- Buttons afford pressing
- Knobs afford turning
- Sliders afford pushing
8
Q
Perceptual Affordances
A
- Affordances of software include all actions that are possible for the user, through the user interface
- Some of the affordances of user interfaces are like physical affordances
- Interface elements that have perceptual affordances
- Buttons that are rendered to look clickable
- type-in fields that invite typing
- Perceptual affordances convey action possibilities that users can instantly recognise
9
Q
Affordances of Software
A
- Affordances of software can be vast
- Think of all actions possible in (e.g.) Office software
- Many affordances are abstract and have no obvious appearance
- Objects may afford scaling, rotating, moving
- A list may afford searching
- a web shop may afford chat with a shop assistant
- How can a user know about all the affordances and their possible actions?
10
Q
Signifiers
A
- Signifiers are the signalling component of an affordance
- A signifier makes user aware of an affordance
- Signifiers indicate possible actions, and how to perform them
- Signifiers are sensory or cognitive indicators of the presence of an affordance
- Sensory indicators can be perceived without thinking
- Cognitive indicators require more processing
11
Q
Sensory and Cognitive Cues
A
- Sensory cues support recognition “at a glance”
- Icons, sounds, animations
- Affordance immediately perceivable
- Based on learned meaning of the signifier
- Cognitive cues require more processing
- Labels
- Instructions
- Signifiers can also indicate what’s not available
- Greyed-out options
12
Q
User interfaces that are easy to learn
A
- Signifiers and affordances “teach” users what they can do with an application or system
- The goal is to make the user interface self-explaining
- Using signifiers that draw on user’s knowledge
- For example, on-screen buttons used to be rendered in 3D in analogy to physical buttons
- Now we use flat 2D designs as we have learned their affordance
13
Q
Some affordances are hard to convey
A
- For some affordances, it is difficult to provide signifiers through the interface itself
- Personal voice assistant
- How to signify that Alexa affords voice commands by saying “Alexa” followed by the command?
- Amazon relies on tutorials, stickers, and TV commercials to signify this affordance
- Multi-touch (when the iPhone was new)
- Koi Pond app
14
Q
Affordances - Key Points
A
- A central challenge of designing a user interface is to decide what affordances an interface will have and how to signify that they exist
- Affordances and signifiers address the gulf of execution
- What can I do? How can I do it?
- Signifiers are the signalling component of an affordance
- Making users aware of available actions, and indicating how to perform them
- Ideally, a user interface lets a user perceive at a glance what they can do
- But that’s not always possible
15
Q
Constraints
A
- Constraints limit the actions that can be performed by the user
- Constraints are purposely used for guiding the user
- Reducing the number of actions and choices
- Prevent actions that lead to error
- Provide cues for the proper course of action
17
Q
Types of Constraint
A
19
Q
Example: Date Picker
A
- Avoid input that is not valid
- Typing error
- Avoid instruction about format
- e.g., dd/mm/yyyy
- Apply logical constraints
- e.g., only dates in the future for a booking
22
Q
Feedback about Time
A
- Feedback when the system needs longer
- Shorter delay (~1s): show that activity is underway
- Longer delay (»1s): show progress and/or time
