UX og UI: når grafikken skal kunne bruges

Når en mediegrafiker designer til skærm — en hjemmeside, en app, et nyhedsbrev — er æstetikken kun den halve opgave. Den anden halvdel er, om brugeren kan finde rundt, forstå hvad der sker, og nå sit mål uden frustration. Det felt kaldes UX (user experience, brugeroplevelse), mens UI (user interface, brugergrænseflade) er den konkrete visuelle udformning af knapper, menuer, felter og indhold.

§UX og UI er ikke det samme

UI er det, man ser: farver, typografi, ikoner, afstande og komponenternes udseende. UX er det, man oplever: er det let at finde produktet, forstå prisen, gennemføre købet? Et design kan have et smukt UI og en elendig UX — flotte knapper, som ingen kan finde. Som mediegrafiker bidrager du mest til UI'et, men dine valg af hierarki, kontrast og læsbarhed er samtidig direkte UX-arbejde.

§Nielsens heuristikker: tommelfingerregler for brugbarhed

Den mest brugte tjekliste for brugbarhed er de ti usability-heuristikker, som Jakob Nielsen publicerede i deres kendte form i 1994. De er ikke lovkrav, men brede principper, man kan holde ethvert digitalt design op imod for at finde de steder, brugerne vil fare vild eller blive overraskede.

• 01Synlighed af systemstatus: vis altid, hvad der sker — fx at noget indlæses eller er gemt.
• 02Match med virkeligheden: brug ord og begreber, brugeren kender, ikke internt fagsprog.
• 03Brugerkontrol og frihed: gør det let at fortryde og komme tilbage.
• 04Konsistens og standarder: ens elementer skal se ens ud og opføre sig ens.
• 05Forebyg fejl: gode standardvalg og tydelige advarsler er bedre end fejlmeddelelser.
• 06Genkendelse frem for genkaldelse: vis mulighederne — tving ikke brugeren til at huske dem.

§Responsivt design: ét indhold, mange skærme

Det samme indhold skal fungere på en stor skærm, en tablet og en lille mobil. Responsivt design betyder, at layoutet tilpasser sig skærmbredden: spalter stables, billeder skaleres, og menuer skifter form. For grafikeren betyder det, at man ikke designer én fast side, men et system af komponenter, der kan flyde om — og at man tænker mobilen ind fra start i stedet for at 'krympe' et desktop-design til sidst.

§Informationsarkitektur og brugerrejser

Før den enkelte side designes, skal helheden hænge sammen: hvilke sider findes, hvordan hænger de sammen i menuer og links, og hvilken vej går brugeren typisk fra første besøg til målet? Det kaldes informationsarkitektur. Et simpelt kort over brugerrejsen — trin for trin fra behov til handling — afslører ofte huller og blindgyder, længe før der er tegnet en eneste pixel.

§Wireframes og prototyper

Digitale designforløb arbejder typisk i to lag. Wireframen er en skitse af struktur og indhold uden færdig grafik — hvad skal siden indeholde, og i hvilken rækkefølge? Prototypen er en klikbar model af designet, hvor man kan afprøve flowet, før noget er programmeret. Begge dele sparer dyre omveje: det er langt billigere at flytte en boks i en skitse end at bygge en færdig side om.

§Designsystemer og komponenter

Større digitale løsninger bygges på et designsystem: et bibliotek af faste komponenter (knapper, kort, formularer) med definerede farver, typografi og afstande. Det sikrer konsistens på tværs af mange sider og gør samarbejdet med udviklere konkret — I taler om de samme navngivne byggesten. Mediegrafikerens rolle er ofte at holde systemet visuelt sammenhængende og i tråd med brandets identitet.

Husk også tilgængeligheden: kontrastkrav, læsbar typografi og budskaber, der ikke kun bæres af farve, gælder i endnu højere grad på skærm end på tryk, fordi brugerne og deres udstyr er så forskellige. God UX er i sidste ende design, der virker for flest muligt.

“Brugeren kommer ikke for at se dit design — brugeren kommer for at løse en opgave. Dit design bedømmes på, hvor let det gik.”

— Grundprincip i brugeroplevelse