Beruflich Dokumente
Kultur Dokumente
interaction design
basics
the chapter covers
• 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
• Screen design and layout
• iteration and prototypes
– never get it right first time!
what is design?
“achieving goals within constraints”
• goals - purpose
– who is it for, why do they want it
• constraints
– What materials must we use?
– What standards must we adapt?
– How much time do e have to develop it?
– How much can it cost?
• trade-offs
• The best designs are where the designer understands the trade-offs
and the factors affecting them.
• choose the most appropriate trade-off
Golden Rule of Design
• To err is human
Bad interfaces are slow or error-prone to use. Bad
interfaces cost money and cost lives.
the user
The process of design
scenarios
stories of interaction
task analysis
what is What is the problem that
needs to be solved?
wanted guidelines
Principles
interviews analysis How to do/decide?
ethnography
precise
what is there specification
vs. design
what is wanted dialogue
notations implement
and deploy
• watch them
– What they do?
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,
Bring the potential users fully into the design process.
Scenarios in design
• step-by-step walkthrough
– what can they see (sketches, screen shots)
– what do they do (keyboard, mouse etc.)
– what are they thinking?
• explore interaction
– what happens when
• explore cognition
– what are the users thinking
• explore architecture
– what is happening inside
navigation in design
start
navigation in design
• within a screen
– later ...
• local
– looking from this screen out
• global
– structure of site, movement between
screens
• wider still
– relationship with other applications
goal
start
goal
start
goal
start
goal
start
live links
to higher
levels
Interaction design basics/navigation design/structure/local
where you are
Downloading now
Installation in progress
25% complete
...
navigation design
add user remove user
add user
between screens
within the application
hierarchical diagrams
the system
• parts of application
– screens or groups of screens
• deep is difficult!
• 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/
network diagrams
main remove
confirm
screen user
add user
main remove
confirm
screen user
add user
wider still
between applications
and beyond ...
wider still …
• style issues:
– platform standards, consistency
• functional issues
– cut and paste
• navigation issues
– embedded applications
– links to other apps … the web
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
basic principles
grouping, structure, order
alignment
use of white space
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
basic principles
• ask
– what is the user doing?
• think
– what information, comparisons, order
• design
– form follows function (let the
interaction derive the layout)
available tools
• grouping of items
• order of items
• decoration - fonts, boxes etc.
• alignment of items
• white space between items
available tools: grouping
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
available tools: order
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
available tools: alignment-text
boring but
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography readable!
Wizard of Oz
Xena - Warrior Princess
Alan Dix
Janet Finlay
Gregory Abowd
Dix , Alan
Finlay, Janet
Russell Beale Abowd, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
available tools: alignment-numbers
532.56
think purpose! 179.3
256.317
which is biggest? 15
73.948
1035
3.142
497.6256
available tools: alignment-numbers
visually:
627.865
long number = big number 1.005763
382.583
align decimal points 2502.56
or right align integers 432.935
2.0175
652.87
56.34
multiple columns
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 2
• use leaders
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 3
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 4
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Space to separate
space to structure
space to highlight
Screen design and layout in
physical controls
• grouping of items
–defrost
defrostsettings
settings
– type of food
type of food
– time to cook
time to cook
Screen design and layout in
physical controls
• grouping of items
• order of items
1)type
1) typeofofheating
heating
1
2) temperature
2) temperature
3) time to cook
3) time to cook
4) start 2
4) start
3
4
Screen design and layout in
physical controls
• grouping of items
• order of items
• decoration
– different colours
different colours for
for different
different functions
functions
– lines around related
lines around related
buttons(temp up/down)
buttons
Screen design and layout in
physical controls
• grouping of items
• order of items
• decoration
• alignment
– centered text in buttons
centred text in buttons
? easy to scan ?
? easy to scan ?
Screen design and layout in
physical controls
• grouping of items
• order of items
• decoration
• alignment
• white space
– gaps to aid grouping
gaps to aid grouping
User actions and controls
•
User actions and controls:
entering information Name: Alan Dix
Address: Lancaster
• forms, dialogue boxes
– presentation + data input
– similar layout issues Name: Alan Dix
– alignment Address: Lancaster
• logical layout
– use task analysis (ch15)
– groupings
?
Name: Alan Dix
Address: Lancaster
• psychological term
82
User actions and controls:
Affordances
mug handle
• for physical objects
‘affords’
– shape and size suggest actions grasping
• pick up, twist, throw
– also cultural – buttons ‘afford’ pushing
• for screen objects
– button–like object ‘affords’ mouse click
– physical-like objects suggest use
• culture of computer use
– icons ‘afford’ clicking
– or even double clicking … not like real buttons!
Activity
– Physical affordances:
How do the following physical objects afford? Are
they obvious?
84 www.id-book.com
Activity
– Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?
85 www.id-book.com
More: aesthetics and utility
https://www.youtube.com/watch?v=MjcO2ExtHso
More: across countries and
cultures
• localisation & internationalisation
– changing interfaces for particular cultures/languages
• globalisation
– try to choose symbols etc. that work everywhere