Vocabulary of Design

1
Vocabulary of Design

• Visibility -
• how easily a user can see what can be done and
  how to do it
• Mappings -
• how a control and object are related
• suffers when more functions than controls
• Feedback
• shows what has been done
• suffers when delayed or not meaningful
• Cues and affordances
• learned expectations about visual forms

2
Visibility

• This is a control panel for an elevator.
• How does it work?
• Push a button for the floor you want?
• Nothing happens. Push any other button? Still
  nothing. What do you need to do?
• It is not visible as to what to do!

From www.baddesigns.com
3
Visibility

• you need to insert your room card in the slot
  by the buttons to get the elevator to work!
• How would you make this action more visible?
• make the card reader more obvious
• provide an auditory message, that says what to
  do (which language?)
• provide a big label next to the card reader
  that flashes when someone enters
• make relevant parts visible
• make what has to be done obvious

4
Feedback

• Sending information back to the user about what
  has been done
• Includes sound, highlighting, animation and
  combinations of these
• e.g. when screen button clicked on provides sound
  or red highlight feedback

ccclichhk
5
Constraints

• Restricting the possible actions that can be
  performed
• Helps prevent user from selecting incorrect
  options
• Three main types (Norman, 1999)
• physical
• cultural
• logical

6
Physical constraints

• Refer to the way physical objects restrict the
  movement of things
• E.g. only one way you can insert a key into a
  lock
• How many ways can you insert a CD or DVD disk
  into a computer?
• How physically constraining is this action?
• How does it differ from the insertion of a floppy
  disk into a computer?

7
Logical constraints

• Exploits peoples everyday common sense reasoning
  about the way the world works
• An example is they logical relationship between
  physical layout of a device and the way it works
  as the next slide illustrates

8
Logical or ambiguous design?

• Where do you plug the mouse?
• Where do you plug the keyboard?
• top or bottom connector?
• Do the color coded icons help?

From www.baddesigns.com
9
How to design them more logically

• (i) A provides direct adjacent mapping between
  icon and connector
• (ii) B provides color coding to associate the
  connectors with the labels

From www.baddesigns.com
10
Cultural constraints

• Learned arbitrary conventions like red
  triangles for warning
• Can be universal or culturally specific

11
Which are universal and which are
culturally-specific?
12
Mapping

• Relationship between controls and their movements
  and the results in the world
• Why is this a poor mapping of control buttons?

13
Mapping

• Why is this a better mapping?
• The control buttons are mapped better onto the
  sequence of actions of fast rewind, rewind, play
  and fast forward

14
Activity on mappings

• Which controls go with which rings (burners)?

A
B
C
D
15
Why is this a better design?
16
Consistency

• Design interfaces to have similar operations and
  use similar elements for similar tasks
• For example
• always use ctrl key plus first initial of the
  command for an operation ctrlC, ctrlS, ctrlO
• Main benefit is consistent interfaces are easier
  to learn and use

17
When consistency breaks down

• What happens if there is more than one command
  starting with the same letter?
• e.g. save, spelling, select, style
• Have to find other initials or combinations of
  keys, thereby breaking the consistency rule
• E.g. ctrlS, ctrlSp, ctrlshiftL
• Increases learning burden on user, making them
  more prone to errors

18
Internal and external consistency

• Internal consistency refers to designing
  operations to behave the same within an
  application
• Difficult to achieve with complex interfaces
• External consistency refers to designing
  operations, interfaces, etc., to be the same
  across applications and devices
• Very rarely the case, based on different
  designers preference

19
Same or different?
A A
A A
A A
A a
A B
Even simple decisions require thought and depend
on context
20
Keypad numbers layout

• A case of external inconsistency

(a) phones, remote controls
(b) calculators, computer keypads
8
9
1
2
7
3
4
5
6
4
5
6
8
9
1
2
7
3
0
0
21
Affordances to give a clue

• Refers to an attribute of an object that allows
  people to know how to use it
• e.g. a mouse button invites pushing, a door
  handle affords pulling
• Norman (1988) used the term to discuss the design
  of everyday objects
• Since has been much popularised in interaction
  design to discuss how to design interface objects
• e.g. scrollbars to afford moving up and down,
  icons to afford clicking on

22
Affordances
When you first see something you have never seen
before, how do you know what to do? The answer, I
decided, was that the required information was in
the world the appearance of the device could
provide the critical clues required for its
proper operation.
Affordance, Conventions and Design By Donald
Norman http//www.jnd.org/dn.mss/affordances-inter
actions.html
23
What does affordance have to offer interaction
design?

• Interfaces are virtual and do not have
  affordances like physical objects
• Norman argues it does not make sense to talk
  about interfaces in terms of real affordances
• Instead interfaces are better conceptualised as
  perceived affordances
• Learned conventions of arbitrary mappings between
  action and effect at the interface
• Some mappings are better than others

24
Physical affordances

• How do the following physical objects afford? Are
  they obvious?

25
Virtual affordances

• How do the following screen objects afford?
• What if you were a novice user?
• Would you know what to do with them?

26
Vocabulary of Design

• Visibility -
• how easily a user can see what can be done and
  how to do it
• Mappings -
• how a control and object are related
• suffers when more functions than controls
• Feedback
• shows what has been done
• suffers when delayed or not meaningful
• Cues and affordances
• learned expectations about visual forms

27
Goals of interaction design

• Develop usable products
• Usability means easy to learn, effective to use
  and provide an positive user experience
• Involve users in the design process

28
Understanding the problem space

• What do you want to create?
• What are your assumptions?
• What are your claims?
• Will it achieve what you hope it will? If so,
  how?

29
A framework for analysing the problem space

• Are there problems with an existing product or
  user experience?
• Why do you think there are problems?
• How do you think your proposed design ideas might
  overcome these?
• When designing for a new user experience how will
  the proposed design extend or change current ways
  of doing things?

30
Understanding the purpose of vision

• When the answer is affirmative, any team member
  can describe what the user's experience will be
  like in five years. They'll tell us a story, like
  this real one from a century-old insurance
  company
• "An insured home and car owner, having just had a
  tree fall on their garage, will log into the
  site, explain the damage, upload pictures, and
  get initial claim approval to start temporary
  repairs and get a rental carall within a few
  minutes. Within the next 24 hours, inspection
  appointments and a detailed damage assessment are
  scheduled and reviewed, and the repairs are
  underway within 48 hours. All the payments are
  handled electronically from the insurance
  company, with a single NET-60 bill sent to the
  policy holder for the deductibles.
• http//www.uie.com/articles/the3qs/

31
An example

• What do you think were the main assumptions made
  by developers of online photo sharing and
  management applications, like Flickr?

32
Assumptions and claims

• Assumptions
• Able to capitalize on the hugely successful
  phenomenon of blogging
• Just as people like to blog so will they want to
  share with the rest of the world their photo
  collections and get comments back
• People like to share their photos with the rest
  of the world
• A claim
• From Flickrs website (2005) is almost
  certainly the best online photo management and
  sharing application in the world

33
From problem space to design space

• Having a good understanding of the problem space
  can help inform the design space
• e.g., what kind of interface, behavior,
  functionality to provide
• But before deciding upon these it is important to
  develop a conceptual model

34
Conceptual model

• Need to first think about how the system will
  appear to users (i.e. how they will understand
  it)
• A conceptual model is
• a high-level description of how a system is
  organized and operates. (Johnson and Henderson,
  2002, p. 26)

35
What is and why need a conceptual model?

• Not a description of the user interface but a
  structure outlining the concepts and the
  relationships between them
• Why not start with the nuts and bolts of design?
• Architects and interior designers would not think
  about which color curtains to have before
  deciding where the windows will be placed in a
  new building
• Enables designers to straighten out their
  thinking before they start laying out their
  widgets (p. 28)
• Provides a working strategy and a framework of
  general concepts and their interrelations

36
Helps the design team

• Orient themselves towards asking questions about
  how the conceptual model will be understood by
  users
• Not to become narrowly focused early on
• Establish a set of common terms they all
  understand and agree upon
• Reduce the chance of misunderstandings and
  confusion arising later on

37
Main components

• Major metaphors and analogies that are used to
  convey how to understand what a product is for
  and how to use it for an activity.
• Concepts that users are exposed to through the
  product
• The relationships between the concepts
• e.g., one object contains another
• The mappings between the concepts and the user
  experience the product is designed to support

38
A classic conceptual model the spreadsheet

• Analogous to ledger sheet
• Interactive and computational
• Easy to understand
• Greatly extending what accountants and others
  could do

www.bricklin.com/history/refcards.htm
39
Why was it so good?

• It was simple, clear, and obvious to the users
  how to use the application and what it could do
• it is just a tool to allow others to work out
  their ideas and reduce the tedium of repeating
  the same calculations.
• capitalized on users familiarity with ledger
  sheets
• Got the computer to perform a range of different
  calculations and recalculations in response to
  user input

40
Another classic

• 8010 Star office system targeted at workers not
  interested in computing per se
• Spent several person-years at beginning working
  out the conceptual model
• Simplified the electronic world, making it seem
  more familiar, less alien, and easier to learn

Johnson et al (1989)
41
The Star interface
42
Interface metaphors

• Designed to be similar to a physical entity but
  also has own properties
• e.g. desktop metaphor, search engine
• Exploit users familiar knowledge, helping them
  to understand the unfamiliar
• Conjures up the essence of the unfamiliar
  activity, enabling users to leverage of this to
  understand more aspects of the unfamiliar
  functionality
• People find it easier to learn and talk about
  what they are doing at the computer interface in
  terms familiar to them

43
Benefits of interface metaphors

• Makes learning new systems easier
• Helps users understand the underlying conceptual
  model
• Can be innovative and enable the realm of
  computers and their applications to be made more
  accessible to a greater diversity of users

44
Problems with interface metaphors (Nelson, 1990)

• Break conventional and cultural rules
• e.g., recycle bin placed on desktop
• Can constrain designers in the way they
  conceptualize a problem space
• Conflict with design principles
• Forces users to only understand the system in
  terms of the metaphor
• Designers can inadvertently use bad existing
  designs and transfer the bad parts over
• Limits designers imagination in coming up with
  new conceptual models

45
Don Norman

• Design of Everyday Things.
• Buy at amazon

46
(No Transcript)
47
(No Transcript)
48
(No Transcript)
49
(No Transcript)
50
(No Transcript)
51
(No Transcript)
52
(No Transcript)
53
RepresentedModel
User MentalModel
ImpementationModel
54
Models are about expectations

• Mental Models
• The expectation a user has about a computers
  behavior.
• Inside the head can be trained
• User Models
• The expectation a computer has of a user
• Inside the computer can be changed directly.

55
(No Transcript)
56
Vocabulary of Design

• The burden of interpretation
• how much thinking is required on the users
  part?
• Input gaps
• how easy it is to figure out how to do it
• Output gaps
• how easy it is to figure out system state

57
(No Transcript)
58
Bathtub control

• Users goals
• Warm bath
• Right amount of water
• Psychological variables
• Temperature water depth
• Physical variables
• Cold water flow rate
• Warm water flow rate

59
Simple design
Hot Water
Cold Water
valve
valve
Bath Tub
60
(No Transcript)
61
(No Transcript)
62
How does this map temperature and speed?
But how do you turn on the shower? Pushing the
control (arrow) is only PART of the solution (see
next slide)
63
The problem another control Both controls have
to be on!
64
Design exercise
Design the perfect bathtub control. 1. Assume
you have unlimited budget 2. Bath control only
no shower. 3. Think about mapping controls to
the users goals (physical variables).