F:MenuSelection,FormFillInandDialogBoxes

61
 TaskRelatedOrganization

"Theprimarygoalformenu,formfillinanddialog
boxdesignersistocreateasensible,
comprehensible,memorable,andconvenient
organizationrelevanttotheuser'stask."

62
 SingleMenus

Choosebetween>=2itemsorallowmultipleselections.

BinaryMenus:
Mnemonicletters.
RadioButtons.
ButtonChoice.

3.Whoinventedthetelephone?
oThomasEdison
oAlexanderGrahamBell
oGeorgeWestinghouse

63
 SingleMenus(cont.)

Multipleitemmenus.

Multipleselectionmenusorcheckboxes.

64
 SingleMenus(cont.)

Pulldown,popup,andtoolbarmenus:

Pulldownmenus:
Availabletotheuserbymakingselectionsonatopmenubar.

Keyboardshortcuts:
E.g.,CtrlCimportanttosupportexpertuserefficiency.

Toolbars,iconicmenus,andpalettes:
Offersactionsonadisplayedobject.

Popupmenus:
Appearinresponsetoacheckortapwithapointingdevice.

65
SingleMenus(cont.)

66
 SingleMenus(cont.)

Toseeupdatesfromfriends,interfaceallowsuserstochoosebetweentwo
presentationstyles.

Ontheleftisastaticlistofitemswithagesturalswipeusedtocontrolpaging,andon
therightisadynamicscrollingticker(calledRiver)whichscrollstitlesandimages
acrossthescreen.
67
 SingleMenus(cont.)

Menusforlonglists:

Scrollingmenus,comboboxes,andfisheyemenus:

Scrollingmenusdisplaythefirstportionofthemenuandan
additionalmenuitem(e.g.,anarrow)thatleadstothenext
setofitemsinthemenusequence.

Comboboxescombineascrollingmenuwithatextentry
field.

Fisheyemenusdisplayallofthemenuitemsonthescreenat
once,butshowonlyitemsnearthecursoratfullsize(Mac
OS).

68
 SingleMenus(cont.)
Menusforlonglists(cont.):

Slidersandalphasliders:

Whenitemsconsistofrangesor
numericalvalues,asliderisanatural
choicetoallowtheselectionofavalue.

Thealphasliderusesmultiplelevelsof
granularityinmovingthesliderthumb
andthereforecansupporttensor
hundredsofthousandofitems.

69
 SingleMenus(cont.)

Menusforlonglists(cont.):

Twodimensionalmenus:

Fastandvast2Dmenusgiveusersagoodoverviewof
choices,reducenumberofrequiredactionsandallowrapid
selection.

E.g.,webpagedesign.

610
SingleMenus(cont.)

611
 SingleMenus(cont.)

Embeddedmenusandhotlinks:

Embeddedmenusareanalternativetoexplicitmenus.

Itisnaturaltoallowusersreadingaboutpeople,eventsand
placestoretrievedetailedinformationbyselectingmenusin
context.

Itemsviewedincontext,nodistractingorspacewasting
enumeration.

612
SingleMenus(cont.)

613
 Combinationofmultiplemenus

Linearmenusequencesandsimultaneousmenus:
Linear:
Guidetheuserthroughcomplexdecisionmakingprocess.
E.g.pizzaorderinginterface,cuecardsor"Wizards.
Effectivefornoviceusersperformingsimpletasks.

Simultaneous:
Presentmultipleactivemenusatthesametimeandallows
userstoenterchoicesinanyorder.
Requiremoredisplayspace,butpreferredbyexperienced
users.

614
 Combinationofmultiplemenus(cont.)

Treestructuredmenus:
Formcategoriesofsimilaritemstocreateatreestructure.
Mutuallyexclusivegroupswithidentifiers.

Onlinegrocerystore:dairy,produce,cleaningproductsetc.

Fastretrievalwithproperterminologyandnaturaldesign.
Goodfornoviceorintermittentusers.
Expandingmenusmaintainthefullcontextofeachchoice.
E.g.,wwwapplications.

Expandingmenus,breadthanddepthoftree?

615
 Combinationofmultiplemenus(cont.)

MenuMaps:
Spatialmapstohelpusersstayorientedinalargemenutree.
Effectiveforprovidingoverviewstominimizeuserdisorientation.
E.g.,homepageofwebsites.

AcyclicandCyclicNetworks:
Permitpathsbetweendisparatepartsofmenutree.
Socialrelationships,transportationrouting,scientificjournal
citations.
Cancauseconfusionanddisorientation,cangetlost!

616
 ContentOrganization

Needmeaningfulgroupingofmenuitems,appropriate
layoutdesign,andconsistentlabelsandtitles.
Organizecontent!

Taskrelatedgroupingintreeorganization:
Creategroupsoflogicallysimilaritems,e.g.,countries,statesandcities.
Formgroupsthatcoverallpossibilities,e.g.,heightranges.
Makesurethatitemsarenonoverlapping.
Usefamiliarterminology,butensurethatitemsaredistinctfromone
another.

Noperfectsolutionforallusers!

617
 ContentOrganization(cont.)

ItemPresentationSequence:

Theorderofitemsinthemenuisimportant,andshouldtake
naturalsequenceintoaccountwhenpossible:
Time,numericordering,physicalproperties.

Whencaseshavenotaskrelatedorderings,designermust
choosefrompossibilities:
Alphabeticsequenceofterms.
Groupingofrelateditems.
Mostfrequentlyuseditemsfirst.
Mostimportantitemsfirst.

618
ContentOrganization(cont.)

AdaptivemenusinMicrosoftOffice.

Afontselectionmenuliststhe
recentlyusedfontsnearthetopof
themenu(aswellasinthefulllist),
makingiteasiertoquicklyselect
thepopularfonts.

619
 ContentOrganization(cont.)

Menulayout:notmuchexperimentalresearchonmenulayout,only
subjectivejudgments.

620
 ContentOrganization(cont.)

Menulayout(cont.)

Titles:

Forsinglemenus,useasimpledescriptivetitle.

Fortreestructuredmenus,usethehigherlevelmenuitemsas
titlesforthenextlowerlevelmenu.

E.g.ifamenuitemiscalledBusinessandFinancialServices,
thenextscreenshouldhavethatphraseasitstitle.

621
 ContentOrganization(cont.)

Menulayout:

Phrasingofmenuitems:
Usefamiliarandconsistentterminology.

Ensurethatitemsaredistinctfromoneanother,e.g.,toursand
trips.

Useconsistentandconcisephrasing,e.g.,animal,vegetable.

Bringthekeywordtothefore.

622
 ContentOrganization(cont.)

Menulayout:

Graphiclayoutanddesignconstraints:
Screenwidthandlength.
Displayrate.
Characterset.
Highlightingtechniques.

623
 ContentOrganization(cont.)

Menulayout:

Establishguidelinesforconsistencyofatleastthesemenu
components:
Titles.

Itemplacement.

Instructions.

Errormessages.

Statusreports.

624
 ContentOrganization(cont.)

Menulayout:
Techniques:
Indentation.

Upper/lowercasecharacters.

Symbolssuchas*ortocreateseparatorsoroutlines.

Positionmarkers.

Cascadingorwalkingmenus.

Magiclens.

625
 FastMovementThroughMenus

Keyboardshortcuts:

Supportsexpertuse.

Canmaketranslationtoaforeignlanguagemoredifficult.

Bookmarksinbrowsers.

Userconfiguredtoolbars.

626
 DataEntrywithMenus:FormFillin,Dialog
Boxes,andAlternatives
FormFillin:
Appropriatewhenmanyfieldsofdatamustbeentered:
Allinformationvisibletouser.
Displayresemblesfamiliarpaperforms.
Fewinstructionsarerequiredformanytypesofentries.

Usersmustbefamiliarwith:
Keyboards.
UseofTABkeyormousetomovethecursor.
Errorcorrectionmethods.
Fieldlabelmeanings.
Permissiblefieldcontents.
UseoftheENTERand/orRETURNkey.

Verylittleempiricalwork,designguidelinesfrompractitioners.

627
DataEntrywithMenus:FormFillin,Dialog
Boxes,andAlternatives

628
DataEntrywithMenus:FormFillin,Dialog
Boxes,andAlternatives

629
 DataEntrywithMenus:FormFillin,Dialog
Boxes,andAlternatives

Formatspecificfields:
Leftjustifiedtext,rightjustifiednumbers,aligndecimalpoints.

Codedfields:
Telephonenumbers.
Socialsecuritynumbers.
Times.
Dates.
Dollaramounts(orothercurrency).

630
 DataEntrywithMenus:FormFillin,Dialog
Boxes,andAlternatives
DialogBoxes:
Combinationofmenuandformfillintechniques.

Internallayoutguidelines:
Meaningfultitle,consistentstyle.
Toplefttobottomrightsequencing.
Clusteringandemphasis.
Consistentlayouts(margins,grid,whitespace,lines,boxes).
Consistentterminology,fonts,capitalization,justification.
Standardbuttons(OK,Cancel).
Errorpreventionbydirectmanipulation.

631
 DataEntrywithMenus:FormFillin,Dialog
Boxes,andAlternatives
DialogBoxes(cont.):
ExternalRelationships:
Smoothappearanceanddisappearance.

Distinguishablebutsmallboundary.
Sizesmallenoughtoreduceoverlapproblems.

Displayclosetoappropriateitems.
Nooverlapofrequireditems.

Easytomakedisappear.
Clearhowtocomplete/cancel.

632
 DataEntrywithMenus:FormFillin,Dialog
Boxes,andAlternatives
Noveldesigncombiningmenusanddirectmanipulation:
Piemenus.

Controlmenus.

Markingmenus.

Flowmenus.

Toolglass.

Section6.7.4.

633
AudioMenusandMenusforSmallDisplays

Menusystemsinsmalldisplaysandsituationswhere
handsandeyesarebusyareachallenge.

Audiomenus:
Verbalpromptsandoptiondescriptions.
Inputisnormallyverbalorkeypad.
Notpersistent,likeavisualdisplay,somemorizationisrequired.
Userscanavoidlisteningtooptions.
AutomatedcallerresponsesystemJ

634
AudioMenusandMenusforSmallDisplays

Menuforsmalldisplays:
Entertainment,communicationservices.

Learnabilityisakeyissue.

Hardwarebuttonsfornavigationandselection.

Expectinteractions.

Tapinterface,otheroptions?

Multiplemodesofpresentingsameinformation.

635
AudioMenusandMenusforSmallDisplays

Telephonemenususesoftkeystopresentcontextdependentmenuitems.Theconvention
istoplaceselectionsontheleftsideandback/exitoptionsontherightside.

Hardbuttonscontroltheconnectanddisconnectfunctions.Buttonsfacilitatescrolling
throughlists.Thecurrentpositioninthelistisindicatedontherightsideofthescreen.
636
AudioMenusandMenusforSmallDisplays

TheZumobiinterfaceonamobilephonestartswithfourtilesusingatwolevelzoominteraction
toseetiledetails(leftside).Theusercanchoosetilestoputintheirzoomspace.Whentheyare
familiarwiththeinterface,theycanhaveupto16tiles,usingathreelevelzoominteractiontogo
betweenoverview,zoneview,anddetailview.

Theapplicationaccommodatesthumbuseontouchscreens,numerickeypadsforzonebased
zooming,4wayDPads,andeventhumbrollercontrollers.

637