5-stegsprocess för trådmodellering för att bygga bättre produkter

Jag är övertygad om att du har hört talas om fördelarna med framtagning av trådmodeller antingen under dina kurser i produktledning eller från kollegor eller branschkollegor. Jag antar också att du har försökt införa någon form av process för framtagning av trådmodeller i din produkt.

Men fungerar din process bra? Kan du få ut så mycket som möjligt av dina trådmodeller med det sätt du använder nu? Det beror faktiskt på vilken process du använder.

För att hjälpa dig att öka effektiviteten i ditt arbete med trådmodeller vill jag dela med mig av min erfarenhet och berätta om en process för framtagning av trådmodeller som jag har funnit vara den bästa som finns.

Framtagning av trådmodeller är en viktig del av UX-designprocessen

Trådmodeller ä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 vidareutveckla din idé innan du ber dina utvecklare att kliva in och påbörja utvecklingsprocessen – vilket sparar tid och pengar.

Jag tycker verkligen om definitionen av framtagning av trådmodeller från användarupplevelse-guruerna på NN/g, eftersom den lyfter fram den viktigaste fördelen du får av det.

En snabb och kostnadseffektiv teknik för att tidigt identifiera större användbarhetsproblem med skisser och papper. Perfekt för agila och slimmade processer.

Oavsett vilken metod för framtagning av trådmodeller du väljer (att rita på papper går alldeles utmärkt!) eller vilket verktyg för trådmodellering du bestämmer dig för att använda (för det kan du ta en titt på vår lista över de bästa verktygen för trådmodellering), rekommenderar jag att du följer den här processen, som jag har kommit fram till efter att ha provat i stort sett alla processer för framtagning av trådmodeller 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 personer den är avsedd för? Därför är det viktigaste steget du bör ta innan du börjar ta fram trådmodeller användarundersökningar.

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

Här är några av de viktiga aktiviteter 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 göra en lista över frågor som hjälper dina användare att prata 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å branschmässor.

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

Obs! Helst gör du båda delarna.

Enkäter: Intervjuer är visserligen en utmärkt källa till kvalitativa data som hjälper till att synliggöra orsakerna bakom användarnas behov och beteenden, men enkäter ger dig en blandning av kvalitativa och kvantitativa data, vilket gör att du kan validera resultaten med statistisk signifikans.

Jag kommer inte att 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 du vill lösa.

Om du till exempel bygger ett verktyg som gör det enkelt att redigera videor för sociala medier skulle din fältstudie innebära att du observerar hur en innehållsskapare 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 arrangera (alla användare känner sig inte bekväma med att låta dig observera deras dagliga aktiviteter), ger de dig den rikaste kontexten och de mest värdefulla insikterna om dina användare.

Upptäcktsworkshoppar med intressenter: Ja, bra design av användarupplevelsen utgår från 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 termen för att representera dina grundare och personer i företagsledningen, dina investerare, eventuella juridiska eller regulatoriska organ 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 sladdar och trådbundna anslutningar, men Apples vision är trådlös – det är därför de fortsätter att ta bort portar. (Nu vet du!)
• Din juridiska omgivning: 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å ett argument för intuition – trots att du känner dina användare väl kan du rådfråga din egen intuition för att 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 verktyg för att skapa trådmodeller för en UI-specialist

Föreställ dig att du ansvarar för att skapa ett verktyg för att skapa trådmodeller (något som liknar Balsamiq) och vill veta exakt hur dina målanvändare (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 om en specifik del av produktens trådmodell, och att produktchefen måste godkänna trådmodelldesignen. Detta ä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ådmodellen och godkänna den.

Sammanfattningsvis är den upptäckande undersökningen den viktigaste delen av din process för att skapa trådmodeller, 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 processen.

Steg 2: Skapa dina användarflöden

Innan du skapar själva skärmbilderna/sidorna och placerar komponenter som formulär, kort, bilder, knappar och så vidare på dem behöver du förstå den sekvens 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 vardagligt 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ärmbilder/sidor som du vill designa samt det innehåll du behöver på varje sida.

För att göra flödena tydligare ska jag visa dig ett med hjälp av flödesschemaverktyget 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 inte behöver kunna programmera, 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 åtgärder som användaren utför och sekvensen/orsakssambandet mellan dem ä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 – webbredigeraren – 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 uppnå sina mål i vår produkt kan vi äntligen börja med själva trådmodell arbetet.

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

Ja, att skapa en trådmodell är det tredje steget i denna process. Men tro mig: om du genomför de två föregående stegen kommer kvaliteten på din trådmodell att höjas avsevärt, och det är definitivt värt att lägga tid på dem.

När det gäller själva skissen rekommenderar jag att du börjar med en skiss med låg detaljnivå. En skiss med låg detaljnivå innehåller inte några specifika detaljer som de korrekta färgerna och storlekarna eller andra designattribut för dina sidor och skärmar. Den innehåller inte heller riktiga bilder och texter. I stället använder du platshållare för båda.

Och det finns en bra anledning till att en skiss med låg detaljnivå ser ut på det här sättet och till att du bör börja med den –skisser med låg detaljnivå går snabbt att skapa och redigera.

Det är stor sannolikhet att du kan ha missat något ganska viktigt i din design. När du samlar in feedback på den (vi kommer att prata mer om det i nästa steg) kan du förstå att det finns många objekt och 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 skiss med låg detaljnivå kan du göra dina ändringar och ta designen genom ytterligare en feedbackrunda på ett par timmar eller mindre.

Så efter att ha hyllat skisser med låg detaljnivå så här mycket kan vi titta på hur de ser ut med hjälp av ett populärt verktyg för att skapa skisser – Balsamiq.

Exempel 3: Skapa en webbplatsskiss

Det fina med designverktyg som är specialiserade på att skapa skisser, särskilt skisser med låg detaljnivå, ä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 skapa design. Här är ett exempel som jag har byggt med Balsamiq.

Med tanke på skissernas natur med låg detaljnivå är de vanligtvis i gråskala eller har minimalt med färg och visuell design. I stället är det enda du kan se det allmänna utseendet hos gränssnittselementen i din design, liksom deras placering och informationsarkitektur.

Nu när du har din skiss med låg detaljnivå klar är det dags att ta den genom din första granskningsrunda.

Steg 4: Iterera internt på din design med låg detaljnivå

Innan du investerar tid och arbete i att bygga den slutliga produktdesignen kan vi göra en välgrundad gissning att det finns många saker som vi har gjort fel eller glömt att ta hänsyn till i designen, och börja visa vår skiss med låg detaljnivå 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 värdefulla tid till att granska mer detaljerade designer och inte slösar deras tid på att påpeka problem som dina kollegor enkelt hade kunnat hitta.

Jag rekommenderar dock att du involverar dina intressenter i den här fasen. Två viktiga anledningar 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 som rör strategisk överensstämmelse i ett tidigt skede för att spara tid senare.

Så snart du har samlat in feedback från dina kollegor och intressenter kan du slutligen korrigera din skiss med låg detaljnivå utifrån feedbacken, validera korrigeringarna med dem och gå vidare till att skapa den faktiska visuella designen för din produkt.

Steg 5: Förbered en detaljerad skiss och en klickbar prototyp

Nu när du har en ordentlig förståelse för hur din design kommer att se ut på en övergripande nivå är det tryggt att investera i att skapa de visuella delarna av din design och ta den till ett läge där den liknar det du tänker bygga så mycket som möjligt.

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

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

Förutom att fungera som det huvudsakliga leveransobjektet för ditt tekniska team, som ska bygga produkten utifrån designen, kan den detaljerade skissen också fungera som ett utmärkt verktyg för användbarhetstestning med dina riktiga användare.

Du kan antingen använda själva den detaljerade skissen för 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 termerna jag har tagit upp här (högupplösta trådramar, interaktiva prototyper och så vidare). Så låt mig reda ut dem åt dig och även visa ett par exempel.

Att skilja mellan olika typer av trådramar: mockuper jämfört med högupplösta trådramar och klickbara prototyper

Dessa tre begrepp liknar varandra ganska mycket och tyvärr använder människor dem omväxlande, vilket skapar förvirring bland dem som är relativt nya inom produktutveckling och design.

Så här ska varje term förstås:

Högupplöst trådram: Vi berörde redan detta ovan. Låt mig därför i stället visa hur det ser ut.

Den här övertygande designen är till för en tjänst som låter dig anlita privata kockar för att laga exklusiva maträtter åt dig. Som vi kan se innehåller designen allt – från slutgiltiga bilder till färger och placeringar. Det finns också lite text i form av ”lorem ipsum” som representerar ett omdöme från en professionell kock på sidan.

Mockup: Till skillnad från sin motsvarighet innehåller mockupen inte bara den slutgiltiga designen, utan visar också miljön där designen förekommer. Verktyg för att skapa produktmockuper kan hjälpa dig att skapa dessa kontextuella visualiseringar. Om du till exempel designar ett brevpapper skulle en mockup visa ett papper på ett bord med din design på.

För en mobilapp visar din mockup silhuetten av en iPhone- eller Android-enhet med din design på skärmen.

Prototyp: Prototypen ser ut som en högupplöst trådram, men utöver det slutgiltiga utseendet försöker den också efterlikna produktens funktionalitet.

Med klickbara prototyper eller verktyg för 3D-prototyper kan du lägga till grundläggande interaktivitet, som rullning, animeringar, knapptryckningar, navigering i appen och så vidare.

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 användare dina högupplösta prototyper och observera hur de interagerar med produkten, löser sina problem eller försöker hitta rätt i din design.

Att skapa trådramar handlar om testning och iteration

Trådramarnas iterativa natur gör att du kan spara massor av arbete på att rätta till dina misstag. Genom att dessutom gå igenom en sådan här process för att skapa trådramar ser du till att dina användare får en produkt som på bästa sätt tillgodoser deras behov.

Använder ni en annan process för att skapa trådramar på ditt företag? Jag är nyfiken på att höra om den, 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 bästa yrkespersonerna 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 till din inkorg.