Sådan mestrer du konsistens i brugerfladen: Skab en problemfri brugeroplevelse

Har du nogensinde følt frustrationen ved at navigere gennem et websted eller en app uden at forstå, hvordan det fungerer? Selvfølgelig har du det.

Årsagen til din frustration er højst sandsynligt en dårligt designet grænseflade, som ikke lader dig navigere intuitivt. I stedet er du nødt til at stoppe op og analysere hvert element for at forstå, hvordan det fungerer, og hvad det bruges til.

En af de mest almindelige fejl, der fører til dårligt produktdesign, er inkonsistens i brugergrænsefladen.

Ud over at være en af de mest udbredte fejl er det også en fejl, der er virkelig nem at rette eller helt undgå. Så lad os forstå, hvad inkonsistens i brugergrænsefladen handler om, og hvordan du kan sikre, at dine brugere undgår den.

Forståelse af konsistens i brugergrænsefladen

Som navnet antyder, handler konsistens i brugergrænsefladen om at have identiske brugergrænsefladeelementer, atomisk design og den overordnede brugeroplevelse for den samme type handling eller enhed i dit produkt.

Hvis du har primære knapper flere steder i din grænseflade, bør de alle se ens ud (brugergrænseflade) og fungere ens (brugeroplevelse). Hvis du for eksempel logger ind på din Dropbox-konto og gennemser de forskellige sektioner, vil du bemærke, at alle primære handlingsknapper er identiske.

Hvis du ser nærmere efter, er det ikke kun de primære handlingsknapper, der har et ensartet udseende i Dropbox, men stort set alle elementer.

Der er flere vigtige grunde til, at designteams er meget opmærksomme på et konsistent design af brugergrænsefladen. Nemlig:

• Det ser rent og behageligt ud for øjet. Mangfoldighed er ikke det bedste at have i brugergrænseflader. Hvis elementerne har for mange forskellige visuelle udtryk, bliver grænsefladen tung, og læsbarheden forringes.
• Det ser professionelt ud. En ren brugergrænseflade efterlader et indtryk af professionalisme og kunnen. Brugere har en tendens til at stole mere på brands, hvis deres websteder eller produkter er veldesignede.
• Det forbedrer brugeroplevelsen. Hvis du ser en sort knap et sted i Dropbox og identificerer den som deres primære handling, vil du hver gang, du ser en knap, der ser identisk ud, vide, at den også er en primær handling. Derfor behøver du ikke hver gang tænke over, hvad knappen skal gøre, når du møder en af dem.

Endelig er der også faktoren, der handler om at udvikle denne grænseflade. Hvis du har konsistente brugergrænsefladeelementer overalt i dit produkt, behøver frontendteamet ikke at udvikle hvert nyt element fra bunden. I stedet opretter de ét enkelt element og genbruger det på de nye skærmbilleder, de skal udvikle. På den måde reducerer du drastisk den tid, det tager at skabe nye grænseflader og funktioner.

På trods af dets betydning og indvirkning på brugeroplevelsen er konsistent design ikke altid til stede. Selv store teknologiprodukter er skyldige i dette problem. Androids indstillingsmenu er mit yndlingseksempel.

Se venligst på de forskellige elementer på denne liste, og fortæl mig, hvilke der kan klikkes på (knapper), og hvilke der blot er informativ tekst. Der er stor sandsynlighed for, at du ikke kan sige det, medmindre du åbner den samme menu på din telefon og begynder at trykke på alting.

Selv hvis du gættede rigtigt (det er "Google-kontodata" og "Billeder og videoer"), krævede det en smule kognitiv bearbejdning at nå frem til det.

Det er ikke sådan, brugeroplevelsen skal fungere. Når alt kommer til alt, siger det berømte citat fra brugeroplevelsesguruen Steve Krug:

Få mig ikke til at tænke.

Jeg kan i øvrigt varmt anbefale, at du læser hans bog sammen med UX's "bibel" af Don Norman - Designet af hverdagens ting.

Den overordnede pointe her er, at dine brugere automatisk vil kunne genkende elementer i din brugergrænseflade uden at skulle tænke over, hvad de er, og navigere gennem din app på et niveau, der bygger på "muskelhukommelse".

Grundlæggende principper for design af brugergrænseflader

Før vi går videre med at forstå, hvordan du holder dit design konsistent, så lad os genbesøge de grundlæggende designprincipper, der i første omgang gør brugervenlige brugergrænseflader og konsistens mulig.

Klarhed og enkelhed

De dage er forbi, hvor websteder havde blinkende gif-animationer og alle regnbuens farver repræsenteret i brugergrænsefladen (millennials, kan I huske dem?).

Jo flere mennesker der begyndte at bruge internettet, desto mere opmærksomme blev UI- og UX-designere på den måde, de opfatter og interagerer med brugergrænseflader på.

Det, de hurtigt fandt ud af, var, at for mange farver og visuelle elementer forhindrede brugerne i at udføre de opgaver, de ønskede. Det eneste, de får ud af at gennemse sådanne brugergrænseflader, er i stedet  trætte øjne.

Så naturligt nok bevægede vi os mod minimalisme og enkelhed. Ensartethed i brugergrænsefladen er faktisk en anden måde, hvorpå du kan gøre din grænseflade enklere.

Visuelt hierarki

Når du har mange elementer på din skærm, bliver det svært for dig at forstå forholdet mellem dem. Hvordan ved du for eksempel, om et bestemt stykke tekst er en artikeloverskrift eller blot en del af teksten?

Du hjælper dine brugere med at forstå disse forhold ved hjælp af visuelt hierarki. Ved at placere elementer øverst, gøre dem større, farverige, fede og bruge andre tricks kan du hjælpe brugerne med nemt at se, at de er vigtigere end andre elementer på skærmen. Brugerne vil derfor intuitivt se på dette element først, før de går videre til det næste.

Der findes et berømt meme, som demonstrerer magien ved visuelt hierarki.

Du smilede, da du læste teksten her, ikke? Det er rigtigt – ligesom alle andre mennesker er dit syn også fast indstillet til at følge et visuelt hierarki.

Respons

Hver gang din bruger udfører en handling på dit produkt, forventer vedkommende at kunne forstå, om handlingen blev udført eller ej.

Hvis du klikker på sletteknappen, og der ikke sker noget bagefter, bliver du måske forvirret. Blev sletningen gennemført, eller opstod der en fejl? For at hjælpe brugerne med dette skal du give dem visuel (eller lydmæssig og endda haptisk) respons, der fortæller dem om resultatet af handlingen.

Hvis dit system behandlede sletteanmodningen korrekt, skal du fortælle dem, at elementet blev slettet. Hvis du i stedet støder på en fejl, skal du igen fortælle dem om den. På den måde ved de, at deres element ikke blev slettet, og at de skal prøve igen eller kontakte dig for at få hjælp.

Bedste praksis for at opnå ensartethed i brugergrænsefladen

Ved første øjekast er ensartethed i brugergrænsefladen meget ligetil, og enhver designer burde kunne opnå det. Det er rigtigt, hvis du er den eneste person, der arbejder på produktet, og selve produktet er lille og enkelt.

I det øjeblik du begynder at arbejde som en del af et større team, hvor hver designer har sin egen individuelle stil, og på et produkt, der består af snesevis af sider og funktioner, bliver det en reel udfordring at holde elementerne ensartede.

Du kan ganske enkelt ikke fysisk huske, hvordan hvert eneste element i hele produktet ser ud, og gengive det i den nye funktion, du arbejder på.

Heldigvis findes der mange processer og rammer, som hjælper dig med at mindske risikoen for at tilføje uensartethed til dit design. Her er de tre, der betragtes som branchestandarder.

Designmanualer: Dette er et dokument, der beskriver designstandarderne for dit produkt og repræsenterer din brandidentitet. Det omfatter typografien (dvs. skrifttyper, deres størrelse, placering osv.) for forskellige teksttyper (f.eks. overskrifter, brødtekst, kommentarer osv.), ikonografi, din farvepalet og andre centrale designelementer.

Med en designmanual sikrer du, at hele designteamet arbejder inden for de samme overordnede standarder og holder dit indhold, dine farver og dine ikoner ensartede på tværs af hele produktet.

Apple er sandsynligvis det bedste eksempel på at håndhæve sin designmanual overalt, også hos de virksomheder, der udvikler apps til deres produkter.

Eksemplet her er designmanualen for den knap, du kan placere på dit websted for at lade brugerne downloade din app fra App Store. Som du kan se, er Apple meget tydelig omkring, hvordan du kan bruge denne knap.

Mønstrebiblioteker: Dette er endnu et vejledende dokument, der fokuserer på at beskrive de detaljerede elementer i din designstandard, i modsætning til det foregående, som giver dig de overordnede designprincipper. Designmønstrebiblioteker er et almindeligt resultat, når dit team arbejder med atomart design.

Konceptet bag atomart design er at have klart definerede små UI-elementer, som kombineret skaber mere komplekse elementer. De almindelige kategorier af elementer og deres kombinationer i denne ramme omfatter:

• Atomer (deraf navnet): Grundlæggende elementer såsom formularer, knapper, ikoner og andre. Det er elementer, som du ikke kan opdele yderligere.
• Molekyler: Kombinationer af atomer, der tjener et specifikt formål. Eksempler er sideinddeling til dine lister, brødkrummer til navigation osv.
• Organismer: Mere komplekse grænsefladeelementer, der består af flere atomer og molekyler, som repræsenterer entiteter. Det er kort, søgefelter og andre elementer.
• Skabeloner: Kombinationer af genanvendelige organismer, som du kan føje til dine sider. Det kan være lister med søgeresultater, sektioner med produktbeskrivelser osv.
• Side: Det endelige resultat af dit design og det sted, hvor brugeren interagerer med det. Som navnet antyder, er det de forskellige sider i dit produkt, f.eks. din startside.

Et mønsterbibliotek er en samling af standardiserede molekyler og organismer, som du kan bruge i dit design. Du opnår konsistens ved altid at genbruge de samme elementer i forskellige dele af dit produkt, eftersom brugerne straks genkender elementet, når de åbner en bestemt side.

Designsystem: Dette er den overordnede kombination af stilvejledninger på højt niveau, skrifttyper, farveskemaer og beskrivelser af små UI-elementer samt en samling af færdiglavede UI-komponenter, som du kan bruge både i dit design og under udviklingen af produktet.

Næsten alle store teknologivirksomheder udvikler deres eget designsystem for at sikre visuel konsistens. Google har Material, Shopify har Polaris, og Apple har Human Interface. Der findes også selvstændige open source-systemer, som du nemt kan integrere i dit produkt og bruge gratis. Min favorit blandt disse er ant.design.

Ligesom andre designsystemer leveres det både med et designbibliotek, som du kan bruge i Figma eller andre populære værktøjer, og et komponentbibliotek, der er forudkodet i populære rammeværker (f.eks. React), som dine udviklere kan bruge i deres kode.

Værktøjer til at opretholde konsistens i brugergrænsefladen

For at holde dit design konsistent på tværs af alle dine teams og dele af dit produkt skal du dokumentere dine retningslinjer og sørge for, at hele dit team samarbejder om dem.

Til dokumentation og anvendelse af dine designstandarder i den daglige udvikling af funktioner og skærmdesign kan du drage fordel af de specialiserede funktioner i mange moderne designværktøjer.

Figma giver dig for eksempel mulighed for at oprette skalerbare komponenter, som du kan gemme i dit designfilbibliotek og lade alle i din virksomhed bruge.

Det understøtter også UI-sæt, et forudlavet bibliotek med designretningslinjer og regler, som du kan downloade fra Figmas bibliotek og bruge i dine produkter. Her er et sæt til Googles Material Design.

Dette specifikke sæt giver dig en lang række elementer til design af en Android-app i overensstemmelse med Googles designstandarder.

Nu til samarbejdsdelen. Uden ordentligt samarbejde i dit designteam er du dømt til at have elementer, der ikke følger dine retningslinjer og bryder din visuelle konsistens. Heldigvis findes der UX/UI-designværktøjer til at fremme samarbejde, også.

Zeplin hjælper for eksempel dine designere og udviklere med at samarbejde mere effektivt ved at oprette udviklervenlige versioner af designet, hvor udviklingsteamet kan finde præcise CSS-specifikationer for elementerne samt nemt downloade billeder, ikoner og andre aktiver fra designet. Det integreres også med andre værktøjer til udvikling af brugergrænseflader, så du nemt kan overføre dine designs fra det sted, hvor du har oprettet dem, til Zeplin.

Test og gentagelser for konsistens i brugergrænsefladen

Ligesom dine produktkrav eller din strategi er designretningslinjer heller ikke statiske dokumenter. Du vil altid ende med at foretage ændringer i dem og holde dem opdaterede.

Nogle af de almindelige årsager til at ændre dine retningslinjer er:

• Tilføjelse af nye elementer, der ikke fandtes i biblioteket.
• Indførelse af nye designtrends og bedste praksis.
• Opdagelse af problemer og “designfejl”, der skal rettes.

Endelig er det en god praksis at lade dit designteam gennemgå det lejlighedsvis og foretage små forbedringer af det.

Ud over at forbedre det overordnede udseende og kvaliteten af dit design giver sidstnævnte dig også mulighed for at udføre noget, der kaldes en “test af UI-konsistens”, når dit designteam aktivt leder efter uoverensstemmelser i dit designsystem og retter dem.

Du kan også udføre en tilsvarende test på dine færdige designs. Der er altid en risiko for, at flere funktioner indeholder elementer, som ikke findes i dit UI-kit, eller som ikke ser ud, som de skal.

Ud over at udføre interne tests vil jeg også foreslå, at du aktivt inddrager dine brugere i testprocessen. Det kan gøres på to måder.

• Bed om feedback på designet, forstå dine brugeres behov, og gentag aktivt processen baseret på deres kommentarer.
• Udfør brugervenlighedstests for at forstå graden af konsistens i din grænseflade.

Hvad sidstnævnte angår, kan du forestille dig, at du har brugt din primære handlingsknap 10 forskellige steder i hele dit produkt. Er du sikker på, at dine brugere i alle disse 10 tilfælde vil identificere den som den primære handling?

Det kan du ikke være sikker på, medmindre du udfører modererede eller umodererede brugervenlighedstests med prototyper bygget i dit UX-værktøj og ser, hvordan de interagerer med det.

Baseret på disse tests og brugerfeedback kan du derefter træffe datainformerede designbeslutninger.

Få mig ikke til at tænke

Konsistens er et af kerneelementerne i et godt UI-design. Ved at holde alt enkelt og visuelt ens sikrer du, at dine brugere ikke farer vild i din grænseflade. I stedet forstår de intuitivt formålet med hvert element på deres skærm og udfører nemt deres opgaver.

Glem ikke at tilmelde dig vores nyhedsbrev med flere ressourcer og vejledninger om produktstyring samt de seneste podcasts, interviews og andre indsigter fra brancheledere og eksperter.