HCI-Lecture-14 - 15
HCI-Lecture-14 - 15
Human-Computer Interaction
Adnan Bashir
Interaction design basics
Today’s Outline
• design:
• what it is, interventions, goals, constraints
• users
• who they are, what they are like …
• scenarios
• rich stories of design
• navigation
• finding your way around a system
• goals - purpose
• who is it for, why do they want it
• constraints
• materials, platforms
• trade-offs/compromises
golden rule of design
• understand computers
• limitations, capacities, tools, platforms
• understand people
• psychological, social aspects
• human error
• and their interaction …
To error is human
• accident reports ..
• aircrash, industrial accident, hospital mistake
• enquiry … blames … ‘human error’
• but …
• concrete lintel/support 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 at least as well as physical materials!
Central message …
the user
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
… but how can I do it all ! !
• usability?
• finding problems and fixing them?
• deciding what to fix?
• a perfect system is badly designed
• too good too much effort in design
user focus
• 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.
• 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/inquiry
• 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
scenarios
• explore interaction
• what happens when
• explore cognition
• what are the users thinking
• explore architecture
• what is happening inside
use scenarios to ..
• express dynamics
• screenshots – appearance
• scenario – behaviour
the systems
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 …
• local
• looking from this screen out
• global
• structure of site, movement between screens
• wider still
• relationship with other applications
local
goal
start
goal seeking
goal
start
goal
start
goal
start
live links
to higher
levels
Beware the big button trap
between screens
within the application
hierarchical diagrams
the system
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
available tools
•grouping of items
•order of items
•decoration - fonts, boxes etc.
•alignment of items
•white space between items
grouping and structure
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
order of groups and items
• instructions
• beware the cake recipie syndrome/condition!
… mix milk and flour, add the fruit
after beating them
decoration
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
alignment - text
Alan Dix
Janet Finlay
Gregory Abowd
Dix , Alan
Finlay, Janet
Russell Beale Abowd, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
alignment - numbers
visually: 627.865
long number = big number
1.005763
align decimal points
382.583
or right align integers 2502.56
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
white space - the counter
• grouping of items
• defrost settings
defrost settings
• type of food
•type ofcook
time to food
time to cook
physical controls
• grouping of items
• order of items
1) type of heating
1) type of heating
2) temperature 1
2) temperature
3) time to cook
3)
4) time
start to cook
2
4) start
3
4
physical controls
• grouping of items
• order of items
• decoration
• different colours
different coloursfor
for different functions
•different functions
lines around related
buttons
lines around related
buttons (temp up/down)
physical controls
• grouping of items
• order of items
• decoration
• alignment
• centered text in buttons
? easy to scan ?
centred text in buttons
? easy to scan ?
physical controls
• grouping of items
• order of items
• decoration
• alignment
• white space
• gaps to aid grouping
gaps to aid grouping
user action and control
entering information
knowing what to do
affordances
entering information
Name: Alan Dix
• forms, dialogue boxes Address: Lancaster
• similar layout issues Name: Alan Dix
• alignment - different label lengths
Address: Lancaster
• logical layout
• use task analysis
• groupings
• natural order for entering information
?
Name: Alan Dix
Address: Lancaster
• what is active/dynamic/animated
• what is passive/nonresistent/long suffering
• where do you click
• where do you type
• consistent style helps
• e.g. web underlined links
• labels and icons
• standards for common actions
• language – bold = current state or action
affordances
mug handle
• psychological term
• for physical objects ‘affords’
grasping
• shape and size suggest actions (arrow)
• pick up, twist, throw
• also cultural – buttons ‘afford’ pushing
• for screen objects
• button–like object ‘affords’ mouse click (w machine knob)
• physical-like objects suggest use (ball pen style)
• culture of computer use
• icons ‘afford’ clicking
• or even double clicking … not like real buttons!
appropriate appearance
presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
presenting information
• purpose matters
name size
• sort order (which column, numeric alphabetic)
• text vs. diagram chap10
chap1 17
12
chap10
chap5 12
16
• scatter graph vs. histogram (a diagram consisting of rectangles)
chap11
chap1 51
17
chap12
chap14 262
22
• use paper presentation principles! chap13
chap20 83
27
chap14
chap8 22
32
…… …
• but add interactivity
• softens design choices
• e.g. re-ordering columns
• ‘dancing histograms’
aesthetics and utility
prototyping
iteration and prototyping
getting better …
… and starting well
prototyping
OK?
design prototype evaluate done!
re-design
pitfalls of prototyping
• Usability engineering
• Design rationale
the software lifecycle
Requirements
specification
Architectural
design
Detailed
design
Coding and
unit testing
Integration
and testing
Operation and
maintenance
Activities in the life cycle
Requirements specification
designer and customer try capture what the system is expected to provide can
be expressed in natural language or more precise languages, such as a task
analysis would provide
Architectural design
high-level description of how the system will provide the services required
factor system into major components of the system and how they are
interrelated needs to satisfy both functional and nonfunctional requirements
Detailed design
refinement of architectural components and interrelations to identify modules
to be implemented separately the refinement is governed by the
nonfunctional requirements