交互设计-按钮

InteractionDesign

ButtonsProf.Dr.MatthiasRauterbergFacultyIndustrialDesignTechnicalUniversityEindhoveng.w.m.rauterberg@tue.nl04-DEC-20041(c)M.Rauterberg,TU/eKeyreferences/literature:D.Norman(1988)Thepsychologyofeverydaythings.BasicBooks. chapter1D.J.Mayhew(1992)PrinciplesandguidelinesinSoftwareUserInterfaceDesign.PrenticeHall. chapter1:introduction; chapter12:inputandoutputdevices.J.Preece,Y.Rogers,H.Sharp(2002)Interactiondesign-beyondhuman-computerinteraction.JohnWiley&Sons. chapter1:whatisinteractiondesign? chapter2:understandingandconceptualizinginteraction.2(c)M.Rauterberg,TU/eWhatisUser-SystemInteractionabout?systemuserWorkingdomainWorkingsystemGoal:ActualPerformance=>DesiredPerformance3(c)M.Rauterberg,TU/eInterfaceDesignorInteractionDesign?userinteractionsystem4(c)M.Rauterberg,TU/eTrendinInterfaceDesign5(c)M.Rauterberg,TU/eThefunction-formmappingimplementedfunctionsperceivableuserinterfaceformsintendedsemanticperceivedsemanticDMM:=designer’smentalmodelUMM:=user’smentalmodel6(c)M.Rauterberg,TU/eThethreeimportantmappingsUser’sworlddevicepixelworldsemanticfunction-1function-2function-3…function-n7(c)M.Rauterberg,TU/eFeed-forwardFeed-backUser-SystemMapping8(c)M.Rauterberg,TU/eThe‘hardwarecontrol’-’pixelworld’mapping(2)Inputdevicesarethehardwarecomponentsyouuseto"talk"toacomputer.Youusethemtoplacerequests,sendmessages(tothecomputerortootherpeople),movearoundinvirtualworlds,orevenshootat"enemies"insomecomputergames.Afewexamplesofcommonlyusedinputdevicesare:ComputerkeyboardJoystickMicrophoneMousePen(somewith,somewithout,apad)Touch-sensitivescreenTrackballTrackPoint

9(c)M.Rauterberg,TU/eThe‘hardwarecontrol’-’pixelworld’mapping(2)[takenfrom/Lessons/lesson3/lesson3-3.htm]Mouse

Advantage:Movescursoraroundthescreenfasterthanusingkeystrokes.

Disadvantage:Requiresmovinghandfromkeyboardtomouseandback.Repeatedmotioncanleadtocarpaltunnelsyndrome.Trackball

Advantage:Doesnotneedasmuchdeskspaceasamouse.Isnotastiringsincelessmotionisneeded.

Disadvantage:Requiresfinecontroloftheballwithjustonefingerorthumb.Repeatedmotionsofthesamemusclesistiringandcancausecarpaltunnelsyndrome.

Glidepad

Advantage:Doesnotneedasmuchdeskspaceasamouse.Canreadilybebuiltintothekeyboard.Hasfinerresolution.Thatis,toachievethesamecursormovementonscreentakeslessmovementofthefingerontheglidepadthanitdoesmousemovement.Canuseeitherbuttonsortapsofthepadforclicking.

Disadvantage:Thehandtiresfasterthanwithamousesincethereisnosupport.Somepeopledon'tfindthemotionasnaturalasamouse.Pen

Advantage:Canusehandwritinginsteadoftyping.Canusegesturesinsteadoftypingcommandssmallsize.

Disadvantage:Musttraindevicetorecognizehandwriting.Mustlearngesturesortraindevicetorecognizetheonesyoucreate.Canlosethepenwhichisnotusuallyattachedtothedevice.

Touchscreen

Advantage:It'snaturaltodo-reachoutandtouchsomething.

Disadvantage:It'stiringifmanychoicesmustbemade.Ittakesalotofscreenspaceforeachchoicesincefingersarebiggerthancursors.Graphictablet

Advantage:Don'thavetoredrawgraphicsalreadycreated.

Disadvantage:Expensive.10(c)M.Rauterberg,TU/eThe‘hardwarecontrol’-’pixelworld’mapping(3)Natureoffunction11(c)M.Rauterberg,TU/eProsandConsofPointingDevices12(c)M.Rauterberg,TU/eButton-FunctionMapping(1)RecommendedControlsforFunctionsFunctionCategoryControlSelectingmutuallyexclusiveoptionsRadiobuttonsSelectingnon-exclusiveoptionsCheckboxesPerforminganactionCommandbuttonsSelectinganitemfromasetListboxesordrop-downlistboxesEnteringorviewinglargeamounts

ofinformationatthesametimeTablesSettingattributevaluesText-entryfields13(c)M.Rauterberg,TU/eButton-FunctionMapping(2)Examplesfrom/wlintegration/v2_1/devplug/appgui.htm14(c)M.Rauterberg,TU/eHowtodesignthecontextofbutton-use?devicewide:e.g.mousebuttonsplatformwide:e.g.APPLE,MS,etclookandfeelapplicationwide:e.g.MSword,ADOBEphotoshopwindowwide:e.g.pull-downmenudialogboxwide:e.g.ADD,DELETE,OK,CANCELetc15(c)M.Rauterberg,TU/eButton/controldesignrecommendationsControlPlacementPlacethemostfrequentlyaccessedcontrolsnearthebottomoftheform.Theuserinteractsmostoftenwiththeoutputarea,withtheiconsintheoutputarea,andwiththehardkeysonthesystem.Placingcontrolsatthebottomoftheoutputarea/formputsthemascloseaspossibletotheoutputarea,makingthemquickerandeasiertoaccess.PeoplefromWesternculturestendtoreadthescreenfromtoptobottomandlefttoright.Therefore,anythingimportantforuserstoread(ratherthaninteractwith)shouldbenearthetopoftheoutputarea/form.Horizontally,youshouldarrangecontrolssothattheleftmostcontrolisthemostimportant.Donotclutterthescreen.Runningoutofspaceisausuallyasignthatsimplificationisneeded.Squashingalotofcontrolsontheformbyreducingwhitespaceisusuallythewronganswer.Inmostcases,usespacinginsteadoflinesandboxestoseparateuserinterfaceelementsintologicalgroups.Linesandboxesaddtoscreenclutterandactuallymakeasmallscreenhardertoread.LabelsProvidealabelforanycontroloroptionthatrequiresfurtherexplanation.Rightjustifythelabelsandleftjustifythefields.Useboldfontandtitlecapitalizationforlabels.Thatis,capitalizethefirstletterofeachimportantwordinthelabelinthesamewayyouwouldcapitalizethetitleofabook.Forexample,use"SetDate"asalabel,not"Setdate."Neverusealllowercase("setdate")oralluppercase("SETDATE")forlabels.[updatedfromhttp:///dev/support/docs/ui/UIGuide_Front.html]16(c)M.Rauterberg,TU/eTheConceptofNaturalMappingsDefinition[seeNorman,D.,1988,p.75ff]:Adesignsolutionbasedonanaturalmappingsreducestheneedforadditionalexplanatoryinformationinmemory!Naturalmappingsguaranteeaminimumnumberofcognitivetransformationsteps.Ifadesigndependsuponlabels,itmaybefaulty.Labelsareimportantandoftennecessary,buttheappropriateuseofnaturalmappingscanminimizetheneedforthem.Whereverlabelsseemnecessary,consideranotherdesign!17(c)M.Rauterberg,TU/eDesignofLightSwitchPanels(1)Problem:nodirectmappingbetweenswitchesandcorrespondinglamps18(c)M.Rauterberg,TU/eDesignofLightSwitchPanels(2)19(c)M.Rauterberg,TU/eCorrectiveDesign(1)Problem:slidingdoorcandamagetheopen

petrolflap20(c)M.Rauterberg,TU/eCorrectiveDesign(2)Solution:extrabartolocktheslidingdoor21(c)M.Rauterberg,TU/eDesignofDoorHandles22(c)M.Rauterberg,TU/eDesignofShowerFaucetsNaturalmapping:hotwaterleftside

orREDcoldwaterrightside

orBLUEUn-naturalmapping:somethingelse

(seefigure)23(c)M.Rauterberg,TU/eNaturalMapping(1)24(c)M.Rauterberg,TU/eNaturalMapping(2)25(c)M.Rauterberg,TU/eThemostimportantdesignprinciplePerceptionSpaceThephysicalspacewheretheuser’sattentionis.ActionSpaceThephysicalspacewheretheuseractsin.DesignPrinciple:perceptionspaceandactionspacemustcoincide!26(c)M.Rauterberg,TU/eDesignofStoveControls(1)27(c)M.Rauterberg,TU/eDesignofStoveControls(2)28(c)M.Rauterberg,TU/eInteractiveDirectness:thedesktopexamplePulldownmenusPulldownmenusToolbar29(c)M.Rauterberg,TU/eactionspaceperceptionspace30(c)M.Rauterberg,TU/eExplicitversusImplicitDesignThisdesignconceptforaspecificscreenofthehypercardstack“InigoGetsOut”isbasedonexplicitdesign:onlytwobuttonsareusedfornavigation(-->forward,<--backward).31(c)M.Rauterberg,TU/eImplicitDesign:screenfrom“InigoGetsOut”Thisscreenisbasedonimplicitdesignandhasasecond-personperspective:togetthecattoruntotheright,youclickonthecatitself.Theactualimagefrom“InigoGetsOut”hasbeenoverlaidwithdata(theclickmarkers)fromafieldstudyoftheuseofthesysteminaCopenhagenkindergarten.[seeinthebookofJakobNielsen,HyperText&HyperMedia,1990,AcademicPress,p.136]32(c)M.Rauterberg,TU/eExplicitScreenDesign[takenfrom/]33(c)M.Rauterberg,TU/eImplicitScreenDesign[takenfromhttp://www.ferrari-deutschland.de/]34(c)M.Rauterberg,TU/eTheConceptofPerceptualAttractorsToguidetheusersattentionontheinterface,eachvisualattractor(=anyseparateperceivablestructure)isofcrucialimportance,sousethemcarefullyinyourdesigntoavoidnotintendeddistractions.Consequence:youwillendupwithaslimdesign!35(c)M.Rauterberg,TU/eAdesignconceptforvisualattractors36(c)M.Rauterberg,TU/eCorrectiveDesign(1)37(c)M.Rauterberg,TU/eCorrectiveDesign(2)Tomotivateuserstoswitchfromexplicittoimplicitanadditionalexplicitinstructionisnecessary:“Tippen

Sieaufeines

derEC-Symbole”

[“touchononeoftheECsymbols”]38(c)M.Rauterberg,TU/eCorrectiveDesign(3)Onemajorproblemofamixedstyle(explicitplusimplicit)isthatnearlyallusersarenotabletoswitchfromthebuttons(explicit)tothepicturewithtouchsensitiveareas(implicit).Toovercomethisproblemanextraexplicitinstructionisnecessary:

“Waehlen

SiediegewuenschteRegiondurch

Beruehren”

[“selectthedesiredregionbytouching”]buttonarea39(c)M.Rauterberg,TU/eAssignment-1(1groupa5)Inputcontrolsforcomputersystems:

1)getaninternetconnection;2)surfandsearchfordifferentinputdevicesforcomputersystems;3)describethedifferent‘control-button/function’mappingsandclassifythem;4)discussthedifferenttypesandpros/consof‘control-button/function’mappings;5)prepareapresentationofabout10min.40(c)M.Rauterberg,TU/eAssignment-2(1groupa5)Inputcontrolsforhomeconsumerproducts:

1)getadigitalcamera;2)goouttoas