Escolar Documentos
Profissional Documentos
Cultura Documentos
the human
the human
• Information i/o …
– visual, auditory, haptic, movement
• Information stored in memory
– sensory, short-term, long-term
• Information processed and applied
– reasoning, problem solving, skill, error
• Emotion influences human capabilities
• Each person is different
Vision
• Brightness
– subjective reaction to levels of light
– affected by luminance of object
– measured by just noticeable difference
– visual acuity increases with luminance as does
flicker
• Colour
– made up of hue, intensity, saturation
– cones sensitive to colour wavelengths
– blue acuity is lowest
– 8% males and 1% females colour blind
Interpreting the signal (cont)
• Several stages:
– visual pattern perceived
– decoded using internal representation of language
– interpreted using knowledge of syntax, semantics,
pragmatics
Sensory memories
Long-term memory
212348278493202
• Two types
– episodic – serial memory of events
– semantic – structured memory of facts,concepts, skills
DOG COLLIE
Fixed Fixed
legs: 4 breed of: DOG
type: sheepdog
Default
diet: carniverous Default
sound: bark size: 65 cm
Variable Variable
size: colour
colour
Models of LTM - Scripts
Model of stereotypical information required to interpret situation
Script has elements that can be instantiated with values for context
Condition/action rules
if condition is matched
then use rule to determine action.
IF dog is growling
THEN run away
LTM - Storage of information
• rehearsal
– information moves from STM to LTM
decay
– information is lost gradually but very slowly
interference
– new information replaces old: retroactive
interference
– old may interfere with new: proactive inhibition
recall
– information reproduced from memory can be
assisted by cues, e.g. categories, imagery
recognition
– information gives knowledge that it has been seen
before
– less complex than recall - information is cue
Thinking
Reasoning
deduction, induction, abduction
Problem solving
Deductive Reasoning
• Deduction:
– derive logically necessary conclusion from given
premises.
e.g. If it is Friday then she will go to work
It is Friday
Therefore she will go to work.
• Induction:
– generalize from cases seen to cases unseen
e.g. all elephants we have seen have trunks
therefore all elephants have trunks.
• Unreliable:
– can only prove false not true
… but useful!
• Humans not good at using negative evidence
e.g. Wason's cards.
Wason's cards
7 E 4 K
If a card has a vowel on one side it has an even number on the other
Is this true?
• Unreliable:
– can lead to false explanations
Problem solving
• Analogy
– analogical mapping:
• novel problems in new domain?
• use knowledge of similar problem from similar domain
– analogical mapping difficult if domains are semantically
different
• Skill acquisition
– skilled activity characterized by chunking
• lot of information is chunked to optimize STM
– conceptual rather than superficial grouping of problems
– information is structured more effectively
Errors and mental models
Types of error
• slips
– right intention, but failed to do it right
– causes: poor physical skill,inattention etc.
– change to aspect of skilled behaviour can cause slip
• mistakes
– wrong intention
– cause: incorrect understanding
humans create mental models to explain behaviour.
if wrong (different from actual system) errors can occur
Emotion
• Various theories of how emotion works
– James-Lange: emotion is our interpretation of a
physiological response to a stimuli
– Cannon: emotion is a psychological response to a
stimuli
– Schacter-Singer: emotion is the result of our
evaluation of our physiological responses, in the
light of the whole situation we are in
• Emotion clearly involves both cognitive and
physical responses to stimuli
Emotion (cont.)
• The biological response to physical stimuli is
called affect
• long term
– sex, physical and intellectual abilities
• short term
– effect of stress or fatigue
• changing
– age
Ask yourself:
will design decision exclude section of user
population?
Psychology and the Design of
Interactive System
• Some direct applications
– e.g. blue acuity is poor
⇒ blue should not be used for important detail
the computer
The Computer
a computer system is made up of various elements
sensors
and devices
everywhere
text entry devices
• Standardised layout
but …
– non-alphanumeric keys are placed differently
– accented symbols needed for different scripts
– minor differences between UK and USA keyboards
1 2 3 4 5 6 7 8 9 0
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M , .
SPACE
alternative keyboard layouts
Alphabetic
– keys arranged in alphabetic order
– not faster for trained typists
– not faster for beginners either!
Dvorak
– common letters under dominant fingers
– biased towards right hand
– common combinations of letters alternate between hands
– 10-15% improvement in speed and reduction in fatigue
– But - large social base of QWERTY typists produce market
pressures not to change
special keyboards
• Technical problems:
– capturing all useful information - stroke path,
pressure, etc. in a natural manner
– segmenting joined up writing into individual letters
– interpreting individual letters
– coping with different styles of handwriting
• Improving rapidly
• Problems with
– external noise interfering
– imprecision of pronunciation
– large vocabularies
– different speakers
Numeric keypads
mouse, touchpad
trackballs, joysticks etc.
touch screens, tablets
eyegaze, cursors
the Mouse
• Two characteristics
– planar movement
– buttons
(usually from 1 to 3 buttons on top, used for
making a selection, indicating an option, or to
initiate drawing etc.)
the mouse (ctd)
Mouse located on desktop
– requires physical space
– no arm fatigue
• Mechanical
– Ball on underside of mouse turns as mouse is moved
– Rotates orthogonal potentiometers
– Can be used on almost any flat surface
• Optical
– light emitting diode on underside of mouse
– may use special grid-like pad or just on desk
– less susceptible to dust and dirt
– detects fluctuating alterations in reflected light intensity to
calculate relative motion in (x, z) plane
Even by foot …
Trackball
– ball is rotated inside static housing
• like an upsdie down mouse!
– relative motion moves cursor
– indirect device, fairly accurate
– separate buttons for picking
– very fast for gaming
– used in some portable and notebook computers.
Thumbwheels …
– for accurate CAD – two dials for X-Y cursor position
– for fast scrolling – single dial on mouse
Joystick and keyboard nipple
Joystick
– indirect
pressure of stick = velocity of movement
– buttons for selection
on top or on front like a trigger
– often used for computer games
aircraft controls and 3D navigation
Keyboard nipple
– for laptop computers
– miniature joystick in the middle of the keyboard
Touch-sensitive screen
• Detect the presence of finger or stylus on the screen.
– works by interrupting matrix of light beams, capacitance changes
or ultrasonic reflections
– direct pointing device
• Advantages:
– fast, and requires no specialised pointer
– good for menu selection
– suitable for use in hostile environment: clean and safe from
damage.
• Disadvantages:
– finger can mark screen
– imprecise (finger is a fairly blunt instrument!)
• difficult to select small regions or perform accurate drawing
– lifting arm can be tiring
Stylus and light pen
Stylus
– small pen-like pointer to draw directly on screen
– may use touch sensitive surface or magnetic detection
– used in PDA, tablets PCs and drawing tables
Light Pen
– now rarely used
– uses light from screen to detect location
BOTH …
– very direct and obvious to use
– but can obscure screen
Digitizing tablet
• very accurate
- used for digitizing maps
Eyegaze
Anti-aliasing
– softens edges by using shades of line colour
– also used for text
Cathode ray tube
electron beam
electron gun
focussing and
deflection
phosphor-
coated screen
Health hazards of CRT !
• X-rays: largely absorbed by screen (but not at rear!)
• UV- and IR-radiation from phosphors: insignificant
levels
• Radio frequency emissions, plus ultrasound (~16kHz)
• Electrostatic field - leaks out through tube to user.
Intensity dependant on distance and humidity. Can
cause rashes.
• Electromagnetic fields (50Hz-0.5MHz). Create induction
currents in conductive materials, including the human
body. Two types of effects attributed to this: visual
system - high incidence of cataracts in VDU operators,
and concern over reproductive disorders (miscarriages
and birth defects).
Health hints …
• How it works …
– Top plate transparent and polarised, bottom plate reflecting.
– Light passes through top plate and crystal, and reflects back to
eye.
– Voltage applied to crystal changes polarisation and hence colour
– N.B. light reflected not emitted => less eye strain
special displays
• what?
– thin flexible sheets
– updated electronically cross
section
– but retain display
• how?
– small spheres turned
– or channels with coloured liquid
and contrasting spheres
– rapidly developing area
virtual reality and 3D interaction
positioning in 3D space
moving and grasping
seeing 3D (helmets and caves)
positioning in 3D space
yaw
roll
pitch
3D displays
• desktop VR
– ordinary screen, mouse or keyboard control
– perspective and motion give 3D effect
• seeing in 3D
– use stereoscopic vision
– VR helmets
– screen plus shuttered specs, etc.
• time delay
– move head … lag … display moves
– conflict: head movement vs. eyes
• depth perception
– headset gives different stereo distance
– but all focused in same plane
– conflict: eye angle vs. focus
• conflicting cues => sickness
– helps motivate improvements in technology
simulators and VR caves
• analogue representations:
– dials, gauges, lights, etc.
• digital displays:
– small LCD screens, LED lights, etc.
• head-up displays
– found in aircraft cockpits
– show most important controls
… depending on context
Sounds
easy-clean
smooth buttons
multi-function
control
large buttons
clear dials
tiny buttons
Environment and bio-sensing
print technology
fonts, page description, WYSIWYG
scanning, OCR
Printing
• shop tills
– dot matrix
– same print head used for several paper rolls
– may also print cheques
• thermal printers
– special heat-sensitive paper
– paper heated by pins makes a dot
– poor quality, but simple & low maintenance
– used in some fax machines
Fonts
• Font – the particular style of text
Courier font
Helvetica font
Palatino font
Times Roman font
∀ ♣×∝≡↵ℜ⊗↵∼ (special symbol)
Pitch
– fixed-pitch – every character has the same width
e.g. Courier
– variable-pitched – some characters wider
e.g. Times Roman – compare the ‘i’ and the “m”
Serif or Sans-serif
– sans-serif – square-ended strokes
e.g. Helvetica
– serif – with splayed ends (such as)
e.g. Times Roman or Palatino
Readability of text
• lowercase
– easy to read shape of words
• UPPERCASE
– better for individual letters and non-words
e.g. flight numbers: BA793 vs. ba793
• serif fonts
– helps your eye on long lines of printed text
– but sans serif often better on screen
Page Description Languages
• WYSIWYG
– what you see is what you get
– aim of word processing, etc.
• but …
– screen: 72 dpi, landscape image
– print: 600+ dpi, portrait
• can try to make them similar
but never quite the same
• so … need different designs, graphics etc, for
screen and print
Scanners
Used in
– desktop publishing for incorporating
photographs and other images
• more recently
– papers micro printed - like wattermarks
• identify which sheet and where you are
– special ‘pen’ can read locations
• know where they are writing
memory
• magnetic disks
– floppy disks store around 1.4 Mbytes
– hard disks typically 40 Gbytes to 100s of Gbytes
access time ~10ms, transfer rate 100kbytes/s
• optical disks
– use lasers to read and sometimes write
– more robust that magnetic media
– CD-ROM
- same technology as home audio, ~ 600 Gbytes
– DVD - for AV applications, or very large files
Blurring boundaries
• PDAs
– often use RAM for their main memory
• Flash-Memory
– used in PDAs, cameras etc.
– silicon based but persistent
– plug-in USB devices for data transfer
speed and capacity
• Problem:
– running lots of programs + each program large
– not enough RAM
• But … swopping
– program on disk needs to run again
– copied from disk to RAM
– slows t h i n g s d o w n
Compression
• Images:
– many storage formats :
(PostScript, GIFF, JPEG, TIFF, PICT, etc.)
– plus different compression techniques
(to reduce their storage requirements)
• Audio/Video
– again lots of formats :
(QuickTime, MPEG, WAV, etc.)
– compression even more important
– also ‘streaming’ formats for network delivery
methods of access
/e3/online/moores-law/
the myth of the infinitely
fast machine
Issues
– network delays – slow feedback
– conflicts - many people update data
– unpredictability
The internet
• history …
– 1969: DARPANET US DoD, 4 sites
– 1971: 23; 1984: 1000; 1989: 10000
• common language (protocols):
– TCP – Transmission Control protocol
• lower level, packets (like letters) between machines
– IP – Internet Protocol
• reliable channel (like phone call) between programs on
machines
– email, HTTP, all build on top of these
chapter 3
the interaction
The Interaction
• interaction models
– translations between user and system
• ergonomics
– physical characteristics of interaction
• interaction styles
– the nature of user/system dialog
• context
– social, organizational, motivational
What is interaction?
communication
user ↔ system
terms of interaction
Norman model
interaction framework
Some terms of interaction
Note …
– traditional interaction …
– use of terms differs a lot especially task/goal !!!
Donald Norman’s model
• Seven stages
– user establishes the goal
– formulates intention
– specifies actions at interface
– executes action
– perceives system state
– interprets system state
– evaluates system state with respect to goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
execution/evaluation loop
goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
execution/evaluation loop
goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
execution/evaluation loop
goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
Using Norman’s model
Gulf of Execution
user’s formulation of actions
≠ actions allowed by the system
Gulf of Evaluation
user’s expectation of changed system state
≠ actual presentation of this state
Human error - slips and mistakes
slip
understand system and goal
correct formulation of action
incorrect action
mistake
may not even have right goal!
Fixing things?
slip – better interface design
mistake – better understanding of system
Abowd and Beale framework
extension of Norman…
their interaction framework has 4 parts O
– user output
– input
S U
– system core task
– output I
input
each has its own unique language
interaction translation between languages
Context matters!
office industrial
type of data textual numeric
rate of change slow fast
environment clean dirty
• industrial interface:
– traditional … dials and knobs
– now … screens and keypads
• glass interface
+ cheaper, more flexible, Vessel B Temp
multiple representations,
precise values 0 100 200
• Familiar to user
• speech recognition or typed natural language
• Problems
– vague
– ambiguous
– hard to do well!
• Solutions
– try to understand a subset
– pick on key words
Query interfaces
• Question/answer interfaces
– user led through interaction via series of questions
– suitable for novice users but restricted functionality
– often used in information systems
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
• used in ..
– multimedia
– web browsers
– hypertext
• minimal typing
Three dimensional interfaces
• virtual reality
• ‘ordinary’ window systems
– highlighting flat buttons …
– visual affordance
– indiscriminate use click me!
just confusing!
• 3D workspaces … or sculptured
– use for extra virtual space
– light and occlusion give depth
– distance effects
elements of the wimp interface
• scrollbars
– allow the user to move the contents of the window
up and down or from side to side
• title bars
– describe the name of the window
Icons
• important component
– WIMP style relies on pointing and selecting things
• uses mouse, trackpad, joystick, trackball,
cursor keys or keyboard shortcuts
• wide variety of graphical images
Menus
• Cascading menus
– hierarchical menu structure
– menu selection opens new menu
– and so in ad infinitum
• Keyboard accelerators
– key combinations - same effect as menu item
– two kinds
• active when menu open – usually first letter
• active when menu closed – usually Ctrl + letter
usually different !!!
Menus design issues
• Special kinds
– radio buttons
– set of mutually exclusive choices
– check boxes
– set of non-exclusive choices
Toolbars
• often customizable:
– choose which toolbars to see
– choose what options are on it
Palettes and tear-off menus
• Problem
menu not there when you want it
• Solution
palettes – little windows of actions
– shown/hidden via menu option
e.g. available shapes in drawing package
tear-off and pin-up menus
– menu ‘tears off’ to become palette
Dialogue boxes
• rapidly improving …
… but still inaccurate
• how to have robust dialogue?
… interaction of course!
• WIMP exceptions …
pre-emptive parts of the interface
• other people
– desire to impress, competition, fear of failure
• motivation
– fear, allegiance, ambition, self-satisfaction
• inadequate systems
– cause frustration and lack of motivation
Experience, engagement and fun
designing experience
physical engagement
managing value
Experience?
• home, entertainment, shopping
– not enough that people can use a system
– they must want to use it!
• psychology of experience
– flow (Csikszentimihalyi)
– balance between anxiety and boredom
• education
– zone of proximal development
– things you can just do with help
• wider ...
– literary analysis, film studies, drama
Designing experience
• real crackers
– cheap and cheerful!
– bad joke, plastic toy, paper hat
– pull and bang
Designing experience
• virtual crackers
– cheap and cheerful
– bad joke, web toy, cut-out mask
– click and bang
Designing experience
• virtual crackers
– cheap and cheerful
– bad joke, web toy, cut-out mask
– click and bang
how crackers work
fill in web form
closed
cracker page
open
watches recipient clicks
message
progress cracker opens ...
very slowly
open
cracker page
sender joke
links
web toy
mask
The crackers experience
real cracker virtual cracker
Surface elements
design cheap and cheerful simple page/graphics
play plastic toy and joke web toy and joke
dressing up paper hat mask to cut out
Experienced effects
shared offered to another sent by email message
co-experience pulled together sender can't see content
until opened by recipient
excitement cultural connotations recruited expectation
hiddenness contents inside first page - no contents
suspense pulling cracker slow ... page change
surprise bang (when it works) WAV file (when it works)
Physical design
• many constraints:
– ergonomic – minimum button size
– physical – high-voltage switches are big
– legal and safety – high cooker controls
– context and environment – easy to clean
– aesthetic – must look good
– economic – … and not cost too much!
Design trade-offs
between categories
e.g. ergonomics vs. physical – MiniDisc remote
ergonomics – controls need to be bigger
physical – no room!
solution – multifunction controls & reduced functionality
Fluidity
• yes/no buttons
– well sort of
• ‘joystick’
• one-shot buttons
• joystick
• some sliders
controls:
logical relationship
~ spatial grouping
compliant interaction
BUT NOTE
• exceptions (e.g. habit)
• value NOT necessarily personal gain or money
Weighing up value
value
• helps me get my work done
• fun
• good for others
cost
• download time
• money £, $, €
• learning effort
Discounted future
• coercion
• tell people what to do!
• value = keep your job
• enculturation
• explain corporate values
• establish support (e.g share options)
• emergence
• design process so that
individuals value organisational value
General lesson …
paradigms
why study paradigms
Concerns
– how can an interactive system be developed
to ensure its usability?
– how can the usability of an interactive
system be demonstrated or measured?
• Batch processing
Impersonal computing
Example Paradigm Shifts
• Batch processing
• Time-sharing
Interactive computing
Example Paradigm Shifts
???
Community computing
Example Paradigm Shifts
• Networking
• Graphical displays % foo.bar
ABORT
dumby!!!
Direct manipulation
Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
Personal computing
Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW
Global information
Example Paradigm Shifts
• Problems
– some tasks do not fit into a given metaphor
– cultural bias
Direct manipulation
• Original interfaces
– Commands given to computer
– Language-based
• Direct Manipulation/WIMP
– Commands performed on “world” representation
– Action based
• Agents - return to language by instilling
proactivity and “intelligence” in command
processor
– Avatars, natural language processing
Ubiquitous Computing
Paradigms
(additional materials)
Beginnings – Computing in 1945
• Harvard Mark I
– Picture from http://piano.dsi.uminho.pt/museuv/indexmark.htm
• Ballistics calculations
• Physical switches
(before microprocessor)
• Paper tape
• Simple arithmetic &
fixed calculations
(before programs)
– On-line at http://www.rheingold.com/texts/
tft/
Innovator: Vannevar Bush
• “As We May Think” - 1945 Atlantic Monthly
– “…publication has been extended far beyond our
present ability to make real use of the record.”
• Postulated Memex device
– Stores all records/articles/communications
– Items retrieved by indexing, keywords, cross
references (now called hyperlinks)
– (Envisioned as microfilm, not computer)
• Interactive and nonlinear components are key
• http://www.theatlantic.com/unbound/flashbks/computer/b
ushf.htm
More About Vannevar Bush
• Landmark system/demo:
– hierarchical hypertext, multimedia, mouse,
high-res display, windows, shared files,
electronic messaging, CSCW,
teleconferencing, ...
Inventor
of mouse
About Doug Engelbart
• Graduate of Berkeley (EE '55)
– "bi-stable gaseous plasma digital devices"
• Stanford Research Institute (SRI)
– Augmentation Research Center
• 1962 Paper "Conceptual Model for Augmenting
Human Intellect"
– Complexity of problems increasing
– Need better ways of solving problems
• Coined term
“hypertext”
Innovator: Nicholas Negroponte
interaction design
basics
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
• goals - purpose
– who is it for, why do they want it
• constraints
– materials, platforms
• trade-offs
golden rule of design
• understand computers
– limitations, capacities, tools, platforms
• understand people
– psychological, social aspects
– human error
• 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 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
• 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
• linearity
– time is linear - our lives are linear
– but don’t show alternatives
scenarios …
• step-by-step walkthrough
– what can they see (sketches, screen shots)
– what do they do (keyboard, mouse etc.)
– what are they thinking?
• mock up device
• pretend you are doing it
• internet-connected swiss army knife …
• 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
linearity
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
the systems
navigation design
add user remove user
add user
levels
• widget choice
– menus, buttons etc.
• screen design
• application navigation design
• environment
– other apps, O/S
the web …
• within a screen
– later ...
• 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
• 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/
think about dialogue
• 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
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
ABCDEFFHIJKLM
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!
… mix milk and flour, add the fruit
after beating them
decoration
ABCDEFFHIJKLM
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
532.56
think purpose! 179.3
256.317
which is biggest? 15
73.948
1035
3.142
497.6256
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
white space - the counter
• grouping of items
–defrost
defrostsettings
settings
– type of food
type of food
– time to cook
time to cook
physical controls
• grouping of items
• order of items
1)type
1) typeofofheating
heating
2) temperature 1
2) temperature
3) time to cook
3) time to cook
4) start 2
4) start
3
4
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
physical controls
• grouping of items
• order of items
• decoration
• alignment
– centered text in buttons
centred text in buttons
? easy to scan ?
? 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
Address: Lancaster
• forms, dialogue boxes
– presentation + data input
Name: Alan Dix
– similar layout issues
– alignment - N.B. different label lengths Address: Lancaster
• logical layout
– use task analysis (ch15)
– groupings
?
Name: Alan Dix
Address: Lancaster
presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
presenting information
prototyping
iteration and prototyping
getting better …
… and starting well
prototyping
OK?
design prototype evaluate done!
re-design
pitfalls of prototyping
CONTROLS control
panel
reactor targets
information
panel emergency
shutdown
Reactor Targets
panel
Emergency Shutdown
7934
Pressure
325
manual IMMEDIATE
Temp SHUTDOWN
10256
override keypad COMMENCE
Flow Rate
panel for manual emergency
override confirm
Manual Override 7 8 9
panel Emergency Confirm
6000
Target 4 5 6 CONFIRM
Pressure SET
0 1 2 3 CANCEL
Emergency Scenario
Jenny, the Nuclear Power Plant operator has normal sight and no physical
or perceptual impairments. Her shift started at 11pm and it is now 5am
in the morning. So far the plant has been operating within normal
parameters and the current alarm state is therefore green
1 Jenny notices the core reaction rate has risen very rapidly
2. she realises she must immediately change the reactor
target pressure to correct this
3. she goes to the Alarm Control Panel on the far right of the
main reactor control panel and presses '+' twice (as it is
starting off in green state)
4. the Emergency Confirm button glows red
5. she moves across to the Manual Override panel on the
far left of the main reactor control panel
………
chapter 6
• Usability engineering
• Design rationale
the software lifecycle
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
Verification and validation
Real-world
requirements
and constraints The formality gap
Verification
designing the product right
Validation
designing the right product
Detailed
design
Coding and
unit testing
Integration
lots of feedback!
and testing
Operation and
maintenance
Usability engineering
The ultimate test of usability based on measurement of user
experience
Usability specification
– usability attribute/principle
– measuring concept
– measuring method
– now level/ worst case/ planned level/ best case
Problems
– usability specification requires level of detail that may not be
– possible early in design satisfying a usability specification
– does not necessarily satisfy usability
part of a usability
specification for a VCR
• effectiveness
– can you achieve what you want to?
• efficiency
– can you do it without wasting effort?
• satisfaction
– do you enjoy the process?
some metrics from ISO 9241
Usability Effectiveness Efficiency Satisfaction
objective measures measures measures
• Prototypes
– simulate or animate some features of intended system
– different types of prototypes
• throw-away
• incremental
• evolutionary
• Management issues
– time
– planning
– non-functional features
– contracts
Techniques for prototyping
Storyboards
need not be computer-based
can be animated
Types of DR:
• Process-oriented
– preserves order of deliberation and decision-making
• Structure-oriented
– emphasizes post hoc structuring of considered
design alternatives
• Two examples:
– Issue-based information system (IBIS)
– Design space analysis
Issue-based information
system (IBIS)
• basis for much of design rationale research
• process-oriented
• main elements:
issues
– hierarchical structure with one ‘root’ issue
positions
– potential resolutions of an issue
arguments
– modify the relationship between positions and issues
Sub-issue generalizes
questions
Sub-issue
Sub-issue
Design space analysis
• structure-oriented
Option Criterion
… Consequent …
Question
Question
Psychological design rationale
design rules
design rules
• Principles of usability
– general understanding
• Design patterns
– capture and reuse design knowledge
types of design rules
• principles
– abstract design rules
– low authority
– high generality Guidelines
increasing generality
increasing generality
• standards
– specific design rules
– high authority Standards
– limited application
• guidelines
– lower authority increasing authority
increasing authority
Learnability
the ease with which new users can begin effective
interaction and achieve maximal performance
Flexibility
the multiplicity of ways the user and system exchange
information
Robustness
the level of support provided the user in determining
successful achievement and assessment of goal-
directed behaviour
Principles of learnability
Predictability
– determining effect of future actions based on
past interaction history
– operation visibility
Synthesizability
– assessing the effect of past actions
– immediate vs. eventual honesty
Principles of learnability (ctd)
Familiarity
– how prior knowledge applies to new system
– guessability; affordance
Generalizability
– extending specific interaction knowledge to new
situations
Consistency
– likeness in input/output behaviour arising from similar
situations or task objectives
Principles of flexibility
Dialogue initiative
– freedom from system imposed constraints on input
dialogue
– system vs. user pre-emptiveness
Multithreading
– ability of system to support user interaction for more
than one task at a time
– concurrent vs. interleaving; multimodality
Task migratability
– passing responsibility for task execution between user
and system
Principles of flexibility (ctd)
Substitutivity
– allowing equivalent values of input and
output to be substituted for each other
– representation multiplicity; equal opportunity
Customizability
– modifiability of the user interface by user
(adaptability) or system (adaptivity)
Principles of robustness
Observability
– ability of user to evaluate the internal state of the
system from its perceivable representation
– browsability; defaults; reachability; persistence;
operation visibility
Recoverability
– ability of user to take corrective action once an error
has been recognized
– reachability; forward/backward recovery;
commensurate effort
Principles of robustness (ctd)
Responsiveness
– how the user perceives the rate of
communication with the system
– Stability
Task conformance
– degree to which system services support all
of the user's tasks
– task completeness; task adequacy
Using design rules
G uide line s
increasing generality
increasing generality
Design rules
Sta nda rds
• suggest how to increase usability
• differ in generality and authority
increasing
increasingauthority
authority
Standards
implementation support
Implementation support
• programming tools
– levels of services for programmers
• windowing systems
– core support for separate and simultaneous user-
system activity
• programming the application and control of
dialogue
• interaction toolkits
– bring programming closer to level of user perception
• user interface management systems
– controls relationship between presentation and
functionality
Introduction
Device independence
programming the abstract terminal device drivers
image models for output and (partially) input
• pixels
• PostScript (MacOS X, NextStep)
• Graphical Kernel System (GKS)
• Programmers' Hierarchical Interface to Graphics
(PHIGS)
Resource sharing
achieving simultaneity of user tasks
window system supports independent processes
isolation of individual applications
roles of a windowing system
Architectures of windowing
systems
three possible software architectures
– all assume device driver is separate
– differ in how multiple application management is
implemented
repeat
read-event(myevent)
case myevent.type
type_1:
do type_1 processing
type_2:
do type_2 processing
...
type_n:
do type_n processing
end case
end repeat
Programming the application - 1
notification-based
void main(String[] args) {
Menu menu = new Menu();
menu.setOption(“Save”);
menu.setOption(“Quit”);
menu.setAction(“Save”,mySave)
menu.setAction(“Quit”,myQuit)
...
}
int mySave(Event e) {
// save the current file
}
int myQuit(Event e) {
// close down
}
going with the grain
beware!
if you don’t explicitly design it will just happen
implementation should not drive design
Using toolkits
Interaction objects
– input and output
intrinsically linked
• Notification based;
– AWT 1.0 – need to subclass basic widgets
– AWT 1.1 and beyond -– callback objects
• Swing toolkit
– built on top of AWT – higher level features
– uses MVC architecture (see later)
User Interface Management
Systems (UIMS)
• UIMS add another level above toolkits
– toolkits too difficult for non-programmers
• concerns of UIMS
– conceptual architecture
– implementation techniques
– support infrastructure
• non-UIMS terms:
– UI development system (UIDS)
– UI development environment (UIDE)
• e.g. Visual Basic
UIMS as conceptual architecture
• improves:
– portability – runs on different systems
– reusability – components reused cutting costs
– multiple interfaces – accessing same functionality
– customizability – by designer and user
UIMS tradition – interface
layers / logical components
• linguistic: lexical/syntactic/semantic
• Seeheim:
presentation dialogue application
lexical
functional
core physical
Seeheim model
Functionality
Dialogue
USER
USER Presentation (application APPLICATION
Control
interface)
switch
conceptual vs. implementation
Seeheim
– arose out of implementation experience
– but principal contribution is conceptual
– concepts part of ‘normal’ UI language
… because of Seeheim …
… we think differently!
e.g. the lower box, the switch
• needed for implementation
presentation dialogue application
• but not conceptual
semantic feedback
Application
Dialogue
Control
Model
the bypass/switch
Application
Dialogue
Control
Model
direct communication
between application
rapid semantic and presentation
feedback but regulated by
dialogue control
more layers!
dialogue
func. core
adaptor lexical
functional
core physical
Arch/Slinky
functional
core physical
monolithic vs. components
view
model
controller
MVC issues
abstraction presentation
control
A P
C A P
C
Implementation of UIMS
• N.B. constraints
– instead of what happens say what should be true
– used in groupware as well as single user interfaces
(ALV - abstraction–link–view)
• what it is
– draw components on screen
– set actions with script or links to program
• in use
– with raw programming most popular technique
– e.g. Visual Basic, Dreamweaver, Flash
• internal control
(e.g., read-evaluation loop)
• external control
(independent of application semantics or presentation)
• presentation control
(e.g., graphical specification)
Summary
evaluation techniques
Evaluation Techniques
• Evaluation
– tests usability and functionality of system
– occurs in laboratory, field and/or in collaboration
with users
– evaluates both design and implementation
– should be considered at all stages in the design life
cycle
Goals of Evaluation
Cognitive Walkthrough
Heuristic Evaluation
Review-based evaluation
Cognitive Walkthrough
• Example heuristics
– system behaviour is predictable
– system behaviour is consistent
– feedback is provided
• Model-based evaluation
• Advantages:
– specialist equipment available
– uninterrupted environment
• Disadvantages:
– lack of context
– difficult to observe several users cooperating
• Appropriate
– if system location is dangerous or impractical for
constrained single user systems to allow controlled
manipulation of use
Field Studies
• Advantages:
– natural environment
– context retained (though observation may alter it)
– longitudinal studies possible
• Disadvantages:
– distractions
– noise
• Appropriate
– where context is crucial for longitudinal studies
Evaluating Implementations
Requires an artefact:
simulation, prototype,
full implementation
Experimental evaluation
• Subjects
– who – representative, sufficient sample
• Variables
– things to modify and measure
• Hypothesis
– what you’d like to show
• Experimental design
– how you are going to do it
Variables
• prediction of outcome
– framed in terms of IV and DV
• null hypothesis:
– states no difference between conditions
– aim is to disprove this
• Type of data
– discrete - finite number of values
– continuous - any value
Analysis - types of test
• parametric
– assume normal distribution
– robust
– powerful
• non-parametric
– do not assume normal distribution
– less powerful
– more reliable
• contingency table
– classify data by discrete attributes
– count number of data items in each group
Analysis of data (cont.)
Problems with:
– subject groups
– choice of task
– data gathering
– analysis
Subject groups
difficult to timetable
options:
– creative task e.g. ‘write a short report on …’
– decision games e.g. desert survival task
– control task e.g. ARKola bottling plant
Data gathering
problems:
– synchronisation
– sheer volume!
one solution:
– record from each perspective
Analysis
solutions:
– within groups experiments
– micro-analysis (e.g., gaps in speech)
– anecdotal and qualitative analysis
Contrast:
psychology – controlled experiment
sociology and anthropology – open study and rich data
Observational Methods
Think Aloud
Cooperative evaluation
Protocol analysis
Automated analysis
Post-task walkthroughs
Think Aloud
• Advantages
– simplicity - requires little expertise
– can provide useful insight
– can show how system is actually use
• Disadvantages
– subjective
– selective
– act of describing may alter task performance
Cooperative evaluation
• Additional advantages
– less constrained and easier to use
– user is encouraged to criticize system
– clarification possible
Protocol analysis
• Workplace project
• Post task walkthrough
– user reacts on action after the event
– used to fill in intention
• Advantages
– analyst has time to focus on relevant incidents
– avoid excessive interruption of task
• Disadvantages
– lack of freshness
– may be post-hoc interpretation of events
post-task walkthroughs
Interviews
Questionnaires
Interviews
• Advantages
– can be varied to suit context
– issues can be explored more fully
– can elicit user views and identify unanticipated
problems
• Disadvantages
– very subjective
– time consuming
Questionnaires
• Advantages
– quick and reaches large user group
– can be analyzed more rigorously
• Disadvantages
– less flexible
– less probing
Questionnaires (ctd)
• Styles of question
– general
– open-ended
– scalar
– multi-choice
– ranked
Physiological methods
Eye tracking
Physiological measurement
eye tracking
universal design
universal design principles
- NCSW
• equitable use
• flexibility in use
• simple and intuitive to use
• perceptible information
• tolerance for error
• low physical effort
• size and space for approach and use
Multi-Sensory Systems
• Multi-modal systems
– use more than one sense (or mode ) of interaction
e.g. visual and aural senses: a text processor may speak the
words as well as echoing them to the screen
• Multi-media systems
– use a number of different media to communicate
information
e.g. a computer-based teaching system:may use video,
animation, text and still images: different media all using the
visual mode of interaction; may also use sounds, both speech
and non-speech: two more media, now using a different mode
Speech
phonemes
– 40 of them
– basic atomic units
– sound slightly different depending on the context
they are in, these larger units are …
allophones
– all the sounds in the language
– between 120 and 130 of them
– these are formed into …
morphemes
– smallest unit of language that has meaning.
Speech (cont’d)
Other terminology:
• prosody
– alteration in tone and quality
– variations in emphasis, stress, pauses and pitch
– impart more meaning to sentences.
• co-articulation
– the effect of context on the sound
– transforms the phonemes into allophones
• syntax – structure of sentences
• semantics – meaning of sentences
Speech Recognition Problems
a a a ah h æ æ ø ø e e e
o a a h r æ l ø y y j i
o o a h r r r g g y j i
o o m a r m n m n j i i
l o u h v vm n n h hj j j
l u v v p d d t r h hi j
. . u v tk k p p p r k s
. . v k pt t p t p h s s
Speech Recognition: useful?
Useful
– natural and familiar way of receiving information
Problems
– similar to recognition: prosody particularly
Additional problems
– intrusive - needs headphones, or creates noise in the
workplace
– transient - harder to review and browse
Speech Synthesis: useful?
Examples:
• screen readers
– read the textual display to the user
utilised by visually impaired people
• warning signals
– spoken information sometimes presented to pilots whose
visual and haptic skills are already fully occupied
Non-Speech Sounds
• family earcons
similar types of earcons represent similar classes of
action or similar objects: the family of “errors” would
contain syntax and operating system errors
• haptic interaction
– cutaneous perception
• tactile sensation; vibrations on the skin
– kinesthetics
• movement and position; force feedback
• information on shape, texture, resistance,
temperature, comparative spatial factors
• example technologies
– electronic braille displays
– force feedback devices e.g. Phantom
• resistance, texture
Handwriting recognition
• Technology
– Handwriting consists of complex strokes and spaces
– Captured by digitising tablet
• strokes transformed to sequence of dots
– large tablets available
• suitable for digitising maps and technical drawings
– smaller devices, some incorporating thin screens to
display the information
• PDAs such as Palm Pilot
• tablet PCs
Handwriting recognition (ctd)
• Problems
– personal differences in letter formation
– co-articulation effects
• Breakthroughs:
– stroke not just bitmap
– special ‘alphabet’ – Graffeti on PalmOS
• Current state:
– usable – even without training
– but many prefer keyboards!
gesture
• applications
– gestural input - e.g. “put that there”
– sign language
• technology
– data glove
– position sensing devices e.g MIT Media Room
• benefits
– natural form of interaction - pointing
– enhance communication between signing and non-
signing users
• problems
– user dependent, variable and issues of coarticulation
Users with disabilities
• visual impairment
– screen readers, SonicFinder
• hearing impairment
– text communication, gesture, captions
• physical impairment
– speech I/O, eyegaze, gesture, predictive systems (e.g.
Reactive keyboard)
• speech impairment
– speech synthesis, text communication
• dyslexia
– speech input, output
• autism
– communication, education
… plus …
• age groups
– older people e.g. disability aids, memory aids,
communication tools to prevent social isolation
– children e.g. appropriate input/output devices,
involvement in design process
• cultural differences
– influence of nationality, generation, gender, race,
sexuality, class, religion, political persuasion etc. on
interpretation of interface features
– e.g. interpretation and acceptability of language,
cultural symbols, gesture and colour
chapter 11
user support
user support
• Issues
– different types of support at different times
– implementation and presentation both important
– all need careful design
• Types of user support
– quick reference, task specific help, full explanation,
tutorial
• Provided by help and documentation
– help - problem-oriented and specific
– documentation - system-oriented and general
– same design principles apply to both
Requirements
• Availability
– continuous access concurrent to main application
• Accuracy and completeness
– help matches and covers actual system behaviour
• Consistency
– between different parts of the help system and paper
documentation
• Robustness
– correct error handling and npredictable behaviour
• Flexibility
– allows user to interact in a way appropriate to experience and task
• Unobtrusiveness
– does not prevent the user continuing with work
Approaches to user support
• Command assistance
– User requests help on particular command
e.g., UNIX man, DOS help
– Good for quick reference
– Assumes user know what to look for
• Command prompts
– Provide information about correct usage when an
error occurs
– Good for simple syntactic errors
– Also assumes knowledge of the command
Approaches to user support (ctd)
• wizards
– task specific tool leads the user through task, step by step,
using user’s answers to specific questions
– example: resumé
– useful for safe completion of complex or infrequent tasks
– constrained task execution so limited flexibility
– must allow user to go back
• assistants
– monitor user behaviour and offer contextual advice
– can be irritating e.g. MS paperclip
– must be under user control e.g. XP smart tags
Adaptive Help Systems
• Problems
– knowledge requirements considerable
– who has control of the interaction?
– what should be adapted?
– what is the scope of the adaptation?
Knowledge representation
User modeling
• Quantification
– user moves between levels of expertise
– based on quantitative measure of what he knows.
• Stereotypes
– user is classified into a particular category.
• Overlay
– idealized model of expert use is constructed
– actual use compared to ideal
– model may contain the commonality or difference
Special case: user behaviour compared to known error
catalogue
Knowledge representation
Domain and task modelling
• Covers
– common errors and tasks
– current task
• Usually involves analysis of command
sequences.
• Problems
– representing tasks
– interleaved tasks
– user intention
Knowledge representation
Advisory strategy
• knowledge acquisition
• resources
• Initiative
– does the user retain control or can the system direct the
interaction?
– can the system interrupt the user to offer help?
• Effect
– what is going to be adapted and what information is
needed to do this?
– only model what is needed.
• Scope
– is modelling at application or system level?
– latter more complex
e.g. expertise varies between applications.
Designing user support