Hva er UI?
UI står for user interface, eller brukergrensesnitt på norsk. Det er alt brukeren ser og samhandler med på en nettside, i en app eller i et program: knapper, menyer, ikoner, skjemaer, farger, typografi og bilder. UI-design handler om å gjøre disse elementene tydelige, konsistente og enkle å bruke.
UI blir ofte nevnt sammen med UX, og begrepene blandes ofte. Kort sagt handler UX om hele opplevelsen, mens UI handler om det visuelle og interaktive laget som opplevelsen formidles gjennom.
UI vs UX
UX (user experience): hvordan løsningen oppleves som helhet. Finner brukeren det de leter etter? Er prosessen logisk? Løser den problemet?
UI (user interface): hvordan løsningen ser ut og reagerer. Er knappene tydelige? Er teksten lett å lese? Ser alle sidene ut som de hører sammen?
Et bilde som ofte brukes: UX er planløsningen i et hus, UI er interiøret. Et pent interiør hjelper lite hvis du ikke finner kjøkkenet, og en god planløsning kan oppleves rotete med dårlig interiør. Begge må fungere sammen.
Kjennetegn på godt UI
Tydelig hierarki: det viktigste er størst og mest synlig, for eksempel en tydelig CTA.
Konsistens: knapper, farger og ikoner ser like ut og oppfører seg likt overalt.
Lesbarhet: god kontrast, passe tekststørrelse og luft rundt elementene.
Respons: brukeren får beskjed når noe skjer, for eksempel når et skjema er sendt.
Tilgjengelighet: løsningen fungerer for alle, også dem som bruker skjermleser eller tastatur. Universell utforming er et lovkrav for mange norske virksomheter.
Tilpasset alle skjermer: med responsivt design fungerer grensesnittet like godt på mobil som på PC.
Mange bygger UI på et designsystem: et felles bibliotek med komponenter, farger og regler. Det gjør det raskere å lage nye sider og sikrer et helhetlig uttrykk.
Gode UI-detaljer er ofte usynlige. Brukeren legger ikke merke til en godt plassert knapp, men merker godt en knapp som er vanskelig å finne eller treffe.
Hvorfor UI påvirker resultatene
Eksempel: En nettbutikk som gjør kjøpsknappen større, gir den tydelig kontrast og flytter den høyere opp på mobil, kan få flere klikk til handlekurven. Effekten bør likevel alltid måles, gjerne med en A/B-test.
Godt UI handler ikke bare om estetikk. Små ting som knappefarge, plassering av skjemafelt og lesbare feilmeldinger kan avgjøre om en besøkende fullfører et kjøp eller forsvinner. Derfor bør UI-endringer testes og måles, ikke bare vurderes etter smak. Maverix i Oslo jobber med UX og UI-design som gjør nettsider enklere å bruke og mer effektive.
Relaterte begreper
UX: UX er hele brukeropplevelsen, mens UI er grensesnittet den formidles gjennom.
Universell utforming: godt UI tar hensyn til alle brukere, også dem med nedsatt funksjonsevne.
CTA: handlingsknappen er et av de viktigste UI-elementene på en side.
Responsivt design: sørger for at grensesnittet fungerer på alle skjermstørrelser.
Se alle begrepene i ordboken.