Hva er UI?
User Interface·På norsk: Brukergrensesnitt
Kort forklart
UI (User Interface) er den visuelle delen av et produkt som brukere interagerer med: knapper, menyer, farger, typografi, ikoner og layout.
Eksempel
UI er det du ser og berører når du bruker en app.
Åpne en hvilken som helst app på telefonen din nå. Alt du ser er UI:
- Fargene og skrifttypene
- Knappene og formene deres
- Ikonene i navigasjonen
- Avstanden mellom elementer
- Måten en knapp endrer seg når du trykker på den
Sammenlign UI-en til forskjellige bankers apper: Noen føles moderne og rene. Andre føles rotete og utdaterte. Det er forskjellen god UI-design utgjør.
UI-designbeslutninger:
- Bør denne knappen være blå eller grønn?
- Hvor stor bør denne teksten være?
- Hvilket ikon representerer best "innstillinger"?
- Hvor mye plass bør det være mellom disse elementene?
- Hva skjer visuelt når du holder musepekeren over denne lenken?
Forklaring
Elementer i UI-design
Visuelt hierarki
Arrangementet av elementer for å vise viktighet. Større, fetere og høyere elementer oppfattes som viktigere.
Farge
Farger kommuniserer mening:
- Rød betyr ofte feil eller fare
- Grønn betyr ofte suksess eller gå
- Blå formidler ofte tillit og profesjonalitet
Typografi
Skrifttypevalg påvirker hvordan innhold føles:
- Serif-skrifttyper (som Times) føles tradisjonelle
- Sans-serif-skrifttyper (som Arial) føles moderne
- Skriftstørrelse og vekt skaper hierarki
Mellomrom
Plassen mellom elementer (white space) er like viktig som elementene selv. Overfylte design føles overveldende.
Komponenter
Gjenbrukbare UI-elementer:
- Knapper
- Inputfelt
- Kort
- Navigasjonsmenyer
- Modaler/popups
Mikrointeraksjoner
Små animasjoner som gir tilbakemelding:
- En knapp som spretter når den klikkes
- En lastespinner
- Et avkrysningsmerke som vises etter innsending
Hvorfor det er viktig
For bedriftseiere
Førsteinntrykk er visuelle. Brukere bedømmer troverdigheten din på millisekunder basert på hvordan siden din ser ut.
Konsistens bygger tillit. En polert, konsistent UI signaliserer at du legger vekt på detaljer. Inkonsistent UI får deg til å se uprofesjonell ut.
God UI støtter god UX. Mens UX handler om hvordan det fungerer, hjelper UI brukere å forstå hvordan de skal interagere med produktet ditt.
UI vs. UX igjen
Tenk på å bygge et hus:
- UX er plantegningen: hvordan du beveger deg gjennom rom, hvor ting er plassert for bekvemmelighet
- UI er interiørdesignet: malingsfargene, møbelstilen, lysarmaturene
Begge betyr noe. Et vakkert hus med en forferdelig plantegning er frustrerende å bo i. Et perfekt funksjonelt hus som er stygt er heller ikke behagelig.
Trenger du hjelp med et digitalt prosjekt?
Vi bygger nettsider, apper og digitale løsninger for bedrifter.
Ta kontakt