Tải bản đầy đủ - 0 (trang)
Chapter 2.  Organizing the Content:Information Architecture and Application Structure

Chapter 2.  Organizing the Content:Information Architecture and Application Structure

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

views,andlinks,youmightthinkabstractlyabouthowto

organizetheactionsandobjectsinyourapplicationintheway

truesttoyoursubjectmatter.Youcanpostponethedecisions

aboutusingspecificwindowsandwidgets.Clearlythis

separationofconcernsisusefulwhenyoudesignmultimodal

applications(e.g.,thesamecontentpresentedbothontheWeb

andonapalmtop,withverydifferentphysicalpresentations),

butit'salsogoodforbrandnewapplicationsordeepredesigns.

Thisapproachforcesyoutothinkabouttherightthingsfirst:

organizationandtaskflows.

Second,"PhysicalStructure"getsintothepresentationofthe

materialinpages,windows,andpanels.Intruth,it'svery

difficulttocompletelyseparatepresentationfromorganization

ofthecontent;they'reinterdependent.Thephysicalformsof

devicesandwebpagescanplacetightconstraintsonadesign,

andonthedesktop,anapplication'swindowstructureisa

majordesignchoice.Soitearnsaplaceinthischapter.







2.1.THEBASICSOFINFORMATION

ARCHITECTURE:DIVIDINGSTUFFUP

InthePreface,Italkedabitaboutinterfaceidioms.[1].These,

youmightrecall,areinterfacetypesorstylesthathavebecome

familiartosomeuserpopulations.Theyincludetexteditors,

forms,games,commandlines,andspreadsheets.They're

usefulbecausetheyletyoustartadesignwithasetoffamiliar

conventions;youdon'thavetostartfromfirstprinciples.And

onceafirst-timeuserrecognizestheidiombeingused,shehas

aheadstartonunder-standingtheinterface.

[1]Theterm"idiom"comesfromScottMcCloud'sUnderstandingComics,whereit'susedtodescribeagenreof

workthathasdevelopeditsownvocabularyofstyles,gestures,andcontent.Anothertermmightbe"type,"as

usedinMalcolmMcCullough'sDigitalGroundtodescribearchitecturalformsandconventions.



Whateveritisyou'rebuilding,you'veprobablydecidedwhich

idiomstouse.Butwhatmaynotbesoobviousishowto

organizethe"stuff"you'representingviatheseidioms.Ifyour

applicationissmallenoughtofitononepageorphysicalpanel,

greatyou'reoffandrunning.Butoddsaregoodthatyou're

dealingwithalotoffeatures,tools,orcontentareas.The

natureofthehigh-techindustryistokeepcrammingmorestuff

intotheseinterfaces,sincefeaturesusuallyarewhatsell.

Ifyou'vedoneanyworkonwebsites,youmayknowtheterm

"informationarchitecture."That'sessentiallywhatyou'llbe

doingfirst.Youneedtofigureouthowtostructureallthis

contentandfunctionality:howtoorganizeit,labelit,andguide

auserthroughtheinterfacetogetwhattheycamefor.Likea

real-worldarchitect,you'replanningtheinformational"space"

wherepeoplewilldwell.

Butapplicationsaredifferentfromtraditionalwebsites.Think

aboutitintermsof"nouns"versus"verbs."Inwebsitesand

manyothermediabooks,movies,music,graphicdesignyou



workwithnouns.Youarrangethem,presentthem,categorize

them,andindexthem.Usersknowwhattodowithtextand

imagesandsuch.Butapplications,bydefinition,existsopeople

cangetthingsdone:write,draw,performtransactions,interact

withothers,andkeeptrackofthings.You'remanipulatingverbs

now.Youneedtostructuretheinterfacesousersalwaysknow

whattodonext(oratleasthaveagoodideawheretolook).

Mostapplications(andmanywebsites)areorganizedaccording

tooneormoreofthefol-lowingapproaches.Someusenouns,

othersuseverbs:

Listsofobjectse.g.,aninboxfullofemailmessages

Listsofactionsortaskse.g.,browse,buy,sell,orregister

Listsofsubjectcategoriese.g.,health,science,or

technology

Listsoftoolse.g.,calendar,addressbook,ornotepad

Youshouldbaseyourchoiceonseveralinterrelatedfactors:the

natureanddomain(subjectmatter)oftheapplication,users'

domainknowledge,users'comfortlevelwithcomputersin

general,and,mostofall,howcloselyyourapplicationneedsto

matchthementalmodelsthatusersalreadyhaveofthe

domain.(Mentalmodelsrepresentwhatusersbelievetobetrue

aboutsomething,basedonpreviousexperienceor

understanding:classifications,vocabulary,processes,causeand

effect,andsoon.)

YoucantracemanyproblemsinUIdesigntoapoorchoice

here,orworse,aconfusingmixtureofmorethanonetypeof

organizationliketoolsandsubjectcategoriesmixedintoone

navigationbarwithambiguoustitles.



Ontheotherhand,sometimesamixedorganizationworksfine.

Someofthemoreinterestingsmall-scaleUIinnovationshave

comefrommixingnounswithverbsonthesamemenu,for

instance;itsusabilitydependsoncontext.Also,youcanapply

thesedivisionsnotonlytothetopleveloftheapplication,but

tonumerouslevelsinsidethem.Differentpartsofaninterface

demanddifferentorganizationalapproaches.

Again,thisisn'trocketscience;you'veseentheseconcepts

before.Butsometimesit'seasytochooseonekindofdivision

bydefaultandnotthinkcarefullyaboutwhichmightbebest.By

callingthemout,wemakethemvisibleandamenableto

discussion.Thiswillbetrueaboutmanypatternsand

organizationalmodelsdescribedinthisbook.

Let'stakeacloserlookatthesefourcategorizationsandsee

whatthey'reeachbestfor.



2.1.1.LISTSOFOBJECTS

Mostofthetime,itwillbeprettyobviouswhentousethis

categorization.Collectionsofemailmessages,songs,books,

images(seetheiPhotoexampleinFigure2-1),searchresults,

andfinancialtransactionswecopewiththeminthesoftwarewe

useeveryday.Fromtheselists,wereachvariousfamiliar

interfaceidioms:formstoeditthings,mediaplayerstoplay

things,andwebpagestoviewthings.



Figure2-1.ListsofphotosiniPhoto,sortedby

albumanddisplayedasthumbnailsinatable



Youwillfindtheseobjectsinselectablelists,tables,trees,or

whateverisappropriate;someUIsareverycreative.Atone

extreme,cellphonephonebooksmaybeshortandlinear,

comprisingonlyafewentriesthatyoucanscanquicklyona

tinyscreen.ButTiVoslisttheirrecordedTVshowsinmultilevel

hierarchiesthatyoumusttraversewithseveralclicks,andthe

mostsophisticatedemailclientsallowallkindsofcomplex

sortingandfiltering.Whenyoubuildthesekindsofinterfaces,

makesurethedesignscalesupappropriately,andtakecareto

matchthecapabilitiesandneedsofuserswiththefunctionality

yourinterfaceprovides.

There'smuchtobesaidaboutorganizingandpresentingthe

objectsinsuchaninterface.That'syournexttaskas

informationarchitect.Thesemodelsaremostcommon:



Linear,usuallysorted

2Dtables,alsosorted,whichoftenlettheusersortvia

columnheaders,orfilteraccordingtovariouscriteria

Ahierarchythatgroupsitemsintocategories(andpossibly

subcategories)

Ahierarchythatrevealsrelationships:parent/child,

containers,etc.

Spatialorganizations,suchasmaps,charts,ordesktop-like

areasinwhichuserscanplacethingswheretheywant

Infact,allofthesemodels(except2Dtables)applytoallfour

approachestodividingupaninterface:objects,tasks,

categories,andtools.Yourchoiceshoulddependuponwhat

peoplewanttodowiththeapplication,whatbestfitstheir

mentalmodels,andwhatbestsuitsthenaturalorganizationif

anyoftheobjectsinquestion.

Ifyoupresenttimetablesforcitybuses,forinstance,the

naturalorganizationisbybusorroutenumber.Alinearlistof

routesisavalidwaytoorganizeit.Butnoteveryonewillknow

whatbusnumbertheywant;aspatialorganization,likean

interactivecitymap,maybemoreuseful.Youalsomight

considerahierarchyofareas,stationsinthoseareas,and

routesleavingthosestations.

Chapter6,ShowingComplexData,coverstheseorganizational

modelsfor"nouns"inmoredetail.Ofthepatternsinthis

chapter,Two-PanelSelectoriscommonlyusedtostructure

thiskindofinterface,asisOne-WindowDrilldown.

Then,oncetheuserhasselectedsomeobject,whatdotheydo

withit?Readon!



2.1.2.LISTSOFACTIONS

Thisapproachisverb-insteadofnoun-centered.Insteadof

askingtheuser,"Whatdoyouwanttoworkon?",thesekindsof

interfacesask,"Whatdoyouwanttodo?"Suchinterfaces

rangefromTurboTax'shigh-leveldecisiontree(onescreenof

whichisshowninFigure2-2)tolongmenusofactionstobe

performedonanediteddocumentorselectedobject.

What'sniceabouttheseisthatthey'reoftendescribedinplain

English.Peoplecantakethematfacevalue.Whenyou

understandtheapplication'sdomainwellenoughtodefinethe

correctsetoftasks,theinterfaceyoudesignbecomesquite

usable,eventofirst-timeusers.

Thehardpartisdealingwiththeproliferationofactionsthat

mightbeavailabletotheuser.Toomanyactions,moresothan

toomanyobjects,canmakeitveryhardforuserstofigureout

whattodo.



Figure2-2.Afriendlytask-basedorganizationat

http://turbotax.com,describedintermsof

verbs"Start"and"Continue"andsupplementedby

helpfulexplanations



Desktopapplicationshavemenubarsandtoolbarsavailablefor

displayinglargenumbersofactionsatonce;mostusers

understandthesefamiliarconventions,atleastsuperficially.

ApplicationsthatusetheOne-WindowDrilldownpatterncan

presentwhole-pagemenus,providedthey'renottoolong.And

theCanvasPlusPalettepatterntalksaboutoneverytypical

waytoorganizecreationalactionsforuseinmanykindsof

visualbuilders.Infact,allofChapter5isdevotedtovarious

waysofplacing,sorting,andorganizingactionsonaninterface.

Butthedesignersofsmalldeviceinterfaces,suchascellphones

andPDAs,haveinterestingconstraints.Alltheycaneasilydois

presentsingle-clickchoicesofafewfunctions:threeatatimeif

they'relucky,butusuallyonlyoneortwo.Forthem,it'scritical

toprioritizewhichactionsarethemostfrequentlychosenat

anygivenpointintheinteraction,sotheycanbeassignedto

thoseoneortwo"softkeys"orbuttons(seeFigure2-3).That

carefulprioritizationisgooddiscipline,evenforweband

desktopapplications.



Figure2-3.Thiscellphonecontainsalinearlistof



entriesinaphonebook.Atthebottomofthe

screen,youseeapairofsoftkeyschangeable

labelsforthehardwarebuttonsunderneath

themlabeled"Exit"and"View."Thelefthand

buttonisalmostalwaysExitforallapplications

(usersthuscanbecomehabituatedtothat

button).However,therighthandbuttonchanges

accordingtowhatyou'redoingit'salwaysthe

mostcommonaction.

Allotherpossibleactionsarehiddeninsidea

menu,reachableviathemiddlesoftkeywiththe

T-shapedicononit.Thisdivisionofcommon

versusnot-so-commonisanexampleofExtras

OnDemand,apatterninthischapter.The

designershadtomakeadifficultchoiceabout

whichactionwasmostimportant,sinceshowing

allofthematoncewasn'tanoption.



2.1.3.LISTSOFSUBJECTCATEGORIES

Websitesandonlinereferencesdivideuptheircontentby

subjectcategoryallthetime.Theyhavelargeamountsofstuff

forpeopletobrowsethrough,anditoftenmakesthemost

sensetoorganizeitbysubject,orbyasimilarcategorization.

Butthesuccessofacategory-basedorganization,likethatof

tasks,dependsonhowwellyou'veanticipatedwhatusersare

lookingforwhentheyfirstseeyourinterface.Again,youneed

tounderstandtheapplication'sdomainwellenoughtomatch

thementalmodelsthatyourusersalreadyhave.

Mostapplicationsaren'torganizedthisway.Subjectcategories

arebetterforsortingoutnounsthanverbs,andaction-oriented

softwareusuallyisn'tagoodfitforit.Thatsaid,help



systemswhichshouldbeanintegralpartofanapplication's

designoftendouseit,andifanapplicationreallydoescombine

knowledgelookupwithactions(likemedicalapplicationsor

mappingsoftware),thiscouldcomeinhandy.

Figure2-4showsapopularexample.TheiTunesMusicStore

organizesitsthousandsofsongsbyalbum,artist,andthen

genre;that'showitsusersbrowsethecatalogwhenthey'renot

usingthesearchfacility.Whatifitwereorganizedbysome

othermeans,likethemusicians'hairlengthatthetimeofthe

2004GrammyAwards?Thatorganizationdoesn'tmatchmost

people'smentalmodelsofthemusicuniverse(hopefully).No

onecouldfindanythingtheywerelookingfor.



Figure2-4.TheiTunesMusicStorecategorizes

songsbyalbum,artist,andgenre.iTunesitself

addsplaylistsasacategory.Thisorganizational

model,combinedwiththefamiliarmedia-player

idiom,reallyistheheartoftheiTunes

application.



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

Chapter 2.  Organizing the Content:Information Architecture and Application Structure

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

×