CENG 394Introduction to Human-Computer InteractionCENG 394HCIinteraction design basics
interaction design basicsdesign:what it is, interventions, goals, constraintsthe design processwhat happens whenuserswho they are, what they are like scenariosrich stories of designnavigationfinding your way around a systemiteration and prototypesnever get it right first time!
interactions and interventionsdesign interactions not just interfacesnot just the immediate interactione.g. stapler in office technology changes interaction stylemanual:write, print, staple, write, print, staple, electric:write, print, write, print, , staple
designing interventions not just artefactsnot just the system, but also documentation, manuals, tutorialswhat we say and do as well as what we make
what is design?achieving goals within constraints
goals - purposewho is it for, why do they want it constraintsmaterials, platformstrade-offs
golden rule of design
understand your materials
for HumanComputer Interactionunderstand your materials
understand computerslimitations, capacities, tools, platformsunderstand peoplepsychological, social aspectshuman errorand their interaction
To err is humanaccident reports ..aircrash, industrial accident, hospital mistakeenquiry blames human errorbut concrete lintel breaks because too much weightblame lintel error ? no design error we know how concrete behaves under stresshuman error is normalwe know how users behave under stressso design for it!treat the user at least as well as physical materials!
The process of designwhat is wantedanalysisdesignimplementand deployprototype
Steps requirementswhat is there and what is wanted analysisordering and understandingdesignwhat to do and how to decideiteration and prototypinggetting it right and finding what is really needed!implementation and deploymentmaking 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 designedtoo good too much effort in design
user focusknow your userpersonaecultural probes
know your user
who are they?probably not like you!talk to themwatch themuse your imagination
personadescription of an example usernot necessarily a real personuse as surrogate userwhat would Oya thinkdetails mattermakes her real
example personaBetty is 37 years old, She has been Warehouse Manager for five years and worked for Simpkins Brothers Engineering for twelve years. She didnt go to university, but has studied in her evenings for a business diploma. She has two children aged 15 and 7 and does not like to work late. She did part of an introductory in-house computer course some years ago, but it was interrupted when she was promoted and could no longer afford to take the time. Her vision is perfect, but her right-hand movement is slightly restricted following an industrial accident 3 years ago. She is enthusiastic about her work and is happy to delegate responsibility and take suggestions from her staff. However, she does feel threatened by the introduction of yet another new computer system (the third in her time at SBE).
cultural probesdirect observationsometimes hardin the homepsychiatric patients,
probe packsitems to prompt responsese.g. glass to listen at wall, camera, postcardgiven to people to open in their own environment they record what is meaningful to them
used to inform interviews, prompt ideas, enculture designers
scenariosstories for designuse and reuse
scenariosstories for designcommunicate with othersvalidate other modelsunderstand dynamicslinearitytime is linear - our lives are linearbut dont show alternatives
scenarios what will users want to do?
step-by-step walkthroughwhat can they see (sketches, screen shots)what do they do (keyboard, mouse etc.)what are they thinking?
use and reuse throughout design
scenario movie playerBrian would like to see the new film Moments of Significance and wants to invite Alison, but he knows she doesnt like arty films. He decides to take a look at it to see if she would like it and so connects to one of the movie sharing networks. He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to go to the cinema to watch it. After it downloads to his machine he takes out his new personal movie player. He presses the menu button and on the small LCD screen he scrolls using the arrow keys to bluetooth connect and presses the select button. On his computer the movie download program now has an icon showing that it has recognised a compatible device and he drags the icon of the film over the icon for the player. On the player the LCD screen says downloading now, a percent done indicator and small whirling icon.
also play act mock up devicepretend you are doing itinternet-connected swiss army knife
explore the depthsexplore interactionwhat happens when
explore cognitionwhat are the users thinking
explore architecturewhat is happening inside
use scenarios to ..communicate with othersdesigners, clients, users
validate other modelsplay it against other models
express dynamicsscreenshots appearancescenario behaviour
linearityScenarios one linear path through system
Pros:life and time are lineareasy to understand (stories and narrative are natural)concrete (errors less likely)Cons:no choice, no branches, no special conditionsmiss the unintended
So:use several scenariosuse several methods
navigation designlocal structure single screenglobal structure whole site
levelswidget choicemenus, buttons etc.screen designapplication navigation designenvironment other apps, O/S
the web widget choice
screen designnavigation designenvironment elements and tags
page designsite structurethe web, browser, external links
physical deviceswidget choice
screen designnavigation designenvironment controlsbuttons, knobs, dialsphysical layoutmodes of devicethe real world
think about structurewithin a screenlater ...locallooking from this screen outglobalstructure of site, movement between screenswider stillrelationship with other applications
localfrom one screen looking out
goal seekingstartgoalprogress with local knowledge only ...
goal seekinggoalstart but can get to the goal
goal seeking try to avoid these bits!
four golden rulesknowing where you areknowing what you can doknowing where you are goingor what will happenknowing where youve beenor what youve done
where you are breadcrumbs
shows path through web site hierarchy
modeslock to prevent accidental use remove lock - c + yes to confirmfrequent practiced actionif lock forgottenin pocket yes gets pressedgoes to phone bookin phone book c delete entry yes confirm oops !
globalbetween screenswithin the application
Organized along:functional boundariesRolesuser typemodules
hierarchical diagrams ctd.parts of applicationscreens or groups of screens
typically functional separation
navigating hierarchiesdeep is difficult!
misuse of Millers 7 2short term memory, not menu size
optimal?many items on each screenbut structured within screen
think about dialoguewhat does it mean in UI design?
computer dialoguepattern of interaction between users and system (cross-links in hierarchies, editing-deleting a record etc.)
but details differ each time
network diagramsGeneral flow between statesshow different paths through system
network diagrams ctd.what leads to whatwhat happens whenincluding branches
more task oriented then hierarchy
wider stillbetween applicationsand beyond ...
wider still style issues:platform standards, consistencyfunctional issuescut and pastenavigation issuesembedded applicationslinks to other apps the web
screen design and layoutbasic principlesgrouping, structure, orderalignmentuse of white space
basic principlesaskwhat is the user doing?thinkwhat information, comparisons, orderdesignform follows function
available toolsgrouping of itemsorder of items decoration - fonts, boxes etc.alignment of itemswhite space between items
grouping and structurelogically together physically together
order of groups and itemsthink! - what is natural order
should match screen order!use boxes, space etc.set up tabbing right!
decorationuse boxes to group logical itemsuse fonts for emphasis, headingsbut not too many!!
alignment - textyou read from left to right (English and European) align left hand side
Willy Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior PrincessWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princessfine for special effects but hard to scanboring butreadable!
alignment - namesUsually scanning for surnames make it easy!
Alan DixJanet FinlayGregory AbowdRussell BealeAlan DixJanet FinlayGregory AbowdRussell BealeDix , AlanFinlay, JanetAbowd, GregoryBeale, Russell
alignment - numbers
which is biggest?
532.56 179.3 256.317 15 73.948 1035 3.142 497.6256
alignment - numbers
visually: long number = big number
align decimal pointsor right align integers
627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34
multiple columnsscanning across gaps hard: (often hard to avoid with large data base fields)
sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85
multiple columns - 2use leaders
multiple columns - 3or greying (vertical too)
sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85
sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85multiple columns - 4or even (with care!) bad alignment
white space - the counter
WHAT YOU SEE
white space - the counter
WHAT YOU SEE
space to separate
space to structure
space to highlight
physical controlsgrouping of itemsdefrost settingstype of foodtime to cook
physical controlsgrouping of itemsorder of itemstype of heatingtemperaturetime to cookstart
physical controlsgrouping of itemsorder of items decorationdifferent colours for different functionslines around related buttons
physical controlsgrouping of itemsorder of items decorationalignmentcentered text in buttons ? easy to scan ?? easy to scan ?
physical controlsgrouping of itemsorder of items decorationalignmentwhite spacegaps to aid grouping
user action and controlentering informationknowing what to doaffordances
entering informationforms, dialogue boxespresentation + data inputsimilar layout issuesalignment - different label lengths
logical layoutuse task analysis groupingsnatural order for entering informationtop-bottom, left-right (depending on culture)set tab order for keyboard entry?
knowing what to dowhat is active what is passivewhere do you clickwhere do you typeconsistent style helps-company and platform guidelinese.g. web underlined linkslabels and iconsstandards for common actionslanguage bold = current state or action
affordancespsychological termfor physical objectsshape and size suggest actionspick up, twist, throwalso cultural buttons afford pushing for screen objectsbuttonlike object affords mouse clickphysical-like objects suggest useculture of computer useicons afford clickingor even double clicking not like real buttons!
appropriate appearancepresenting informationaesthetics and utilitycolour and 3Dlocalisation & internationalisation
presenting informationpurpose matterssort order (which column, numeric alphabetic)text vs. diagramscatter graph vs. histogram
use paper presentation principles!
but add interactivitysoftens design choices
aesthetics and utilityaesthetically pleasing designsincrease user satisfaction and improve productivitybeauty and utility may conflictmixed up visual styles easy to distinguishclean design little differentiation confusingbackgrounds behind text good to look at, but hard to readbut can work togethere.g. the design of the counterin consumer products key differentiator
colour and 3Dboth often used very badly!colourolder monitors limited palettecolour over used because it is therebeware colour blind!use sparingly to reinforce other information3D effectsgood for physical information and some graphsbut if over used e.g. text in perspective!! 3D pie charts
bad use of colourover use - without very good reason (e.g. kids site)colour blindnesspoor use of contrastdo adjust your set!adjust your monitor to greys onlycan you still read your screen?
bad use of colour
across countries and cultureslocalisation & internationalisationchanging interfaces for particular cultures/languagesglobalisationtry to choose symbols etc. that work everywhere
simply change language?use resource database instead of literal text but changes sizes, left-right order etc.deeper issuescultural assumptions and valuesmeanings of symbolse.g tick and cross +ve and -ve in some cultures but mean the same thing (mark this) in others
iteration and prototypinggetting better and starting well
prototypingyou never get it right first timeif at first you dont succeed
pitfalls of prototypingmoving little by little but to where
1. need a good start point 2. need to understand what is wrong
Use a pocket alarm clock or wristwatch to set yourself alarms every 15 minutes one working day. Write down exactly what you are doing.
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 rapidly2.she realises she must immediately change the reactor target pressure to correct this3.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 red5.she moves across to the Manual Override panel on the far left of the main reactor control panel