Anda di halaman 1dari 3

uxmag.

com

https://uxmag.com/articles/ditchtraditionalwireframes

DitchTraditionalWireframes
WireframeshaveplayedanincreasinglyleadingroleinthemodernWebdevelopmentprocess.Theyprovideasimplewayof
validatinguserinterfaceandlayoutandarecheaperandfastertoproducethanafinalvisualcomp.However,mostofthe
methodsandtechniquesusedtocreatethemarefarfrombeingefficient,contradictingtheprinciplesandvaluesthatmade
wireframingusefulinfirstplace.
Whilethisarticleisnotaboutgettingridofthewireframingprocessitself,nowisagoodtimeforquestioningandimproving
someofthematerialsanddeliverablesthathavebecomedefactostandardsintheUXfield.Tomakethispointclear,letsdo
aquickreviewofthetypesofwireframescommonlyused.

LowFidelityWireframes
Thisisthemostbasicformofprototypingandincludeshanddrawnsketchesonpaperorawhiteboardorusingagraphic
tabletinthecomputer.Theyareextraordinarilycheapandquicktoproduce,providingjustenoughdetailtohelpimaginewhat
thefinalproductmightlooklikewithoutconstrainingthefreedomofimaginationthatisessentialintheearlystagesofdesign.
Lowfiwireframesdontaskformuchcontent.Theyaremeanttocommunicateavisualideaandexplorepossibilitiesrather
thandocumentadesign.

MidFidelityWireframes
Commonlyknownasmockups,thesegoastepforwardindetailandcanserveasvaliddocumentationsofauserinterface.
Theyareusuallyproducedonacomputer,withtoolssuchasBalsamiqMockupsorAxure,or,sometimes,byhandusing
stencils.
MockupsdeliberatelylooklikelowfidelitywireframesinordertokeepthefocusontheUIcontrolsandoveralllayout.Butthey
alsoprovideexactspecificationsoftheinterfacecontrolstobeused.Functionalityandcontentarealsodemonstratedmore
preciselyandmostUIcopy(systemmessages,navigationitems,formlabels,instructions)shouldbepresenthereinitsfinal
form.Foraseasonedfrontenddeveloper,itisperfectlypossibletotranslatewhatspicturedinamockupintoworkingHTML
code,butwellgetbacktothatlater.

HiFidelityWireframes
Thisiswhatmostpeoplehaveinmindwhentheythinkofwireframes:acarefullycraftedblueprint,whichisusuallytruetosize
andincorporatesthehighestlevelofdetailprevioustothefinalvisualcomp.Inotherwords,thisisafinalcomp,minusthelook
andfeel,colorpalette,andfonts.
Sizes,whitespaces,margins,proportions,andlineheightsareconsideredinthiskindofwireframing,usuallyproducedina
precisiontoolsuchasFireworks,Illustrator,orOmniGraffle.Thisdocumentisreadytobedressedbythevisualdesignerwith
texturesandbranding.UIcopy(suchasstatusmessagesorbuttonlabels)isfullypresentinitsfinalform.Usergenerated
content(suchascomments)maybefilledwithloremipsumtext,anduseruploadedpicturesorvideoscanberepresented
withplaceholders.
Mostwebandmobiledesignprocessesprogressthroughthesethreestagesuntilgettingtothevisualcomp,bywhichtime
everyscreenoftheproductisrepresentedexactlyasitwilllookwhenpublished.
Atthispoint,lotsofdesignhourshavebeeninvested,andchancesarethatalmostnoneoftheunderlyingdecisionshave
beenproperlyvalidatedwithusers:incrementalstepsdoneinfidelity.Youarebasicallyperforming(andsweating)workthatis
verylikelytobecompletelyundonewhenuserfeedbackarrives.

WireframingisAboutPrototyping
Haveyoueverthoughtaboutwhyareyouwireframing?Isitbecauseeveryoneelseouttheredoesit?Orareyoujustkeeping
thecliententertainedwhileyoudesignthefinalcomp?Whatareyoutryingtovalidateorillustratewhenyoudesign
wireframes?
Allthesequestionsleadtothesameplace:wireframingisaboutprototyping.Theunderlyingvalueofdoingwireframesfirst
insteadofgettingtotheconstructionoftherealthingrightawayisbuildingaprototype,whichallowsyoutotest,correct
mistakes,andvalidatethekeydesigndecisionswithusersinthecheapestwaypossible.Nobodywantstospendthousandsof
bucksonaproductonlytorealizethattheirassumptionswerewrong.Youcanfailcheaper.Thatswhyyouprototype.
Butthenagain,whatareyoutryingtovalidatethroughtestinginaprototype?Thinkofitasascientificexperiment:youmust
testonethingatatimetogetclearresults.Thebestwayofachievingthisisbyisolatingorgivingprominencetowhatyou
wanttotest,andthenmovingonthenextvariable.
Coredesigndecisionsneedtobevalidatedfirst,sothenext,morespecificdecisionshavesomesolidgroundtostandon.Its

beyondthescopeofthisarticletothoroughlydetailtheentireincrementalprocessofvalidation,butheresanoutline:
1.Testthegeneralideaandvalueproposition.
2.Testtheoverallcontentstructureandeaseofnavigation.
3.Testthecontent/userinterfaceandeaseofcompletionofthecoretasks.
4.Testlookandfeel,attractiveness,andbranding.
Lookingfromthisperspective,hifidelitywireframesdontmakeforefficientprototypes,becausetheircomplexitymakestesting
difficult,defeatingtheverypurposeofprototyping.

DisadvantagesofPrototypingwithHiFidelityWireframes
Itsdifficulttoisolateavariabletotest:Duetoitshighfidelity,hifiwireframesnotonlyinformtheviewerabouttheuser
interfaceandoveralllayoutstructure,butalsovisualproportions,whitespace,andeventypography.Theyaremadetobe
preciseandthisprecisionistheveryreasonwhymostusersdontknowwheretodrawthelinebetweenwhatshouldbe
evaluatedandwhatshouldnt.Thislinehere,isitpartoftheactualdesignorshouldIignoreit?
Lookslikeafinalproduct,butitsnot:Atypicalwireframeispolishedenoughtolooklikethegrayscaleversionofafinal
Webpage.Again,thismakesusers(andyourclient)wonder,isthisreallyhowtherealthingisgoingtolooklike?Soyou
needtoexplainthemthattypographyitsnotpartofwhatyouarevalidatingnow,butthecolumnwidthis.Thisblurry
distinctionbetweenafinalproductandyourprototypecausesuserstowastetimeevaluatingandgivingfeedbackonthings
thatyoudidntmeantotest.
Putsusersincriticmode:Nobodyexpectssketchestobebeautiful.Thelackofprecisionallowspeopletofocusonwhatis
beingrepresentedinsteadofhowclosetorealityitis.Peopletolerateimperfectionsinalofiwireframe.Theyfillthegaps
mentallyandacceptthegame:"letsplayasifthiswerearealproduct.""Theprecisioninahifiwireframetellspeopleto
critiquehowpolisheditlooks,becausewhatotherreasonmightexistforsuchleveloffidelity?
Buthey,Inevermeanttoprototypewithwireframeseither.Ihearyou.Infact,inmanycaseshifiwireframesareproduced
asdesigndocumentsintendedforteamworkpurposes,notforusertesting.Someonecreatesapixelperfectskeleton
someoneelsedressesit.Buteveninthiscase,wireframesusuallyarenotthemostefficientsolution.

WhyHiFidelityWireframesarenotTimeEfficient
ToomuchtimeisspenttryingtoreplicatethenaturalbehaviorofHTML/CSS:Thinkofimagesflowingwithtext,for
example.Toshowhowanimagewouldlookfloatingtotherightwithinaparagraphoftext,youhavetodosometricksthat
certainlywillexceedtheamountoftimerequiredtoputfloat:rightinyourCSS.Thinkofhoverorpressedstates.Thinkof
marginsandpadding.Thinkofreplicating(andscaling)nativeformcontrols.Theseareexamplesofthingsthatarealoteasier
toachieveinHTML,which,coincidentally,willbeyourfinalcanvas.
Wireframesarenotresponsive:Chancesare,ifyouaredesigningforresponsiveness,youmustgenerate,attheveryleast,
two(andusuallythree)wireframesforeachview:onefordesktop,oneformobile,andsometimesonemorefortablets.Fora
tenviewproject(somethingsmall,likeawebpage),thismeans20oreven30differentwireframes.AnHTMLpage,by
comparison,willadjustitselfeffortlesslytoresizing,sotheresnoneedtoduplicateyourwork.
Changesarepainfullyslowtoapply:Wireframesalwayshavetoberevisedandchangesapplied.Correctionstothelayout,
proportions,orsizesusuallymeanthatyouhavetochangeeverythingmanually.Evenifyouareproperlysetwithreusable
libraryitemsandmasterpages,visualelementswontrealignthemselvesbymagic.Andthishappensbecausegraphic
softwaredoesntbehavelikeCSSdoes,whereonelineofcodechangedcanmakethedifferenceforcountlesspages.
Isthereanythingthatcanbedoneaboutthis?Ofcourse,andthekeywordsarejustenough.

Focusonmockups
Mockupsprovidejustenoughdetailtoinformthefrontendprogrammerandthevisualdesigner.Ifyouthinkofhifiwireframes
asmockupsplusprecisionlayout,thenyoucanmovetheprecisionlayoutpartoftheequationrighttothevisualcomps,
wheretheybelong.
Thevisualdesignercancertainlystartbuildingsomethingsimilartoawireframeandthenputtingartworkonit,butthateffortis
doneonlyonce(insteadofrepeatingitforeverywireframe)anditsnotanobstacletothetestingprocessanymore.
Mockupsarequicktoproduce,dontrequireyoutobeawhitespaceorvisualrhythmguru,andlooknicetousers.With
mockups,youcanshowtheuserinterfaceinafocusedway,soyoucandirectyoureffortstowardproducingamorecohesive
interactionratherthandecidingifthecolumnmarginsshouldbe11or12px.Mockupstakeyoutotheessentialsofgooduser
interaction,andwhatsbettertheycanevenbedoneinparalleltothevisualdesignandartworkproductioniftheinterface
designerandthevisualdesignerworktogetherclosely.
Thefrontendprogrammercanstartworkingrightawaybasedonyourmockups.EspeciallyiftheappisbeingdoneinanMVC
framework(likeRails)oriftheressomekindoftemplatingsysteminvolved(likeWordPress),thecontentisisolatedfromthe
layoutstructure,whichallowsworkinginthefinedetailsoftheUIandtheoveralllayoutwithindependence.Thismeansthat

you(oryourteammates)dontneedtodefinetheentirelayoutjusttostartcoding.

Wireframe(orDesign)intheBrowser
WhynottoproducewireframesdirectlyinHTML/CSS?Therearevariousreasonsthatmakethisoptionveryappealing:
WithCSSframeworks,basiclayoutisabreeze:Twitter'sBootstraporZurbsFoundationallowyoutomountagridbased
columnsysteminminutes.TakeadvantageoftheflexibilityofCSS,changingcolumnwidthsontheflywhilethetextadapts
itself.Variationsareproducedquicklybychangingjustacoupleofclassnames.
Yourdeliverableisresponsiveready:Bothframeworksareresponsiverightoutofthebox,andevenifyoucreatetheCSS
fromscratch,addingalittlebitofbasicresponsivenessisfastandeasycomparedtotheeffortofproducingseparate
wireframesfordifferentviewports.Inaddition,truemobiletestingstartsrightaway.
Youcantakeadvantageofwhatthebrowserdoesbynature:Addingscrollbarswhenneeded,resizingformcontrols
basedontextlength,flowingtextaroundfloatingelements,keepingconsistentpaddingtheseareallthingsthatanybrowser
doeswithoutyouevenasking.Dontwastetimetryingtomimicbrowserfeaturesinastaticimage.
Itstrulyinteractive:Goodollinksareallyouneedtoaddinteractivitytoaprototype.Hoverfunctionalitycanbe
demonstratedlive.Youcantesttransitionsandanimations(impossibleinawireframeorvisualcomp).AnHTMLwireframeis
theeasiestonetosendtoclients(justaURL),andaWebbrowserisallthatsneededtoruntheproject.
ThescalablenatureofCSSenableseasy,livechanges:Sotheclientdoesntlikethelinkcolor?Theentireprojectis
updatedwithonelineofcode.Usingabrowserinspector(suchasFirebug),youcanmakelivechangeswhileyouare
presenting.
Youdontneedproprietarysoftwareorapowerhousemachine:Atexteditappisenoughtomakequickchangesordo
emergencyworkwhenyourcomputercrashesthedaybeforedeadlineandyourgrandmasoldPentiumisallyouhaveon
hand.
Everythingyoudosavesyoutimelaterbecauseyouarebuildingtherealthing:Everylineofcodeyouwritecounts
towardsthefinalproduct.Thereslittletonoreworkwhenyouprototypeinthebrowser(justtrysomethinglikediv,table,td
{outline:1pxsolid#999}toaddvisualaidswhenwireframing).

BottomLine
BygettingridoftraditionalwireframesanddirectingthoseeffortstowardproducingquickmockupsfirstandactualHTML/CSS
codelater,yourdesignprocesswillaccountforthelimitationsandpossibilitiesoftheWeb(desktopandmobile).Youwillalso
savevaluabletimeforthebackenddeveloper.Inaddition,wireframinginthebrowsercanbeaniceandfunwayofgetting
yourselfwritingHTMLandCSScode,whichisamustforaWebormobiledesignerthesedays.
Incertaincases,hifiwireframesmightstillneedtobeusedforexample,whenbuildingnative,visuallycomplexmobileapps,
developersusuallyneedsomebythepixelsizesinordertostartbuildingtheappbeforevisualdesignersgettheirhandson
lookandfeel.Buteveninthatcase,youmightconsiderHTMLwireframingasaniceoptiontobuildusableprototypesthatare
testableonrealdevices.
Thevalueofprototypingisgettingearlyuserfeedbacktodeliverbetterproductsfaster.Keepthatinmindandyourwork
performanceandstandardswillcontinuetoimprove.Considerthisarticleasaspringboardtowardstreamliningandoptimizing
theWeb/mobiledevelopmentprocesssomethingwhichiscertainlyinthebestinterestofeveryoneinvolved:developers,
clients,andusers.

PowertowerimagecourtesyShutterstock

Anda mungkin juga menyukai