Proces i 5 trin til at skabe bedre produkter med trådrammer

Jeg er sikker på, at du har hørt om fordelene ved trådskitsering enten på dine kurser i produktledelse eller fra kolleger eller fagfæller. Jeg går også ud fra, at du har forsøgt at indføre en eller anden form for trådskitseringsproces i dit produkt.

Men fungerer din proces godt? Er du i stand til at få mest muligt ud af dine trådskitser med den måde, du laver dem på nu? Det afhænger i høj grad af den proces, du bruger.

For at hjælpe dig med at øge effektiviteten af din trådskitsering vil jeg dele mine erfaringer og fortælle dig om en trådskitseringsproces, som jeg har fundet er den bedste derude.

Trådskitsering er en vigtig del af UX-designprocessen

Trådskitser er visuelle repræsentationer på højt niveau af dit produkt, som du kan bruge til at illustrere, hvordan du ønsker, at produktet skal se ud og fungere. Med disse visualiseringer kan du teste og videreudvikle din idé, før du beder dine udviklere om at gå i gang med udviklingsprocessen – og dermed spare tid og penge.

Jeg kan virkelig godt lide definitionen af trådskitsering fra brugeroplevelsesguruerne hos NN/g, fordi den fremhæver den vigtigste fordel, du får ud af det.

Hurtig og omkostningseffektiv metode til tidligt at identificere større brugervenlighedsproblemer med skitser og papir. Perfekt til Agile- og Lean-processer.

Uanset hvilken metode til trådskitsering du vælger (det er helt fint at tegne på papir!), eller hvilket værktøj til trådskitsering du beslutter dig for at bruge (se i den forbindelse vores liste over de bedste værktøjer til trådskitsering), vil jeg anbefale, at du følger denne proces, som jeg har fundet frem til efter at have prøvet stort set alle de trådskitseringsprocesser, der findes.

Trin nr. 1: Sørg for, at du kender dine brugere godt nok

Godt design begynder med et team, der kender sine brugere godt. For hvem har brug for dit design og det produkt, det visualiserer, hvis det ikke er i stand til at imødekomme behovene hos de mennesker, det er tiltænkt? Derfor er det vigtigste skridt, du bør tage, før du begynder din trådskitsering, brugerresearch.

I praksis bør brugerresearch fortsætte gennem hele livscyklussen for din trådskitseringsproces (og også derefter), men lad os fokusere på den indledende fase, hvor du forsøger at forstå behovene og hverdagen hos dine fremtidige kunder.

Her er nogle af de vigtige aktiviteter, jeg anbefaler, at du gennemfører i denne fase:

Udforskende interviews: Vil du vide, hvad dine brugere ønsker? Hvad med at spørge dem direkte? Du kan begynde med at lave en liste over spørgsmål, der hjælper dine brugere med at tale om de problemer, de oplever, og de løsninger, de bruger til at løse disse problemer.

Derefter kan du tage kontakt til og rekruttere potentielle brugere via sociale medier, specialiserede platforme som Userinterviews eller Respondent eller endda møde dem på messer.

Til sidst gennemfører du interviewet enten med en optager (så du kan analysere det senere) eller med en interviewpartner, der sidder ved siden af dig og tager noter.

Bemærk: Ideelt set gør du begge dele.

Spørgeundersøgelser: Mens interviews er en fantastisk kilde til kvalitative data, der hjælper med at afdække årsagerne bag brugernes behov og adfærd, giver spørgeundersøgelser dig en blanding af kvalitative og kvantitative data, så du kan validere resultater med statistisk signifikans.

Jeg vil ikke gå alt for meget i detaljer her, da vi har en hel guide om spørgsmål til spørgeundersøgelser, som du kan se nærmere på.

Feltstudier: I dette tilfælde observerer du dine brugere i deres ”naturlige habitat”. Det betyder, at du enten virtuelt eller fysisk er til stede i det miljø, hvor dine målbrugere oplever de problemer, du ønsker at løse.

Lad os for eksempel sige, at du bygger et værktøj, der gør det nemt at redigere videoer til sociale medier. Dit feltstudie vil være at observere processen, hvor en influencer på sociale medier optager en TikTok-video, redigerer den og uploader den til sin kanal.

Selvom feltstudier er relativt svære at arrangere (det er ikke alle brugere, der vil være trygge ved, at du observerer deres daglige aktiviteter), giver de dig den rigeste kontekst og de bedste indsigter i dine brugere.

Workshops om afdækning med interessenter: Ja, godt brugeroplevelsesdesign er bygget op omkring brugernes behov, men lad os heller ikke glemme dine vigtigste interessenter. Selvom dine brugere også er interessenter, vil jeg bruge dette begreb til at repræsentere dine stiftere/ledelsen, dine investorer, eventuelle juridiske eller regulerende organer, som du skal samarbejde med osv.

Nogle gange træffer du designbeslutninger, der ikke er baseret på brugernes behov, men som tager hensyn til:

• Din vision og strategi: Apples brugere elsker kabler og kablede forbindelser, men Apples vision er trådløs – derfor bliver de ved med at fjerne porte. (Så ved du det!)
• Dine juridiske rammer: Et enormt udvalg af cookieindstillinger er ikke den mest brugervenlige grænseflade, men det er noget, du kan være juridisk forpligtet til at vise.

Der er også et argument for intuition – selvom du kender dine brugere godt, kan du rådføre dig med din egen intuition for at træffe en form for designbeslutning.

Nu hvor begrebet og typerne af research står klart, kan vi illustrere, hvordan det vil se ud i virkeligheden, med et eksempel.

Eksempel 1: Oprettelse af et trådrammeværktøj til en UI-professionel

Forestil dig, at du har ansvaret for at skabe et trådrammeværktøj (noget, der minder om Balsamiq), og at du gerne vil vide præcis, hvordan dine målbrugere (i dette tilfælde designteams) vil bruge det, og hvilke problemer de håber at løse.

For at finde ud af det kan vi udarbejde et spørgeskema, som vi vil stille vores brugere under et interview. Her er, hvad vi kan inkludere:

Lad os nu forestille os, at vi finder ud af, at feedbacken primært kommer i form af en kommentar til en bestemt del af produktets trådramme, og at produktchefen skal godkende trådramedesignet. Det er to resultater, som vil påvirke vores design direkte, da vi skal designe en arbejdsgang og en brugergrænseflade til at kommentere på trådrammen og godkende den.

For at opsummere er det at gennemføre eksplorativ research den vigtigste del af din trådrammeproces, og jeg vil ikke anbefale, at du springer den over. Nu hvor du har alle indsigterne i hånden, kan vi gå videre til næste trin i vores trådrammeproces.

Trin #2: Opbyg dine brugerflows

Før du opretter selve skærmbillederne/siderne og placerer dine komponenter som formularer, kort, billeder, knapper osv. på dem, skal du forstå den rækkefølge af trin, som du forestiller dig, at dine brugere vil gennemgå.

Disse sekvenser kaldes også brugerflows, og de repræsenterer alle de mulige veje, som dine brugere kan tage for at nå deres mål. Disse mål kan enten være noget almindeligt og “administrativt” som at oprette en konto eller ændre sin adgangskode, eller de kan repræsentere dine kernefunktioner (som at søge efter og streame musik på Spotify).

Uanset hvad er det vigtigt at opbygge brugerflows, da det hjælper dig med bedre at visualisere alle de skærmbilleder/sider, som du ønsker at designe, samt det indhold, du har brug for på hver af dem.

For bedre at forstå flows vil jeg vise dig et ved hjælp af flowdiagramværktøjet Flowmapp.

Eksempel 2: Visualisering af et brugerflow for et webdesignværktøj ved hjælp af Flowmapp

Lad os antage, at du bygger et træk-og-slip-webdesignværktøj som Webflow. Dine brugere er webdesignere, der arbejder uden kode, og du vil visualisere de trin, de skal gennemgå for at tilføje et baggrundsbillede til deres webside.

Her er, hvordan et brugerflow for denne funktion vil se ud i Flowmapp:

Som vi kan se, ligger fokus i et brugerflow mere på de handlinger, som brugeren udfører, og rækkefølgen/årsagssammenhængen mellem dem, end på siderne og deres design.

I dette eksempel vil vi give brugeren mulighed for at vælge et billede fra galleriet eller uploade/tilføje et til galleriet. Vi vil også have, at brugeren kan forhåndsvise billedet, før vores værktøj anvender det som baggrund på brugerens webside.

Ved at se på flowet her forstår vi, at brugeren bliver på den samme side – websideeditoren – og måske ser endnu en skærm, der viser billedgalleriet som et pop op-vindue.

Derfor er der en side og et pop op-vindue, der skal designes med relevante designelementer og funktioner.

Nu hvor vi har et overblik over de trin, brugerne gennemgår for at nå deres mål i vores produkt, kan vi endelig begynde på selve trådrammeudarbejdelsen.

Trin #3: Start med en trådramme med lav detaljeringsgrad

Ja, at lave en trådramme er det tredje trin i denne trådrammeproces. Men tro mig: Hvis du gennemfører de to foregående trin, vil det løfte kvaliteten af din trådramme til et helt nyt niveau, og det er bestemt værd at bruge tid på dem.

Hvad selve wireframen angår, anbefaler jeg, at du starter med en wireframe med lav detaljeringsgrad. En wireframe med lav detaljeringsgrad indeholder ikke specifikke detaljer som de korrekte farver/størrelser og andre designegenskaber for dine sider og skærme. Den indeholder heller ikke rigtige billeder og tekster. I stedet har du pladsholdere for begge dele.

Og der er en god grund til, at en wireframe med lav detaljeringsgrad er sådan, og til at du bør starte med den—wireframes med lav detaljeringsgrad er hurtige at opbygge og redigere.

Der er stor sandsynlighed for, at du har overset noget ganske vigtigt i dit design. Når du indsamler feedback på det (det taler vi mere detaljeret om i næste trin), vil du måske opdage, at der er mange elementer/flows, der skal ændres.

Hvis du havde haft et komplet design, ville det have taget dig flere dage at foretage disse ændringer. Men med en wireframe med lav detaljeringsgrad kan du foretage dine redigeringer og sende dit design ud til endnu en feedbackrunde på et par timer eller mindre.

Så efter at have rost wireframes med lav detaljeringsgrad så meget, lad os se på, hvordan de ser ud ved hjælp af et populært wireframeværktøj—Balsamiq.

Eksempel 3: Oprettelse af en wireframe til et website

Det smarte ved designværktøjer, der er specialiseret i wireframes, især wireframes med lav detaljeringsgrad, er, at du ikke behøver at tegne hvert element fra bunden.

I stedet leveres de som regel med en række foruddesignede, grundlæggende brugerfladeelementer (f.eks. billeder, menuer, brødkrummer, knapper osv.) samt træk-og-slip-kontroller, der gør det særligt hurtigt for dig at designe. Her er et eksempel, jeg har bygget ved hjælp af Balsamiq.

På grund af wireframes med lav detaljeringsgrad er de som regel i gråtoner eller har kun tilføjet minimale farver og visuelle designelementer. I stedet er det eneste, du kan se, brugerfladeelementernes overordnede udseende i dit design samt deres placering og informationsarkitektur.

Hvis du nu har din wireframe med lav detaljeringsgrad klar, er det tid til at sende den til din første gennemgang.

Trin 4: Iterér internt på dit design med lav detaljeringsgrad

Før du investerer tid og kræfter i at opbygge dit endelige produktdesign, så lad os kvalificeret antage, at der er mange ting, vi har gjort forkert eller glemt at tage højde for i designet, og begynde at vise vores wireframe med lav detaljeringsgrad til vores kolleger og interessenter.

Du kunne selvfølgelig også vise dette design til dine brugere. Men i betragtning af hvor svært det er at rekruttere brugere, der er villige til at gennemgå eller brugerteste dit design, vil jeg anbefale, at du bruger deres dyrebare tid på at se på designs med højere detaljeringsgrad i stedet for at spilde deres tid på at påpege problemer, som dine kolleger nemt kunne have fundet.

Jeg anbefaler dog, at du involverer dine interessenter i denne fase. To af de vigtigste grunde til dette er:

• At mindske “afstanden” mellem dem og de teammedlemmer, der opbygger produktet, ved at involvere dem fra de tidlige faser.
• At løse designproblemer relateret til strategisk overensstemmelse i de tidlige faser for at spare tid senere.

Så snart du har indsamlet feedback fra dine kolleger og interessenter, kan du endelig rette din wireframe med lav detaljeringsgrad på baggrund af den, validere rettelserne sammen med dem og gå videre med at skabe det faktiske visuelle design til dit produkt.

Trin 5: Forbered en wireframe med høj detaljeringsgrad og en klikbar prototype

Nu hvor du har en god forståelse af, hvordan dit design kommer til at se ud på et overordnet niveau, er det sikkert at investere i at skabe de visuelle dele af dit design og bringe det til det stadie, hvor det ligner det, du har til hensigt at bygge, mest muligt.

I denne designfase vil din digitale wireframe indeholde:

• Dit brugerfladedesign: inklusive de rigtige farver, skygger, typografi og skrifttyper, margener osv.
• Dit visuelle indhold: Hvis du har til hensigt at have billeder, illustrationer, videoer eller andre grafiske elementer på dine sider, er det nu, du tilføjer dem.
• Din sides tekst: Det refererer til teksten på dine brugerfladeelementer, knapper, overskrifter osv.
• En mockup af dit indhold: Hvis dit design indeholder brugergenereret indhold eller indhold, du selv har skrevet, bør du også tilføje en mockupversion af det. (For eksempel designet af en kommentar under et indlæg, der har den typiske størrelse og det typiske indhold for en kommentar, som dine rigtige brugere ville skrive.)

Ud over at være den vigtigste leverance til dit udviklingsteam, som skal bygge dit produkt baseret på designet, kan wireframen med høj detaljeringsgrad også fungere som et fremragende værktøj til brugertest med dine faktiske brugere.

Du kan enten bruge selve wireframen med høj detaljeringsgrad til testen eller tage den et niveau videre ved at tilføje interaktionsdesign og omdanne den til en klikbar prototype.

Det er virkelig nemt at forveksle de begreber, jeg har talt om her (wireframes med høj detaljegrad, interaktive prototyper osv.). Så lad mig også forklare dem for dig og vise et par eksempler.

Forskelle på wireframe-typer: Mockups vs. wireframes med høj detaljegrad vs. klikbare prototyper

Disse tre begreber minder meget om hinanden, og desværre bruger folk dem i flæng – hvilket skaber forvirring blandt dem, der er relativt nye inden for produktudvikling og design.

Her er betydningen af hvert begreb:

Wireframe med høj detaljegrad: Vi har allerede berørt dette ovenfor. Så lad mig i stedet vise dig, hvordan det ser ud.

Dette overbevisende design er til en tjeneste, der lader dig hyre private kokke til at tilberede eksklusive retter for dig. Som vi kan se, indeholder dette design alt fra de endelige billeder til farver og placeringer. Der er også lidt “lorem ipsum”-tekst, som repræsenterer anbefalingen fra en professionel kok på siden.

Mockup: I modsætning til sin pendant indeholder en mockup ikke kun det endelige design, men viser også det miljø, hvor designet optræder. Generatorer til produktmockups kan hjælpe med at skabe disse kontekstuelle visualiseringer. Hvis du for eksempel designer brevpapir, vil en mockup vise et stykke papir på et bord med dit design på.

I tilfælde af en mobilapp vil din mockup vise silhuetten af en iPhone- eller Android-enhed med dit design på skærmen.

Prototype: Prototypen ligner et wireframe med høj detaljegrad, men ud over det endelige udseende forsøger den også at efterligne produktets funktionalitet.

Med klikbare prototyper eller værktøjer til 3D-prototyping kan du tilføje grundlæggende interaktivitet som rulning, animationer, klik på knapper, navigation i appen osv.

Ved at efterligne interaktionen med dit produkt lader prototyper dig afprøve, hvordan du ønsker, at dine funktioner skal fungere, før du udvikler dem.

Derudover kan du gennemføre brugertest ved at give dine prototyper med høj detaljegrad til dine brugere og se, hvordan de interagerer med dit produkt, løser deres problemer eller forsøger at finde vej gennem dit design.

Udarbejdelse af wireframes er en øvelse i testning og iteration

Wireframes' iterative karakter lader dig spare masser af arbejde med at rette dine fejl. Desuden sikrer du ved at gennemgå en wireframe-proces som denne, at dine brugere får et produkt, der bedst muligt opfylder deres behov.

Bruger du en anden proces til udarbejdelse af wireframes i din virksomhed? Jeg er nysgerrig efter at høre om den, så skriv en kommentar nedenfor og fortæl os, hvordan du gør!

Jeg håber, at du kunne lide denne guide og fandt den nyttig. Husk at læse andre vejledninger om produktledelse, skrevet af nogle af de bedste fagfolk inden for området, såsom:

• Forskellen mellem produktvision og produktstrategi af Kerstin Exner.
• Produktets 3 P'er af Benoit des Ligneris.
• Dokumenter med produktkrav af Sarah Tolle.

Endelig kan du tilmelde dig vores nyhedsbrev, så sender vi også spændende indhold direkte til din indbakke.