Tải bản đầy đủ - 0 (trang)
Chapter 3. An Approach to Design

Chapter 3. An Approach to Design

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

Ensureoverallquality—Ifyourusersdon'texperience

qualitythroughoutyourgadget,theymayconcludethereis

alackofqualityeverywhere.Thismeansyouneedtopay

attentiontothequalityoficons,images,text,background,

andinteraction.Eachoftheseelementsisequally

important.Agoodideaandagreatimplementationwithan

averageuserinterfacecannotstanduptothecompetition

(seeFigure3.1).

Figure3.1.Twogadgetsthatperformthesamefunction,

onewithaniceinterfaceandtheotherplainandsimple.

Whichonewouldyouprefer?



Considerthefollowingfourfactorsbeforedesigningagadget

(seeFigure3.2):

Informationfirst

Therightuserinterface

Thegadget'susagepattern

Thegadget'sbehavior

Figure3.2.Agadget'sdesignisanimportantaspectof

development.



PuttingInformationFirst

Gadgetsaremeantforasingletask.Whendesigningagadget,

keepinmindthatagadgetshouldhaveasmallsetofgoals

relevanttothespecifictask.Agadgetshouldshowonlydata

suitableforthattaskandthattaskonly.Informationinthe

gadgetwindowshouldsatisfythefollowingrules:

Livedata

Informationforquickaccess

User'schoice

Briefinformationforfurtheraction

Let'stakeacloserlookatwhateachofthesereallymeans.



LiveData

Gadgetsshoulddisplayonlyinformationthatchangesregularly,

suchaslivefeeds,newsupdates,dailyweather,batterystatus,

andsoon.Informationthatisstaticformorethanadaymakes

agadgetdull.

Auserlookstoagadgettoseeinterestingthingsthatare

active.Fungadgetsareanexceptionbutcanbemademore

interestingiflivedataisalsoadded.Forexample,asubsetofa

populargameisnicetohaveinaSidebar,butit'sbetterifthere

isliveinformation,likearegularlyupdatedscoreboard,orlive

updatesaboutthegame.Ifthatisnotpossible,addinga

capabilitytochangethegadget'swallpaper(backgroundimage)

isagoodoption.



EasyAccesstoInformation

Gadgetsareparticularlyusefulatshowinginformationforwhich

usersdon'thavetostartanapplicationoropenawebpage.A

goodexamplemightbestockvalues,aneventcalendar,traffic



maps,localfuelcost,andsoforth.Anyinformationthatsavesa

user'stimemakesagadgetworththespaceittakes.



InformationRelevanttoIndividualUsers

Gadgetsareallaboutuserchoiceandpreference.Iftherearea

lotofusersforaparticularnewspaper'scrosswordpuzzle,a

gadgetthattapsintothatthemecanbeaninstanthitwith

them.User-tailoredgadgetsareverypopular,suchasagadget

foraFlickrwebsiteshowingtheuser'sownsharedpicturesor

theuser'sfavoriteblogfeed.



InformationforFurtherAction

Thegadgetshouldshowenoughinformationfortheuserto

decideonfurtheraction.Forexample,awebsitestatistics

gadgetshouldnotshoweachandeverydetailcorrespondingto

websiteusage.Itshouldshowstatisticsforaweekoradayand

letusersdecidewhatfurtheractiontheywanttotake.



CaseStudy:TheSoapboxVideoGadget

Imagineyouwantedtocreateavideogadget(seeFigure3.3).

Thetaskistocreateagadgetforavideofeedfrom

http://soapbox.msn.comwiththegoalofaccomplishingthe

following:

Listingfrequentlyupdatedvideosfromsoapbox.msn.comin

asimpleandaestheticallypleasingway

Playingavideointheflyout

Figure3.3.Thisfullydevelopedgadgetgivesquick

accesstoSoapboxvideo.

[Viewfullsizeimage]



Avideofeednormallycontainsthumbnailsofthevideo,

reviews,andratingsfromusers.Agadgetwiththesegoals

givesyouthefollowingoptionsfordesigndecision:

Makingavailablethethumbnailsandratingsforeachvideo

Addingcapabilitytobrowsevideobycategories

Functionalitytosearchforvideosbykeyword

VideoresizeoptionwithsupportforWindowsMediaPlayer

andFlashPlayer

Easypage-wiseaccesstolistofvideos

Figure3.3showsapreviewoftheSoapboxVideoGadgetwith

alltheseoptions.Moreinformationaboutthegadgetcanbe

foundat

http://www.codeproject.com/KB/gadgets/SoapBoxGadget.aspx.

Trytomakeyourgadgetfeature-richbyprovidingacomplete

setoffunctionalityrelatedtoaspecifictask(seeFigure3.4).

Thinklikeauser.Ifthegadgetshowsalistofvideos,the

gadgetshouldalsocategorizethemandgiveeasyaccesstoall



theitemsinthevideofeed.

Figure3.4.ThisgadgetisabletocategorizeMSN

Soapboxvideos,givinguserseasyaccesstotheonethey

wanttosee.



Providingthecompletesetoffunctionalitydoesnotmeanthat

thegadgetshoulddoeverythingtheSoapboxvideowebsiteis

doing.Videosharingandreviewcapabilitiesinthewebsitemay

notbeapartofthegadget.Completefunctionalityheremeans

thegadgetshouldgiveaccesstoalltheinformationfromthe

videofeed,whichisthegadget'sinput.Theusersshouldbe

abletofiltervideos,sortthem,searchbykeyword,andplay

videosinthewaytheywant.InChapter11wewillseehowto

createavideogadgetusingYouTubeVideofeedback.

Refertothechecklistofguidelinesforgadgetdevelopmentand

comparethattothisgadget.Whatliveinformationdoesthe

gadgetdisplay?

Frequentlyupdatedsoapboxfeed.



Currentlyfeaturedvideos.

Recentvideos.

Doesthegadgetofferquickaccesstotheinformationit

provides?

Abilitytoclickonthethumbnailtoplaythevideointhe

flyout.

Abilitytobrowsethroughthevideolist.

Doesthegadgetgivetheuserachoice?

Settingspagegivesanoptiontocustomizethelistof

videos.

Userscanselectthemediaplayerandvideosize.

Doesthegadgetprovideinformationthatletstheuserdecide

onfurtheraction?

Gadgetgivesinformationaboutthevideo'sratings,a

thumbnailimage,andthetitleinthemainwindowforusers

todecidetowatchthevideo.

GadgetgivesPreviousandNextoptionsforbrowsingthe

videosinthefeed.



ConstructingtheRightUserInterface

Gadgetsareavisualexperienceandtherightuserinterface

makesallthedifference.Herearefourpointersforcreating

one:

Keepthegadgetsimpleandaestheticallypleasing.

Showonlyrelevantinformation.

Makeuseofvisualssuchasiconsandimages,ratherthan

text.



Besurethatthegadgetisnottooobtrusive.



SimplicityandAesthetics

Agadgetshouldlooksimpleandaestheticallypleasing.Takea

lookatthegadgetsamplesprovidedinFigure3.5.

Figure3.5.Choiceofclearimageandaesthetically

pleasingfontscanmakealotofdifferenceingadget

design.



Clearlytheobjectsinthefirstpairarebothsimplerandmore

aestheticallypleasingthantheobnoxiousclockanddifficult-toreadnote.Ifagadgetisgoingtobepartofthedesktop,itis

somethingtheuserwilllookateveryday;makesureitisas



clearandaesthetic.Thechoiceofcolorandfontscanalsomake

adifference.



ShowOnlyRelevantInformation

Themaximumwidthofagadgetis130pixels.That'snotalot

ofroomtoworkwith,especiallyifthere'salotofinformation

youwanttoconvey.Itcanbedone,however.Justlookatthe

RSSfeedandCalendarGadgetsshowninFigure3.6.

Figure3.6.TheRSSfeedGadgetshowsthetitlepartially

inthegadgetwindow,andthecompletetitleisshownas

thetooltip.



So,whatisitexactlythatmakesthesewell-designedgadgets?

Forone,titlesshouldgenerallybeonlyaslongasthespace

allows.Withsomegadgets,likethisRSSnewsfeeder,thatisn't

possible.Butinthiscase,tooltipsareappliedtogoodeffect.

And,althoughyoucan'tseethisclearlyfromtheblack-andwhitephotosinthisbook,thefontshavedifferentcolorsto

highlightthetitle.

TheRSSReaderGadgetdoesn'ttrytodotoomuch.Itdisplays

onlyfourrecordsatatime,andtheCalendarGadgetdisplays

justthecurrentmonthorthecurrentday,basedontheuser's



choice.

Figure3.7showstwomoregadgetsthataredesignedto

accomplishthesamegoals,butsufferfromanextremelypoor

design.

Figure3.7.Thegadgetwithscrollbarsandtheoverfilled

calendarbothtrytosqueezetoomuchinformationinto

thesmallspace.



Thepresenceofascrollbarinagadgetisunacceptable.It'sfar

bettertousepagingbecauseascrollbarcanfurtherreducethe

alreadysmallspaceagadgetprovides.Providingpaging

functionalitytobrowsemultipleitemswithpreviousandnext

optionsandpagenumberscanremovetheclutterfromthe

gadgetscreen.BoththeBlogandtheCalendarGadgetshave

fartoomuchinformationcrampedintoasmallspace.That'sthe

kindofdesignmistakesyoushouldstrivetoavoidwhen

designingyourowngadgets.



MakeUseofVisuals

Makeuseoficons,images,andsignsasmuchaspossible;they

givevisualcluesofthefunctionality(seeFigure3.8).For

example,aWeatherGadgetcanusepicturesofclouds,thesun,

andraininsteadofcorrespondingtexttodepictdifferent

weathercondition.Theproperuseofimagesmakesthegadget

moreuserfriendly.



Figure3.8.PicturesofcloudsandsunintheWeather

Gadgetdepicttheweather.Computerusageintheform

ofaCPUmeterismoreintuitivethanplaintext.



TwogadgetsarecomparedinFigure3.8.Bothgadgetsshow

thesameinformation,usingdifferentdesigns.However,the

designsinthetoprowhavevisualsthatgivearichexperience

totheuser.Whendesigningagadget,checkforthefollowing:

Cananyinformationdisplayedinthegadgetcanbe

replacedbyvisuals?

Isthegadgettooplainordoesitlackdesign?

Visualthemesarecoveredinmoredetailinlatersection.



NotTooObtrusive



Thedesignofthegadgetshouldnotbetooobtrusive.Theuse

ofbuttonsandusercontrolsshouldbeavoidedatallcosts.For

example,usingaPreviousandNextbuttoncanmakethe

gadgetlookugly.Instead,useproperimagesandshowthem

whenthemouseismovedoverthegadget.

Figure3.9comparesaPictureSlideshowGadgetwithtwo

differentdesigns.Thelowergadgetshowsbuttonstobrowse

eitherthepreviousimageorthenextone.Thebuttonsaretoo

obtrusiveforagooddesign.Theupperimagesareexamplesof

agooddesign.Thegadget'sdefaultview(upperleft)iswithout

anyPreviousorNextbuttons.Whenthemouseismovedover

thegadget,previousandnextimagesareshown.

Figure3.9.ThealwaysvisiblePreviousandNextbuttons

areusedtobrowseimagesinthePictureSlideshow

Gadget(lowerimage),buttheyaretooobtrusiveforthe

smallspace.



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

Chapter 3. An Approach to Design

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

×