Godkjenn webdesign med kriterier, ikke smak: En praktisk UX-kontroll før utvikling

Kategori: Webdesign og UX

Et nytt webdesign blir ofte godkjent i et møte der deltakerne vurderer farger, bilder og hvor moderne forsiden ser ut. Problemet er at en pen designskisse kan skjule svak struktur, utydelig navigasjon og viktige handlinger som er vanskelige å finne. Når feilene først oppdages etter utvikling, blir de dyrere å rette.

En bedre løsning er å behandle designgodkjenning som en faglig kontroll. Før dere sier ja til uttrykket, bør dere undersøke om løsningen hjelper reelle brukere med å forstå tilbudet, finne riktig informasjon og gjennomføre en oppgave. Kontrollen trenger ikke være omfattende, men den må bygge på tydelige kriterier.

Start med oppgaven siden skal løse

Det er vanskelig å vurdere et design uten å vite hva brukeren skal få gjort. Før gjennomgangen bør dere derfor definere én primær oppgave for hver viktig sidetype.

En tjenesteside kan for eksempel ha som hovedoppgave å hjelpe en potensiell kunde med å vurdere om tjenesten passer. Deretter skal kunden kunne be om et møte. En produktside skal kanskje gjøre det mulig å sammenligne alternativer og kjøpe. En rekrutteringsside skal hjelpe kandidaten med å forstå rollen og sende inn en søknad.

Formuler oppgaven som en enkel setning:

• Besøkende skal kunne forstå hva tjenesten omfatter og be om en relevant samtale.
• Kunden skal kunne velge riktig produkt uten å kontakte kundeservice.
• Kandidaten skal kunne vurdere stillingen og finne søknadsprosessen.

Denne setningen blir målestokken for resten av kontrollen. Hvis et designelement ikke støtter oppgaven, bør dere spørre hvorfor det tar plass.

1. Kontroller strukturen før dere diskuterer detaljer

Begynn med å se på siden uten å vurdere farger, bilder eller dekorasjon. Undersøk rekkefølgen på innholdet og om hvert avsnitt svarer på et naturlig spørsmål.

En tjenesteside kan eksempelvis bygges rundt denne tankerekken:

1. Hva tilbyr bedriften?
2. Hvem passer tjenesten for?
3. Hvilket problem løser den?
4. Hvordan foregår leveransen?
5. Hva trenger kunden for å ta en beslutning?
6. Hva er neste steg?

Rekkefølgen må ikke være lik på alle sider, men den bør være bevisst. Bedriftens historie bør ikke automatisk komme før informasjonen kunden trenger for å vurdere tilbudet.

Se også etter innhold som konkurrerer om oppmerksomheten. Flere store budskap, kampanjefelt og handlingsknapper i samme område gjør ikke nødvendigvis siden mer effektiv. Det kan gjøre det vanskeligere å forstå hva som er viktigst.

2. Test navigasjonen med konkrete spørsmål

En navigasjon bør ikke vurderes ut fra om den ser ryddig ut. Den må testes mot det besøkende faktisk leter etter. Lag en kort liste med spørsmål som typiske kunder kommer til nettstedet med.

• Hvilken løsning passer en liten bedrift?
• Hva koster tjenesten?
• Hvordan får jeg hjelp som eksisterende kunde?
• Har bedriften erfaring fra min bransje?
• Hvor finner jeg kontaktpersonen for mitt område?

Be en person som ikke har deltatt i prosjektet, vise hvor vedkommende ville ha klikket. Ikke forklar menyen på forhånd. Hvis personen må åpne flere menypunkter på måfå, er begrepene eller grupperingen sannsynligvis for interne.

Vær særlig oppmerksom på samleord som «Løsninger», «Kompetanse» og «Ressurser». Slike ord kan fungere, men bare når innholdet under dem er forutsigbart for målgruppen. Menyen skal gjenspeile kundens forståelse, ikke organisasjonskartet.

3. Vurder typografi som funksjon

Typografi handler ikke bare om valg av skrifttype. Den avgjør hvor lett brukeren kan skanne, lese og forstå innholdet. Et uttrykksfullt design kan fortsatt fungere dårlig hvis teksten er liten, linjene er lange eller overskriftene ligner for mye på hverandre.

Kontroller designet med realistiske tekster. Korte eksempeloverskrifter og noen få linjer fylltekst gir et misvisende bilde. Legg inn et langt tjenestenavn, en forklarende ingress, en punktliste og en lenketekst som faktisk kan bli publisert.

Se deretter etter følgende:

• Er brødteksten behagelig å lese på både mobil og stor skjerm?
• Er det tydelig forskjell mellom hovedoverskrift, mellomtitler og vanlig tekst?
• Har linjene en lengde som gjør det lett å finne neste linje?
• Er avstanden mellom avsnitt og seksjoner konsekvent?
• Kan fet skrift brukes til å fremheve poenger uten at hele siden blir visuelt tung?

God typografi gjør innholdshierarkiet synlig uten at brukeren trenger å tolke designet.

4. Skill visuell identitet fra dekorasjon

Bedriftens identitet bør merkes gjennom farger, typografi, bildebruk, språk og komposisjon. Den bør ikke være avhengig av store grafiske effekter på alle flater.

Spør om designet fortsatt oppleves som bedriftens når det brukes på en vanlig informasjonsside med få bilder. Hvis identiteten forsvinner så snart toppbanneret fjernes, er uttrykket ofte for svakt definert.

Kontroller også om identiteten tåler praktisk bruk. Det må være mulig å publisere nye sider uten at hver side krever spesialdesign. Fargepaletten bør ha tydelige roller, for eksempel bakgrunn, tekst, fremheving, varsel og handling. Bildestilen bør være konkret nok til at redaktørene kan velge motiver som henger sammen over tid.

Målet er ikke at alle sider skal være identiske. Målet er at variasjonen skal skje innenfor gjenkjennelige rammer.

5. Gjør tilgjengelighet til en del av designgodkjenningen

Tilgjengelighet kan ikke legges til som et teknisk kontrollpunkt på slutten. Flere grunnleggende valg tas allerede i designfasen.

Kontroller kontrasten mellom tekst og bakgrunn, men ikke stopp der. Informasjon må heller ikke formidles bare med farge. En feilmelding bør for eksempel ha forklarende tekst, ikke bare en rød ramme. Lenker må kunne gjenkjennes som lenker, og knapper bør ha navn som beskriver handlingen.

Vurder også tastaturbruk og synlig fokus. En bruker som beveger seg uten mus, må kunne se hvilket element som er aktivt. Rekkefølgen bør følge den visuelle og logiske strukturen på siden.

Forstørr teksten og se hva som skjer. Tekst skal ikke forsvinne, overlappe eller bli skjult bak faste elementer. Test dessuten mobilvisningen med lengre overskrifter og knappenavn. Et design som bare fungerer med korte ord, er ikke robust nok for norsk innhold.

6. Vurder konvertering som sammenheng, ikke knappfarge

Konvertering reduseres ofte til plassering og farge på en handlingsknapp. Den viktigste jobben skjer imidlertid før klikket. Brukeren må forstå tilbudet, oppleve det som relevant og vite hva som skjer videre.

Kontroller at handlingen passer til brukerens beslutningsnivå. «Bestill nå» kan være riktig for en enkel vare, men for en omfattende bedriftsleveranse kan «Be om en innledende vurdering» være mer presist. Knappeteksten bør gi et realistisk løfte.

Informasjonen rundt handlingen bør redusere usikkerhet. Fortell kort hva kunden kan forvente etter innsending, hvilke opplysninger som trengs, og om henvendelsen er uforpliktende når det faktisk er tilfelle.

Unngå at alle handlinger får samme visuelle styrke. Én primær handling kan suppleres med et roligere alternativ, for eksempel å lese en relevant kundehistorie eller se hvordan leveransen foregår.

Test flere tilstander enn den perfekte skissen

Design presenteres gjerne med gode bilder, korte navn og ideelt innhold. Den ferdige nettsiden må håndtere langt mer variasjon. Be derfor om å få se kritiske komponenter i flere tilstander.

• Mobilmeny med alle nivåer åpne.
• Skjema med feilmeldinger og bekreftelse.
• Kort med lang overskrift og uten bilde.
• Søkeresultat uten treff.
• Knapp med langt norsk handlingsnavn.
• Side med lite innhold og side med mye innhold.
• Aktivt fokus på lenker, felt og knapper.

Dette avdekker om designet er et fleksibelt system eller bare en samling velkomponerte skjermbilder.

Bruk en enkel godkjenningsmatrise

Samle vurderingen i en kort matrise med områdene struktur, navigasjon, typografi, identitet, tilgjengelighet og konvertering. For hvert område registrerer dere status, konkret problem, ansvarlig person og hva som må være løst før utvikling.

Unngå tilbakemeldinger som «gjør den tydeligere» eller «den føles litt anonym». Beskriv heller problemet og konsekvensen:

• Prisene ligger under to interne menypunkter og er vanskelige å finne.
• Brødteksten blir for smal på mobil når faktaboksen vises ved siden av.
• Primær og sekundær knapp har lik visuell vekt.
• Feil i skjemaet markeres bare med farge.
• Tjenestesiden forklarer leveransen, men ikke hvem den passer for.

Slike kommentarer kan prioriteres, løses og kontrolleres. Smakspreferanser kan fortsatt diskuteres, men de bør ikke få samme status som problemer som hindrer forståelse eller bruk.

Avslutt med en kort oppgavetest

Før endelig godkjenning bør noen utenfor prosjektgruppen prøve en klikkbar prototype. Tre til fem relevante oppgaver er ofte nok til å oppdage betydelige svakheter. Be personen tenke høyt, men ikke hjelp underveis.

Noter hvor personen nøler, hvilke ord som misforstås, og om vedkommende finner riktig handling. Dere trenger ikke vente på en omfattende rapport. Målet er å fange opp tydelige problemer før de blir bygget inn i løsningen.

Et webdesign er klart for utvikling når sentrale oppgaver kan gjennomføres, innholdet har et tydelig hierarki, identiteten fungerer på vanlige sider, og løsningen tåler realistisk innhold og ulike bruksmåter. Da godkjenner dere ikke bare hvordan nettsiden ser ut. Dere godkjenner hvordan den skal fungere.