Så skapar du högdetaljerade trådramar: en komplett guide
Att skapa ”wireframes” av produkter för att samla in feedback innan man investerar i ett komplett bygge är en mycket äldre metod än de flesta av oss inser. Även under medeltiden brukade ingenjörer (om de kallades så på den tiden) skapa prototypversioner av verktyg och föremål och visa upp dem för sina herrar innan de påbörjade massproduktion.
Den moderna programvaruvärlden har naturligtvis också anammat denna process. Till skillnad från att bygga en prototypversion av en produkt låter moderna verktyg för wireframing och prototyper oss dock testa prototypen i ett ännu tidigare skede – medan den fortfarande håller på att utformas.
Dagens fokus är den viktigaste delen av att bygga programvaruprototyper – wireframen med hög detaljrikedom som möjliggör interaktivitet och ger liv åt ett koncept.
Continue Reading for Free
Create a free account to finish this article, plus get ongoing access to timely insights and practical resources.
Have an account? Log In
Förstå wireframes med hög detaljrikedom
Innan jag förklarar vad wireframes med hög detaljrikedom är vill jag först beröra själva begreppet wireframe-detaljrikedom.
Detaljrikedom syftar på mängden detaljer du inkluderar när du bygger din produktwireframe. Det kan vara visuella detaljer, till exempel färgerna på gränssnittskomponenter som representerar ditt varumärke eller bilder som ska finnas på skärmen (t.ex. produktbilder i sökresultaten på en e-handelswebbplats).
Utöver visuella aspekter finns det också innehållsmässig detaljrikedom. Det innebär att du antingen använder platshållartext eller platshållarinnehåll (t.ex. lorem ipsum) eller verkligt innehåll (produktnamn och beskrivningar).
Beroende på detaljrikedomen i din wireframe använder du antingen visuella element i gråskala med generiskt utseende och platshållarinnehåll (låg detaljrikedom) eller ett varumärkesanpassat färgschema med element från ditt designsystem tillsammans med faktiskt innehåll (hög detaljrikedom).
Så här ser de ut sida vid sida.
Även om du kanske tycker att wireframes med hög detaljrikedom är det självklara valet när du jämför de två, är det inte alltid fallet. Det fina med modeller med låg detaljrikedom är den hastighet med vilken du kan utforma, användartesta och iterera på dem.
I de allra tidigaste designfaserna brukar du därför göra ett par iterationer med en wireframe med låg detaljrikedom innan du går vidare med att skapa en med hög detaljrikedom.
Fördelar med wireframes med hög detaljrikedom
Wireframes med hög detaljrikedom tar visserligen längre tid att skapa, men är en mycket värdefull del av ditt designprojekt eftersom de medför en rad fördelar. Här är några av dem:
- Bättre kommunikation: Människor är visuella varelser och förstår designen bättre om du använder rätt färger, element och innehåll. Därför är sannolikheten stor att samma person godkänner din wireframe med låg detaljrikedom men upptäcker problem och ger dig feedback när hen ser den med hög detaljrikedom för första gången.
- Bättre användbarhetstestning: Du förbättrar kvaliteten på den feedback du får från dina användare när du visar det verkliga innehållet så som det kommer att se ut i den slutliga designen. En sida med sökresultat ser ut som en lista med grå rutor i en wireframe med låg detaljrikedom. Du kan inte avgöra om elementen på sidan är lätta att överblicka förrän du ser riktiga bilder och text på den.
- Prototyper: Klickbara prototyper är hemska när de bygger på wireframes med låg detaljrikedom. Prototyper med hög detaljrikedom ligger däremot mycket nära den slutliga designen och är tillräckligt bra för att du ska kunna dela dem med användare i ett tidigt skede.
- Kommunikation mellan teknik- och designteam: Du kan dela dina wireframes med hög detaljrikedom med utvecklingsteamet för att även få tidig feedback från dem, exempelvis kring implementeringsutmaningar och problem. De innehåller den detaljnivå som krävs för att utvecklarna ska förstå hur de ska bygga den och vilka typer av problem de potentiellt kan ställas inför.
Slutligen kan wireframes med hög detaljrikedom visa produktens slutliga utseende och känsla för dig och dina designkollegor, så att ni kan upptäcka designinkonsekvenser eller andra visuella problem som behöver åtgärdas innan ni testar användargränssnittet igen.
Verktyg och programvara för wireframing med hög detaljrikedom
Även om du rent tekniskt kan skapa wireframes med låg detaljrikedom på ett papper eller en whiteboard har du inget annat val än att välja ett specialiserat produktdesignverktyg för att skapa en med hög detaljrikedom.
Så låt oss gå igenom några populära alternativ som du kan välja mellan och förstå deras funktioner.
Figma
Figma är marknadsledande inom digital produktdesign, och över 40 % av alla användarupplevelsedesigners väljer det för prototyper, användarflöden och wireframedesign.
Plattform: Webb, dator (MacOS, Windows)
Där det glänser: samarbete i realtid mellan designers, chefer och utvecklare samt stöd för flera plattformar.
När det gäller funktioner vill jag lyfta fram följande om Figma:
Samarbete: Figma låter flera teammedlemmar arbeta i samma fil samtidigt. Du kan se markörerna för alla som bläddrar i eller redigerar designfilen, lämnar kommentarer samt chatta i realtid med en liten meddelanderuta som öppnas bredvid din markör.
Stöd för designsystem och komponenter: Du kan skapa återanvändbara komponenter i Figma (inklusive flera tillstånd för dem) samt definiera ett helt designsystem med hjälp av dina riktlinjer och komponenter.
Prototypframställning: Du kan omvandla dina designer till klickbara prototyper som användare kan utforska för att förstå hur din produkt skulle kännas att använda. Även om det inte är det mest avancerade systemet för prototypframställning på marknaden är det fortfarande mycket kompetent.
Sketch
Sketch brukade vara det självklara designverktyget innan Figma kom fram och är ett populärt alternativ till Framer och andra populära designverktyg. Vissa spekulerar i att den exklusiva kompatibiliteten med Mac var en av anledningarna till att detta annars utmärkta verktyg förlorade sin krona.
Plattformar: macOS
Där det glänser: Sketch är mycket anpassningsbart tack vare sitt omfattande stöd för tillägg, vilket gör det till ett utmärkt val för nischade designbehov.
Nu ska vi titta på Sketchs mest framträdande funktioner.
Vektorredigering: Jämfört med resten har Sketch utan tvekan det mest robusta verktyget för vektorredigering på marknaden, inklusive stöd för booleska operatorer och matchningsoperatorer för att definiera dina former.
Förhandsvisning på webben: Sketch är inte en fullständig redigerare, men har en webbapp för att granska designer, överlämna resurser till utvecklare och testa prototyper.
Prototypframställning: Sketchs möjligheter för prototypframställning är i nivå med Figmas. Här kan du också koppla samman dina ritytor genom ett flöde, göra element klickbara och mycket mer.
Adobe XD
Detta är den kreativa mjukvarujätten Adobes svar på den hårda konkurrensen på marknaden för wireframes och UI/UX-design.
Plattformar: macOS, Windows
Där det glänser: Adobe XD är helt integrerat i deras Creative Cloud, vilket gör att du sömlöst kan importera designer och resurser från andra Adobe-verktyg med mera.
Efter att ha testat verktygets funktioner finns det även annat som är värt att nämna:
Prototypframställning: Adobe XD utmärker sig genom sin förmåga att skapa prototyper för mikrosamspel, utöver den vanliga uppsättningen för prototypframställning.
Animeringar: Eftersom verktyget kommer från företaget som skapade After Effects är det inte förvånande att Adobe XD har mer avancerade möjligheter att animera UI-element.
Samarbete: Adobe XD är inte lika avancerat som Figma, men låter flera personer redigera designen samtidigt.
Axure RP
Medan de övriga var allmänna UI/UX-designverktyg som även hanterade wireframes och prototyper, är detta verktyg särskilt inriktat på det senare.
Plattformar: macOS, Windows
Där det glänser: Eftersom Axure RP är ett specialiserat verktyg kan det ta prototypframställningen vidare med komplexa interaktioner och användarresor.
Låt oss nu ta en titt på funktionaliteten som det här verktyget innehåller:
Avancerad logik: I stället för ett enkelt ”klicka för att öppna nästa rityta” kan Axure RP lägga till komplex logik i prototyper. Det innebär att du kan öppna menyer och välja objekt, och att designen och innehållet förändras dynamiskt utifrån ditt val eller andra liknande åtgärder.
Dokumentation för överlämning: Även om nästan alla produkter som nämns här har funktioner för överlämning till utvecklare, är Axure RP det enda alternativet där du kan skapa mycket detaljerad dokumentation som beskriver din design och logik.
Flödesdiagram: Förutom att utforma en trådram med hög detaljgrad kan du också använda Axure RP för att skapa flödesdiagram som beskriver användarresan och affärslogiken bakom din design.
Sammanfattningsvis finns det ingen tydlig vinnare när det gäller ”det bästa verktyget för trådramning med hög detaljgrad”. Verktygen som listas här, liksom de som finns i vår noggrant utvalda sammanställning av verktyg för UX-design, har både styrkor och svagheter. Det handlar därför egentligen om preferenser, beroende på vilka aspekter som är viktigast för dig och ditt team.
Bästa praxis för att skapa trådramar med hög detaljgrad
När du slutligen har nått den punkt i designprocessen där det är dags att utveckla den här typen av trådram bör du följa dessa tips för att få ut mesta möjliga av din detaljerade skiss.
Bästa praxis för trådramningsprocessen
- Se till att din användarpersona är uppdaterad. Du har redan en version av en persona som du använde när du skapade din första skiss med låg detaljgrad. Denna persona är dock troligtvis inaktuell eftersom du redan har genomfört ett par testomgångar med den och upptäckt många nya aspekter av dess personlighet och behov.
- Gå igenom all tidigare användarfeedback innan du börjar med trådramen med hög detaljgrad. Det är sannolikt att det fanns feedback från användare som granskade versionen med låg detaljgrad, som du ansåg vara irrelevant då men som nu kommer att bli mycket relevant.
- Det finns inget som heter den ”slutgiltiga versionen” av en trådram. Övertänk inte de små detaljerna. I stället för att arbeta med den detaljerade trådramen i veckor kan du göra ett par ändringar och prova den. Ju kortare cykeln är mellan att ditt team lägger till designidéer och att användarna testar dem, desto snabbare når du den punkt där din trådram är redo att bli en slutgiltig design.
- Dra nytta av komponenterna och mallarna i ditt designsystem. Det finns inget pris för att börja från noll! Genom att använda dessa mallar sparar du mycket tid, och resultatet kommer att likna den slutgiltiga designen så mycket som möjligt.
Tips för trådramens design
Utöver råden ovan om hur du genomför designprocessen effektivt kommer här några tips som rör själva designen.
- Håll din design konsekvent. Även om det fortfarande är en trådram och inte den slutgiltiga designen rekommenderar jag att du håller allt konsekvent, inklusive färger, typografi och tomrum. På så sätt ser du till att de personer som testar din design inte upplever onödiga användbarhetsproblem och ger dig snedvridna insikter.
- Behåll den visuella hierarkin. Tekniskt sett bör den redan finnas i versionen med låg detaljgrad. Men om den inte gör det bör du lägga till den här. Du kan sedan använda dina trådramar med hög detaljgrad för att testa hur effektiv din visuella hierarki är.
- Lägg till tillgänglighetselement i din design. Trådramar med hög detaljgrad är också ett utmärkt verktyg för att testa designens tillgänglighet. Se därför till att ange rätt kontrastförhållanden för olika element som överlappar varandra och tänk även på andra tillgänglighetsaspekter.
Slutligen, glöm inte att ge användare som testar designen visuella hjälpmedel. Detta är särskilt relevant när du bara testar en del av produktens design och vissa skärmar eller steg saknas. För att undvika att förvirra användarna bör du visa anteckningar som förklarar var i användarresan de befinner sig just då och vad de förväntas göra.
Avancerade tekniker för trådramning med hög detaljgrad
Den bästa praxis som beskrivs ovan hjälper dig att skapa en ”tillräckligt bra” version av din detaljerade skiss. Men om du vill skapa något fantastiskt bör du överväga att använda dessa avancerade tekniker.
Interaktiva trådramar
Vissa populära verktyg för att skapa wireframes har inbyggda funktioner för prototypframtagning. Så varför inte dra nytta av dem och ge din wireframe liv? Du kan göra dina UI-element klickbara och låta användarna gå från en skärm till en annan – så att du efterliknar den resa de kommer att göra i den riktiga appen. Jag föreslår att du lägger till animerade övergångar som gör förändringen på sidan eller skärmen tydligare för användarna.
Du kan också lägga till animationer och övergångar för olika element i din mobilapp eller webbdesign och se om det hjälper användarna att uppmärksamma ett visst element på skärmen eller interagera med det på det sätt du avsett.
More Articles
Visuella designelement
För att din högupplösta wireframe ska representera din produkt och ditt varumärke på rätt sätt kan du också överväga att inkludera följande:
- Typografi: Typsnitten, avstånden och textfärgerna i dina designriktlinjer.
- Varumärkesprofilering: Din logotyp, dina varumärkesfärger och visuella tillgångar som representerar ditt varumärke.
- Verkligt innehåll: Skriv en faktisk produktbeskrivning i stället för lorem ipsum där en produktbeskrivning ska finnas i designen av din e-handelsapp.
- Verkliga visuella tillgångar: Om det finns illustrationer eller bilder som du planerar att ha på dina skärmar, lägg till dem också.
- Färgövergångar och skuggor: De får din wireframe att se mer realistisk ut och hjälper dig att lägga till ett lager av visuell hierarki eller interaktioner.
Obs: När det gäller att framhäva interaktioner med skuggor är Googles materialdesign bäst. Den använder skuggor för att visa höjd och tala om för användaren om ett element hålls över, klickas på eller är inaktivt.
Tips för samarbete i team
Varken prototypframtagning eller skapande av wireframes är någonsin uppgifter för en enda person. Antingen bygger du det tillsammans med ditt designteam, brainstormar med din produktchef eller diskuterar det med dina intressenter.
Så jag föreslår att du gör följande för att underlätta samarbets- och utvecklingsprocessen kring dina designer:
- Planera in regelbundna brainstormingsessioner. Bjud in din produktchef och dina designkollegor. Kanske även en ingenjör, eftersom den personen kan hjälpa dig att välja den tekniskt mest hållbara designen. Nyckelordet här är regelbundna – det kan vara en gång i veckan, varannan vecka eller mer sällan. Men det är viktigt att alltid genomföra dessa möten, eftersom de hjälper dig att hitta intressanta lösningar på dina designproblem.
- Genomför regelbundna designgranskningar. Om du arbetar i ett team kan du skicka din design på granskning mellan olika roller och låta flera nya par ögon titta på den och hitta problem som du kanske har missat. Den här processen höjer kvaliteten på din design avsevärt och hjälper dig att göra den konsekvent.
- Dokumentera dina tankar och kommentarer. Lägg till anteckningar och kommentarer i designen som förklarar vissa av dina designbeslut eller ger dina kollegor sammanhang.
Se slutligen till att det du bygger överensstämmer med företagets strategi och produktvision. Rådgör därför med ditt produktteam och företagets ledning om detta.
Testa din design som om den vore den färdiga produkten.
Den kanske allra viktigaste fördelen med att använda högupplösta wireframes är att de kan presentera produkten så nära den slutliga versionen som möjligt. På så sätt kan användarna testa den visuella representationen av din produkt utan att du behöver bygga den riktiga produkten.
Så jag uppmuntrar dig verkligen att använda processen för att skapa wireframes och använda den för att testa din design och dina hypoteser i ditt designarbete. Jag hoppas att jag har gett tillräckligt med sammanhang och användbara tips för att du ska få ut så mycket som möjligt av den.
Om du däremot vill fördjupa dig i ämnet föreslår jag att du läser den fullständiga guiden till att skapa wireframes. Utöver det kan du också prenumerera på vårt nyhetsbrev för fler resurser och guider inom produktledning.
