Tải bản đầy đủ - 0 (trang)
Chapter 5.  Doing Things:Actions and Commands

Chapter 5.  Doing Things:Actions and Commands

Tải bản đầy đủ - 0trang

butitabsolutelyhastoworkthewayusersintuitivelyexpectit

to,ortheillusionofdirectmanipulationisbroken.

Allthatsaid,youcandosomecoolthingstomakeyour

interfacelessdullandmoreusable.Yourgoalsshouldbeto

maketherightactionsavailable,labelthemwell,makethem

easytofind,andsupportsequencesofactions.Thereareafew

creativewaystodoit.

First,I'lllistthecommonwaysactionsarerenderedtotheuser.



Buttons

Buttonsareplaceddirectlyontodialogboxesandpages,

andusuallyaregroupedsemantically.(SeetheButton

Groupspattern.)They'rebig,readable,obvious,and

extremelyeasytouseforeventhemostinexperienced

computerusers.Buttheytakeupalotofspaceonthe

interface,unlikemenubarsandpop-upmenus.



Menubars

Menubarsarestandardonmostdesktopapplications.They

generallyshowanapplication'scompletesetofactions,

organizedinamostlypredictableway(suchasFile,Edit,

View).Someactionsoperateontheentireapplication,and

someoperateonindividuallyselecteditems.Menubars

oftenduplicatefunctionalityfoundincontextmenusand

toolbarsbecausetheyareaccessiblescreenreaderscanread

them,keyboardacceleratorscanreachthem,andsoon.

(Accessibilityalonemakesthemindispensableinmany

products.)Menubarsarestartingtoappearinsomeweb

applications,thoughnotascommonlyastheyappearin

desktopsoftware.



Pop-upmenus

Alsoknownascontextmenus,pop-upmenusareraised

witharightmouseclickorsomesimilargestureonpanels

oritems.Theyusuallylistcontext-specific,commonactions,

notalltheactionsthatarepossibleontheinterface.Keep

themshort.



Dropdownmenus

Usersraisethesemenusbyclickingonadropdowncontrol,

suchasacombobox,andyoucanfindthemonmanyweb

pages.However,usingdropdownmenusforactionsis

usuallyabadidea,sincedropdowncontrolsaretypically

usedforsettingstate,notperformingactions.



Toolbars

Thecanonicaltoolbarisalong,thinrowoficonicbuttons.

Oftentheyhaveotherkindsofbuttonsorcontrolsonthem

too,liketextfieldsorDropdownChoosers(seeChapter

7).Iconictoolbarsworkbestwhentheportrayedactions

haveobviousvisualrenderings;whentheactionsreally

needtobedescribedwithwords,tryothercontrols,suchas

comboboxesorbuttonswithtextlabels.Crypticiconsarea

classicsourceofconfusionandunusability.



Links

Linksareusedmostlyonwebpages,butarenowfoundon

manyapplicationstoo.Theyalsocanbeblueunderlined



wordsorphrasesthatmerelylooklikelinks,butactually

areimplementedasbuttons.Thepointisthatanythingblue

andunderlinedlooksclickable;peoplewillfindanduse

them.Thatsaid,manywebapplicationdesignersnowmake

aconsciousefforttoreducepotentialconfusionbysticking

withbuttonsforinvokingactions,andlinkstoshowother

content.



Actionpanels

Youmightknowthemas"taskpanes."Actionpanelsare

essentiallymenusthattheuserdoesn'tneedtopost;

they'realwaysvisibleonthemaininterface.Theyareafine

substitutefortoolbarswhenactionsarebetterdescribed

verballythanvisually.SeetheActionPanelspattern.

Thenthereareinvisibleactions,whichdon'thaveanylabelsat

alltoannouncewhattheydo.Usersneedtoknow(orguess)

thatthey'rethere,unlessyouputwritteninstructionsontheUI.

Therefore,theydon'thelpwithdiscoveryatall.Inotherwords,

userscan'tscanthemtofindoutwhatactionsarepossiblewith

buttons,links,andmenus,theUIactionsareavailablefor

inspection.Userslearnfromthem.Inusabilitytests,I'veseen

manyuserslookatanewproductandmethodicallywalkdown

themenubar,itembyitem,justtofindoutwhatitcando.

Thatsaid,youalmostalwaysneedtouseoneormoreinvisible

actions.Peopleoftenexpecttobeabletodouble-clickonitems,

forexample.Thekeyboard(ortheequivalent)sometimesisthe

onlymeansofaccessforvisuallyimpairedusersandpeople

whocan'tuseamouse.Expertusersofsomeoperating

systemsandapplicationsprefertoworkbytypingcommands

intoashell,and/orbyusingitskeyboardactions.



Double-clickingonitems

Userstendtoviewdouble-clickingaseither"openthisitem"

or"dowhateverthedefaultthingiswiththisitem,"

dependingoncontext.Inagraphicaleditor,forinstance,

double-clickingonanelementoftenmeansopeninga

propertysheetorspecializededitorforit.Double-clicking

anapplication'siconinmostoperatingsystemslaunches

thatapplication.



Keyboardactions

Keyboardshortcuts,suchasthewell-knownControl-Sto

save,shouldbedesignedintomostdesktopapplicationsfor

accessibilityandefficientuse.ThemajorUIplatforms,

includingWindows,Mac,GNOME,andPalmOS,eachhave

styleguidesthatdescribethestandardshortcutsandthey're

allverysimilar.Additionally,menusandcontrolsoftenhave

underlinedaccesskeys,whichletusersreachthosecontrols

withoutmouse-clickingortabbing.(TypetheAltkey,then

theunderlinedletter,toinvoketheseactions.)



Drag-and-drop

Dragginganddroppingitemsonaninterfaceusuallymeans

either"movethishere"or"dothistothat."Inotherwords,

someonemightdragafileontoanapplicationicontosay

"openthisfileinthatapplication."Orshemightdragthat

filefromoneplaceinafilefindertoanotherplace,thus

movingorcopyingtheitem.Drag-and-dropiscontextdependent,butitalmostalwaysresultsinoneofthesetwo

actions.



Typedcommands

Command-lineinterfacesgenerallyallowfreeformaccessto

alltheactionsinthesoftwaresystem,whetherit'sanOSor

anapplication.Iconsiderthesekindsofactions"invisible"

becausemostcommand-lineinterfaces(CLIs)don'teasily

divulgetheavailablecommands.They'renotvery

discoverable,thoughthey'requitepowerfulonceyoulearn

what'savailablemuchcanbedonewithasinglewellconstructedcommand.Assuch,CLIsarebestforusers

committedtolearningthesoftwareverywell.







5.1.PUSHINGTHEBOUNDARIES

Someapplicationidiomsgiveyoufreedomtodesign

nonstandardbuttonsandcontrols.Visualeditors,media

players,applicationsintendedmostlyforexperts,instant

messaging,games,andanythingthat'ssupposedtobefunand

interestingallhaveuserswhomightbecuriousenoughto

figureouthowtouseunusualbutwell-designedinterface

elements.

Wherecanyoubemorecreative?Considertheitemsonthe

firstlistabove;visiblebuttonsandmenususuallyareeasierto

usethankeyboardactions.Generalizingfromthoseitems,

actionscouldbe:

Clickableicons

Clickabletextthatdoesn'tlooklikeabutton

Somethingthatreactswhenthemousepointerrollsoverit

Somethingthatlookslikeitmaybeamanipulableobject

Somethingplacedonalmostanypieceofscreenrealestate

Howmuchcreativitycanyougetawaywithbeforethe

applicationbecomestoohardtofigureout?



Figure5-1.GarageBand



Forareal-lifeexample,lookattheGarageBandapplication,

showninFigure5-1.Alotisgoingoninthisinterface.Some

objectsareobviouslybuttons,liketheplayercontrolsrewind,

play,fastforward,etc.andthescrollbararrows.Youwillfind

someslidersandknobs,too.

Butlookharderatthefarrightofthewindow,betweenthered

lineandthewood-grainedge.Toyoureyes,whatpiecesofthe

interfacelookclickable?Why?Ifyouwant,youcanlookahead

toFigure5-2andcheat.(AndifyoualreadyknowGarageBand,

pleasebearwithme.)



Figure5-2.GarageBandactions



Figure5-2showswhichobjectsontheinterfaceperform

actions.Youclearlycouldn'thaveknownwhattheyalldo,since

thisbookdoesn'tgiveyouthebenefitoftooltips,rollover

cursors,orexperimentation.Butdidyoufigureoutthatsomeof

theseobjectscouldbeclickedormanipulated?I'mguessingyou

did.

How?Youprobablyknowthatinterfacesthatlooklikethisoffer

alotoffunctionalitythroughdirectmanipulation,soyouhave

goodgroundsforjustassumingthateveryinterestingvisual

featuredoessomething.Youmightknowthatsliders,likethe

volumeslideratthebottom,sometimeshave"jumpbuttons"at

theendsandyoumighthaverecognizedthevolumeslideritself

fromiTunes.Youmightguessthattinysquarishiconstendtobe



buttons,oftenforpresentation-relatedactions;Wordand

Powerpointusealotofthem.Youmighthaveseenavertical

linetoppedwithaninvertedtriangleinsomeother

contextmaybemovable,maybenot.(SeetheGuidespatternin

Chapter8.)Butdidn'tthistrianglelooklikeitwasmovable?

Whenanobjectlookslikeitmightletyoudosomething,such

asclickordragit,thenwesayit"affords"performingthat

action.Traditionalraised-edgebuttonsaffordpushing;aslider

thumbaffordsdragging;atextfieldaffordstyping;ablue

underlinedwordaffordsclicking.Andanythingthatreactsto

themousecursoraffordssomething,althoughyoucan't

necessarilytellwhat!

Figure5-2pointsouttheaffordancesintheGarageBand

interface.Thisisanimportantconcept.Insoftwareinterfaces,

theuserdoesn'tgetmanysensorycluesaboutwhatcanbe

tweakedorhandled:visualsgivemostoftheclues,andmouse

rolloversdotherest.Usethemtocommunicateaffordances

well.

Here'ssomespecificdesignadvice:

Followconventionswheneverpossible.ReuseUIconcepts

andcontrolsthatpeoplealreadyknow,likethevolume

slidersintheexample.

Usepseudo-3Dshadinganddropshadowstomakethings

look"raised."

Whenthemousepointerhoversoveritemsthatcanbe

clickedordragged,turnthepointerintosomething

different,likeafingerorahand.

Usetooltips,orsomeotherdescriptivetext,totelltheuser

whattheobjectsunderthemousepointerdo.Ifyoudon't



needthem,that'sgreatyouhaveaself-describingdesignbut

manyusersexpecttooltipsanyway.







5.2.THEPATTERNS

Thefirsttwopatternsinthischaptertalkabouttwoofthemany

waystopresentactionsonecommon,onenot.Whenyoufind

yourselfreflexivelyputtingactionsonanapplication'smenubar

orpop-upmenu,stopforamomentandconsiderusingButton

GroupsorActionPanelsinstead.

ButtonGroups

ActionPanel

Prominent"Done"Buttonimprovesthesinglemost

importantbuttononmanywebpagesanddialogboxes.Smart

MenuItemsisatechniqueforimprovingsomeoftheactions

youputonmenus;thisisaverygeneralpattern,usefulfor

manykindsofmenus(orbuttonsandlinks).

Prominent"Done"Button

SmartMenuItems

We'dlikeitifwecouldcompletealluser-initiatedactionsinan

applicationinstantly,butthat'snotrealitysomeactionsare

time-consuming.Previewshowstheuserwhat'sgoingto

happenbeforesuchanactioniscommitted.Progress

Indicatorisawell-knowntechniqueforlettingtheuserknow

what'sgoingonwhileanoperationproceeds,while

CancelabilityreferstoaUI'sabilitytostopanoperationwhen

theuserasksitto.

Preview



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 5.  Doing Things:Actions and Commands

Tải bản đầy đủ ngay(0 tr)

×