Ny nettside forklart i 10 steg

Marcus Strömberg

Publisert:

UI
UX

UX- og UI-design: Hvordan kommer vi fram til det beste brukergrensesnittet og de gode brukeropplevelsene? Løsningen ligger alltid et sted i samspillet mellom funksjon, kommunikasjon og formgivning.

Struktur og kreativitet

Det som først og fremst kjennetegner våre vellykkede prosjekter er en tydelig struktur, samtidig som vi skaper rom for kreativitet. For det er i samspillet mellom funksjon, kommunikasjon og formgivning at vi finner løsningen. En hjemmeside har ofte en sentral rolle i det digitale økososystemet, og det krever dermed en mangfoldig kompetanse, ut over UX og UI.

En jungel av modeller

Spør du for eksempel Google, kan du fort sitte igjen med inntrykket av at det finnes like mange modeller og prosessbeskrivelser, som det finnes hjemmesider. For å finne veien som fungerer best, kreves selvfølgelig erfaring, men viktigst av alt er kanskje det å tilpasse prosessen til måten vi arbeider på, enn å blindt tilpasse seg en forhåndsgitt prosess.

Fra brief til nettside

1. Brief og research
Alt starter med en brief og påfølgende møter for å finne svar på spørsmål som for eksempel: Hva er målet med den nye hjemmesiden? Hva er det som ikke fungerer med eksisterende løsning? En tydelig brief og workshops gir oss en forståelse for kundens behov i den bransjen de opererer i.

2. Personas
Design handler om å løse riktige problem for riktige mennesker. Gjennom å skape personas av de viktigste målgruppe-segmentene er det lettere å identifisere deres behov, problemer og hva det er som driver dem.

3. Behov & HMWs
Her går vi dypere inn på hva konkret det er den som besøker siden vil oppnå og hvordan vi kan løse det. Basert på behovet skaper vi noe vi kaller HMWs (HowMightWe). En HMW er et kort spørsmål, koblet til et spesifikt behov eller problem, som setter i gang en tankeprosess.

4. Brainstorming av løsninger
Basert på HMW-ene er det dags for å brainstorme mulige løsninger. Her er det stor takhøyde og alle tanker og ideer er velkomne.

5. Prioritets-matrise
I denne fasen handler det om å sile ut de beste ideene og hvilke løsninger som skal prioriteres. Vi ser på hva som gir mest effekt for brukerne i forhold til tidligere problemstillinger.

Eksempel på prioritets-matrise

Eksempel på sidestruktur (Sitemap)

6. Sitemap
En sitemap er enkelt forklart et kart over alle sidene som finnes på webstedet. Vi ser på hvilke sider som skal ha undersider og hvordan vi skal lenke internt for å skape en logisk brukerflyt.

7. Innholdshierarki
Når vi vet hvilke sider som skal være på hjemmesiden er det tid for å se nærmere på innhold. Å gi brukeren rett informasjon på rett side er en grunnforutsetning for å skape en god brukeropplevelse. I denne fasen setter vi hierarkiet over hva som skal kommuniseres på den enkelte side.

8. Wireframe

En wireframe er en enkel skisse. Her fokuserer vi på funksjonalitet og legger inn demo-innhold. Det riktige innholdet produseres ofte samtidig som vi designer og programmerer sidene. Først når wireframes er godkjent starter vi designfasen.

Trådskisser

9. Moodboard
Moodboard handler kort sagt om å finne en designretning, med layout og formgivning, dette kommer til sin rett i neste fase.

10. UI/Design
Det første vi designer er forsiden, og når den er godkjent fortsetter vi med de neste sidene. Vi tror det er viktig å skape en opplevelse som er estetisk tiltalende og som samtidig forsterker det strategiske underlaget vi har tatt fram i tidligere faser. Skal det brukes bilder og video? Skal vi skape nytt eller kanskje anvende illustrasjoner? Mange av disse spørsmålene har vi tenkt på tidligere i prosessen, men det dukker alltid opp nye.

Moodboard

Ikke en lineær prosess

I en perfekt verden går vi uavbrutt fra steg 1 til 10, men å bygge hjemmesider er sjelden en lineær prosess. Å ha et bevisst forhold til prosessen guider oss i riktig retning og skaper forutsetningene for et vellykket prosjekt, men vi behøver samtidig å være såpass agile at vi kan jobbe parallelt med de ulike fasene.

Men den kanskje aller viktigste komponenten i oppskriften på en vellykket hjemmeside er å alltid forsøke å pushe grensene, og gå den ekstra mila.