«Trådskissering» av produkter for å innhente tilbakemeldinger før man investerer i en fullverdig utvikling, er en langt eldre praksis enn de fleste av oss er klar over. Selv i middelalderen ville ingeniører (hvis det var det de ble kalt den gangen) lage prototypeversjoner av verktøy og gjenstander og vise dem frem til lensherrene sine før de startet masseproduksjon.
Den moderne programvareverdenen har naturligvis også tatt i bruk denne prosessen. I motsetning til å bygge en prototypeversjon av et produkt, lar moderne verktøy for trådskissering og prototyping oss teste prototypen på et enda tidligere stadium – mens den fortsatt er under utforming.
Dagens fokus er den viktigste delen av å bygge programvareprototyper – trådskissen med høy detaljgrad som muliggjør interaktivitet og bringer et konsept til live.
Forstå trådskisser med høy detaljgrad
Før jeg forklarer hva trådskisser med høy detaljgrad er, vil jeg først berøre selve konseptet detaljgrad for trådskisser.
Detaljgrad viser til hvor mange detaljer du inkluderer når du bygger trådskissen for produktet ditt. Det kan være visuelle detaljer, for eksempel fargene på brukergrensesnittelementer som representerer merkevaren din, eller bilder som skal være på den aktuelle skjermen (for eksempel produktbilder i søkeresultater på et netthandelsnettsted).
I tillegg til visuelle aspekter finnes det også innholdsdetaljer. Dette er når du enten bruker plassholdertekst/-innhold (for eksempel lorem ipsum) eller faktisk innhold (produktnavn og beskrivelser).
Avhengig av detaljgraden i trådskissen bruker du enten visuelle elementer i gråtoner med et generisk utseende og plassholderinnhold (lav detaljgrad), eller et merkevaretilpasset fargevalg med elementer fra designsystemet ditt sammen med faktisk innhold (høy detaljgrad).
Slik ser de ut ved siden av hverandre.
Selv om du kanskje tenker at trådskisser med høy detaljgrad er det opplagte valget når du sammenligner disse to, er det ikke alltid tilfelle. Det fine med modeller med lav detaljgrad er hvor raskt du kan utforme, brukerteste og videreutvikle dem.
I de aller tidligste fasene av designarbeidet vil du derfor vanligvis ha et par iterasjoner med en trådskisse med lav detaljgrad før du går videre til å lage en med høy detaljgrad.
Fordeler med trådskisser med høy detaljgrad
Trådskisser med høy detaljgrad tar riktignok mer tid å lage, men de er en svært verdifull del av designprosjektet ditt fordi de gir en rekke fordeler. Her er noen av dem:
- Bedre kommunikasjon: Mennesker er visuelt orienterte og forstår designet bedre når du bruker riktige farger, elementer og innhold. Derfor er sjansen stor for at den samme personen godkjenner trådskissen din med lav detaljgrad, men oppdager problemer og gir deg tilbakemeldinger når vedkommende ser trådskissen med høy detaljgrad for første gang.
- Bedre brukervennlighetstesting: Du forbedrer kvaliteten på tilbakemeldingene du får fra brukerne dine når du viser det faktiske innholdet slik det vil se ut i det endelige designet. En side med søkeresultater ser ut som en liste med grå bokser i trådskissen med lav detaljgrad. Du kan ikke si om elementene på siden er enkle å skanne før du ser faktiske bilder og tekst på den.
- Prototyping: Klikkbare prototyper er forferdelige når de bygges på trådskisser med lav detaljgrad. Prototyper med høy detaljgrad ligner imidlertid svært mye på det endelige designet og er gode nok til at du kan dele dem med brukere i en tidlig fase.
- Kommunikasjon mellom utviklings- og designteamet: Du kan dele trådskissene dine med høy detaljgrad med utviklingsteamet for å få tidlige tilbakemeldinger også fra dem, når det gjelder implementeringsutfordringer og bekymringer. De har det nødvendige detaljnivået for at utviklerne skal forstå hvordan de skal bygge løsningen, og hvilke problemer de potensielt kan møte.
Til slutt kan trådskisser med høy detaljgrad vise deg og designkollegene dine hvordan produktet vil se ut og føles, slik at dere kan oppdage designinkonsekvenser eller andre visuelle problemer som må løses før brukergrensesnittet testes på nytt.
Verktøy og programvare for trådskisser med høy detaljgrad
Selv om du teknisk sett kan lage trådskisser med lav detaljgrad på et ark eller en tavle, har du ikke noe annet valg enn å velge et spesialisert produktdesignverktøy for å lage en med høy detaljgrad.
La oss derfor se nærmere på et par populære alternativer du kan velge mellom, og forstå hvilke muligheter de tilbyr.
Have an account? Log In
Figma
Figma er markedslederen innen digitalt produktdesign, og over 40 % av alle designere av brukeropplevelser velger det til prototyping, brukerflyter og trådskissedesign.
Plattform: Nett, datamaskin (MacOS, Windows)
Her utmerker det seg: samarbeid i sanntid mellom designere, ledere og utviklere, samt støtte for flere plattformer.
Når det gjelder funksjoner, er dette det jeg vil fremheve ved Figma:
Samarbeid: Figma lar flere teammedlemmer arbeide i den samme filen samtidig. Du kan se markørene til alle som viser eller redigerer designfilen, legge igjen kommentarer og chatte i sanntid med en liten meldingsboks som åpnes ved siden av markøren.
Støtte for designsystemer og komponenter: Du kan opprette gjenbrukbare komponenter i Figma (inkludert flere tilstander for dem), samt definere et helt designsystem ved hjelp av retningslinjene og komponentene dine.
Prototyping: Du kan konvertere designene dine til klikkbare prototyper som brukerne kan utforske for å forstå hvordan produktet ditt vil oppleves. Selv om dette ikke er det mest avanserte prototypingssystemet på markedet, er det fortsatt svært funksjonsrikt.
Sketch
Sketch pleide å være det foretrukne designverktøyet før Figma kom på banen, og er et populært alternativ til Framer og andre populære designverktøy. Noen spekulerer i om det at verktøyet bare var tilgjengelig for Mac, var en av grunnene til at dette ellers utmerkede verktøyet mistet tronen.
Plattformer: macOS
Her utmerker det seg: Sketch kan tilpasses i stor grad takket være den omfattende støtten for programtillegg, noe som gjør det til et godt valg for spesialiserte designbehov.
La oss nå se på de mest fremtredende funksjonene i Sketch.
Vektorredigering: Sammenlignet med resten har Sketch trolig det mest robuste vektorredigeringsverktøyet på markedet, inkludert støtte for boolske operasjoner og samsvarende operatorer for å definere formene dine.
Forhåndsvisning på nett: Sketch har ikke et fullverdig redigeringsverktøy, men tilbyr en nettapp for gjennomgang av design, overlevering av ressurser til utviklere og testing av prototyper.
Prototyping: Sketchs prototypingsfunksjoner er på nivå med Figma. Her kan du også koble sammen tegnebrettene dine gjennom en arbeidsflyt, gjøre elementer klikkbare og mer.
Adobe XD
Dette er den kreative programvaregiganten Adobes svar på den harde konkurransen i markedet for trådrammer og UI/UX-design.
Plattformer: macOS, Windows
Her utmerker det seg: Adobe XD er fullt integrert i Creative Cloud, slik at du sømløst kan importere design og ressurser fra andre Adobe-verktøy og mer.
Etter å ha prøvd ut funksjonene i dette verktøyet, er dette annet som er verdt å nevne:
Prototyping: AdobeXD utmerker seg ved muligheten til å lage prototyper av mikrointeraksjoner, i tillegg til standardverktøyene for prototyping.
Animasjoner: Siden selskapet også står bak After Effects, er det ikke overraskende at AdobeXD har mer avanserte funksjoner for animasjon av UI-elementer.
Samarbeid: Selv om det ikke er like avansert som Figma, lar AdobeXD flere personer redigere designet samtidig.
Axure RP
Mens de andre var generelle UI/UX-designverktøy som også håndterte trådrammer og prototyper, er dette verktøyet spesifikt rettet mot sistnevnte.
Plattformer: macOS, Windows
Her utmerker det seg: Axure RP er et spesialisert verktøy som kan videreutvikle prototyping med komplekse interaksjoner og brukerreiser.
La oss nå se nærmere på funksjonaliteten dette verktøyet inkluderer:
Avansert logikk: I stedet for en enkel «klikk for å åpne neste tegnebrett» kan Axure RP legge inn kompleks logikk i prototyper. Det betyr at du kan åpne menyer og velge elementer, og at designet og innholdet endres dynamisk basert på valget ditt eller andre lignende handlinger.
Dokumentasjon for overlevering: Selv om nesten alle produktene som er nevnt her, har overlevering til utviklere, er Axure RP det eneste alternativet der du kan opprette svært detaljert dokumentasjon som beskriver designet og logikken din.
Flytdiagrammer: I tillegg til å utforme wireframes med høy gjengivelse kan du også bruke Axure RP til å opprette flytdiagrammer som beskriver brukerreisen og forretningslogikken bak designet ditt.
For å oppsummere finnes det ingen klar vinner blant «det beste verktøyet for wireframes med høy gjengivelse». Verktøyene som er listet opp her, samt de som finnes i vår kuraterte samling av verktøy for UX-design, har både styrker og svakheter. Det handler derfor egentlig om preferanser, avhengig av hvilke aspekter som er viktigst for deg og teamet ditt.
Beste praksis for å lage wireframes med høy gjengivelse
Når du endelig har kommet til punktet i designprosessen der det er på tide å utvikle denne typen wireframe, bør du følge disse tipsene for å få mest mulig ut av modellen med høy gjengivelse.
Beste praksis for wireframeprosessen
- Sørg for at brukerpersonaen din er oppdatert. Du har allerede en versjon av en persona som du brukte til å lage det første designet med lav gjengivelse. Denne personaen er imidlertid sannsynligvis utdatert, ettersom du allerede har gjennomført et par testrunder med den og oppdaget mange nye aspekter ved personligheten og behovene.
- Gå gjennom alle tidligere tilbakemeldinger fra brukerne før du begynner på wireframen med høy gjengivelse. Det er sannsynlig at du fikk tilbakemeldinger fra brukere som vurderte versjonen med lav gjengivelse, og som du anså som irrelevante på det tidspunktet, men som nå vil bli svært relevante.
- Det finnes ikke noe som heter «den endelige versjonen» av en wireframe. Ikke overtenk de små detaljene. I stedet for å jobbe med den detaljerte wireframen i ukevis bør du gjøre et par endringer og teste den. Jo kortere syklusen er fra teamet ditt legger til designideer til brukerne tester dem, desto raskere kommer du til punktet der wireframen er klar til å bli et endelig design.
- Utnytt komponentene og malene i designsystemet ditt. Det finnes ingen pris for å starte helt fra bunnen av! Ved å bruke disse malene sparer du mye tid, og resultatet vil ligne mest mulig på det endelige designet.
Tips for wireframedesign
I tillegg til rådene ovenfor om hvordan du gjennomfører designprosessen effektivt, får du her noen tips knyttet til selve designet.
- Hold designet konsekvent. Selv om det fortsatt er en wireframe og ikke det endelige designet, anbefaler jeg at du holder alt konsekvent, inkludert farger, typografi og tomrom. På denne måten sørger du for at personene som tester designet ditt, ikke opplever unødvendige brukervennlighetsproblemer og gir deg skjeve innsikter.
- Bevar det visuelle hierarkiet. Teknisk sett bør det allerede være til stede i versjonen med lav gjengivelse også. Hvis ikke, bør du legge det til her. Du kan deretter bruke wireframes med høy gjengivelse til å teste hvor effektivt det visuelle hierarkiet ditt er.
- Legg til tilgjengelighetselementer i designet ditt. Wireframes med høy gjengivelse er også et godt verktøy for å teste tilgjengeligheten i designet ditt. Sørg derfor for å angi riktige kontrastforhold for ulike elementer som overlapper hverandre, og husk også på andre aspekter ved tilgjengelighet.
Til slutt må du ikke glemme å gi brukere som tester designet, visuelle hjelpemidler. Dette er spesielt relevant når du bare tester en del av produktdesignet, og enkelte skjermer eller trinn mangler. For å unngå å forvirre brukerne bør du sørge for å vise notater som forklarer hvor i brukerreisen de befinner seg på det aktuelle tidspunktet, og hva de skal gjøre.
Avanserte teknikker for wireframing med høy gjengivelse
Beste praksis som er beskrevet ovenfor, lar deg lage en «god nok»-versjon av wireframen med høy gjengivelse. Men hvis du ønsker å lage noe fantastisk, bør du vurdere å bruke disse avanserte teknikkene.
Interaktive wireframes
Noen populære wireframe-verktøy har prototypingsfunksjoner innebygd. Så hvorfor ikke benytte deg av dem og gi wireframen liv? Du kan gjøre UI-elementene dine klikkbare og la brukerne gå fra én skjerm til en annen – slik at du etterligner reisen de vil ha i den virkelige appen. Jeg foreslår at du legger til animerte overganger som gjør endringen på siden eller skjermen tydeligere for brukerne dine.
Du kan også legge til animasjoner og overganger for ulike elementer i mobilappen eller webdesignet ditt og se om det hjelper brukerne med å legge merke til et bestemt element på skjermen eller samhandle med det slik du hadde tenkt.
More Articles
Visuelle designelementer
For å hjelpe wireframen med høy detaljgrad med å representere produktet og merkevaren din på en god måte, kan du også vurdere å inkludere følgende:
- Typografi: Skrifttypene, avstanden og tekstfargene i designretningslinjene dine.
- Merkevarebygging: Logoen din, merkevarefargene og de visuelle ressursene som representerer merkevaren din.
- Reelt innhold: I stedet for å skrive lorem ipsum der en produktbeskrivelse skal være i designet av e-handelsappen din, kan du skrive en faktisk produktbeskrivelse.
- Reelle visuelle ressurser: Hvis det er illustrasjoner eller bilder du planlegger å ha på skjermene dine, bør du legge dem til også.
- Fargeoverganger og skygger: Disse gjør wireframen mer realistisk og hjelper deg med å legge til et lag med visuelt hierarki eller interaksjoner.
Merk: Når det gjelder å fremheve interaksjoner med skygger, er Googles materialdesign best. Den bruker skygger til å vise høydenivå og fortelle brukeren om et element peker på, er klikket på eller er inaktivt.
Tips for teamsamarbeid
Både prototyping og wireframing er aldri oppgaver for én enkelt person. Enten utvikler du det sammen med designteamet ditt, idémyldrer med produktansvarlig eller diskuterer det med interessentene dine.
Derfor vil jeg foreslå at du gjør følgende for å legge til rette for samarbeids- og utviklingsprosessen rundt designene dine:
- Planlegg regelmessige idémyldringer. Inviter produktansvarlig og andre designere. Kanskje også en utvikler, siden vedkommende kan hjelpe deg med å velge det teknisk beste designet. Nøkkelordet her er regelmessig – det kan være én gang i uken, annenhver uke eller sjeldnere. Men det er viktig å gjennomføre disse møtene jevnlig, ettersom de hjelper deg med å finne interessante løsninger på designproblemene dine.
- Gjennomfør regelmessige designgjennomganger. Hvis du jobber i et team, kan du sende designet ditt til en tverrgående gjennomgang og la flere friske øyne se på det og finne problemer du kanskje har oversett. Denne prosessen øker kvaliteten på designet betydelig og hjelper deg med å gjøre det konsekvent.
- Dokumenter tankene og kommentarene dine. Legg til merknader og kommentarer i designet som forklarer bestemte designvalg eller gir kollegene dine kontekst.
Til slutt må du sørge for at det du bygger, er i tråd med selskapets strategi og produktvisjon. Rådfør deg derfor med produktteamet og ledelsen om dette.
Test designet ditt som om det var det ferdige produktet.
Sannsynligvis er den viktigste fordelen ved å bruke wireframes med høy detaljgrad at de kan presentere produktet så nært den endelige versjonen som mulig. På denne måten kan brukerne teste den visuelle fremstillingen av produktet ditt uten at du trenger å bygge det faktiske produktet.
Derfor oppfordrer jeg deg sterkt til å ta i bruk wireframe-prosessen og bruke den til å teste designet og hypotesene dine som en del av designarbeidsflyten. Jeg håper jeg har gitt deg tilstrekkelig kontekst og nyttige tips til å få mest mulig ut av den.
Hvis du imidlertid ønsker å gå i dybden på dette emnet, foreslår jeg at du leser den komplette guiden til wireframing. I tillegg kan du også abonnere på nyhetsbrevet vårt for flere ressurser og guider om produktledelse.
