5-stegsprocess för att skapa skisser och bygga bättre produkter

Jag är säker på att du har hört talas om fördelarna med wireframing antingen under dina kurser i produkthantering eller från kollegor eller andra yrkesverksamma. Jag antar också att du har försökt införa någon form av wireframingprocess i din produkt.

Men fungerar din process bra? Kan du få ut mesta möjliga av dina wireframes med det sätt du arbetar på nu? Tja, det beror verkligen på vilken process du använder.

För att hjälpa dig att öka effektiviteten i ditt wireframingarbete vill jag dela med mig av min erfarenhet och berätta om en wireframingprocess som jag har funnit vara den bästa som finns.

Wireframing är en viktig del av UX-designprocessen

Wireframes är visuella representationer på hög nivå av din produkt som du kan använda för att illustrera hur du vill att produkten ska se ut och fungera. Med hjälp av dessa visuella representationer kan du testa och iterera på din idé innan du ber dina utvecklare att börja arbeta och inleda utvecklingsprocessen – vilket sparar tid och pengar.

Jag tycker verkligen om definitionen av wireframing från användarupplevelseexperterna på NN/g, eftersom den visar den viktigaste fördelen du får av det.

Snabb och kostnadseffektiv metod för att tidigt identifiera större användbarhetsproblem med skisser och papper. Perfekt för agila och Lean-processer.

Oavsett vilken metod för wireframing du väljer (det går alldeles utmärkt att rita på papper!) eller vilket wireframingverktyg du bestämmer dig för att använda (för det kan du kolla in vår lista över de bästa wireframingverktygen), rekommenderar jag att du följer den här processen, som jag har kommit fram till efter att ha provat i stort sett alla wireframingprocesser som finns.

Steg 1: Se till att du känner dina användare tillräckligt väl

Bra design börjar med ett team som känner sina användare väl. För vem behöver din design och produkten som den visualiserar om den inte kan tillgodose behoven hos de människor som den är avsedd för? Därför är det viktigaste steget du bör ta innan du börjar med wireframing användarundersökningar.

I verkligheten bör användarundersökningar fortsätta under hela livscykeln för din wireframingprocess (och även därefter), men låt oss fokusera på den inledande fasen när du försöker förstå behoven och vardagen hos dina framtida kunder.

Här är några av de viktiga aktiviteter som jag rekommenderar att du genomför under den här fasen:

Utforskande intervjuer: Vill du veta vad dina användare vill ha? Varför inte fråga dem direkt? Du kan börja med att ta fram en lista med frågor som hjälper dina användare att berätta om problemen de upplever och de lösningar de använder för att lösa dessa problem.

Sedan kan du ta kontakt med och rekrytera potentiella användare via sociala medier, specialiserade plattformar som Userinterviews eller Respondent, eller till och med träffa dem på mässor.

Slutligen genomför du intervjun antingen med en inspelning (så att du kan analysera den senare) eller med en intervjupartner som sitter bredvid dig och antecknar.

Obs! Helst gör du båda.

Enkäter: Intervjuer är en utmärkt källa till kvalitativa data som hjälper till att avslöja orsakerna bakom användarnas behov och beteenden, medan enkäter ger dig en blandning av kvalitativa och kvantitativa data, så att du kan validera resultaten med statistisk signifikans.

Jag ska inte gå in alltför mycket på detaljer här, eftersom vi har en hel guide om enkätfrågor som du kan ta en titt på.

Fältstudier: I det här fallet observerar du dina användare i deras ”naturliga miljö”. Det innebär att du antingen virtuellt eller fysiskt befinner dig i den miljö där dina målgrupper upplever de problem som du vill lösa.

Anta till exempel att du bygger ett verktyg som gör det enkelt att redigera videor för sociala medier. Din fältstudie skulle då vara att observera hur en influencer i sociala medier spelar in en TikTok-video, redigerar den och laddar upp den till sin kanal.

Även om fältstudier är relativt svåra att ordna (alla användare känner sig inte bekväma med att du observerar deras dagliga aktiviteter), ger de dig det rikaste sammanhanget och de mest värdefulla insikterna om dina användare.

Upptäcktsworkshoppar med intressenter: Ja, bra design av användarupplevelsen bygger på användarnas behov, men låt oss inte heller glömma dina viktigaste intressenter. Även om dina användare också är intressenter använder jag här begreppet för att representera dina grundare eller personer i företagsledningen, dina investerare, eventuella juridiska eller tillsynsmyndigheter som du behöver samarbeta med och så vidare.

Ibland fattar du designbeslut som inte baseras på användarnas behov, utan med hänsyn till:

• Din vision och strategi: Apples användare älskar kablar och trådbundna anslutningar, men Apples vision är trådlös – därför fortsätter de att ta bort portar. (Nu vet du!)
• Din juridiska miljö: Att ha ett enormt urval av cookiealternativ är inte det mest användarvänliga gränssnittet, men det är något som du kan vara juridiskt skyldig att visa.

Det finns också argument för intuition – trots att du känner dina användare väl kan du rådfråga din egen intuition när du ska fatta någon form av designbeslut.

När konceptet och typerna av research är tydliga kan vi illustrera hur det kommer att se ut i verkligheten med ett exempel.

Exempel 1: Skapa ett trådramsverktyg för en UI-specialist

Föreställ dig att du ansvarar för att skapa ett trådramsverktyg (något som liknar Balsamiq) och vill veta exakt hur dina målgrupper (i det här fallet designteam) kommer att använda det och vilka problem de hoppas lösa.

För att ta reda på detta kan vi utforma ett frågeformulär som vi vill ställa till våra användare under en intervju. Här är vad vi kan ta med:

Föreställ dig nu att vi upptäcker att återkopplingen huvudsakligen består av en kommentar på en specifik del av produktens trådram, och att produktchefen måste godkänna trådramens design. Det här är två insikter som direkt kommer att påverka vår design, eftersom vi behöver utforma ett arbetsflöde och ett användargränssnitt för att kommentera trådramen och godkänna den.

Sammanfattningsvis är den inledande undersökningen den viktigaste delen av din trådramsprocess, och jag rekommenderar inte att du hoppar över den. Nu när du har alla insikter till hands går vi vidare till nästa steg i vår trådramsprocess.

Steg 2: Skapa dina användarflöden

Innan du skapar själva skärmarna/sidorna och placerar komponenter som formulär, kort, bilder, knappar osv. på dem behöver du förstå sekvensen av steg som du föreställer dig att dina användare kommer att ta.

Dessa sekvenser kallas också användarflöden och representerar alla möjliga vägar som dina användare kan ta för att nå sina mål. Målen kan antingen vara något vanligt och ”administrativt”, som att registrera sig eller ändra sitt lösenord, eller representera dina kärnfunktioner (som att söka efter och strömma musik i Spotify).

Oavsett vilket är det viktigt att skapa användarflöden, eftersom det hjälper dig att bättre visualisera alla skärmar/sidor som du vill designa, samt det innehåll som behövs på varje sida.

För att göra flödena tydligare ska jag visa dig ett med hjälp av flödesschemat Flowmapp.

Exempel 2: Visualisera ett användarflöde för ett webbdesignverktyg med Flowmapp

Anta att du bygger ett webbdesignverktyg med dra-och-släpp-funktion, som Webflow. Dina användare är webbdesigners som arbetar utan kod, och du vill visualisera stegen de kommer att ta för att lägga till en bakgrundsbild på sin webbsida.

Så här kommer ett användarflöde för den funktionen att se ut i Flowmapp:

Som vi kan se ligger fokus i ett användarflöde mer på de handlingar som användaren utför och sekvensen/orsakssambandet mellan dem, snarare än på sidorna och deras design.

I det här exemplet vill vi att användaren ska kunna välja en bild från galleriet eller ladda upp/lägga till en bild i galleriet. Vi vill också att användaren ska kunna förhandsgranska bilden innan vårt verktyg använder den som bakgrund på användarens webbsida.

Genom att titta på flödet här förstår vi att användaren kommer att stanna på samma sida – webbsideredigeraren – och kanske se en annan skärm som visar bildgalleriet i form av ett popupfönster.

Det innebär att det finns en sida och ett popupfönster att designa, med relevanta designelement och funktioner.

Nu när vi har en överblick över de steg som användarna tar för att nå sina mål i vår produkt kan vi äntligen börja med själva trådramsarbetet.

Steg 3: Börja med en trådram med låg detaljnivå

Ja, att skapa en trådram är det tredje steget i den här trådramsprocessen. Men tro mig: om du genomför de två föregående stegen kommer kvaliteten på din trådram att lyftas till en helt ny nivå, och det är definitivt värt att lägga tid på dem.

När det gäller själva trådramen rekommenderar jag att du börjar med en variant med låg detaljnivå. En sådan trådram innehåller inga specifika detaljer som korrekta färger/storlekar eller andra designelement för dina sidor och skärmar. Den innehåller inte heller riktiga bilder eller texter. I stället har du platshållare för båda.

Och det finns en god anledning till att en lågupplöst wireframe ser ut så här och varför du bör börja med den—lågupplösta wireframes går snabbt att skapa och redigera.

Det är stor sannolikhet att du har missat något ganska viktigt i din design. När du samlar in feedback på den (vi kommer att prata om det mer i detalj i nästa steg) kan du förstå att det finns många objekt eller flöden som behöver ändras.

Om du hade haft en komplett design skulle det ha tagit flera dagar att göra dessa ändringar. Men med en lågupplöst wireframe kan du göra dina redigeringar och ta din design till ytterligare en feedbackrunda inom ett par timmar eller mindre.

Så efter att ha hyllat lågupplösta wireframes så mycket ska vi titta på hur de ser ut med hjälp av ett populärt wireframeverktyg—Balsamiq.

Exempel 3: Skapa en wireframe för en webbplats

Det fina med designverktyg som är specialiserade på wireframes, särskilt lågupplösta sådana, är att du inte behöver rita varje element från grunden.

I stället innehåller de vanligtvis en mängd färdiga grundläggande gränssnittselement (t.ex. bilder, menyer, brödsmulor, knappar osv.) tillsammans med dra-och-släpp-kontroller som gör det särskilt snabbt för dig att designa. Här är ett exempel som jag har byggt med Balsamiq.

Med tanke på den lågupplösta wireframens natur är den vanligtvis i gråskala eller har minimalt med färg och visuell design. I stället är allt du kan se det övergripande utseendet hos gränssnittselementen i din design samt deras placering och informationsarkitektur.

Om du nu har din lågupplösta wireframe klar är det dags att presentera den i din första granskningsrunda.

Steg 4: Iterera internt på din lågupplösta design

Innan du investerar tid och arbete i att bygga din slutliga produktdesign kan vi göra en kvalificerad gissning att det finns många saker som vi har gjort fel eller glömt att ta hänsyn till i designen. Därför bör vi börja visa vår lågupplösta wireframe för våra kollegor och intressenter.

Visst, du skulle också kunna visa den här designen för dina användare. Men med tanke på hur svårt det är att rekrytera användare som är villiga att granska eller användbarhetstesta din design rekommenderar jag att du använder deras dyrbara tid till att granska mer högupplösta designer och inte slösar deras tid på att påpeka problem som dina kollegor enkelt hade kunnat hitta.

Jag rekommenderar däremot att du involverar dina intressenter i den här fasen. Två av de viktigaste anledningarna till detta är:

• Minska ”avståndet” mellan dem och de teammedlemmar som bygger produkten genom att involvera dem redan i de tidiga faserna.
• Åtgärda designproblem kopplade till strategisk anpassning i tidiga faser för att spara tid senare.

Slutligen kan du, så snart du har samlat in feedback från dina kollegor och intressenter, åtgärda din lågupplösta wireframe utifrån den, validera ändringarna med dem och gå vidare till att skapa den faktiska visuella designen för din produkt.

Steg 5: Förbered en högupplöst wireframe och en klickbar prototyp

Eftersom du har en god förståelse för hur din design kommer att se ut på en övergripande nivå är det nu tryggt att investera i att skapa de visuella delarna av din design och föra den till det stadium där den mest liknar det du avser att bygga.

I den här designfasen kommer din digitala wireframe att innehålla:

• Din UI-design: inklusive rätt färger, skuggor, typografi och teckensnitt, marginaler osv.
• Ditt visuella innehåll: om du avser att ha bilder, illustrationer, videor eller andra grafiska element på dina sidor är det nu du lägger till dem.
• Texten på din sida: vi syftar på texten i dina gränssnittselement, knappar, rubriker osv.
• En exempelversion av ditt innehåll: om din design innehåller användargenererat innehåll eller innehåll som du själv har skapat bör du även lägga till en exempelversion av det. (Till exempel designen för en kommentar under ett inlägg, med den typiska storleken och det typiska innehållet i en kommentar som dina riktiga användare skulle skriva.)

Förutom att vara den huvudsakliga leveransen till ditt utvecklingsteam, som kommer att bygga din produkt utifrån dess design, kan den högupplösta wireframen också fungera som ett utmärkt verktyg för användbarhetstestning med dina faktiska användare.

Du kan antingen använda själva den högupplösta wireframen i testet eller ta den ett steg längre genom att lägga till interaktionsdesign och omvandla den till en klickbar prototyp.

Det är verkligen lätt att blanda ihop de termer jag har pratat om här (högupplösta wireframes, interaktiva prototyper osv.). Så låt mig reda ut dem för dig och samtidigt visa ett par exempel.

Olika typer av wireframes: mockuper jämfört med högupplösta wireframes och klickbara prototyper

De här tre begreppen liknar varandra ganska mycket och används tyvärr omväxlande, vilket skapar förvirring bland dem som är relativt nya inom produktutveckling och design.

Här är vad varje term betyder:

Högdetaljerad wireframe: Vi har redan berört den här ovan. Låt mig därför i stället visa hur den ser ut.

Den här övertygande designen är avsedd för en tjänst som låter dig anlita privata kockar för att laga exklusiva rätter åt dig. Som vi kan se innehåller designen allt – från slutliga bilder till färger och placeringar. Den innehåller också lite text med ”lorem ipsum” för att representera omdömet från en professionell kock på sidan.

Visualisering: Till skillnad från sin motsvarighet innehåller visualiseringen inte bara den slutliga designen, utan visar också miljön där designen förekommer. Om du till exempel designar ett brevpapper skulle en visualisering visa ett papper på ett bord med din design på.

När det gäller en mobilapp visar din visualisering silhuetten av en iPhone- eller Android-enhet med din design på skärmen.

Prototyp: Prototypen liknar en högdetaljerad wireframe, men utöver det slutliga utseendet försöker den också efterlikna produktens funktionalitet.

Med klickbara prototyper eller verktyg för 3D-prototypframställning kan du lägga till grundläggande interaktivitet, som rullning, animeringar, knappklick och navigering i appen med mera.

Genom att efterlikna produktens interaktivitet låter prototyper dig testa hur du vill att funktionerna ska fungera innan du utvecklar dem.

Dessutom kan du genomföra användartester genom att ge dina högdetaljerade prototyper till användarna och se hur de interagerar med produkten, löser sina problem eller försöker hitta rätt i din design.

Att skapa wireframes är en process av testning och iteration

Wireframens iterativa natur gör att du kan spara mycket arbete på att rätta till dina misstag. Genom att dessutom gå igenom en sådan här wireframeprocess ser du till att användarna får en produkt som tillgodoser deras behov på bästa sätt.

Använder ni en annan process för att skapa wireframes på ditt företag? Jag är nyfiken på att höra mer, så lämna en kommentar nedan och berätta hur ni gör!

Jag hoppas att du tyckte om den här guiden och hade nytta av den. Glöm inte att läsa andra guider om produktledning, skrivna av några av de främsta yrkesverksamma inom området, till exempel:

• Skillnaden mellan produktvision och produktstrategi av Kerstin Exner.
• Produktens tre P:n av Benoit des Ligneris.
• Dokument med produktkrav av Sarah Tolle.

Slutligen kan du prenumerera på vårt nyhetsbrev, så skickar vi också engagerande innehåll direkt till din inkorg.