Bemästra enhetlighet i användargränssnitt: Så skapar du en sömlös användarupplevelse
Har du någonsin känt frustrationen av att navigera på en webbplats eller i en app utan att förstå hur den fungerar? Självklart har du det.
Anledningen till din frustration är troligen ett dåligt utformat gränssnitt som inte låter dig navigera intuitivt. I stället måste du stanna upp och analysera varje element för att förstå hur det fungerar och vad det är till för.
Ett av de vanligaste misstagen som leder till dålig produktdesign är inkonsekvens i användargränssnittet.
Continue Reading for Free
Create a free account to finish this article, plus get ongoing access to timely insights and practical resources.
Have an account? Log In
Förutom att vara ett av de vanligaste misstagen är det också ett som är mycket enkelt att åtgärda eller helt undvika. Så låt oss förstå vad inkonsekvens i användargränssnittet handlar om och hur du kan se till att dina användare slipper den.
Att förstå konsekvens i användargränssnittet
Som namnet antyder handlar konsekvens i användargränssnittet om att ha identiska gränssnittselement, atomär design och en övergripande användarupplevelse för samma typ av handling eller entitet i din produkt.
Om du har primära knappar på flera platser i ditt gränssnitt bör de alla se likadana ut (användargränssnittet) och fungera likadant (användarupplevelsen). Om du till exempel loggar in på ditt Dropbox-konto och bläddrar igenom de olika avsnitten där kommer du att märka att alla primära åtgärdsknappar är identiska.
Om du tittar närmare är det inte bara de primära åtgärdsknapparna som har ett konsekvent utseende i Dropbox, utan i stort sett alla element.
Det finns flera viktiga anledningar till att designteam lägger stor vikt vid en konsekvent design av användargränssnittet. Nämligen:
- Det ser rent och lättöverskådligt ut. Mångfald är inte det bästa i användargränssnitt. Om element har för många olika visuella utformningar blir gränssnittet tungt och läsbarheten försämras.
- Det ser professionellt ut. Ett rent användargränssnitt ger ett intryck av professionalism och skicklighet. Användare tenderar att lita mer på varumärken om deras webbplatser eller produkter är väldesignade.
- Det förbättrar användarupplevelsen. Om du ser en svart knapp någonstans i Dropbox och identifierar den som deras primära åtgärd, kommer du varje gång du ser en likadan knapp att veta att det också är en primär åtgärd. Därför behöver du inte fundera över vad knappen ska göra varje gång du stöter på en sådan.
Slutligen finns också faktorn att utveckla detta gränssnitt. Om du har konsekventa gränssnittselement överallt i din produkt behöver frontendteamet inte utveckla varje nytt element från grunden. I stället skapar de ett enda element och återanvänder det på de nya skärmar de behöver utveckla. På så sätt minskar du drastiskt den tid det tar att skapa nya gränssnitt och funktioner.
Trots sin betydelse och påverkan på användarupplevelsen är konsekvent design inte alltid närvarande. Även stora teknikprodukter är skyldiga till detta problem. Androids inställningsmeny är mitt favoritexempel.
Titta på de olika elementen i den här listan och säg vilka som går att klicka på (knappar) och vilka som bara är informativ text. Det är troligt att du inte kan säga det om du inte öppnar samma meny på din telefon och börjar trycka på allt.
Även om du gissade rätt (det är ”Google-kontodata” och ”Foton och videor”) krävde det en viss kognitiv bearbetning av dig.
Det är inte så UX ska fungera. UX-gurun Steve Krugs berömda citat lyder trots allt:
Få mig inte att tänka.
Förresten rekommenderar jag starkt att du läser hans bok tillsammans med UX-”bibeln” av Don Norman – Designen av vardagliga ting.
Den allmänna tanken här är att dina användare ska kunna känna igen element i ditt användargränssnitt automatiskt utan att behöva tänka på vad de är, och navigera genom din app på ”muskelminnesnivå”.
Grunderna i design av användargränssnitt
Innan vi går vidare och undersöker hur du kan hålla din design konsekvent ska vi återbesöka de grundläggande designprinciper som gör användarvänliga gränssnitt och konsekvens möjliga från första början.
Tydlighet och enkelhet
De dagar då webbplatser hade blinkande gif-bilder och alla regnbågens färger representerade i användargränssnittet är förbi (millenniegenerationen, minns ni dem?).
Ju fler människor som började använda internet, desto mer uppmärksammade UI- och UX-designers hur användare uppfattar och interagerar med användargränssnitt.
Det de snart upptäckte var att för många färger och visuella element hindrade användarna från att utföra de uppgifter de ville. Det enda de får ut av att bläddra i sådana användargränssnitt är ögontrötthet.
Så naturligt nog rörde vi oss mot minimalism och enkelhet. Konsekvens i UI är faktiskt ett annat sätt att göra ditt gränssnitt enklare.
Visuell hierarki
När du har många element på skärmen blir det svårt att förstå relationen mellan dem. Hur vet du till exempel om en viss text är en artikelrubrik eller bara en del av brödtexten?
Du hjälper användarna att förstå dessa relationer med visuell hierarki. Genom att placera objekt högre upp, göra dem större, färglägga dem, använda fetstil och andra knep kan du hjälpa användarna att enkelt se att de är viktigare än andra objekt på skärmen. Därför kommer användarna intuitivt att titta på det elementet först innan de går vidare till det andra.
Det finns ett berömt meme som visar den visuella hierarkins magi.
Log du när du läste texten här, eller hur? Just det, precis som alla andra människor är din syn också programmerad att följa visuell hierarki.
Återkoppling
Varje gång din användare utför en åtgärd i din produkt förväntar de sig att förstå om åtgärden genomfördes eller inte.
Om du klickar på raderingsknappen och inget händer efteråt kan du bli förvirrad. Genomfördes raderingen, eller uppstod ett fel? För att hjälpa användarna med detta behöver du ge dem visuell (eller ljudbaserad och till och med taktil) återkoppling som berättar om resultatet av åtgärden.
Om systemet behandlade raderingsbegäran korrekt ska du berätta för dem att objektet raderades. Om du i stället stöter på ett fel ska du återigen informera dem om det. På så sätt vet de att objektet inte raderades och att de behöver försöka igen eller kontakta dig för support.
Bästa metoderna för att uppnå konsekvens i UI
Vid första anblicken är konsekvens i UI mycket enkelt, och alla designers borde kunna uppnå det. Det stämmer, förutsatt att du är den enda personen som arbetar med produkten och att själva produkten är liten och enkel.
I samma ögonblick som du börjar arbeta som en del av ett större team (där varje designer har sin egen individuella stil) och med en produkt som består av dussintals sidor och funktioner blir det en verklig utmaning att hålla elementen konsekventa.
Du kan helt enkelt inte fysiskt komma ihåg hur varje enskilt element i hela produkten ser ut och återskapa det i den nya funktion du arbetar med.
Lyckligtvis finns det många processer och ramverk som gör det möjligt att minska risken för att lägga till inkonsekvens i din design. Här är de tre som betraktas som branschstandard.
Stilguider: Detta är ett dokument som beskriver designstandarderna för din produkt och representerar din varumärkesidentitet. Det omfattar typografin (det vill säga typsnitt, storlek, placering och så vidare) för olika typer av text (till exempel rubriker, brödtext, kommentarer och så vidare), ikonografi, din färgpalett och andra centrala designelement.
Med en stilguide ser du till att hela designteamet arbetar enligt samma globala standarder och håller innehåll, färger och ikoner konsekventa i hela produkten.
Apple är förmodligen det bästa exemplet på att tillämpa sin stilguide överallt, även hos de företag som utvecklar appar för deras produkter.
Exemplet här är stilguiden för knappen som du kan placera på din webbplats för att låta användarna hämta din app från App Store. Som du kan se är Apple mycket tydliga med hur du får använda den här knappen.
Mönsterbibliotek: Detta är ytterligare ett vägledande dokument som fokuserar på att beskriva detaljerna på låg nivå i din designstandard, till skillnad från det föregående som ger dig de grundläggande designelementen på hög nivå. Designmönsterbibliotek är ett vanligt resultat när ditt team arbetar med atomär design.
Konceptet atomär design går ut på att ha tydligt definierade små UI-element som tillsammans skapar mer komplexa element. De vanligaste kategorierna av element och deras kombinationer i detta ramverk omfattar:
- Atomer (därav namnet): Grundläggande element som formulär, knappar, ikoner och andra. Det här är element som du inte kan bryta ned ytterligare.
- Molekyler: En kombination av atomer som fyller ett specifikt syfte. Exempel är paginering för dina listor, brödsmulor för navigering och så vidare.
- Organismer: Mer komplexa gränssnittselement som består av flera atomer och molekyler och representerar entiteter. Det kan vara kort, sökfält och annat.
- Mallar: Kombinationer av återanvändbara organismer som du kan lägga till på dina sidor. Det kan vara listor med sökresultat, avsnitt med produktbeskrivningar och så vidare.
- Sida: Det slutliga resultatet av din design och platsen där användaren interagerar med den. Som namnet antyder är det de olika sidorna i din produkt, till exempel startsidan.
Ett mönsterbibliotek är en samling standardiserade molekyler och organismer som du kan använda i din design. Du uppnår konsekvens genom att alltid återanvända samma element i olika delar av din produkt, eftersom användarna känner igen elementet direkt när de öppnar en specifik sida.
Designsystem: Detta är den övergripande kombinationen av stilguider på hög nivå, typsnitt, färgscheman och beskrivningar av små UI-element, samt en samling färdiga UI-komponenter som du kan använda både i din design och när du utvecklar produkten.
Nästan alla stora teknikföretag utvecklar sina egna designsystem för att säkerställa visuell konsekvens. Google har Material, Shopify har Polaris och Apple har Human Interface. Det finns också fristående system med öppen källkod som du enkelt kan integrera i din produkt och använda kostnadsfritt. Min favorit bland dessa är ant.design.
Precis som andra designsystem innehåller det både ett designbibliotek som du kan använda i Figma eller andra populära verktyg och ett komponentbibliotek som är förkodat i populära ramverk (till exempel React) och som dina utvecklare kan använda i sin kod.
Verktyg för att upprätthålla konsekvens i UI:t
För att hålla din design konsekvent i alla dina team och delar av produkten behöver du dokumentera dina riktlinjer och se till att hela teamet samarbetar kring dem.
För att dokumentera och tillämpa dina designstandarder i det dagliga arbetet med funktioner och skärmdesigner kan du dra nytta av de specialiserade funktionerna i många moderna designverktyg.
Figma låter dig till exempel skapa skalbara komponenter som du kan lagra i din designsystemfil och låta alla i företaget använda.
Det har också stöd för UI-paket, ett färdigt bibliotek med designriktlinjer och regler som du kan ladda ned från Figmas bibliotek och använda i dina produkter. Här är ett paket för Googles Material Design.
Det här specifika paketet ger dig ett brett utbud av element för att designa en Android-app i enlighet med Googles designstandarder.
Nu till samarbetsdelen. Utan ett fungerande samarbete i ditt designteam är du dömd att få element som inte följer dina riktlinjer och bryter din visuella konsekvens. Som tur är finns det UX/UI-designverktyg som främjar samarbete, också.
Zeplin hjälper till exempel dina designers och utvecklare att samarbeta effektivare genom att skapa utvecklarvänliga versioner av designen, där kodteamet kan hitta exakta CSS-specifikationer för elementen och enkelt ladda ned bilder, ikoner och andra tillgångar från designen. Det integreras också med andra verktyg för UI-utveckling så att du enkelt kan överföra dina designer från den plats där du skapade dem till Zeplin.
More Articles
Testning och iteration för konsekvens i UI:t
Precis som dina produktkrav eller din strategi är designriktlinjer inte heller statiska dokument. Du kommer alltid att behöva göra ändringar i dem och hålla dem uppdaterade.
Några vanliga orsaker till att ändra dina riktlinjer är:
- Lägga till nya element som saknades i biblioteket.
- Anamma nya designtrender och bästa praxis.
- Hitta problem och ”designbuggar” som behöver åtgärdas.
Slutligen är det en god vana att låta ditt designteam granska den då och då och göra mindre förbättringar av den.
Förutom att förbättra det övergripande utseendet och kvaliteten på din design låter det sistnämnda dig också genomföra något som kallas ett ”test av gränssnittets konsekvens” när ditt designteam aktivt söker efter inkonsekvenser i ditt designsystem och åtgärdar dem.
Du kan också genomföra ett liknande test av dina färdiga designer. Det finns alltid en risk att flera funktioner innehåller element som inte finns i UI-kitet eller inte ser ut som de ska.
Förutom att genomföra interna tester skulle jag också rekommendera att du aktivt involverar dina användare i testprocessen. Det finns två sätt att göra det på.
- Be om feedback på designen, förstå dina användares behov och iterera aktivt utifrån deras kommentarer.
- Genomför användbarhetstester för att förstå graden av konsekvens i ditt gränssnitt.
När det gäller det sistnämnda kan du föreställa dig att du har använt din primära åtgärdsknapp på 10 olika platser i hela din produkt. Är du säker på att dina användare i alla dessa 10 fall kommer att identifiera den som den primära åtgärden?
Du kan inte vara säker om du inte genomför modererade eller omodererade användbarhetstester med prototyper byggda i ditt UX-verktyg och ser hur de interagerar med det.
Utifrån dessa tester och användarfeedback kan du sedan fatta datadrivna designbeslut.
Få mig inte att tänka
Konsekvens är en av de viktigaste delarna i en bra gränssnittsdesign. Genom att hålla allt enkelt och visuellt enhetligt ser du till att dina användare inte går vilse i ditt gränssnitt. I stället förstår de intuitivt syftet med varje element på skärmen och kan enkelt utföra sina uppgifter.
Glöm inte att prenumerera på vårt nyhetsbrev för fler resurser och guider inom produktledning, samt de senaste poddarna, intervjuerna och andra insikter från branschledare och experter.
