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.
![Page 1: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/1.jpg)
IAS2223:Human Computer
InteractionChapter 1: The Interaction
![Page 2: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/2.jpg)
Content
• Model of interaction.• Ergonomics.• Interaction styles.• Interactivity.• The process of design.• Navigation design.• Screen design and layout.• Iteration and prototyping.
![Page 3: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/3.jpg)
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
![Page 4: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/4.jpg)
What is it?
Communication user system
but is that all … ?
![Page 5: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/5.jpg)
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 !!!
![Page 6: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/6.jpg)
Model of Interaction
![Page 7: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/7.jpg)
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
![Page 8: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/8.jpg)
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
![Page 9: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/9.jpg)
… 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
![Page 10: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/10.jpg)
… 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
![Page 11: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/11.jpg)
… 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
![Page 12: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/12.jpg)
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
![Page 13: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/13.jpg)
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
![Page 14: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/14.jpg)
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
![Page 15: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/15.jpg)
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.
![Page 16: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/16.jpg)
Interaction styles
• command line interface• menus• natural language• question/answer and query dialogue• form-fills and spreadsheets• WIMP• point and click• three–dimensional interfaces
![Page 17: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/17.jpg)
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
![Page 18: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/18.jpg)
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
![Page 19: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/19.jpg)
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
![Page 20: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/20.jpg)
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
![Page 21: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/21.jpg)
Form-fills
• Primarily for data entry or data
retrieval• Screen like paper
form.• Data put in relevant
place• Requires
– good design– obvious correction
facilities
![Page 22: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/22.jpg)
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
![Page 23: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/23.jpg)
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
![Page 24: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/24.jpg)
Point and click interfaces
• used in ..– multimedia– web browsers– hypertext
• just click something!– icons, text links or location on map
![Page 25: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/25.jpg)
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!
![Page 26: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/26.jpg)
Elements of WIMP
• Windows• Icons• Menus
• Pointers• Buttons• Palettes• Toolbars
• Dialog boxes
![Page 27: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/27.jpg)
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
![Page 28: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/28.jpg)
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
![Page 29: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/29.jpg)
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
![Page 30: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/30.jpg)
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
![Page 31: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/31.jpg)
… 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
![Page 32: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/32.jpg)
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
![Page 33: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/33.jpg)
Interact at several levels:
• widget choice– menus, buttons etc.
• screen design• application navigation design• environment
– other apps, O/S
![Page 34: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/34.jpg)
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
![Page 35: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/35.jpg)
screen design and layout
basic principlesgrouping, structure, order
alignmentuse of white space
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell
![Page 36: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/36.jpg)
basic principles
•ask– what is the user doing?
•think– what information, comparisons,
order
•design– form follows function
![Page 37: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/37.jpg)
available tools for layout
• grouping of items• order of items • decoration - fonts, boxes etc.• alignment of items• white space between items
![Page 38: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/38.jpg)
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 …… … … …
![Page 39: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/39.jpg)
decoration
• use boxes to group logical items• use fonts for emphasis, headings• but not too many!!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
![Page 40: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/40.jpg)
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!
![Page 41: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/41.jpg)
alignment - names
• Usually scanning for surnames make it easy!
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell
![Page 42: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/42.jpg)
alignment - numbers
think purpose!
which is biggest?
532.56179.3
256.31715
73.9481035
3.142497.6256
![Page 43: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/43.jpg)
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
![Page 44: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/44.jpg)
multiple columns
• scanning across gaps hard:(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
![Page 45: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/45.jpg)
multiple columns - 2
• use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
![Page 46: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/46.jpg)
multiple columns - 3
• or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
![Page 47: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/47.jpg)
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
• or even (with care!) ‘bad’ alignment
![Page 48: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/48.jpg)
white space - the counter
WHAT YOU SEE
![Page 49: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/49.jpg)
white space - the counter
WHAT YOU SEE
THE GAPS BETWEEN
![Page 50: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/50.jpg)
space to separate
![Page 51: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/51.jpg)
space to structure
![Page 52: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/52.jpg)
space to highlight
![Page 53: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/53.jpg)
physical controls
• grouping of items
– defrost settings
– type of food
– time to cooktype of food
time to cook
defrost settings
![Page 54: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/54.jpg)
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
![Page 55: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/55.jpg)
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)
![Page 56: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/56.jpg)
physical controls
• grouping of items
• order of items
• decoration
• alignment– centered text in buttons
? easy to scan ?? easy to scan ?
centred text in buttons
![Page 57: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/57.jpg)
physical controls
• grouping of items
• order of items
• decoration
• alignment
• white space– gaps to aid groupinggaps to aid grouping
![Page 58: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/58.jpg)
Prototyping
• System with limited functionality
• Prototyping help in easing the design
![Page 59: IAS2223: Human Computer Interaction Chapter 1: The Interaction.](https://reader031.fdocuments.us/reader031/viewer/2022032308/56649ec05503460f94bcafb4/html5/thumbnails/59.jpg)
THANKS
To tolerate someone else’s mistakes is one thing. To forgive them is even greater.