2 interaction design basics 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!
3 interactions and interventions design 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, …, stapledesigning interventions not just artefactsnot just the system, but also …documentation, manuals, tutorialswhat we say and do as well as what we make
4 achieving goals within constraints what is design?achieving goals within constraintsgoals - purposewho is it for, why do they want itconstraintsmaterials, platformstrade-offs
5 understand your materials golden rule of designunderstand your materials
6 for Human–Computer Interaction understand your materialsunderstand computerslimitations, capacities, tools, platformsunderstand peoplepsychological, social aspectshuman errorand their interaction …
7 To err is human accident reports .. but … human ‘error’ is normal aircrash, industrial accident, hospital mistakeenquiry … blames … ‘human error’but …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!
9 The process of design scenarios task analysis what is wanted interviewsethnographywhat is therevs.what is wantedguidelinesprinciplesdialogue notationsprecise specificationarchitecturesdocumentationhelpevaluationheuristicsscenarios task analysiswhat is wantedanalysisdesignimplementand deployprototype
10 Steps … requirements analysis design iteration and prototyping what 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
11 … 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
12 know your user personae cultural probes user focusknow your userpersonaecultural probes
13 know your user who are they? probably not like you! talk to them watch themuse your imagination
14 persona description of an ‘example’ user use as surrogate user not necessarily a real personuse as surrogate userwhat would Betty thinkdetails mattermakes her ‘real’
15 cultural probes direct observation probe packs used to … sometimes 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 themused to …inform interviews, prompt ideas, enculture designers
16 stories for design use and reuse scenariosstories for designuse and reuse
17 scenarios stories for design linearity communicate with others validate other modelsunderstand dynamicslinearitytime is linear - our lives are linearbut don’t show alternatives
18 scenarios … what will users want to do? step-by-step walkthrough what can they see (sketches, screen shots)what do they do (keyboard, mouse etc.)what are they thinking?use and reuse throughout design
19 … explore the depths explore interaction explore cognition what happens whenexplore cognitionwhat are the users thinkingexplore architecturewhat is happening inside
20 use scenarios to .. communicate with others validate other models designers, clients, usersvalidate other models‘play’ it against other modelsexpress dynamicsscreenshots – appearancescenario – behaviour
21 linearity Scenarios – one linear path through system Pros: Cons: So: 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 unintendedSo:use several scenariosuse several methods
22 local structure – single screen global structure – whole site startthe systemsinfo and helpmanagementmessagesadd userremove usernavigation designlocal structure – single screenglobal structure – whole sitemainscreenremoveuserconfirmadd user
24 the web … widget choice screen design navigation design environment elements and tags<a href=“...”>page designsite structurethe web, browser, external links
25 physical devices widget choice screen design navigation design environmentcontrolsbuttons, knobs, dialsphysical layoutmodes of devicethe real world
26 think about structure within a screen local global wider still later ...locallooking from this screen outglobalstructure of site, movement between screenswider stillrelationship with other applications
27 from one screen looking out localfrom one screen looking out
31 goal seekinggoalstart… try to avoid these bits!
32 four golden rules knowing where you are knowing what you can do knowing where you are goingor what will happenknowing where you’ve beenor what you’ve done
33 where you are – breadcrumbs shows path through web site hierarchytop level categorysub-categoryweb sitethis pagelive linksto higherlevels
34 beware the big button trap thingsthe thing fromouter spacemore thingsother thingswhere do they go?lots of room for extra text!
35 modes lock to prevent accidental use … if lock forgotten 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 !
36 between screens within the application globalbetween screenswithin the application
37 hierarchical diagrams the systeminfo and helpmanagementmessagesadd userremove user
38 hierarchical diagrams ctd. parts of applicationscreens or groups of screenstypically functional separationthe systemsinfo and helpmanagementmessagesadd userremove user
39 navigating hierarchies deep is difficult!misuse of Miller’s 7 ± 2short term memory, not menu sizeoptimal?many items on each screenbut structured within screensee /e3/online/menu-breadth/
40 what does it mean in UI design? think about dialoguewhat does it mean in UI design?Minister: do you name take this woman …Man: I doMinister: do you name take this man …Woman: I doMinister: I now pronounce you man and wife
41 what does it mean in UI design? think about dialoguewhat does it mean in UI design?marriage servicegeneral flow, generic – blanks for namespattern of interaction between peoplecomputer dialoguepattern of interaction between users and systembut details differ each timeMinister: do you name take this woman …
42 network diagrams show different paths through system main screen removeuserconfirmadd usershow different paths through system
43 network diagrams ctd. what leads to what what happens when including branchesmore task oriented then hierarchymainscreenremoveuserconfirmadd user
44 between applications and beyond ... wider stillbetween applicationsand beyond ...
45 wider still … style issues: functional issues navigation issues platform standards, consistencyfunctional issuescut and pastenavigation issuesembedded applicationslinks to other apps … the web
46 screen design and layout Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russellscreen design and layoutbasic principlesgrouping, structure, orderalignmentuse of white spaceABCDEFGHIJKLMNOPQRSTUVWXYZ
47 basic principles ask think design what is the user doing? what information, comparisons, orderdesignform follows function
48 available tools grouping of items order of items decoration - fonts, boxes etc.alignment of itemswhite space between items
50 order of groups and items think! - what is natural ordershould match screen order!use boxes, space etc.set up tabbing right!instructionsbeware the cake recipie syndrome! … mix milk and flour, add the fruit after beating them
51 decoration use boxes to group logical items use fonts for emphasis, headingsbut not too many!!ABCDEFGHIJKLMNOPQRSTUVWXYZ
52 alignment - text you read from left to right (English and European) align left hand sideboring butreadable!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 scan
53 alignment - names Usually scanning for surnames make it easy! Alan DixJanet FinlayGregory AbowdRussell BealeDix , AlanFinlay, JanetAbowd, GregoryBeale, RussellAlan DixJanet FinlayGregory AbowdRussell Beale
54 alignment - numbersthink purpose!which is biggest?
55 alignment - numbersvisually:long number = big numberalign decimal pointsor right align integers
56 multiple columnsscanning across gaps hard: (often hard to avoid with large data base fields)sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
57 multiple columns - 2 use leaders sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
65 physical controls grouping of items defrost settings type of food time to cookdefrost settingstype of foodtime to cook
66 physical controls grouping of items order of items type of heating temperaturetime to cookstart11) type of heating22) temperature33) time to cook44) start
67 physical controls grouping of items order of items decoration different colours for different functionslines around related buttonsdifferent colours for different functionslines around related buttons (temp up/down)
68 physical controls grouping of items order of items decoration alignmentcentered text in buttons ? easy to scan ?centred text in buttons? easy to scan ?
69 physical controls grouping of items order of items decoration alignmentwhite spacegaps to aid groupinggaps to aid grouping
70 user action and control entering informationknowing what to doaffordances
71 ? entering information forms, dialogue boxes logical layout Name:Address:Alan DixLancasterforms, dialogue boxespresentation + data inputsimilar layout issuesalignment - N.B. different label lengthslogical layoutuse task analysis (ch15)groupingsnatural order for entering informationtop-bottom, left-right (depending on culture)set tab order for keyboard entryName:Address:Alan DixLancaster?Name:Address:Alan DixLancasterN.B. see extra slides for widget choice
72 knowing what to do what is active what is passive where do you clickwhere do you typeconsistent style helpse.g. web underlined linkslabels and iconsstandards for common actionslanguage – bold = current state or action
73 affordances psychological term for physical objects for screen objects mug handlepsychological termfor physical objectsshape and size suggest actionspick up, twist, throwalso cultural – buttons ‘afford’ pushingfor screen objectsbutton–like object ‘affords’ mouse clickphysical-like objects suggest useculture of computer useicons ‘afford’ clickingor even double clicking … not like real buttons!‘affords’ grasping
74 appropriate appearance presenting informationaesthetics and utilitycolour and 3Dlocalisation & internationalisation
75 presenting information purpose matterssort order (which column, numeric alphabetic)text vs. diagramscatter graph vs. histogramuse paper presentation principles!but add interactivitysoftens design choicese.g. re-ordering columns‘dancing histograms’ (chap 21)chap10chap5chap1chap14chap20chap8…121617222732namesizechap1chap10chap11chap12chap13chap14…1712512628322sizenamesize
76 aesthetics and utility aesthetically 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 (e.g. iMac)
77 colour and 3D both often used very badly! colour 3D effects older monitors limited palettecolour over used because ‘it is there’beware 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
78 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?
79 across countries and cultures localisation & internationalisationchanging interfaces for particular cultures/languagesglobalisationtry to choose symbols etc. that work everywheresimply 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
Your consent to our cookies if you continue to use this website.