Hopp til innhold

Fagartikkel

Visualiser funksjonalitet med wireframes

I utviklingsprosjekter er det er viktig å bruke god tid i startfasen for å unngå store utfordringer senere. I UX-designsammenheng kan det derfor være lurt å lage wireframes av de beste idéene for å forstå hvor gjennomførbare de faktisk er.

LK20
Skisse av nettside tegnet på et nettbrett. Det ligger flere firkanter med kryss i eller bølger som skal være tekst. De er organisert nedover og bortover. Foto.

En wireframe er en visuell framstilling av idéen din. Den skal vise både struktur og innhold på en veldig enkel måte.

Tenk på wireframes som plantegningen av et hus. Det er viktig å ha kartlagt det viktigste før man starter. Skal det være to eller tre soverom? Skal stue og kjøkken være i første eller andre etasje? Dette er ganske grunnleggende avgjørelser som det vil være vanskelig å forandre på jo lenger i prosessen man er kommet.

Utvikling av skoleapp

Tenk at du skal lage en ny app til skolen din som er rettet mot andre elever. Denne skal gi medelevene dine tilgang til timeplanen deres, kontaktinformasjon til lærere og en oversikt over de kommende innleveringene i forskjellige fag. Idéen er på plass, nå må en eller flere wireframes lages. Under ser du noen eksempler:

Wireframe 1 og 2

To modeller med overskriftene Wireframe 1 og Wireframe 2. Modellene er satt opp som stabler med bokser. Under Wireframe 1 står det fra øverst til nederst Logo, Statistikkoppgave, Målgruppeinnlevering, Innleveringer, Innleveringer, Innleveringer, Lærere og Timeplan. Under Wireframe 2 står det fra øverst til nederst Logo, Timeplan, Lærere, Innleveringer. Illustrasjon.

Wireframe 1 viser forside av skoleapp med mange knapper med ulike oppgaver og innleveringer. Wireframe 2 viser en forside med tre store knapper med titlene "timeplan", "lærere" og "innleveringer"

Wireframes kan tegnes for hånd, eller du kan bruke Adobe XD eller grafiske programmer. Utgangspunktet til begge eksemplene er akkurat det samme, men det er gjort forskjellige valg når det gjelder prioritering av innhold. Dette valget vil selvsagt påvirke hele strukturen til appen. Det ser du i eksemplene under, hvor wireframen er utviklet videre.

Wireframe 1 videreutviklet

Oppsett av skoleapp som viser forside med en rekke knapper og to tekstlinjer nederst på forsiden som leder til undersidene Lærere og Timeplan. Det går strek fra tekstlinjene på forsiden som fører til disse to undersidene. Illustrasjon.

Forsiden og to av undersidene ("Lærere" og "Timeplan") i wireframe 1 videreutviklet

I den videreutviklede wireframe 1 av skoleappen prioriteres innleveringer på den første siden, og strukturen blir derfor annerledes. Et viktig spørsmål i forbindelse med denne er: Hvordan vil appen vite hvem som ser på innholdet og tilpasse innleveringer deretter?

Wireframe 2 videreutviklet

Skisser av en skoleapp med en forside som fører til undersider med titlene "Timeplan", "Lærere" og "Innleveringer". Illustrasjon.

Forsiden og de tre undersidene "Timeplan", "Lærere" og "Innleveringer" i wireframe 2 videreutviklet

Wireframe 2 er den samme appen, men med forskjellige løsninger. En slik wireframe lages ganske fort og gir deg oversikt over appens struktur og mulige utfordringer.

I denne innser vi at timeplanvisning vil være utfordrende i stående format. Det er fordi timeplaner pleier å være i breddeformat til vanlig, og da vil man ikke ha mulighet til å bare hente inn disse til appen. Man blir avhengig av å forandre formatet på timeplanene. Det betyr veldig mye ekstraarbeid, som igjen kan koste penger.

Tenk over

Hvordan ville du ha løst utfordringen med timeplan i breddeformat når appen har stående format i wireframe 2?

Klarer du å identifisere flere utfordringer når du ser på wireframene?

Lag en ny wireframe basert på akkurat samme idé.

Fra wireframe til ferdig produkt

Å jobbe med wireframes er helt vanlig for de fleste aktører som jobber med design til digitale flater. Det gir designere og kundene et felles startpunkt for videre arbeid.

Under ser du hvordan Christian Bilstad fra HK Bits har jobbet med "low fidelity"-wireframe først (til venstre) for å vise kunden. Deretter har han lagd en "high fidelity"-wireframe. Begge eksemplene er lagd i Adobe XD og krever ingen koding.

To nettsideoppsett. Til venstre ser vi et grovt og forenklet oppsett med grå bokser og felt med tekst eller bildebokser. Til høyre ser vi et mer gjennomarbeidet oppsett med ekte bilder, farger og et mer klart design. Skjermbilde.

Når kunder trenger en ny nettside eller applikasjon, er det viktig å ha et visuelt utgangspunkt. Det er tross alt det visuelle som vil treffe brukerne først. Her ser du wireframes med low fidelity (til venstre) og high fidelity (til høyre).

Sist oppdatert 30.11.2021
Skrevet av Bruno José Teixeira Coelho

Læringsressurser

Brukeropplevelse og produksjon for nett