Har du noen gang følt frustrasjonen ved å navigere på et nettsted eller i en app uten å forstå hvordan den fungerer? Selvfølgelig har du det.
Årsaken til frustrasjonen din er sannsynligvis et dårlig utformet grensesnitt som ikke lar deg navigere intuitivt. I stedet må du stoppe opp og analysere hvert element for å forstå hvordan det fungerer og hva det brukes til.
En av de vanligste feilene som fører til dårlig produktdesign, er manglende konsistens i brukergrensesnittet.
I tillegg til å være en av de mest utbredte feilene, er dette også en feil som er svært enkel å rette opp eller unngå generelt. Så la oss forstå hva manglende konsistens i brukergrensesnittet handler om, og hvordan du kan sørge for at brukerne dine unngår dette.
Forstå konsistens i brukergrensesnittet
Som navnet antyder, handler konsistens i brukergrensesnittet om å ha identiske brukergrensesnittelementer, atomisk design og en overordnet brukeropplevelse for samme type handling eller enhet i produktet ditt.
Hvis du har primærknapper på flere steder i grensesnittet, bør de alle se like ut (brukergrensesnitt) og fungere likt (brukeropplevelse). Hvis du for eksempel logger inn på Dropbox-kontoen din og går gjennom de ulike delene der, vil du legge merke til at alle knappene for primærhandlinger er identiske.
Hvis du ser nærmere etter, er det ikke bare knappene for primærhandlinger som har et konsistent utseende i Dropbox, men praktisk talt alle elementene.
Det er flere viktige grunner til at designteam legger stor vekt på et konsistent brukergrensesnitt. Blant annet:
- Det ser ryddig ut og er behagelig for øyet. Mangfold er ikke det beste å ha i brukergrensesnitt. For mange visuelle varianter av elementer gjør grensesnittet tungt og svekker lesbarheten.
- Det ser profesjonelt ut. Et ryddig brukergrensesnitt gir et inntrykk av profesjonalitet og dyktighet. Brukere har en tendens til å stole mer på merkevarer hvis nettstedene eller produktene deres er godt utformet.
- Det forbedrer brukeropplevelsen. Hvis du ser en svart knapp et sted i Dropbox og identifiserer den som deres primærhandling, vil du vite at hver knapp som ser identisk ut, også er en primærhandling. Derfor trenger du ikke å tenke over hva denne knappen skal gjøre hver gang du møter en slik knapp.
Til slutt kommer også faktoren som handler om utviklingen av dette grensesnittet. Hvis du har konsistente brukergrensesnittelementer overalt i produktet ditt, trenger ikke frontend-teamet å utvikle hvert nye element fra bunnen av. I stedet oppretter de ett enkelt element og gjenbruker det på de nye skjermbildene de må utvikle. På denne måten reduserer du tiden det tar å lage nye grensesnitt og ny funksjonalitet, drastisk.
Til tross for betydningen og innvirkningen på brukeropplevelsen er konsistent design ikke alltid til stede. Selv store teknologiprodukter er skyldige i dette problemet. Innstillingsmenyen i Android er mitt favoriteksempel.
Se på de ulike elementene i denne listen, og fortell meg hvilke som er klikkbare (knapper), og hvilke som bare er informativ tekst. Det er stor sannsynlighet for at du ikke kan si det, med mindre du åpner den samme menyen på telefonen din og begynner å trykke på alt.
Selv om du gjettet riktig (det er «Google-kontodata» og «Bilder og videoer»), krevde det litt kognitiv bearbeiding å komme frem til svaret.
Slik skal ikke brukeropplevelsen fungere. Det berømte sitatet fra brukeropplevelsesguruen Steve Krug sier tross alt:
Ikke få meg til å tenke.
Forresten anbefaler jeg på det sterkeste at du leser boken hans sammen med «bibelen» for brukeropplevelse av Don Norman – Design av hverdagslige ting.
Den generelle tanken her er at brukerne dine skal kunne gjenkjenne elementer i brukergrensesnittet automatisk uten å måtte tenke over hva de er, og navigere gjennom appen på «muskelminne»-nivå.
Grunnleggende prinsipper for design av brukergrensesnitt
Før vi går videre med å forstå hvordan du kan holde designet konsistent, la oss se på de grunnleggende designprinsippene som gjør brukervennlige brukergrensesnitt og konsistens mulig i utgangspunktet.
Have an account? Log In
Klarhet og enkelhet
Tiden med nettsteder som hadde blinkende gif-animasjoner og alle regnbuens farger representert i brukergrensesnittet, er forbi (millenniumsbarn, husker dere dem?).
Jo flere mennesker som begynte å bruke internett, desto mer oppmerksomme ble UI- og UX-designere på hvordan brukerne oppfatter og samhandler med brukergrensesnitt.
Det de snart oppdaget, var at for mange farger og visuelle elementer hindrer brukerne i å utføre oppgavene de ønsker. Det eneste de får ut av å navigere i slike brukergrensesnitt, er øyetretthet.
Derfor beveget vi oss naturlig nok mot minimalisme og enkelhet. Konsistens i brukergrensesnittet er faktisk en annen måte å gjøre grensesnittet enklere på.
Visuelt hierarki
Når du har mange elementer på skjermen, blir det vanskelig å forstå forholdet mellom dem. Hvordan vet du for eksempel om et bestemt tekststykke er en artikkeloverskrift eller bare en del av teksten?
Du hjelper brukerne med å forstå disse forholdene gjennom visuelt hierarki. Ved å plassere elementer øverst, gjøre dem større, fargerike og fete, og bruke andre triks, kan du hjelpe brukerne med å se at de er viktigere enn andre elementer på skjermen. Derfor vil brukerne intuitivt se på dette elementet først før de går videre til det neste.
Det finnes et kjent meme som viser magien ved visuelt hierarki.
Du smilte da du leste teksten her, gjorde du ikke? Nettopp, akkurat som alle andre mennesker er synet ditt også programmert til å følge visuelt hierarki.
Tilbakemelding
Hver gang brukeren utfører en handling i produktet ditt, forventer vedkommende å forstå om handlingen ble utført eller ikke.
Hvis du klikker på sletteknappen og ingenting skjer etterpå, kan du bli forvirret. Ble slettingen utført, eller oppsto det en feil? For å hjelpe brukerne med dette må du gi dem visuell (eller lydmessig og til og med haptisk) tilbakemelding som forteller dem om resultatet av handlingen.
Hvis systemet behandlet sletteforespørselen uten problemer, må du fortelle dem at elementet ble slettet. Hvis du i stedet støter på en feil, må du igjen fortelle dem om det. På denne måten vet de at elementet ikke ble slettet, og at de må prøve igjen eller kontakte deg for å få hjelp.
Beste praksis for å oppnå konsistens i brukergrensesnittet
Ved første øyekast er konsistens i brukergrensesnittet svært enkelt, og enhver designer burde kunne oppnå det. Det stemmer, forutsatt at du er den eneste som arbeider med produktet, og at selve produktet er lite og enkelt.
I det øyeblikket du begynner å arbeide som del av et større team (der hver designer har sin egen individuelle stil) og med et produkt som består av dusinvis av sider og funksjoner, blir det en reell utfordring å holde elementene konsistente.
Du kan ganske enkelt ikke huske hvordan hvert eneste element i hele produktet ser ut, og gjenskape det i den nye funksjonen du arbeider med.
Heldigvis finnes det mange prosesser og rammeverk som lar deg redusere risikoen for å tilføre designet ditt inkonsistens. Her er de tre som regnes som bransjestandarder.
Stilguider: Dette er et dokument som beskriver designstandardene for produktet ditt og representerer merkevareidentiteten din. Det omfatter typografi (det vil si skrifttyper, størrelse, plassering og så videre) for ulike typer tekst (for eksempel overskrifter, brødtekst, kommentarer og så videre), ikonografi, fargepaletten din og andre grunnleggende designelementer.
Med en stilguide sørger du for at hele designteamet arbeider innenfor de samme globale standardene, og at innholdet, fargene og ikonene dine er konsistente i hele produktet.
Apple er sannsynligvis det beste eksempelet på å håndheve stilguiden sin overalt, også hos selskapene som utvikler apper for produktene deres.
Eksempelet her er stilguiden for knappen du kan plassere på nettstedet ditt, slik at brukerne kan laste ned appen din fra App Store. Som du ser, er Apple svært tydelige på hvordan du kan bruke denne knappen.
Mønsterbiblioteker: Dette er et annet veiledende dokument som fokuserer på å beskrive detaljene på lavt nivå i designstandarden din, i motsetning til det forrige dokumentet, som gir deg de grunnleggende designelementene på høyt nivå. Designmønsterbiblioteker er et vanlig leveranseobjekt når teamet ditt praktiserer atomisk design.
Konseptet atomisk design går ut på å ha tydelig definerte, små UI-elementer som kombineres for å skape mer komplekse elementer. De vanlige kategoriene av elementer og kombinasjonene deres i dette rammeverket omfatter:
- Atomer (derav navnet): Grunnelementer som skjemaer, knapper, ikoner og andre elementer. Dette er elementer som ikke kan brytes ned ytterligere.
- Molekyler: En kombinasjon av atomer som har et spesifikt formål. Eksempler er paginering for listene dine, brødsmuler for navigasjon og lignende.
- Organismer: Mer komplekse grensesnittelementer som består av flere atomer og molekyler, og som representerer entiteter. Dette kan være kort, søkefelt og andre elementer.
- Maler: Kombinasjoner av gjenbrukbare organismer som du kan legge til på sidene dine. De kan være lister over søkeresultater, seksjoner med produktbeskrivelser og lignende.
- Side: Det endelige resultatet av designet ditt og stedet der brukeren samhandler med det. Som navnet antyder, er dette de ulike sidene i produktet ditt, for eksempel hjemmesiden.
Et mønsterbibliotek er en samling standardiserte molekyler og organismer som du kan bruke i designet ditt. Du oppnår konsistens ved alltid å gjenbruke de samme elementene i ulike deler av produktet ditt, siden brukerne umiddelbart kjenner igjen elementet når de åpner en bestemt side.
Designsystem: Dette er den overordnede kombinasjonen av stilveiledninger på høyt nivå, skrifttyper, fargepaletter og beskrivelser av små UI-elementer, samt en samling ferdiglagde UI-komponenter som du kan bruke både i designet ditt og under utviklingen av produktet.
Nesten alle store teknologiselskaper utvikler sitt eget designsystem for å sikre visuell konsistens. Google har Material, Shopify har Polaris, og Apple har Human Interface. Det finnes også frittstående systemer med åpen kildekode som du enkelt kan integrere i produktet ditt og bruke gratis. Min favoritt blant disse er ant.design.
Akkurat som andre designsystemer leveres det både med et designbibliotek som du kan bruke i Figma eller andre populære verktøy, og et komponentbibliotek som er forhåndskodet i populære rammeverk (f.eks. react), som utviklerne dine kan bruke i koden sin.
Verktøy for å opprettholde UI-konsistens
For å holde designet konsistent på tvers av alle teamene og delene av produktet ditt må du dokumentere retningslinjene dine og sørge for at hele teamet samarbeider om dem.
For å dokumentere og anvende designstandardene dine i den daglige utformingen av funksjoner og skjermer kan du dra nytte av spesialfunksjonene i mange moderne designverktøy.
Figma lar deg for eksempel opprette skalerbare komponenter som du kan lagre i designsystemfilen din og gjøre tilgjengelige for alle i selskapet.
Det støtter også UI-sett, et ferdiglaget bibliotek med designretningslinjer og regler som du kan laste ned fra Figmas bibliotek og bruke i produktene dine. Her er et sett for Googles Material Design.
Dette bestemte settet gir deg et bredt utvalg av elementer for å designe en Android-app i samsvar med Googles designstandarder.
Så var det samarbeidsdelen. Uten godt samarbeid i designteamet ditt er du dømt til å få elementer som ikke følger retningslinjene dine og bryter den visuelle konsistensen. Heldigvis finnes det UX/UI-designverktøy som fremmer samarbeid, også.
Zeplin hjelper for eksempel designere og utviklere med å samarbeide mer effektivt ved å opprette utviklervennlige versjoner av designet, der utviklingsteamet kan finne nøyaktige CSS-spesifikasjoner for elementene og enkelt laste ned bilder, ikoner og andre ressurser fra designet. Det integreres også med andre verktøy for UI-utvikling, slik at du enkelt kan overføre designene dine fra stedet du laget dem, til Zeplin.
More Articles
Testing og iterasjon for UI-konsistens
Akkurat som produktkravene eller strategien din er heller ikke designretningslinjer statiske dokumenter. Du vil alltid ende opp med å gjøre endringer i dem og holde dem oppdatert.
Noen av de vanligste årsakene til å endre retningslinjene dine er:
- Legge til nye elementer som manglet i biblioteket.
- Ta i bruk nye designtrender og beste praksis.
- Finne problemer og «designfeil» som må rettes.
Til slutt er det god praksis å la designteamet ditt gjennomgå det regelmessig og gjøre små forbedringer.
I tillegg til å forbedre det generelle utseendet og kvaliteten på designet ditt, lar sistnevnte deg også utføre noe som kalles en «test av UI-konsistens», når designteamet ditt aktivt leter etter inkonsekvenser i designsystemet ditt og løser dem.
Du kan også utføre en lignende test på de ferdige designene dine. Det er alltid en mulighet for at flere funksjoner inneholder elementer som ikke finnes i brukergrensesnittsettet, eller som ikke ser ut slik de skal.
I tillegg til å gjennomføre interne tester vil jeg også anbefale at du aktivt involverer brukerne dine i testprosessen. Det finnes to måter å gjøre dette på.
- Be om tilbakemeldinger på designet, forstå brukernes behov, og videreutvikle det aktivt basert på kommentarene deres.
- Gjennomfør brukervennlighetstester for å forstå graden av konsistens i brukergrensesnittet ditt.
Når det gjelder sistnevnte, kan du tenke deg at du har brukt primærhandlingsknappen din på 10 forskjellige steder i hele produktet. Er du sikker på at brukerne dine vil identifisere den som primærhandlingen i alle disse 10 tilfellene?
Du kan ikke være sikker med mindre du gjennomfører modererte eller umodererte brukervennlighetstester med prototyper bygget med verktøyet ditt for brukeropplevelse og ser hvordan de samhandler med det.
Basert på disse testene og tilbakemeldingene fra brukerne kan du deretter ta datadrevne designbeslutninger.
Ikke få meg til å tenke
Konsistens er et av de viktigste elementene i et godt brukergrensesnitt. Ved å holde alt enkelt og visuelt identisk sørger du for at brukerne dine ikke går seg vill i brukergrensesnittet ditt. I stedet forstår de intuitivt hensikten med hvert element på skjermen og utfører oppgavene sine på en enkel måte.
Ikke glem å abonnere på nyhetsbrevet vårt for flere ressurser og veiledninger om produktledelse, i tillegg til de nyeste podkastene, intervjuene og annen innsikt fra bransjeledere og eksperter.
