Lecture-6

Interaction Design
Basics– Part I
HCI Focus of Design

 Some of HCI is focused on understanding: the academic

study of the way people interact with technology.

 However, a large part of HCI is about doing things and

making things that is called a design.
Interaction Design Basics
 design
 what it is, interventions, goals, constraints
 the design process
 what happens when
 users
 who they are, what they are like …
 scenarios
 rich stories of design
 navigation
 finding your way around a system
 iteration and prototypes
 never get it right first time!
Interactions And Interventions
design interactions not just interfaces
not just the immediate interaction
e.g. stapler in office – technology changes interaction style
 manual: write, print, staple, write, print, staple, …
 electric: write, print, write, print, …, staple

designing interventions not just artefacts

not just the system, but also …
 documentation, manuals, tutorials
 what we say and do as well as what we make
What is design?
Achieving goals within constraints

 goals - purpose
 who is it for, why do they want it
 constraints
 materials, platforms
 trade-offs
Goal
 What is the purpose of the design we are intending to
produce?
 Who is it for?
 Why do they want it?

 For example, if we are designing a wireless personal movie player, we may

think about young affluent users wanting to watch the latest movies whilst on
the move and download free copies, and perhaps wanting to share the
experience with a few friends.
Constraints
 What materials must we use?
 What standards must we adopt?
 How much can it cost?
 How much time do we have to
develop it?
 Are there health and safety issues?
 In the case of the personal movie
player: does it have to withstand
rain?
 Must we use existing video
standards to download movies?
 Do we need to build in copyright
protection?
Trade-off
 Choosing which goals or constraints can be relaxed so that others
can be met.
 For example, we might find that an eye-mounted video display, a bit like
those used in virtual reality, would give the most stable image whilst
walking along.

 However, this would not allow you to show friends, and might be
dangerous if you were watching an attention-grabbing part of the
movie as you cross the road.
Golden Rule Of Design
Part of the understanding we need is about the circumstances and
context of the particular design problem. However, there are also more
generic concepts to understand. The designs we produce may be
different, but often the raw materials are the same. This leads us to the
golden rule of design:

Understand your materials

For Human–Computer Interaction
Understand your materials

 understand computers
 limitations, capacities, tools, platforms
 understand people
 psychological,
 Social and organizational aspects
 and their interaction …
To err is human
 accident reports ..
 aircrash, industrial accident, hospital mistake
 enquiry … blames … ‘human error’
 but …
 concrete lintel breaks because too much weight
 blame ‘lintel error’ ?
… no – design error
we know how concrete behaves under stress
 human ‘error’ is normal
 we know how users behave under stress
 so design for it!
 treat the user important as well as physical materials!
Central message …

The User
The core of interaction design: put the user first, keep the user in the center and
remember the user at the end.
The process of design
 Often HCI professionals complain that they are called in
too late.
 A system has been designed and built, and only when it proves
unusable do, they think to ask how to do it right!
 In other companies' usability is seen as equivalent to testing
called checking
The process of design

scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Steps …
 requirements
 what is there and what is wanted …
 analysis
 ordering and understanding
 design
 what to do and how to decide
 iteration and prototyping
 getting it right … and finding what is really needed!
 implementation and deployment
 making it and getting it out there
Requirements
 What is wanted?
 The first stage is establishing what exactly is needed. As a
precursor to this it is usually necessary to find out what is
currently happening.
 For example, how do people currently watch movies? What sort
of personal appliances do they currently use?
Requirements
 There are several techniques used for this in HCI:
 interviewing people,
 videotaping them,
 looking at the documents and objects that they work with,
 observing them directly.
Analysis
 The results of observation and interview need to be
ordered in some way to bring out key issues and
communicate with later stages of design.
Design
 We need to record our design choices in some way and
there are various notations and methods to do this,
including those used to record the existing situation.
 Its about designing the concept of the system called
conceptual design.
Iteration and prototyping
 Humans are complex and we cannot expect to get
designs right first time.
 We therefore need to evaluate a design to see how well it
is working and where there can be improvements.
Implementation and deployment
 We need to create and deploy the design.
 This will involve writing code, perhaps making hardware,
writing documentation and manuals
… but how can I do it all ! !
 limited time  design trade-off

 usability?
 findingproblems and fixing them?
 deciding what to fix?

 a perfect system is badly designed

 too good  too much effort in design
 User focus
• know your user
• personae
• cultural probes
Know Your User
 who are they?
 probably not like you!
 talk to them
 watch them
 use your imagination
Persona
 description of an ‘example’ user
 not necessarily a real person
 use as surrogate user
 what would “Betty” think
 details matter
 makes her ‘real’
Example Persona
Betty is 37 years old, She has been Warehouse Manager for five years and worked for
Simpkins Brothers Engineering for twelve years. She didn’t go to university, but has studied in
her evenings for a business diploma. She has two children aged 15 and 7 and does not like to
work late. She did part of an introductory in-house computer course some years ago, but it was
interrupted when she was promoted and could no longer afford to take the time. Her vision is
perfect, but her right-hand movement is slightly restricted following an industrial accident 3
years ago. She is enthusiastic about her work and is happy to delegate responsibility and take
suggestions from her staff. However, she does feel threatened by the introduction of yet
another new computer system (the third in her time at SBE).
Talk to users
 It is hard to get yourself inside someone else’s head, so
the best thing is usually to ask them.
 This can take many forms: structured interviews about
their job or life, open-ended discussions, or bringing the
potential users fully into the design process.
Talk to users
 People may also be able to tell you about how things
really happen, not just how the organization says they
should happen.
 To encourage users to tell you this, you will need to win
their trust, since often the actual practices run counter to
corporate policy.
Cultural Probes
 direct observation
 sometimes hard
 in the home
 psychiatric patients, …

 probe packs
 items to prompt responses
 e.g. glass to listen at wall, camera, postcard
 given to people to open in their own environment
they record what is meaningful to them
 used to …
 inform interviews, prompt ideas, enculture designers
Use your imagination
 Even if you would like to involve many users throughout
your design exercise this will not always be possible.
 It may be too costly, it may be hard to get time with them
(e.g. hospital consultant), it may be that there are just too
many (e.g. the web).However, even if you cannot involve
actual users you can at least try to imagine their
experiences.
 Scenarios
 stories
for design
 use and reuse
Scenarios
 stories for design
 communicate with others
 validate other models
 understand dynamics

 linearity
 time is linear - our lives are linear
 but don’t show alternatives
Scenarios …
 what will users want to do?
 step-by-step walkthrough
 what can they see (sketches, screen shots)
 what do they do (keyboard, mouse etc.)
 what are they thinking?

 use and reuse throughout design

Scenario – movie player ..
Ranvir would like to see the new film “Gangubai” and wants to invite Deepika, but he knows
she doesn’t like “arty” films. He decides to take a look at it to see if she would like it and so
connects to one of the movie sharing networks.
He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He
knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to
go to the cinema to watch it.
After it downloads to his machine he takes out his new personal movie player. He presses
the ‘menu’ button and on the small LCD screen he scrolls using the arrow keys to ‘bluetooth
connect’ and presses the select button.
On his computer the movie download program now has an icon showing that it has
recognized a compatible device and he drags the icon of the film over the icon for the player.

On the player the LCD screen says “downloading now”, a percent done indicator and small
whirling icon. … … …
Scenario – movie player
During lunchtime Ranvir takes out his movie player, plugs in his earphones and starts to
watch. He uses the arrow keys to skip between portions of the film and decides that, yes,
Deepika would like it.
Then he feels a tap on his shoulder. He turns round. It is Deepika. He had been so absorbed
he hadn’t noticed her. ‘What are you watching’, she says.
‘Here, listen’, he says and flicks a small switch. The built-in directional speaker is loud
enough for both Ranvir and Deepika to hear, but not loud enough to disturb other people in
the canteen.
Deepika recognizes the film from trailers, ‘surprised this is out yet’ she says. ‘Well
actually . . .’, Ranvir confesses, ‘you’d better come with me to see it’. ‘I’ll think about it’, she
replies.
Also play act …
 mock up device
 pretend you are doing it
 internet-connected Swiss army knife …

but where is that thumb?

use toothpick as stylus

Use scenarios to explore the depths
 explore interaction
 what happens when

 explore cognition
 what are the users thinking

 explore architecture
 what is happening inside
Use scenarios to ..
 communicate with others
 designers, clients, users
 validate other models
 ‘play’ it against other models
 express dynamics
 screenshots – appearance
 scenario – behaviour
Mapping of Scenarios to Design
Linearity
Scenarios – one linear path through system

Pros:
 life and time are linear
 easy to understand (stories and narrative are natural)
 concrete (errors less likely)
Cons:
 no choice, no branches, no special conditions
 miss the unintended

 So:
 use several scenarios
 use several methods
 Navigation design

local structure – single screen

global structure – whole site the systems

info and help management messages

add user remove user

start

main remove
confirm
screen user

add user
levels
 widget choice
 menus, buttons etc.
 screen design
 application navigation design
 environment
 other apps, O/S
The web …

 widget choice • elements and tags

– <a href=“...”>

 • page design
screen design
 navigation design
• site structure
• the web, browser,
 environment
external links
Physical devices

 widget choice • controls

– buttons, knobs, dials

 • physical layout
screen design
 navigation design
• modes of device
• the real world
 environment
Think about structure
 within a screen
 later ...
 local
 looking from this screen out
 global
 structure of site, movement between screens
 wider still
 relationship with other applications
Local structure
Much of interaction involves goal-seeking behavior.
Users have some idea of what they are after and a partial
model of the system. In an ideal world if users had perfect
knowledge of what they wanted and how the system
worked they could simply take the shortest path to what
they want, pressing all the right buttons and links.
Goal seeking

goal
start
Goal seeking

goal
start

progress with local knowledge only ...

Goal seeking

goal
start

… but can get to the goal

Goal seeking

goal
start

… try to avoid these bits!

Four golden rules for goal
seeking/navigation
 knowing where you are
 knowing what you can do
 knowing where you are going
 or what will happen
 knowing where you’ve been
 or what you’ve done
Where you are – breadcrumbs
shows path through web site hierarchy

top level category sub-category

web site this page

live links
to higher
levels
Beware the big button trap

things other things

the thing from

more things
outer space

 where do they go?

 lots of room for extra text!
Beware the big button trap
Public information systems often have touch screens and so have
large buttons. Watch someone using one of these and see how
often they go to the wrong screen and have to use ‘back’ or
‘home’ to try again. If you look more closely you will find that
each button has only one or two words on it giving the title of
the next screen, and possibly some sort of icon. Quite rightly, the
button label will be in a large font as users may have poor
eyesight.
Beware the big button trap

It is hard to choose appropriate labels that mean the same for everyone,
especially when the breadth of the screen hierarchy is fixed by the maximum
number of buttons. So it is no wonder that people get confused. However,
there is usually plenty of room for additional explanation in a smaller font,
possibly just the next level of button labels, or a sentence of explanation. It
may not look as pretty, but it may mean that people actually find the
information they are looking for.
Hierarchical diagrams

the system

info and help management messages

add user remove user

Hierarchical diagrams ctd.
 parts of application
 screens or groups of screens

 typically functional separation

the systems

info and help management messages

add user remove user

Navigating hierarchies
 deep is difficult! Have top-level broad categories.

 misuse of Miller’s 7 ± 2
 short term memory, not menu size

 optimal?
 many items on each screen
 but structured within screen

see /e3/online/menu-breadth/
Think about dialogue
what does it mean in UI design?

Minister: do you name take this woman …

Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife
Think about dialogue
what does it mean in UI design?

Minister: do you name take this woman …

• marriage service
 general flow, generic – blanks for names
 pattern of interaction between people

• computer dialogue
 pattern of interaction between users and system
 but details differ each time
Network diagrams

main remove
confirm
screen user

add user

 show different paths through system

Network diagrams cntd.
 what leads to what
 what happens when
 including branches

 more task oriented then hierarchy

main remove
confirm
screen user

add user
Network diagrams cntd.
 what leads to what
 what happens when
 including branches

 more task oriented then hierarchy

main remove
confirm
screen user

add user