Så skapar du högdetaljerade trådskisser: En komplett guide
Att skapa "trådskisser" av produkter för att samla in feedback innan man investerar i ett fullskaligt 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 prototyper av verktyg och föremål och visa upp dem för sina herrar innan massproduktionen inleddes.
Den moderna mjukvaruvärlden har naturligtvis också tagit till sig denna process. Till skillnad från att bygga en prototypversion av en produkt gör moderna verktyg för att skapa trådskisser och prototyper det möjligt för oss att testa prototypen i ett ännu tidigare skede – medan den fortfarande håller på att utformas.
Dagens fokus är den viktigaste delen av att bygga mjukvaruprototyper – den detaljrika trådskissen som möjliggör interaktivitet och ger ett koncept liv.
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å detaljrika trådskisser
Innan jag förklarar vad detaljrika trådskisser är vill jag först beröra själva begreppet detaljnivå hos trådskisser.
Detaljnivå syftar på hur mycket detaljer du inkluderar när du bygger din produkttrådskiss. Det kan vara visuella detaljer som 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 de visuella aspekterna finns det även innehållsdetaljer. 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å detaljnivån hos din trådskiss använder du antingen visuella element i gråskala med generiskt utseende och platshållarinnehåll (låg detaljnivå) eller ett varumärkesanpassat färgschema med element från ditt designsystem samt verkligt innehåll (hög detaljnivå).
Så här ser de ut sida vid sida.
Även om du kanske tycker att detaljrika trådskisser är det självklara valet när du jämför dessa två är så inte alltid fallet. Det fina med modeller med låg detaljnivå är den hastighet med vilken du kan utforma, användartesta och iterera på dem.
Under de allra tidigaste faserna av din design brukar du därför göra ett par iterationer med en trådskiss med låg detaljnivå innan du går vidare till att skapa en med hög detaljnivå.
Fördelar med detaljrika trådskisser
Detaljrika trådskisser tar visserligen längre tid att skapa, men de är en mycket värdefull del av ditt designprojekt eftersom de medför en mängd 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 hög att samma person godkänner din trådskiss med låg detaljnivå men upptäcker problem och ger dig feedback när de ser den detaljrika versionen 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 trådskiss med låg detaljnivå. 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.
- Prototypskapande: Klickbara prototyper blir hemska när de bygger på trådskisser med låg detaljnivå. Prototyper med hög detaljnivå ligger däremot mycket nära den slutliga designen och är tillräckligt bra för att du ska kunna dela dem med dina användare i ett tidigt skede.
- Kommunikation mellan teknik- och designteamet: Du kan dela dina trådskisser med hög detaljnivå med utvecklingsteamet för att även få tidig feedback från dem, bland annat om implementeringsutmaningar och farhågor. De har den detaljnivå som krävs för att utvecklarna ska förstå hur de ska bygga den och vilka problem de potentiellt kan stöta på.
Slutligen kan trådskisser med hög detaljnivå 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 att skapa detaljrika trådskisser
Även om du tekniskt sett kan skapa trådskisser med låg detaljnivå på ett papper eller en whiteboard har du inget annat val än att välja ett specialiserat produktdesignverktyg för att skapa en trådskiss med hög detaljnivå.
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ändarupplevelsedesigner väljer det för prototypskapande, användarflöden och trådskissdesign.
Plattform: Webb, dator (MacOS, Windows)
Där det utmärker sig: 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 gör det möjligt för flera teammedlemmar att arbeta i samma fil samtidigt. Du kan se markörerna för alla som tittar på eller redigerar designfilen, lämna kommentarer och chatta i realtid via 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) och även 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 gå igenom 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 och är ett populärt alternativ till Framer och andra populära designverktyg. Vissa spekulerar i att exklusiviteten för Mac var en av anledningarna till att detta i övrigt utmärkta verktyg förlorade sin tron.
Plattformar: macOS
Där det utmärker sig: Sketch kan anpassas i hög grad tack vare sitt omfattande stöd för insticksprogram, vilket gör det till ett utmärkt val för nischade designbehov.
Nu ska vi titta på de mest framträdande funktionerna i Sketch.
Vektorredigering: Jämfört med övriga verktyg 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.
Webbvisning: 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 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 utmärker sig: Adobe XD är helt integrerat i Adobes 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 det här verktygets funktioner finns det ytterligare några saker som är värda att nämna:
Prototypframställning: Adobe XD utmärker sig genom sin förmåga att skapa prototyper av mikrosamspel, utöver den vanliga uppsättningen funktioner för prototypframställning.
Animeringar: Eftersom Adobe är företaget bakom 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 gör det möjligt för flera personer att 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 utmärker sig: Eftersom Axure RP är ett specialiserat verktyg kan det ta prototypframställning till nästa nivå med komplexa interaktioner och användarflöden.
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 baserat på ditt val eller andra liknande åtgärder.
Dokumentation för överlämning: Medan nästan alla produkter som nämns här har funktioner för överlämning till utvecklare, är Axure RP det alternativ där du kan skapa mycket detaljerad dokumentation som beskriver din design och logik.
Flödesscheman: Förutom att utforma den högupplösta wireframen kan du också använda Axure RP för att skapa flödesscheman 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 högupplösta wireframes”. Verktygen som listas här, liksom de i vår utvalda sammanställning av verktyg för UX-design, har både styrkor och svagheter. Det handlar därför egentligen om personliga preferenser, beroende på vilka aspekter som är viktigast för dig och ditt team.
Bästa praxis för att skapa högupplösta wireframes
När du äntligen har nått den punkt i designprocessen då det är dags att utveckla den här typen av wireframe bör du följa dessa tips för att få ut så mycket som möjligt av din högupplösta skiss.
Bästa praxis för wireframeprocessen
- 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 lågupplösta design. Denna persona är dock sannolikt 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 den högupplösta wireframen. Det är mycket möjligt att du fick feedback från användare som granskade den lågupplösta versionen och som du då ansåg vara irrelevant, men som nu har blivit mycket relevant.
- Det finns inget som heter den ”slutliga versionen” av en wireframe. Övertänk inte de små detaljerna. I stället för att arbeta med den detaljerade wireframen 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å din wireframe är redo att bli en slutlig design.
- Utnyttja 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 se så likt den slutliga designen som möjligt.
Tips för wireframedesign
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 designen konsekvent. Även om det fortfarande är en wireframe och inte den slutliga designen rekommenderar jag att du håller allt konsekvent, inklusive färger, typografi och tomrum. På så sätt ser du till att personerna som testar din design inte upplever onödiga användbarhetsproblem och ger dig missvisande insikter.
- Behåll den visuella hierarkin. Tekniskt sett bör den redan finnas i den lågupplösta versionen också. Men om den inte gör det bör du lägga till den här. Du kan sedan använda dina högupplösta wireframes för att testa hur effektiv din visuella hierarki är.
- Lägg till tillgänglighetsanpassade element i din design. Högupplösta wireframes är också ett utmärkt verktyg för att testa designens tillgänglighet. Se därför till att ställa in rätt kontrastnivåer för olika element som överlappar varandra och tänk även på andra aspekter av tillgänglighet.
Slutligen får du inte glömma 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ärmbilder 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 och vad de förväntas göra.
Avancerade tekniker för högupplösta wireframes
Den bästa praxis som beskrivs ovan hjälper dig att skapa en ”tillräckligt bra” version av din högupplösta wireframe. Men om du vill skapa något fantastiskt kan du överväga att använda dessa avancerade tekniker.
Interaktiva wireframes
Vissa populära verktyg för wireframes har inbyggda funktioner för prototyper. 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 ta sig från en skärm till en annan – och på så sätt efterlikna 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 animeringar och övergångar till 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å ett korrekt 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: I stället för att skriva lorem ipsum där en produktbeskrivning ska finnas i designen av din e-handelsapp kan du skriva en faktisk produktbeskrivning.
- Verkliga visuella tillgångar: Om det finns illustrationer eller bilder som du planerade att ha på dina skärmar kan du lägga till dem också.
- Gradienter och skuggor: Dessa gör att din wireframe ser 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 hovras över, klickas på eller är inaktivt.
Tips för teamsamarbete
Varken prototypframtagning eller wireframing ä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.
Därför föreslår jag 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 meddesigners. Kanske även en ingenjör, eftersom hen kan hjälpa dig att välja den tekniskt mest genomtänkta 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å en tvärgranskning 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 riktiga produkten.
Den förmodligen viktigaste fördelen med att använda högupplösta wireframes är deras förmåga att 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.
Därför uppmuntrar jag dig starkt att använda wireframeprocessen 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 kompletta guiden till wireframing. Dessutom kan du prenumerera på vårt nyhetsbrev för fler resurser och guider om produktledning.
