Vocabulary of Design

1
(No Transcript)
2
(No Transcript)
3
(No Transcript)
4
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

5
Example of bad and good design

• Elevator controls and labels on the bottom row
  all look the same, so it is easy to push a label
  by mistake instead of a control button
• People do not make same mistake for the labels
  and buttons on the top row. Why not?

From www.baddesigns.com
6
Why is this vending machine so bad?

• Need to push button first to activate reader
• Normally insert bill first before making
  selection
• Contravenes well known convention

From www.baddesigns.com
7
Goals of interaction design

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

8
Evolution of Human Computer interfaces

• 50s - Interface at the hardware level for
  engineers - switch panels
• 60-70s - interface at the programming level -
  COBOL, FORTRAN
• 70-90s - Interface at the terminal level -
  command languages
• 80s - Interface at the interaction dialogue level
  - GUIs, multimedia
• 90s - Interface at the work setting - networked
  systems, groupware
• 00s - Interface becomes pervasive
• RF tags, Bluetooth technology, mobile devices,
  consumer electronics, interactive screens,
  embedded technology

9
Software design

• Software is more complex than many mechanical
  devices.
• Shift to discretionary users
• consumers have higher expectations
• Conflict of interest
• carpenters do not design houses

10
Software Design

• What the software program will do
• What it will look like
• How it will communicate with the user
• User interface design includes all

11
Evolution of the Software Development Process

• 1. Originally, programmers did it all
• Code/Test -gt Ship
• 2. Managers brought order
• Initiate -gt Code/Test -gt Ship

12
Evolution of the Software Development Process

• 3. Testing and design became separate steps
• Today, common practice includes simultaneous
  coding and design followed by bug and user
  testing and then revision

13
Evolution of the Software Development Process

• 4. Design must precede the programming effort
• A goal-directed approach to software development
  means that all decisions proceed from a formal
  definition of the user and his or her goals.

14
Recap

• HCI has moved beyond designing interfaces for
  desktop machines
• Concerned with extending and supporting all
  manner of human activities
• Designing for user experiences, including
• Making work effective, efficient and safer
• Improving and enhancing learning and training
• Providing enjoyable and exciting entertainment
• Enhancing communication and understanding
• Supporting new forms of creativity and expression

15
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?

16
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?

17
An example

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

18
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

19
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

20
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)

21
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

22
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

23
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

24
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
25
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

26
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)
27
The Star interface
28
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

29
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

30
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

31
Don Norman

• Design of Everyday Things.
• Buy at amazon

32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
RepresentedModel
User MentalModel
ImpementationModel
40
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.

41
(No Transcript)
42
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

43
(No Transcript)
44
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

45
Simple design
Hot Water
Cold Water
valve
valve
Bath Tub
46
(No Transcript)
47
(No Transcript)
48
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)
49
The problem another control Both controls have
to be on!
50
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).