What is wireframing | Experience UX

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page which ... Sometimesquestionsaremoreimportantthananswers Whatiswireframing? Wireframingisawaytodesignawebsiteserviceatthestructurallevel.Awireframeiscommonlyusedtolayoutcontentandfunctionalityonapagewhichtakesintoaccountuserneedsanduserjourneys.Wireframesareusedearlyinthedevelopmentprocesstoestablishthebasicstructureofapagebeforevisualdesignandcontentisadded. WireframingisessentialinUIdesign Awireframeisalayoutofawebpagethatdemonstrateswhatinterfaceelementswillexistonkeypages.Itisacriticalpartoftheinteractiondesign process. Theaimofawireframeistoprovideavisualunderstandingofapageearlyinaprojecttogetstakeholderandprojectteamapprovalbeforethecreativephasegetsunderway.Wireframescanalsobeusedtocreatetheglobalandsecondarynavigationtoensuretheterminologyandstructureusedforthesitemeetsuserexpectations. Awireframeismucheasiertoadaptthanaconceptdesign Itisquickerandcheapertoreviewandamendthestructureofthekeypagesinawireframeformat.Iteratingthedevelopmentofthewireframestoafinalversionwillprovidetheclientandthedesignteamconfidencethatthepageiscateringtouserneedswhilstfulfillingthekeybusinessandprojectobjectives. Wireframingtakesplaceearlyintheprojectlifecycle OftenusedtocompletetheUser-CentredDesignprocess,wireframesarealsousedatthebeginningofthedesignphase.Aprototypeusabilitytestwilloftenbeatestofthewireframepagestoprovideuserfeedbackpriortothecreativeprocess. Wireframescanbesimplyhand-drawn,butareoftenputtogetherusingsoftwarelikeMicrosoft’sVisio,toprovideanon-screendelivery.However,ifthewireframesaregoingtobeusedforaprototypeusabilitytest,itisbesttocreatetheminHTML.ThereissomegoodsoftwarethatallowsyoutodothiseasilyincludingAxureRPorOmnigraffle(Maconly). AdvantagesofWireframing Oneofthegreatadvantagesofwireframingisthatitprovidesanearlyvisualthatcanbeusedtoreviewwiththeclient.Userscanalsoreviewitasanearlyfeedbackmechanismforprototypeusabilitytests.Notonlyarewireframeseasiertoamendthanconceptdesigns,onceapprovedbytheclientandtheuserstheyprovideconfidencetothedesigner. Fromapracticalperspective,thewireframesensurethepagecontentandfunctionalityarepositionedcorrectlybasedonuserandbusinessneeds.Andastheprojectmovesforwardtheycanbeusedasagooddialoguebetweenmembersoftheprojectteamtoagreeontheprojectvisionandscope. DisadvantagesofWireframing Asthewireframesdonotincludeanydesign,oraccountfortechnicalimplications,itisnotalwayseasyfortheclienttograsptheconcept.Thedesignerwillalsohavetotranslatethewireframesintoadesign,socommunicationtosupportthewireframeisoftenneededtoexplainwhypageelementsarepositionedastheyare.Also,whencontentisadded,itmightinitiallybetoomuchtofitwithinthewireframelayout,sothedesignerandcopywriterwillneedtoworkcloselytomakethisfit. Conclusion Wireframesshouldbeusedearlyinaprojecttogetuserandclientapprovalonthelayoutofkeypagesandthenavigation.Thiswillprovidetheprojectteam,specificallythedesigners,confidenceinmovingforward.Wireframeswillalsosaveconsiderabletimeandmoneyinthetestingandamendsphaselaterintheproject. Youmayalsolike BecomeanInsider HowtocreatesketchedwireframesinAxure ThebeginningoftheendfortheHamburgericon? Howtoimproveyoure-commercebasket–usabilityinsightsfromtop20retailers MoreUXMethodsQuestions Whatisusabilitytesting?Usabilitytestingisawaytoseehoweasytousesomethingisbytestingitwithrealusers.Usersareaskedtocompletetasks,typicallywhiletheyarebeingobservedbyaresearcher,toseewheretheyencounterproblemsandexperienceconfusion.Ifmorepeopleencountersimilarproblems,recommendationswillbemadetoovercometheseusabilityissues. ReadmoreWhatisusercentreddesign?User-centreddesignisaprocessorsetoftoolsusedtodesignaservicewhichfocusesonwhatusersneedattheverybeginningandcontinuesthroughoutdevelopmentuntillaunch.Typicallyservicesaredesignedfromatechnicalandbusinessperspective,withconsiderationforusersaddedinlater.Instead,User-centreddesignensurestheservicefocusesonwhatusersneedbeforebalancingthiswiththetechnicalandbusinessrequirements. ReadmoreWhatiswireframing?Wireframingisawaytodesignawebsiteserviceatthestructurallevel.Awireframeiscommonlyusedtolayoutcontentandfunctionalityonapagewhichtakesintoaccountuserneedsanduserjourneys.Wireframesareusedearlyinthedevelopmentprocesstoestablishthebasicstructureofapagebeforevisualdesignandcontentisadded. ReadmoreWhatisawebsiteprototype?Websiteprototypesareinteractivedemosofawebsite.Theseareoftenusedtogatherfeedbackfromprojectstakeholdersearlyintheprojectlifecycle,beforetheprojectgoesintofinaldevelopment ReadmoreWhatisuserrequirementscapture?Userrequirementscaptureisaprocessusedtounderstandwhattypicaluserswillneedfromaservicewhichisabouttobedesigned.Usersareobservedusingsimilarservicesandinterviewedaboutthewaystheygoaboutplanningandcompletingtheirgoals.Thisinformationisusedtoidentifyalistofcontent,featuresandfunctionalitythenewservicemusthaveinordertosatisfytheneedsofitsusers. ReadmoreWhatiscustomerprofiling?Customerprofilingisawaytocreateaportraitofyourcustomerstohelpyoumakedesigndecisionsconcerningyourservice.Yourcustomersarebrokendownintogroupsofcustomerssharingsimilargoalsandcharacteristicsandeachgroupisgivenarepresentativewithaphoto,aname,andadescription. ReadmoreWhatiscardsorting?Cardsortingisatechniquethatinvolves askinguserstoorganiseinformationintologicalgroups.Usersaregivenaseriesoflabelledcardsandaskedtoorganiseandsortthemintogroupsthattheythinkareappropriate.Cardsortinghelpsyoutodesignaninformationarchitecture,workflow,menustructureorwebsitenavigationpaths. ReadmoreWhatareuserjourneys?Auserjourneyisapathausermaytaketoreachtheirgoalwhenusingaparticularwebsite.Userjourneysareusedindesigningwebsitestoidentifythedifferentwaystoenabletheusertoachievetheirgoalasquicklyandeasilyaspossible. ReadmoreWhatarefocusgroups?Focusgroupsarearesearchmethodusedtogatherfeedbackandopinionsfromcustomers.Eachpersoninthegroupisencouragedtoparticipateinadiscussionwhichispre-plannedbyaresearcherandisguidedbyafacilitator.Focusgroupsaretypicallyusedtogaugeopinionandgatherinformationfromusersaboutproducts,services,andfeaturesbeforetheyhavebeendeveloped. ReadmoreWhatisremoteusabilitytesting?Remoteusabilitytestingisawaytotesthoweasytouseawebsiteiswithuserswhoareinadifferentgeographicallocation.Traditionalusabilitytestingbringsusersandresearcherstogetherinoneplacetoconductthetest,whereasremoteusabilitytestingallowstheresearcherandusertobeindifferentlocationswhilethetestiscompleted. ReadmoreWhatisanexpertreview?Anexpertreviewiswhereausabilityexpertuseshis/herknowledgeandexperienceoftestingwebsiteswithuserstowalkthroughawebsiteintheshoesofatypicaluser.Theexpertwillspotproblemsandrecommendchangestoimproveusabilitywhenbudgetsandtimescalesdon’tallowforuserresearch. ReadmoreWhatisservicedesign?Servicedesignmakesaserviceeasiertouse,moreusefulandmoredesirableforthecustomerswhoneedtouseit:theserviceuser.Whethercreatinganentirelynewserviceorimprovinganexistingone,servicedesignfocusesonwhatcustomersreallyneedateachstageoftheirinteractionwithanorganisation. ReadmoreWhatisethnographyresearch?Ethnographyisastudythroughdirectobservationofusersintheirnaturalenvironmentratherthaninalab.Theobjectiveofthistypeofresearchistogaininsightsintohowusersinteractwiththingsintheirnaturalenvironment. ReadmoreWhatistreetesting?Treetestingisawayofevaluatingaproposedsitestructurebyaskinguserstofinditemsbasedonthesitesorganisationandterminology.Thisonlinetestonlydisplaysthenavigationlinksandremovesanyadditionalclutter. ReadmoreLet’sChat Shinealightonthehighsandlowsofyouruser’sexperience.Revealquickwinsfortodayandauser-centredwayforwardsfortomorrow.Let’stalk. [email protected] Menu Weusecookiesonourwebsite.Findoutaboutwhichcookiesweuseorswitchthemoffinsettings. Accept Reject CloseGDPRCookieSettings PrivacyOverview StrictlyNecessaryCookies Poweredby GDPRCookieCompliance PrivacyOverview Thiswebsiteusescookiessothatwecanprovideyouwiththebestuserexperiencepossible.Cookieinformationisstoredinyourbrowserandperformsfunctionssuchasrecognisingyouwhenyoureturntoourwebsiteandhelpingourteamtounderstandwhichsectionsofthewebsiteyoufindmostinterestinganduseful. StrictlyNecessaryCookies StrictlyNecessaryCookieshouldbeenabledatalltimessothatwecansaveyourpreferencesforcookiesettings. EnableorDisableCookies Ifyoudisablethiscookie,wewillnotbeabletosaveyourpreferences.Thismeansthateverytimeyouvisitthiswebsiteyouwillneedtoenableordisablecookiesagain. EnableAll SaveSettings