UI

UI betyder User Interface. Det er knapper, menuer, inputfelter, produktkort, ikoner, farver, afstande og de tilstande, der opstår, når noget bliver valgt, indlæst eller går galt.

UI bliver ofte brugt som synonym for design, men det er mere præcist den del af designet, man interagerer med. UX er den samlede oplevelse, mens UI er et af de vigtigste værktøjer til at skabe den.

Det gælder også de kedelige tilstande: fejl, tomme søgeresultater, udsolgte produkter og langsomme forbindelser.

Hvis blå knapper nogle steder betyder “gem” og andre steder åbner en ekstern side, skal brugeren gætte. Ensartede komponenter reducerer den mentale belastning.

Et designsystem kan definere knapper, felter, farver, typografi og afstande. Det behøver ikke være et stort dokument. Selv en mindre hjemmeside har gavn af faste regler.

Konsistens betyder ikke, at alt skal se ens ud. En primær handling må gerne være tydeligere end en sekundær. Hierarkiet skal vise, hvad der er vigtigst.

“Send” kan være fint, men “Få et tilbud” eller “Book tid” kan være tydeligere, når det passer til handlingen. En CTA skal fortælle, hvad der sker bagefter.

Formularfelter skal have synlige labels. Placeholder-tekst forsvinder, når brugeren skriver, og bør ikke være den eneste forklaring. Fejlbeskeder skal stå ved det felt, der kræver handling, og fortælle, hvordan problemet løses.

Når en formular bliver sendt, skal UI’et vise, at noget sker, forhindre dobbeltsendelse og bekræfte resultatet. Ellers klikker brugeren igen eller tror, at siden er gået i stå.

På mobil er fingeren upræcis, pladsen mindre og konteksten anderledes. Knapper skal have en ordentlig størrelse, menuer skal være forståelige, og vigtige handlinger må ikke gemmes bag flere lag.

Responsivt design sørger for tilpasning, men UI-beslutningerne afgør, om den tilpassede side faktisk er god. En stor tabel kan kræve en anden præsentation end bare vandret scrolling.

Test på en rigtig telefon. En prototype i browseren viser ikke altid tastatur, autoudfyldning og de små irritationer, der opstår i brug.

Farver og typografi skal passe til den visuelle identitet, men kontrast og læsbarhed kommer først. En lys grå tekst kan se elegant ud på designerens skærm og være næsten usynlig i sollys.

Webtilgængelighed bør bygges ind i komponenterne, så tastaturfokus, labels og kontrast ikke skal repareres til sidst.

God UI-design er balancen mellem genkendelighed og personlighed. Brugeren skal ikke lære et nyt sprog bare for at mærke brandet.

UI ligger i krydsfeltet mellem grafisk design og funktion og skal fungere i alle de tilstande, brugeren møder.

Et UI består ikke kun af den pæne standardvisning. Hvad sker der, når et felt er forkert? Når en knap arbejder? Når en liste er tom? Når et produkt er udsolgt? De tilstande bliver ofte glemt i designet og løst tilfældigt under udviklingen.

Definér dem tidligt. En knap bør have normal, hover, fokus, aktiv og deaktiveret tilstand. En formular skal vise både fejl og succes. En tabel skal kunne håndtere lange navne og små skærme. Det er her, et designsystem eller et lille komponentbibliotek sparer tid.

Konsistens betyder ikke, at alt skal se ens ud. Det betyder, at samme handling opfører sig genkendeligt. Hvis blå tekst er et link ét sted, bør den ikke være almindelig tekst et andet. Hvis primære knapper er orange, skal en tilfældig grå knap ikke pludselig være vigtigst.

Test UI’et med rigtige data og på en rigtig telefon. Et screenshot på en stor skærm afslører ikke, om tommelfingeren kan ramme menuen, eller om tastaturet dækker “Send”-knappen. Godt UI er visuelt håndværk, men det bliver først bevist i brug — tæt forbundet med UX og webtilgængelighed.

Et godt komponentbibliotek beskriver også sproget. Skal knappen hedde “Send”, “Bestil” eller “Få et tilbud”? Hvordan formuleres fejl? Små tekstvalg er en del af brugerfladen og påvirker tryghed lige så meget som farve og radius. Når de beslutninger er fælles, føles siden samlet — også når flere personer bygger på den.

Få også en udvikler til at gennemgå designet, før alle skærme er færdige. Nogle detaljer er dyre eller ustabile at bygge, mens en lille justering kan bevare udtrykket og gøre løsningen langt mere robust.