Jeg er sikker på at du har hørt om fordelene ved wireframing enten fra produktledelseskursene dine eller fra kolleger eller andre i fagmiljøet. Jeg antar også at du har prøvd å innføre en eller annen form for wireframing-prosess i produktet ditt.
Men fungerer prosessen din godt? Får du mest mulig ut av wireframene dine med måten du lager dem på nå? Vel, det avhenger egentlig av prosessen du bruker.
For å hjelpe deg med å gjøre wireframing mer effektivt vil jeg dele erfaringen min og fortelle deg om en wireframing-prosess som jeg har funnet ut er den beste som finnes.
Wireframing er en viktig del av UX-designprosessen
Wireframes er visuelle representasjoner på høyt nivå av produktet ditt som du kan bruke til å illustrere hvordan du ønsker at produktet skal se ut og fungere. Med disse visualiseringene kan du teste og videreutvikle ideen din før du ber utviklerne om å sette i gang med utviklingsprosessen – noe som sparer deg for tid og penger.
Jeg liker virkelig definisjonen av wireframing fra brukeropplevelsesguruene hos NN/g, ettersom den viser den viktigste fordelen du får ut av det.
En rask og kostnadseffektiv teknikk for å identifisere større brukervennlighetsproblemer tidlig ved hjelp av skisser og papir. Passer perfekt for smidige og lean-baserte prosesser.
Uansett hvilken metode for wireframing du velger (det er helt greit å tegne på papir!) eller hvilket wireframing-verktøy du bestemmer deg for å bruke (sjekk i så fall ut vår liste over de beste wireframing-verktøyene), vil jeg anbefale at du følger denne prosessen, som jeg har funnet etter å ha prøvd så godt som alle wireframing-prosesser som finnes.
Steg 1: Sørg for at du kjenner brukerne dine godt nok
Godt design starter med et team som kjenner brukerne sine godt. For hvem trenger designet ditt og produktet det visualiserer dersom det ikke er i stand til å ivareta behovene til menneskene det er ment for? Derfor er det viktigste steget du bør ta før du begynner med wireframing, brukerundersøkelser.
I praksis bør brukerundersøkelser fortsette gjennom hele livssyklusen til wireframing-prosessen din (og også etter det), men la oss fokusere på startfasen, når du prøver å forstå behovene og hverdagen til dine fremtidige kunder.
Her er noen av de viktige aktivitetene jeg anbefaler at du gjennomfører i denne fasen:
Utforskende intervjuer: Vil du vite hva brukerne dine ønsker? Hva med å spørre dem direkte? Du kan begynne med å lage en liste over spørsmål som hjelper brukerne dine med å snakke om problemene de opplever, og løsningene de bruker for å løse disse problemene.
Deretter kan du ta kontakt med og rekruttere potensielle brukere via sosiale medier, spesialiserte plattformer som Userinterviews eller Respondent, eller til og med møte dem på messer.
Til slutt gjennomfører du intervjuet enten med en opptaker (slik at du kan analysere det senere) eller med en intervjupartner som sitter ved siden av deg og tar notater.
Merk: Ideelt sett gjør du begge deler.
Undersøkelser: Mens intervjuer er en god kilde til kvalitative data som bidrar til å avdekke årsakene bak brukernes behov og atferd, gir undersøkelser deg en blanding av kvalitative og kvantitative data, slik at du kan validere funn med statistisk signifikans.
Jeg skal ikke gå altfor grundig inn på dette her, siden vi har en hel veiledning om spørsmål i undersøkelser som du kan ta en titt på.
Feltstudier: I dette tilfellet observerer du brukerne dine i deres «naturlige habitat». Det betyr at du enten virtuelt eller fysisk er til stede i miljøet der målbrukerne dine opplever problemene du ønsker å løse.
La oss for eksempel si at du bygger et verktøy som gjør det enkelt å redigere videoer for sosiale medier. Feltstudien din vil da være å observere prosessen til en påvirker i sosiale medier som filmer en TikTok-video, redigerer den og laster den opp til kanalen sin.
Selv om feltstudier er relativt vanskelige å organisere (ikke alle brukere vil være komfortable med at du observerer de daglige aktivitetene deres), gir de deg den rikeste konteksten og den mest omfattende innsikten i brukerne dine.
Oppdagelsesworkshops med interessenter: Ja, god design av brukeropplevelser bygger rundt brukernes behov, men la oss heller ikke glemme de viktigste interessentene dine. Selv om brukerne dine også er interessenter, bruker jeg dette begrepet om grunnleggerne/ledelsen, investorene dine, eventuelle juridiske eller regulatoriske organer du må samarbeide med, osv.
Noen ganger tar du designbeslutninger som ikke er basert på brukernes behov, men som tar hensyn til:
- Visjonen og strategien din: Apples brukere elsker ledninger og kablede tilkoblinger, men Apples visjon er trådløs – derfor fortsetter de å fjerne porter. (Nå vet du det!)
- De juridiske rammene dine: Et stort utvalg av alternativer for informasjonskapsler er ikke det mest brukervennlige grensesnittet, men det er noe du kan være juridisk forpliktet til å vise.
Det finnes også et argument for intuisjon – selv om du kjenner brukerne dine godt, kan det hende du rådfører deg med din egen intuisjon for å ta en eller annen designbeslutning.
Nå som konseptet og typene forskning er tydelige, kan vi illustrere hvordan dette vil se ut i virkeligheten ved hjelp av et eksempel.
Have an account? Log In
Eksempel 1: Lage et skisseverktøy for en UI-fagperson
Se for deg at du har ansvar for å lage et skisseverktøy (noe som ligner på Balsamiq), og at du ønsker å vite nøyaktig hvordan målbrukerne dine (i dette tilfellet designteam) vil bruke det, og hvilke problemer de håper å løse.
For å finne ut av dette kan vi utforme et spørreskjema som vi ønsker å stille brukerne våre under et intervju. Her er noe av det vi kan ta med:
La oss nå forestille oss at vi finner ut at tilbakemeldingene for det meste gis som kommentarer til en bestemt del av produktets skisse, og at produktsjefen må godkjenne skissedesignet. Dette er to funn som vil påvirke designet vårt direkte, siden vi må utforme en arbeidsflyt og et brukergrensesnitt for kommentering av skissen og godkjenning av den.
For å oppsummere er det å gjennomføre utforskende forskning den viktigste delen av skisseprosessen din, og jeg anbefaler ikke at du hopper over den. Nå som du har all innsikten, går vi videre til neste trinn i skisseprosessen.
Trinn 2: Bygg brukerflytene dine
Før du lager selve skjermbildene/sidene og plasserer komponenter som skjemaer, kort, bilder, knapper og så videre på dem, må du forstå rekkefølgen på trinnene du ser for deg at brukerne dine vil ta.
Disse sekvensene kalles også brukerflyter, og de representerer alle de mulige veiene brukerne dine kan ta for å nå målene sine. Disse målene kan enten være noe vanlig og «administrativt», som å registrere seg eller endre passordet sitt, eller representere kjernefunksjonene dine (som å søke etter og strømme musikk i Spotify).
Uansett er det viktig å bygge brukerflyter, siden det vil hjelpe deg med å visualisere alle skjermbildene/sidene du ønsker å utforme bedre, samt innholdet du trenger i hver av dem.
For å forstå flytene bedre kan jeg vise deg en ved hjelp av flytdiagramverktøyet Flowmapp.
Eksempel 2: Visualisering av en brukerflyt for et webdesignverktøy ved hjelp av Flowmapp
La oss anta at du bygger et webdesignverktøy med dra-og-slipp-funksjon, som Webflow. Brukerne dine er webdesignere som ikke skriver kode, og du ønsker å visualisere trinnene de vil ta for å legge til et bakgrunnsbilde på nettsiden sin.
Slik vil en brukerflyt for denne funksjonen se ut i Flowmapp:
Som vi kan se, ligger fokuset i en brukerflyt mer på handlingene brukeren utfører og rekkefølgen/årsakssammenhengen mellom dem enn på sidene og utformingen av dem.
I dette eksempelet ønsker vi at brukeren skal kunne velge et bilde fra galleriet eller laste opp/legge til et bilde i galleriet. Vi ønsker også at brukeren skal kunne forhåndsvise bildet før verktøyet vårt bruker det som bakgrunn på brukerens nettside.
Ved å se på flyten her forstår vi at brukeren vil bli værende på den samme siden – nettsideredigeringsverktøyet – og kanskje se et annet skjermbilde som viser bildegalleriet i form av et popup-vindu.
Det betyr at det er en side og et popup-vindu som skal utformes, med relevante designelementer og funksjoner.
Nå som vi har en oversikt over trinnene brukerne tar for å nå målene sine i produktet vårt, kan vi endelig begynne med selve skissearbeidet.
Trinn 3: Begynn med en skisse med lav detaljgrad
Ja, å lage en skisse er det tredje trinnet i denne skisseprosessen. Men tro meg: Hvis du gjennomfører de to foregående trinnene, vil kvaliteten på skissen din bli løftet til et helt nytt nivå, og det er definitivt verdt å bruke tid på dem.
Når det gjelder selve wireframen, anbefaler jeg at du begynner med en wireframe med lav detaljgrad. En wireframe med lav detaljgrad inneholder ingen spesifikke detaljer som riktige farger/størrelser og andre designelementer for sidene og skjermbildene dine. Den vil heller ikke ha ekte bilder og tekst. I stedet bruker du plassholdere for begge deler.
Og det er en god grunn til at en wireframe med lav detaljgrad er slik, og til at du bør begynne med den – wireframes med lav detaljgrad er raske å lage og redigere.
Det er stor sannsynlighet for at du kan ha gått glipp av noe ganske viktig i designet ditt. Når du innhenter tilbakemeldinger på det (vi skal snakke mer om dette i neste trinn), kan du oppdage at det er mange elementer/flyter som må endres.
Hvis du hadde hatt et komplett design, ville det tatt deg flere dager å gjøre disse endringene. Men med en wireframe med lav detaljgrad kan du gjøre endringene og ta designet ditt gjennom en ny tilbakemeldingsrunde i løpet av et par timer eller mindre.
Så etter å ha rost wireframes med lav detaljgrad så mye, kan vi se på hvordan de ser ut ved hjelp av et populært wireframe-verktøy – Balsamiq.
Eksempel 3: Lage en wireframe for et nettsted
Det fine med designverktøy som er spesialisert på wireframes, særlig wireframes med lav detaljgrad, er at du ikke trenger å tegne hvert element fra bunnen av.
I stedet kommer de vanligvis med en rekke ferdiglagde, grunnleggende grensesnittelementer (for eksempel bilder, menyer, brødsmuler, knapper osv.), sammen med dra-og-slipp-kontroller som gjør det spesielt raskt for deg å designe. Her er et eksempel jeg har laget ved hjelp av Balsamiq.
På grunn av wireframes med lav detaljgrads natur er de vanligvis i gråtoner eller har minimalt med farger og visuell utforming. I stedet er det eneste du kan se, det generelle utseendet til grensesnittelementene i designet ditt, samt plasseringen og informasjonsarkitekturen deres.
Nå som du har wireframen med lav detaljgrad klar, er det på tide å ta den gjennom den første gjennomgangen.
Trinn 4: Iterer internt på designet med lav detaljgrad
Før vi investerer tid og krefter i å bygge det endelige produktdesignet ditt, la oss anta at det er mange ting vi har gjort feil eller glemt å ta hensyn til i designet, og begynne å vise wireframen med lav detaljgrad til kollegene og interessentene våre.
Du kan selvsagt også vise dette designet til brukerne dine. Men med tanke på hvor vanskelig det er å rekruttere brukere som er villige til å gjennomgå eller brukerteste designet ditt, vil jeg anbefale at du bruker den verdifulle tiden deres på å se på design med høyere detaljgrad, i stedet for å kaste bort tiden deres på å påpeke problemer som kollegene dine enkelt kunne ha oppdaget.
Jeg anbefaler imidlertid at du involverer interessentene dine i denne fasen. To av de viktigste grunnene til dette er:
- Å redusere «avstanden» mellom dem og teammedlemmene som bygger produktet, ved å involvere dem fra de tidlige fasene.
- Å rette opp designproblemer knyttet til strategisk samsvar i de tidlige fasene, slik at du sparer tid senere.
Så snart du har samlet inn tilbakemeldinger fra kollegene og interessentene dine, kan du til slutt korrigere wireframen med lav detaljgrad basert på tilbakemeldingene, validere endringene sammen med dem og gå videre til å lage det faktiske visuelle designet for produktet ditt.
Trinn 5: Forbered en wireframe med høy detaljgrad og en klikkbar prototype
Når du har en god forståelse av hvordan designet ditt vil se ut på et overordnet nivå, er det trygt å investere i å lage de visuelle delene av designet og bringe det til et stadium der det ligner mest mulig på det du har tenkt å bygge.
I denne designfasen vil den digitale wireframen din inneholde:
- UI-designet ditt: inkludert riktige farger, skygger, typografi og skrifttyper, marger osv.
- Det visuelle innholdet ditt: Hvis du har tenkt å bruke bilder, illustrasjoner, videoer eller andre grafiske elementer på sidene dine, er det nå du legger dem til.
- Teksten på siden din: Dette viser til teksten i grensesnittelementene og knappene dine, overskriftene dine osv.
- En modell av innholdet ditt: Hvis designet ditt inneholder brukergenerert innhold eller innhold du har laget selv, bør du også legge til en modellversjon av dette. (For eksempel utformingen av en kommentar under et innlegg, med den typiske størrelsen og det typiske innholdet i en kommentar som de faktiske brukerne dine ville skrevet.)
I tillegg til å være hovedleveransen til utviklingsteamet som skal bygge produktet ditt basert på designet, kan wireframen med høy detaljgrad også fungere som et godt verktøy for brukertesting med de faktiske brukerne dine.
Du kan enten bruke selve wireframen med høy detaljgrad i testen eller ta den et steg videre ved å legge til interaksjonsdesign og gjøre den om til en klikkbar prototype.
Det er virkelig lett å forveksle begrepene jeg snakket om her (høyoppløselige wireframes, interaktive prototyper osv.). Så la meg oppklare dem for deg, samt vise et par eksempler.
More Articles
Forskjellen mellom ulike typer wireframes: mockuper vs. høyoppløselige wireframes vs. klikkbare prototyper
Disse tre konseptene ligner ganske mye på hverandre, og dessverre bruker folk dem om hverandre – noe som skaper forvirring blant dem som er relativt nye innen produktutvikling og design.
Her er hva hvert begrep betyr:
Høyoppløselig wireframe: Vi har allerede vært innom denne ovenfor. Så la meg heller vise deg hvordan den ser ut.
Dette overbevisende designet er for en tjeneste som lar deg leie private kokker til å tilberede eksklusive retter for deg. Som vi kan se, inneholder dette designet alt – fra endelige bilder til farger og plasseringer. Det inneholder også litt «lorem ipsum»-tekst for å representere anbefalingen fra en profesjonell kokk på siden.
Mockup: I motsetning til motstykket sitt inkluderer mockupen ikke bare det endelige designet, men viser også miljøet der designet vises. Generatorer for produktmockuper kan bidra til å lage disse kontekstuelle visualiseringene. Hvis du for eksempel designer et brevark, vil en mockup vise et ark på et bord med designet ditt på.
For en mobilapp vil mockupen din vise silhuetten av en iPhone- eller Android-enhet med designet ditt på skjermen.
Prototype: Prototypen ser ut som en høyoppløselig wireframe, men i tillegg til det endelige utseendet vil den også forsøke å etterligne produktets funksjonalitet.
Med klikkbare prototyper eller verktøy for 3D-prototyping kan du legge til grunnleggende interaktivitet, som rulling, animasjoner, klikk på knapper, navigering i appen osv.
Ved å etterligne interaktiviteten i produktet ditt lar prototyper deg teste hvordan du ønsker at funksjonene dine skal fungere før du utvikler dem.
Du kan dessuten gjennomføre brukertesting ved å gi de høyoppløselige prototypene dine til brukerne og se hvordan de samhandler med produktet ditt, løser problemene sine eller forsøker å finne frem i designet ditt.
Arbeid med wireframes handler om testing og iterasjon
Den iterative karakteren til wireframes lar deg spare masse arbeid med å rette opp feilene dine. Ved å gå gjennom en prosess med arbeid med wireframes som denne sørger du dessuten for at brukerne dine får et produkt som dekker behovene deres best mulig.
Bruker dere en annen prosess for arbeid med wireframes i virksomheten deres? Jeg er nysgjerrig på å høre om den, så legg igjen en kommentar nedenfor og fortell oss hvordan dere gjør det!
Jeg håper du likte denne veiledningen og syntes den var nyttig. Husk å sjekke ut andre veiledninger om produktledelse skrevet av noen av de beste fagfolkene på området, for eksempel:
- Forskjellen mellom produktvisjon og produktstrategi av Kerstin Exner.
- Produktets 3 P-er av Benoit des Ligneris.
- Dokumenter med produktkrav av Sarah Tolle.
Til slutt kan du abonnere på nyhetsbrevet vårt, så sender vi også interessant innhold til innboksen din.
