CENG 394 Introduction to Human-Computer Interaction CENG 394 HCI interaction design basics.

  • Published on

  • View

  • Download

Embed Size (px)


  • 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!

  • Central message

    the user

  • 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 seekinggoalstart

  • 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

  • hierarchical diagrams

    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

    think purpose!

    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


  • white space - the counter


  • 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

  • prototyping

  • 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

  • Exercise

    Use a pocket alarm clock or wristwatch to set yourself alarms every 15 minutes one working day. Write down exactly what you are doing.

  • 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 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