UI og UX: hva er forskjellen?

01Hvorfor blandes UI og UX sammen?

Forkortelsene UI og UX brukes ofte side om side, ja til og med som én enkelt tittel. Derfor tror mange at de to er det samme, eller at det ene ikke kan finnes uten det andre. I virkeligheten er det to ulike disipliner, men de tjener samme mål: at brukeren fullfører en oppgave enkelt og med glede.

En enkel sammenligning hjelper deg å forstå forskjellen. Tenk på en restaurant. Hvordan bordene er satt opp, når servitøren kommer, hvor lang tid det tar før bestillingen er på bordet og hvor lett det er å betale regningen, er opplevelsen (UX). Menyens design, presentasjonen av tallerkenene, belysningen og dekoren er grensesnittet (UI). Er den ene delen mangelfull, forlater gjesten stedet misfornøyd uansett hvor god den andre er.

02Hva er UI-design?

UI-design er det visuelle designet av alt brukeren ser og trykker på på skjermen. Formen og fargen på knapper, størrelsen på skrifttyper, stilen på ikoner, rytmen i mellomrom og interaksjonsanimasjoner hører med her.

God grensesnittdesign handler ikke bare om å se pent ut. Den forteller visuelt hva som kan klikkes på, hvilken informasjon som er viktigst og hva brukeren bør gjøre i neste steg. Dette kalles visuelt hierarki.

• Fargepalett og kontrastforhold
• Typografi: skrifttype, størrelse, linjeavstand
• Komponenter: knapp, skjemafelt, kort, meny, modal
• Ikonografi og visuelt språk
• Mikrointeraksjoner: hover, fokus, lastetilstander
• Designsystem: dokumentasjon av alle komponenter med konsekvente regler

03Hva er UX-design?

UX-design former hele relasjonen brukeren har til et produkt. Hvem er brukeren, hva vil de, hvilke steg går de gjennom, og hvor stopper de opp? UX-designeren søker svar på disse spørsmålene og forenkler reisen.

Størstedelen av UX er usynlig på skjermen. Hvor mange steg et skjema har, hvilke overskrifter som er med i menyen, hvordan søkeresultatene sorteres eller hva en feilmelding sier, er alle opplevelsesbeslutninger.

Stegene i UX-prosessen

1. Research: brukerintervjuer, spørreundersøkelser, analysedata, konkurrentanalyse.
2. Personas og scenarioer: målene og hindringene til typiske brukere.
3. Informasjonsarkitektur: gruppering av innhold og menystruktur.
4. Brukerflyter: stegene man følger for å nå et mål.
5. Wireframe og prototype: layout og funksjon før farger.
6. Brukbarhetstesting: ekte brukere prøver prototypen.

04De viktigste forskjellene mellom UI og UX

Når vi setter de to disiplinene side om side, blir forskjellene tydeligere. Tabellen oppsummerer spørsmålet hver av dem fokuserer på og hva de leverer.

05Hvordan jobber de sammen?

I et sunt prosjekt kommer UX først og UI følger etter, men prosessen er ikke enveis. UX-teamet lager flyten og wireframene, og UI-teamet gjør dem om til visuelt design i tråd med merkevarens språk. Et problem som oppdages under det visuelle designet, kan føre til at flyten tenkes på nytt.

I en nettbutikk kan for eksempel UX-research vise at brukerne vil se fraktkostnaden tidlig. UX-designeren flytter informasjonen til produktsiden, og UI-designeren plasserer den rett under prisen, uten å tynge øyet, men slik at den ikke overses. Til slutt tjener både opplevelsen og utseendet samme mål.

Det trengs et lignende samarbeid på merkevaresiden. Beslutningene om farger og typografi i grensesnittet henter næring fra den visuelle identiteten. Derfor bør arbeidet med merkevarebygging og grensesnittdesign dele samme veiledning.

06Hva gir god UI/UX virksomheten?

Selv om brukeropplevelse kan virke som et abstrakt begrep, kan resultatene måles. Når den besøkende lett finner det de leter etter, blir de lenger, fullfører skjemaet og tar handlekurven videre til betaling. Når de har det vanskelig, går de til en konkurrents nettside i løpet av noen sekunder.

Konverteringsraten på en landingsside, frafallsraten i handlekurven i en nettbutikk eller antallet tilbudsskjemaer på en bedriftsnettside er direkte utslag av en godt eller dårlig designet opplevelse. Hvordan denne effekten ser ut på kampanjesider, forklarer vi i artikkelen Hva er en landingsside, og design av kampanjesider forklarer vi på siden om landingsside-design.

• Høyere konverteringsrate og færre forlatte skjemaer
• Færre gjentatte spørsmål til kundestøtten
• Økt tillit til merkevaren og mer profesjonell oppfatning
• Problemfri opplevelse for mobilbrukere
• Et konsekvent og skalerbart designsystem når du legger til nye funksjoner

07Universell utforming og mobilopplevelse

God UX utformes for alle. At brukere med syns-, hørsels- eller bevegelsesnedsettelser også kan bruke nettstedet, er både et etisk og et kommersielt krav. Tilstrekkelig fargekontrast (4,5:1 for vanlig tekst, som WCAG anbefaler), navigering med tastatur, meningsfulle lenketekster og alternativ tekst til bilder er grunnsteinene i universell utforming. Detaljene finner du i guiden vår om universell utforming av nettsider.

Mobilopplevelse er også en uadskillelig del av UX. Knapper som kan trykkes med fingeren, korte skjemaer, menyer som kan nås med én hånd og sider som åpnes raskt, utgjør en forskjell på den lille skjermen. Tilnærmingen til mobiltilpasset design og testmetodene har vi behandlet i detalj i artikkelen om mobiltilpasset nettside.

08Vanlige UI/UX-feil

De samme designfeilene går igjen på mange nettsteder. De fleste av dem kan rettes med små justeringer, uten en stor redesign.

• Tekst med lav kontrast, som lysegrå tekst på lysegrå bakgrunn.
• Lenker og knapper det ikke er tydelig at man kan klikke på.
• Kontakt- og registreringsskjemaer som er gjort lange med unødvendige felt.
• Knapper og overskrifter som ser ulike ut på hver side.
• Uklare feilmeldinger: en forklaring som sier hva som er galt, i stedet for «Det oppstod en feil».
• Popup-vinduer som dekker innholdet når siden åpnes.
• Seksjoner som ser fine ut på skrivebordet, men overlapper på mobil.

09Hvor bør du starte i prosjektet ditt?

Planlegger du et nytt nettsted eller en ny app, definerer du først brukeren og målet. Deretter tegner du den mest kritiske flyten (be om tilbud, kjøpe et produkt, gjøre en reservasjon) på papir. Denne enkle øvelsen gjør mange problemer synlige før du går i gang med designet.

Vil du forbedre et eksisterende nettsted, finner du sidene som flest forlater og skjemaene som ikke fullføres i analysedataene. Å gi noen få ekte brukere en oppgave og se på dem gir ofte de mest verdifulle innsiktene til lavest kostnad.

I nettbutikkprosjekter bør opplevelsen og det visuelle språket ses i sammenheng med butikkens konsept. Denne prosessen forklarer vi på siden om konseptdesign.