Human–Computer Interaction - IT Today The Overall Design Process 59 4.2 Interface Selection Options 61 4.2.1 Hardware Platforms 61 4.2.2 Software Interface Components 65 4.3 Wire-Framing

Human–ComputerInteraction

Fundamentals and Practice

Gerard Jounghyun Kim

Click here to order Human–Computer Interaction: Fundamentals and Practice by Gerard Jounghyun Kim; ISBN 978-1-4822-3389-6

http://www.crcpress.com/product/isbn/9781482233896

CRC PressTaylor & Francis Group6000 Broken Sound Parkway NW, Suite 300Boca Raton, FL 33487-2742

© 2015 by Taylor & Francis Group, LLCCRC Press is an imprint of Taylor & Francis Group, an Informa business

No claim to original U.S. Government works

Printed on acid-free paperVersion Date: 20141208

International Standard Book Number-13: 978-1-4822-3389-6 (Hardback)

This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been made to publish reliable data and information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint.

Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information stor-age or retrieval system, without written permission from the publishers.

For permission to photocopy or use material electronically from this work, please access www.copy-right.com (http://www.copyright.com/) or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. CCC is a not-for-profit organization that pro-vides licenses and registration for a variety of users. For organizations that have been granted a photo-copy license by the CCC, a separate system of payment has been arranged.

Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for identification and explanation without intent to infringe.

Visit the Taylor & Francis Web site athttp://www.taylorandfrancis.com

and the CRC Press Web site athttp://www.crcpress.comClick here to order Human–Computer Interaction: Fundamentals and Practice by Gerard Jounghyun Kim; ISBN 978-1-4822-3389-6


v

Contents

Preface ixabout the author xiii

chaPter 1 IntroductIon 11.1 WhatHCIIsandWhyItIsImportant 11.2 PrinciplesofHCI 3

1.2.1 “KnowThyUser” 31.2.2 UnderstandtheTask 61.2.3 ReduceMemoryLoad 71.2.4 StriveforConsistency 71.2.5 RemindUsersandRefreshTheirMemory 81.2.6 PreventErrors/ReversalofAction 91.2.7 Naturalness 10

1.3 Summary 11References 12

chaPter 2 SPecIfIc hcI GuIdelIneS 132.1 GuidelineCategories 132.2 ExamplesofHCIGuidelines 15

2.2.1 VisualDisplayLayout(GeneralHCIDesign) 152.2.2 InformationStructuringandNavigation

(GeneralHCIDesign) 162.2.3 TakingUserInput(GeneralHCIDesign) 182.2.4 UserswithDisability(UserType) 202.2.5 MobileDevice(PlatformType) 212.2.6 IconsforAppleiOSandFontsforWindows

XP(Vendor) 23



vi Contents

2.2.7 “Earcon”DesignforAuralInterface(Modality) 242.2.8 CellPhones(orMakingCalls)in

Automobiles(Task) 242.2.9 E-Commerce(Application) 25


chaPter 3 human factorS aS hcI theorIeS 293.1 HumanInformationProcessing 29

3.1.1 TaskModelingandHumanProblem-SolvingModel 30

3.1.2 HumanReactionandPredictionofCognitivePerformance 32

3.2 SensationandPerceptionofInformation 373.2.1 Visual 383.2.2 Aural 443.2.3 TactileandHaptic 473.2.4 MultimodalInteraction 52

3.3 HumanBodyErgonomics(MotorCapabilities) 533.3.1 Fitts’sLaw 533.3.2 MotorControl 55

3.4 Others 563.5 Summary 56References 57

chaPter 4 hcI deSIGn 594.1 TheOverallDesignProcess 594.2 InterfaceSelectionOptions 61

4.2.1 HardwarePlatforms 614.2.2 SoftwareInterfaceComponents 65

4.3 Wire-Framing 724.4 “Naïve”DesignExample:NoSheets1.0 73

4.4.1 RequirementsAnalysis 734.4.2 UserAnalysis 744.4.3 MakingaScenarioandTaskModeling 754.4.4 InterfaceSelectionandConsolidation 78


chaPter 5 uSer Interface layer 835.1 UnderstandingtheUILayerandItsExecutionFramework 835.2 InputandOutputattheLowLevel 845.3 ProcessingtheInputandGeneratingOutput 85

5.3.1 Events,UIObjects,andEventHandlers 855.3.2 Event-DrivenProgramStructure 905.3.3 Output 91

5.4 Summary 92Reference 93



viiContents

chaPter 6 uI develoPment toolkIt 956.1 UserInterfaceToolkit 956.2 JavaAWTUIToolkit 966.3 AndroidUIExecutionFrameworkandToolkit 1016.4 Examples:iOSUIKitFrameworkandToolkit 1066.5 Summary 110References 111

chaPter 7 InteractIve SyStem develoPment framework 1137.1 Model,View,andController(MVC) 113

7.1.1 Model 1147.1.2 View 1147.1.3 Controller 1157.1.4 View/Controller 115

7.2 ExampleofMVCImplementation1:SimpleBankApplication 116

7.3 ExampleofMVCImplementation2:NoSheets 1187.4 Summary 119References 120

chaPter 8 uSer Interface evaluatIon 1218.1 EvaluationCriteria 1218.2 EvaluationMethods 124

8.2.1 FocusInterview/Enactment/ObservationStudy 1258.2.2 ExpertHeuristicEvaluation 1278.2.3 Measurement 1308.2.4 SafetyandEthicsinEvaluation 133


chaPter 9 future of hcI 1379.1 Non-WIMP/Natural/MultimodalInterfaces 139

9.1.1 LanguageUnderstanding 1409.1.2 Gestures 1429.1.3 ImageRecognitionandUnderstanding 1489.1.4 MultimodalInteraction 149

9.2 MobileandHandheldInteraction 1539.3 High-EndCloudServiceandMultimodalClient

Interaction 1549.4 Natural/Immersive/ExperientialInteraction 1579.5 MixedandAugmentedReality 1589.6 Others 1599.7 Summary 161References 161

Index 163





ix

Preface

Human–computerinteraction(HCI)isbecomingevermoreimpor-tantininteractivesoftware.Suchsoftwarehaslongbeenevaluatedintermsoftheavailabilityandbreadthofitsfunctionsanditsalgorith-micefficiency.Whilesuchadeveloper’sperspectiveisstillsomewhatvalid,ithasbecomedifficulttodifferentiateamongsimilarsoftwarecomponentsfromsuchanaspectgiventheamazingcomputingper-formanceoftoday’shardwareandthespreadofalgorithmicknowl-edgeandsystemsdevelopmentknow-how.Thussoftwarequalityisincreasinglyjudgedfromtheusers’externalpointofviewintermsoftheir expectations, satisfaction, and experience. This external vieworuserexperiencemaybedefinedinmanyways,butitismostobvi-ousthatithasquitealottodowithhowthesoftwareusersinteractwithitand,hence, itsdesign.HCIwillbecomeevenmorecriticalaseverythingaroundusbecomesdigitalandunknowinglyembed-dedwithinteractivecomputingservicesthatmakeoureverydaylivesmoreexciting,efficient,andconvenient.

Therefore,software(atleastsoftwarethatishighlyinteractiveandtargetedforahighnumberofusers)mustnowbedevelopedwithHCIasoneofitshigherpriorities.However,attheundergraduatelevel,itisstilloftenthecasethatHCIisnotgiventheattentionitdeservesintheeducationoffuturesoftwaredevelopers.Mostentry-levelHCItextbooks are structured aroundhigh-level concepts andguidelines



x PrefaCe

andarenotdirectlytiedtothesoftwaredevelopmentprocess.Someofthesebooksmayofferdesignpatterns,butstudentsattheunder-graduatelevelmightstillfinditpuzzlingastohowHCIfitsinwiththeirbasicsoftwaredevelopmentknowledge.Infact,mostoftheHCIconceptsandguidelinesarefairlycommonsenseorveryeasytocom-prehend.(Afterall,howdifficultwoulditbetomakeoneunderstandthatusersareimportant?)Butitisinthepracticeandwithinthecon-textofactualdevelopmentthatonehastomakethedifficultchoicestoproducehighlyusableinteractivesoftware.

Following this lineof thinking, thisbookwasdesignedaroundtheoveralldevelopmentcycleforaninteractivesoftwareproduct.ItstartswiththerequiredbasicHCIknowledge,whichiskeptascom-pactaspossiblebyincludingonlythebasicessentials(Chapters1–3).TheintentionistoconveythespiritofHCIratherthanalonglistof compiledknowledge.Thebook thenmoves into theapplicationofthisknowledgebyiterativelyformingtheHCIrequirementsandmodelingtheinteractionprocess(Chapter4),designingtheinterface(Chapter4),implementingtheresultingdesign(Chapters5–7),andfinallyevaluatingtheimplementedproduct(Chapter8).Thebookistargetedmainlyatundergraduatestudentsofcomputerscienceandinformationtechnology(IT),butitiseasyenoughtobetakenupbyreadersinotherfields.Someknowledgeofcomputersandprogram-mingwouldbedesirable,butitisnotabsolutelynecessary.(ThosenotinterestedinthedetailedaspectsofimplementationcanskipsomeofChapters5–7.)

Thecorecontentofthebookisbasedontheintroductoryunder-graduate HCI course (advanced junior or senior level) that I havetaughtsince2006atKoreaUniversity.Thefollowingtableshowshowonemightstructureasimilarcourseusingthisbook(orpaceoneselfforself-teaching).

LectureWeeks 1–2 Chapters 1–2: Introduction, HCI principles, and guidelinesWeeks 3–5 Chapter 3: Cognitive science, GOMS, human factors

Homework 1:• Application of HCI principles/guidelines• GOMS exercise

Weeks 6–8 Chapter 4: HCI design



xiPrefaCe

Homework 2:• Project proposal (Part 1): Functional and UI requirements, user analysis, etc.• Design of the app (Part 2): Interaction model, scenario, storyboards, basic

interface design, and wire-framing• Short presentation

Week 9 Midterm exam (Chapters 1–4)Weeks 10–11 Chapters 5–7: Implementation issues

Homework 3:• First implementation of project (using the MVC model)• Presentation (MVC structure) and working demo 1

Weeks 12–13 Chapter 8: EvaluationWeeks 14–15 Chapter 9: Future of HCI

Homework 4:• Self-heuristic evaluation for the project• Carry out and receive peer review for other projects and one’s own project• Redesigning/reimplementation of the project app• Presentation of “before” and “after” and working demo 2

Week 15/16 Final exam

ThePowerPointlectureslidesandthesourcecodefortheexampleapplication used in this book (“No Sheets 1.0,” also downloadablethroughGooglePlay)areavailablethroughthepublisher’sresourcewebsite(seehttp://www.crcpress.com/product/isbn/9781482233896).IsincerelyhopethatthebookwillhelpreaderstodevelopandacquireanHCImindsetasanimportantsteptobecomingacapableITpro-fessionalinthefield.

Thecompletionof this bookwaspossible onlywith thegreatesthelp and understanding from many people. My first thanks go tomygraduatestudentsattheDigitalExperienceLaboratoryatKoreaUniversity(Youngsun,Youngwon,Changhyun,Jong-gil,Sang-yong,Jae-dong,Myong-hee,andEuijae).Theyhelpedmewithproofread-ing,drawingfigures,formatting,andmanyothertasksinthemidstof research,projects,classes,andall theother thingsthatmakeupthelifeofagraduatestudent.MydearcolleaguesintheHCIcom-munity have also given me much valuable feedback regarding thecontentandstructureofthebook.Inparticular,IthankProf.Jee-inKim,Dr. GunLee, Prof. Woontak Woo,Prof. Jinwoo Kim,Prof.JongwonLee,Prof. Jong-ilPark,Prof.SeokheeJeon,Prof.Si-JungKim, Dr. Ungyeon Yang, Prof. Junho Kim, Prof. Chang-GuenSong,Prof.Jin-seokSeo,Prof.SookjinKim,Prof.JunhoChoi,andProf. Mincheol Hwang. I am very grateful for the support of the



xii PrefaCe

KRF-fundedEngineeringCenterofKwangwoonUniversity (head:ProfessorEunsooKim).CRCPresshasbeenverypatientandpromptwithassistanceforallmywritingproblems,nottomentionseeingthevalue inpublishing thisbook.Finally, I thankmywifeSooah,myparents,andmychildren(AndrewandEllen)fortheirunderstandingandjustforbeingthere!



xiii

About the Author

Gerard “Gerry” Jounghyun Kim earned his bachelor’s in electri-calandcomputerengineeringatCarnegieMellonUniversityandhismaster’sandPhDattheUniversityofSouthernCalifornia.HestartedhisacademiccareeratPOSTECHin1996afterashortpostattheU.S.National InstituteofStandardsandTechnologyasaNationalResearchCouncilpostdoctoral fellow.In2006,hemovedtoKoreaUniversity.Since1996,hehasconductedresearchinthefieldofHCI,including virtual and mixed reality, mobile interaction, and multi-modal interaction. Dr. Kim has written more than 100 articles ininternational and domestic journals and conferences, and he is theauthorofDesigning Virtual Reality Systems(Springer,2005).





1

1IntroductIon

1.1 What HCI Is and Why It Is Important

Human–computer interaction (HCI) is a cross-disciplinary area (e.g.,engineering,psychology,ergonomics,design)thatdealswiththetheory,design,implementation,andevaluationofthewaysthathumansuseandinteractwithcomputingdevices.Interactionisaconcepttobedistinguishedfromanothersimilarterm,interface.Roughlyspeaking,interactionreferstoanabstractmodelbywhichhumansinteractwiththecomputingdeviceforagiventask,andaninterfaceisachoiceoftechnicalrealization(hard-wareorsoftware)ofsuchagiveninteractionmodel.Thus,theletterIinHCIreferstobothinteractionandinterface,encompassingtheabstractmodelandthetechnologicalmethodology(Figure 1.1).

HCIhasbecomemuchmoreimportantinrecentyearsascomput-ers(andembeddeddevices)havebecomecommonplaceinalmostallfacetsofourlives.Asidefrommerelymakingthenecessarycompu-tationalfunctionalitiesavailable,theearlyfocusofHCIhasbeeninhowtodesigninteractionandimplementinterfacesforhighusability.Thetermhigh usabilitymeansthattheresultinginterfacesareeasyto

System

Software HardwareWindow

MetaphorWidget

MonitorMouse

Keyboard......

...

Navigation, Selection,Manipulation, Data Entry

Interface

Interaction Model

Task Sequence, Context,Hierarchy, Level of

Detail, etc.

Figure 1.1 The distinguishing concepts of interaction (model) and interface.



2 Human–ComPuter InteraCtIon

use,efficientforthetask,ensuresafety,andleadtoacorrectcomple-tionofthetask.Usableandefficientinteractionwiththecomputingdeviceinturntranslatestohigherproductivity.

Thesimpleaestheticappealofinterfaces(whilesatisfyingtheneedforusability)isnowacriticaladdedrequirementforcommercialsuc-cess aswell.The familyofdistinctlydesignedApple®products is agoodexample.Appleproductsareattractiveandhavecreatedamulti-tudeoffaithfulfollowerseventhoughtheirfunctionalitymaybevir-tuallyequaltotheircompetitors.Inthiscontext,theconceptofuser experience(UX)haslatelybecomeabuzzword,anotionthatnotonlyencompassesthefunctionalcompleteness,highusability,andaestheticappealoftheinteractiveartifact,butalsoitsseamlessintegrationintoone’slifestyleorevencreatinganewonearoundit(Figure 1.2).

AlessacknowledgedfactishowHCIhashadahugeimpactinthehis-toryofcomputingandchangedourdailylives.Itwasprobablytheinven-tion(orrediscovery)ofthemousethatwasthelinchpininthepersonal

Share pictures/videos

Edit pictures/videos

Take pictures/videosManage

pictures/videos

Voice activation

(a) (b)

(c) (d)

Figure 1.2 Goals of human–computer interaction (HCI): (a) functional completeness (Apple iPhone 5s, http://www.apple.com/iphone-5s), (b) high usability (Microsoft® Pixelsense, http://blogs.msdn.com/b/pixelsense), (c) aesthetic appeal (Apple iPhone 5s), and (d) compelling user experience (UX) (Microsoft Kinect, http://www.xbox.com/ko-KR/Kinect).



3IntroduCtIon

computerrevolution,makingtheoperationofacomputer intuitiveandmucheasierthantheprevioussystemofkeyboardcommands.Thespread-sheetinterfacemadebusinesscomputingahugesuccess.TheInternetphe-nomenoncouldnothavehappenedwithout theweb-browser interface.Smartphones,withtheirtouch-orientedinterfaces,havenearlyreplacedthe previous generation of feature phones. Body-based and action-ori-entedinterfacesarenowintroducingnewwaystoplayandenjoycomputergames.HCIstillcontinuestoredefinehowweview,absorb,exchange,create,andmanipulateinformationtoouradvantage(Figure 1.3).

1.2 Principles of HCI

Despiteitsimportance,goodHCIdesignisgenerallydifficult,mainlybecause it isamultiobjective task that involves simultaneousconsider-ationofmanythings,suchasthetypesofusers,characteristicsof thetasks,capabilitiesandcostofthedevices,lackofobjectiveorexactquan-titativeevaluationmeasures,andchangingtechnologies,tonamejustafew.Aconsiderableknowledgeinmanydifferentfieldsisrequired.OvertherelativelyyounghistoryofHCI, researchersanddevelopers in thefield have accumulated and established basic principles for good HCIdesigninhopesofachievingsomeofthemainobjectives(asawhole)thatwerelaidoutintheprevioussection.TheseHCIprinciplesaregeneral,fundamental,andcommonsensical,applicabletoalmostanyHCIdesignsituation.Here,weprovideashortreviewofthemainHCIprinciples.

1.2.1 “Know Thy User”

TheforemostcreedinHCIistodeviseinteractionandinterfacesaroundthetargetusers.Thisoverallconceptwaswellcapturedbythephrase,

Figure 1.3 The evolution of interfaces in the course of the history of computing (i.e., terminal and keyboard, graphic user interface and mouse, and handheld and touch-based interface). (Courtesy of Cox, J., https://www.flickr.com/photos/15587432@N02/3281139507, Melbourne, FL.)




“Know thyuser,” coinedbyHansen [1] in1971, even though the so-called user-centered design approach has become a buzzword only inrecentyears.Thisprinciplesimplystatesthattheinteractionandinterfaceshouldcatertotheneedsandcapabilitiesofthetargetuserofthesystemindesign.However,aseasyasthissounds,itismoreoftenthecasethattheHCIdesignersandimplementersproceedwithoutafullunderstand-ingof theuser, forexample,by justguessingandpretendingtoknowandbeabletopredicthowtherepresentativeusermightrespondtoone’sdesign.Ideally,comprehensiveinformation(e.g.,age,gender,educationlevel,socialstatus,computingexperience,culturalbackground)abouttherepresentativetargetusershouldbecollectedandanalyzedtodeterminetheirprobablepreferences,tendencies,capabilities(physicalandmental),andskilllevels.Suchinformationcanbeusedtoproperlymodelinterac-tionandpicktherightinterfacesolutionforthetargetusers.

Considerasituationwhereadeveloperisworkingtochangeaninter-face,supposedlytoachievehigherusability.However,wemightneedtorememberthatwhileyoungadultsareextremelyadeptatandopentoadoptingnewinterfaces,oldergenerationsaremuchlessso.Hereisanotherexample.Malesaregenerallyknowntobebetterthanfemalesintermsofspatialabilityand,assuch,onemightconsidersuchafactinemployingthree-dimensional(3-D)userinterfaces.However,otherstudiespointtofemalesmajoringinengineeringandsciencetopossessanequivalentlevelofspatialabilityastheirmalecounterparts[2].Sosometimes,conventionalwisdomalonemaynotbesufficienttowar-rantproperinterfacedesign.Theseexamplesillustratethatthereareagreatmanyaspectsthatneedtobeconsideredinthisregard.Ifadirectfield study isnot feasible, anexperiencedandhumbleHCIdesignerwillatleasttrytoleveragethevastknowledgeavailablefromcognitivepsychology,ergonomics,andanthropomorphicdatatoassessthecapa-bilitiesandcharacteristicsofthetargetusergroup.Figure 1.4showsexamplesofuser-centereddesignsofwebpagesforkidsandtheelderly.

Arelated(orperhapsevenopposing)notiontotheuser-centereddesignistheconceptof“universalusability,”whichroughlypromotes“humane”interfacesthatcatertoawide(ratherthanaspecific)rangeofusers,i.e.,acrossagegroups,skilllevels,culturalbackgrounds,anddisability levels. Such a notion has become almost required in ouradvancedmulticulturalsocieties.However,aswonderfulasitsounds,it is generally very difficult to achieve this with a single interface.



5IntroduCtIon

Usually,universalusability is achievedby justifying the investmentrequired to build separate interfaces for distinct user groups. Forexample,inadvancedcountries,manygovernmentwebpagesarenowlegally required toprovide interfaces indifferent languages and forcolor-blind and visually challengedusers (Figure 1.5).Many inter-activesystemsprovidebothmenu-drivencommandsfornovicesandkeyboard-basedhotkeysforexperts(Figure 1.6).

(a) (b)

Figure 1.4 Examples of user-centered designs of web pages for (a) kids (courtesy of Junior Naver, http://jr.naver.com), and (b) the elderly (courtesy of SilverNet News, http://www.silvernews.or.kr).

(a) (b)

Figure 1.5 Two different interfaces to achieve universal usability (one in Korean and the other in English). (From the Korean Ministry of Health and Welfare, http://english.mw.go.kr/front_eng/index.jsp.)

Figure 1.6 An interface providing both menus (for novice users) and hot keys (for expert users).




1.2.2 Understand the Task

Anotheralmost-commonsensicalprincipleistobaseHCIdesignontheunderstandingofthetask.Thetermtask referstothe jobtobeaccomplishedbytheuserthroughtheuseoftheinteractivesystem.Infact,understandingthetaskathandiscloselyrelatedtotheinterac-tionmodelinganduseranalysis. It reallyboilsdownto identifyingthesequenceandstructureofsubtasksatanabstractionlevelappro-priateforthetypicaluserwithinthelargerapplicationcontext.Takethesubtask(foralargerapplication)for“changingtheWi-Ficonnec-tionaccesspoint”forasmartphone.Foranexpertuserexperiencedincomputernetworks,thetaskmightbemodeledwithdetailedsteps,askingtheusertoselectfromapoolofavailablenearbyaccesspointsbasedontheircharacteristicssuchasthesignalstrength,bandwidth,securitylevel,andsoforth.Ontheotherhand,foracasualuser,thesubtaskmightonlyinvolveenteringapasswordfortheautomaticallyselectedaccesspoint(Figure 1.7).

Noteagainthat the task(or,equivalently, the interaction)modelmustideallycomefromtheuser.Differentuserswillhavedifferentmentalmodelsofthetaskathand,andthismustbereflectedinthestructureoftheinterfacetosimplifyimplementationforallusers.Wewillstudytheprocessof task/interactionmodeling inChapter2 inmoredetail.However,itisnotalwaysthecasethatmodelinginterac-tionaftertheuseristhemostefficientapproach.Onemustremem-ber that humans are very adaptive and, as such, a nonuser-based

InvokeInternet Browser

Invoke InternetBrowser

Wireless LANSetup

Select AccessPoint (AP)

Enter Password

Enter Password

Show APCharacteristics

(Signal strength, Bandwidth,Security level, etc.)

(a) Novice

(b) Expert

Figure 1.7 Two interaction models at different levels of detail for the task of “connecting to the Internet from a smartphone,” depending on the user type.



7IntroduCtIon

task/interactionmodelmaysometimesbedevelopedbasedsolelyonthegeneralhumancapacity.

1.2.3 Reduce Memory Load

Designinginteractionwithaslittlememoryloadaspossibleisaprinciplethatalsohasatheoreticalbasis.Humansarecertainlymoreefficientincarryingouttasksthatrequirelessmemoryburden,longorshortterm.Keepingtheuser’sshort-termmemoryloadlightisofparticularimpor-tancewithregardtotheinterface’sroleasaquickandeasyguidancetothecompletionofthetask.Thecapacityofthehuman’sshort-termmemory(STM)isabout5–9chunksofinformation(oritemsmeaning-fulwithrespecttothetask),famouslyknownasthe“magicnumber”[3].Lightmemoryburdenalso leadsto lesserroneousbehavior.Thisfactiswellappliedtointerfacedesign,forinstance,inkeepingthenum-berofmenuitemsordepthtolessthanthisamounttomaintaingooduserawarenessoftheongoingtaskorinprovidingremindersandstatusinformationcontinuouslythroughouttheinteraction(Figure 1.8).

1.2.4 Strive for Consistency

Inthelongerterm,onewaytounburdenthememoryloadistokeepconsistency[4].Thisappliesto(a)bothwithinanapplicationandacross

Figure 1.8 Interfaces designed for minimal short-term memory: (a) a menu system with fewer than 10 items (left) and (b) categorization by colors, areas, icons, and labels. Badges are used to display status information such as the current weather (see circled portions) and number of unread mails as a constant reminder. (From Microsoft®, Microsoft Metro interface, http://www.microsoft.com.)




different applications and (b) both the interaction model and inter-face implementation. For instance, the user is likely to get confusedandexhibiterroneousresponsesifthesamesubtaskisinvolved,atdif-ferenttimes,fordifferentinteractionstepsorinterfacemethods.Notethattheexactsamesubtasksmayappearacrossdifferentapplicationsaswell.Asidefrombeingabletorememberwhattodo,consistencyandfamiliarityalsoleadtohigheracceptabilityandpreference.OnewaytheMicrosoftWindows®–basedapplicationsmaintaintheircompetitive-nessisbypromotingconsistentandfamiliarinterfaces(Figure 1.9).

1.2.5 Remind Users and Refresh Their Memory

Anysignificanttaskwillinvolvetheuseofmemory,soanothergoodstrategy is to employ interfaces that give continuous reminders ofimportant information and thereby refresh the user’s memory. Thehumanmemorydissipatesinformationquitequickly,andthisisespe-ciallytruewhenswitchingtasksinmultitaskingsituations(whichisa

(a)

(b)

Figure 1.9 (a) A consistent look of the interface within an application (a game called Subway Surfers, https://play.google.com/store/apps/details?id=com.kiloo.subwaysurf) and (b) a consistent interface between Microsoft PowerPoint and Word.


9IntroduCtIon

veryprevalentformofinteractionthesedays).Infact,researchshowsthatourbraininternallyrehearsesinformationencodingduringmul-titasking[5].Evenasingletaskmayproceedindifferentcontextualspans.Forinstance,inanonlineshoppingapplication,onemightcyclethrough the entry of different types of information: item selection,deliveryoptions,address,creditcardnumber,numberofitems,etc.Tomaintaintheuser’sawarenessof thesituationandfurtherelicitcor-rectresponses, informative,momentary,orcontinuousfeedbackwillrefreshtheuser’smemoryandhelptheusercompletethetaskeasily.

Oneparticulartypeofinformativefeedback(asidefromthecur-rentstatus)isthereaffirmationoftheuseractiontosignaltheclosureofalargerprocess[6].Anexamplemightbenotonlyexplicitlycon-firming the safe receiptof a credit cardnumber,but also signalingthat thebookorder is complete (and “closed”).Such a closurewillbringsatisfactionbymatchingtheuser’smentalpictureoftheongo-inginteractiveprocess(Figure 1.10).

1.2.6 Prevent Errors/Reversal of Action

Whilesupportingaquickcompletionofthetaskisimportant,error-freeoperationisequallyimportant[6].Assuch,theinteractionandinterfaceshouldbedesignedtoavoidconfusionandmentaloverload.Naturally, allof theaforementionedprinciples applyhere. Inaddi-tion,oneeffectivetechniqueistopresentorsolicitonlytherelevantinformation/actionasrequiredatagiventime.Inactivemenuitemsare good examples of such a technique. Also, having the systemrequire the user to choose from possibilities (e.g., menu system) is

Figure 1.10 Reaffirming the user’s action (i.e., credit card number correctly and securely entered) and a larger interactive process (i.e., the book purchase is complete).




generallyasaferapproachthantorelyonrecall(e.g.,directtextinput)(Figure 1.11).

Despiteemployingsomeoftheprinciplesandtechniquesdescribedhere,thereisalwaysachancethattheuserwillmakemistakes.Thus,averyobviousbuteasy-to-forgetfeatureistoallowaneasyreversalofaction.Thisputstheuserintoacomfortablestateandincreasesusersatisfactionaswell(Figure 1.12).

1.2.7 Naturalness

ThefinalmajorHCIprinciple is to favor “natural” interaction andinterfaces.Naturalnessreferstoatraitthatisreflectiveofvariousoper-ationsinoureverydaylife.Forinstance,aperfectHCImayonedaybe realizedwhenanatural language–basedconversational interfaceispossible,becausethisistheprevalentwaythathumanscommuni-cate.However,itcanbetrickytodirectlytranslatereal-lifestylesandmodesofinteractiontoandforinteractionwithacomputer.Perhapsabetterapproachistomodelinteraction“metaphorically”tothereal-lifecounterpart,extractingtheconceptualandabstractessenceofthetask.Forinstance,Figure 1.13showsaninterfacecalledtheARCBall[7]forrotatinganobjectin3-Dspaceusingamouse(2-Ddevice).In

Figure 1.11 Preventing errors by presenting only the relevant information at a given time (inactive menu items) and making selections rather than enforcing recall or full manual input specification.

Figure 1.12 Making the user comfortable by always allowing an easy reversal of action.



11IntroduCtIon

ordertorotate,theselectedobjectisoverlaidwithandenclosedbyatransparentsphere,andtheuserdragsonthesurfaceofthespheretorotatetheobjectinside.Onemightconsiderthisrotationtechniquetobemetaphoricbecause itabstractstheinteractionobject intotheshapeofasphere,themostrotationalobjectweknow.

Anaturalormetaphoricinterface(assumingthatthemetaphorisnotcontrived)willalsohaveaffordance,aproperty(oradditionalcues)thatappealstoourinnateperceptionandcognition,thusmakingitsointuitivethattheinterfacewouldrequirealmostnolearning[4].IntheexampleoftheARCBall,thesphericalshapeoftherotatorGUImaybe regarded toexhibitahigh levelofaffordance, requiringnoexplanationastohowtorotatetheobject.

1.3 Summary

Inthischapter,IhaveintroducedthefieldofHCI,namelyitsobjec-tiveandimportance.Wealsohavereviewedsomeofthemainhigh-levelprinciplesofHCIandpresentedsomerelevantexamples.Theseprinciplesareoftenbasedonorarejustmanifestationsofdeepertheo-ries in cognitive science and ergonomics. However, they are trans-formed intomoredetailed anddirectly usable guidelineswhenputintoactualpracticeforthespecificpurposeofdesigninganeffectiveinterface.InChapters2and3,wetakealookattheseguidelinesand

x-axis

z-axis

y-axis

Figure 1.13 ARCBall: 3-D object rotation by using the sphere metaphor. It is also very intuitive with a high level of affordance. (From Shoemake, K., Graphics Interface, 92, 151–156, 1992 [7].)




theories,respectively,astheyareessentialknowledgerequiredfortheHCIdesignprocess,whichwewillbegintoaddressinChapter4.

References 1. Hansen,WilfredJ.1971.Userengineeringprinciplesforinteractivesys-

tems.InAFIPS ’71 (Fall) Proceedings of the November 16–18, 1971, Fall Joint Computer Conference,523–32.NewYork:ACM.

2. Eisenberg,TheodoreA.,andRobertL.McGinty.1977.Onspatialvisu-alizationincollegestudents.Journal of Psychology95(1):99–104.

3. Miller,GeorgeA.1956.Themagicalnumberseven,plusorminustwo:Some limits on our capacity for processing information. Psychological Review63(2):81–97.

4. Norman,DonaldA.2002.The design of everyday things.NewYork:FirstBasicPaperback.(Orig.pub.1988asPsychology of everyday things.NewYork:BasicBooks.)

5. Salvucci,DarioD., andNeilsA.Taatgen.2010.The multitasking mind.Oxford,UK:OxfordUniversityPress.

6. Shneiderman,Ben,andCatherinePlaisant.2004.Designing the user inter-face: Strategies for effective human–computer interaction. 4th ed. Boston:AddisonWesley.

7. Shoemake,Ken.1992.ARCBALL:Auserinterfaceforspecifyingthree-dimensionalorientationusingamouse.Graphics Interface92:151–56.




Documents

Human–Computer Interaction - IT Today The Overall Design Process 59 4.2 Interface Selection Options 61 4.2.1 Hardware Platforms 61 4.2.2 Software Interface Components 65 4.3 Wire-Framing