IAS2223: Human Computer Interaction Chapter 1: The Interaction.
-
Upload
sandra-mccarthy -
Category
Documents
-
view
234 -
download
2
Transcript of IAS2223: Human Computer Interaction Chapter 1: The Interaction.
IAS2223:Human Computer
InteractionChapter 1: The Interaction
Content
• Model of interaction.• Ergonomics.• Interaction styles.• Interactivity.• The process of design.• Navigation design.• Screen design and layout.• Iteration and prototyping.
The Interaction
• Address the translation between what the user wants and what system does – use interaction models
• Ergonomics looks at physical characteristics of the interaction
• Dialog between user and system• Takes place within a social and
organizational context – affects both user and system
What is it?
Communication user system
but is that all … ?
Interaction termsdomain – the area of work under study
e.g. graphic design
goal – what you want to achievee.g. create a solid red triangle
task – how you go about doing it– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle
Note …– traditional interaction …– use of terms differs a lot especially
task/goal !!!
Model of Interaction
Donald Norman’s Model• Seven stages
– user establishes the goal– formulates intention– specifies action sequence– executes action– perceives system state– interprets system state– evaluates system state with respect to goal
• Norman’s model concentrates on user’s view of the interface
Execution/evaluation loop
• 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
system
evaluationexecution
goal
… cont’d
user establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system state interprets system stateevaluates system state with respect to goal
system
evaluationexecution
goal
… cont’d
user establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system state interprets system stateevaluates system state with respect to goal
system
evaluationexecution
goal
… cont’d
user establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system state interprets system stateevaluates system state with respect to goal
system
evaluationexecution
goal
Human Errors – 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 frameworkextension of Norman…
their interaction framework has 4 parts– user– input– system– output
each has its own unique language
interaction translation between languages
problems in interaction = problems in translation
Score
Utask
Ooutput
Iinput
Ergonomics
• Study of the physical characteristics of interaction
• Also known as human factors – but this can also be used to mean much of HCI!
• Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems
Ergonomics - examples• arrangement of controls and displays
e.g. controls grouped according to function or frequency of use, or sequentially
• surrounding environmente.g. seating arrangements adaptable to cope with
all sizes of user
• health issuese.g. physical position, environmental conditions
(temperature, humidity), lighting, noise,
• use of coloure.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
Interaction styles
• command line interface• menus• natural language• question/answer and query dialogue• form-fills and spreadsheets• WIMP• point and click• three–dimensional interfaces
Command line interface• Way of expressing instructions to the
computer directly– function keys, single characters, short
abbreviations, whole words, or a combination
• suitable for repetitive tasks• better for expert users than novices
• offers direct access to system functionality• command names/abbreviations should be
meaningful!
Typical example: the Unix system, DOS
Menus
• Set of options displayed on the screen• Options visible
– less recall - easier to use– rely on recognition so names should be meaningful
• Selection by: – numbers, letters, arrow keys, mouse– combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped– sensible grouping is needed
• Restricted form of full WIMP system
Natural language• 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
• Query languages (e.g. SQL)– used to retrieve information from database– requires understanding of database structure and
language syntax, hence requires some expertise
Form-fills
• Primarily for data entry or data
retrieval• Screen like paper
form.• Data put in relevant
place• Requires
– good design– obvious correction
facilities
Spreadsheets
• first spreadsheet VISICALC, followed by Lotus 1-2-3
MS Excel most common today• sophisticated variation of form-filling.
– grid of cells contain a value or a formula– formula can involve values of other cells
e.g. sum of all cells in this column
– user can enter and alter data spreadsheet maintains consistency
WIMP Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
• default style for majority of interactive computer systems, especially PCs and desktop
machines
Point and click interfaces
• used in ..– multimedia– web browsers– hypertext
• just click something!– icons, text links or location on map
Three dimensional interfaces
• virtual reality• ‘ordinary’ window systems
– highlighting– visual affordance– indiscriminate use
just confusing!• 3D workspaces
– use for extra virtual space– light and occlusion give depth– distance effects
flat buttons …
… or sculptured
click me!
Elements of WIMP
• Windows• Icons• Menus
• Pointers• Buttons• Palettes• Toolbars
• Dialog boxes
Context
Interaction affected by social and organizational context
• other people– desire to impress, competition, fear of failure
• motivation– fear, allegiance, ambition, self-satisfaction
• inadequate systems– cause frustration and lack of motivation
Interactivity 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
The process of design
what iswanted
analysis
design
implementand deploy
prototype
interviewsethnography
what is therevs.
what is wanted
guidelinesprinciples
dialoguenotations
precisespecification
architecturesdocumentation
help
evaluationheuristics
scenariostask analysis
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 ! !
• limited time design trade-off
• usability?– finding problems and fixing them?– deciding what to fix?
• a perfect system is badly designed– too good too much effort in design
navigation design
local structure – single screenglobal structure – whole site
start
the systems
info and help management messages
add user remove user
mainscreen
removeuser
confirm
add user
Interact at several levels:
• widget choice– menus, buttons etc.
• screen design• application navigation design• environment
– other apps, O/S
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
screen design and layout
basic principlesgrouping, structure, order
alignmentuse of white space
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell
basic principles
•ask– what is the user doing?
•think– what information, comparisons,
order
•design– form follows function
available tools for layout
• grouping of items• order of items • decoration - fonts, boxes etc.• alignment of items• white space between items
grouping and structure
logically together physically together
Billing details: Name Address: … Credit card no
Delivery details: Name Address: … Delivery time
Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …
decoration
• use boxes to group logical items• use fonts for emphasis, headings• but not too many!!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
• you read from left to right (English and
European) align left hand side
Willy Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable!
alignment - names
• Usually scanning for surnames make it easy!
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell
alignment - numbers
think purpose!
which is biggest?
532.56179.3
256.31715
73.9481035
3.142497.6256
alignment - numbers
visually: long number = big number
align decimal pointsor right align integers
627.8651.005763
382.5832502.56
432.9352.0175
652.8756.34
multiple columns
• scanning across gaps hard:(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
• use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
• or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
• or even (with care!) ‘bad’ alignment
white space - the counter
WHAT YOU SEE
white space - the counter
WHAT YOU SEE
THE GAPS BETWEEN
space to separate
space to structure
space to highlight
physical controls
• grouping of items
– defrost settings
– type of food
– time to cooktype of food
time to cook
defrost settings
physical controls
• grouping of items
• order of items1) type of heating
2) temperature
3) time to cook
4) start
4
4) start2
2) temperature
3
3) time to cook
11) type of heating
physical controls
• grouping of items
• order of items
• decoration– different colours
for different functions
– lines around relatedbuttons
different colours for different functions
lines around related buttons (temp up/down)
physical controls
• grouping of items
• order of items
• decoration
• alignment– centered text in buttons
? easy to scan ?? easy to scan ?
centred text in buttons
physical controls
• grouping of items
• order of items
• decoration
• alignment
• white space– gaps to aid groupinggaps to aid grouping
Prototyping
• System with limited functionality
• Prototyping help in easing the design
THANKS
To tolerate someone else’s mistakes is one thing. To forgive them is even greater.