Det krävs egentligen inte mycket för att förvandla ett tungt och komplext gränssnitt till något överskådligt och snyggt. Genom att lyfta fram den viktigaste informationen och skapa en bra struktur, blir tjänsten lättare att scanna igenom och använda. Detta sätt att prioritera och sortera information kallas progressive disclosure. Det hjälper användaren avgöra om informationen är relevant eller inte - och det spar både tid och energi!

Vi vet hur man skapar design som förhöjer användarupplevelsen. Kontakta oss om du vill veta mer!

Vi har väl alla sett tjänster där man utnyttjat varje pixelyta för att visa de senaste produkterna och skrika ut erbjudanden. Den envise kämpar kanske en stund för att hitta det hen söker - men mest troligt är att man blir överväldigad och lämnar sidan för att leta vidare någon annanstans.

Fler alternativ innebär att det kommer ta längre tid att fatta ett beslut. Detta kallas Hick's lag.

Det kan finnas en oro att det som inte syns kommer förbises. Men bara för att det är dolt innebär det inte att det är svårt att hitta. Vi går igenom det dagligen i exempelvis matbutiker. Även en supermarket med många, överfyllda hyllor kan vara lätt att söka igenom med hjälp av skyltar som kategoriserar sortimentet. Det hjälper dig avgöra om du är vid rätt hylla eller om du bör söka dig vidare.

Butiker är duktiga på att använda skyltar för att guida kunden rätt. Bild: butiksprofil.se

Ju mindre ansträngning, desto bättre

Vår hjärna är smart, men också lite lat. Den är programmerad att spara energi och lägger helst ingen tid på sådant som verkar ointressant. Därför tar den gärna in små delar information först genom att snabbt scanna av innehållet. När den hittar något som verkar intressant kan den undersöka det noggrannare.

En webbsida med komplex struktur tar längre tid att scanna av, vilket gör att hjärnan får arbeta hårdare. Titta på gränssnittet nedan.

På www.xxix.co finns inget tydligt dominant element vilket skapar en splittrad uppmärksamhet.

Det är egentligen inte särskilt många element på den här webbsidan, men placeringen och färgsättningen gör att hjärnan blir förvirrad. Var ska den börja?

När det finns flera element som drar uppmärksamhet på det här sättet vet inte hjärnan var den ska fokusera. Mer energi går åt till att scanna gränssnittet, vilket resulterar i att mindre energi finns kvar för att tolka och förstå det man ser. 

 Ju mer energi som går åt till att tolka något visuellt, desto mindre finns kvar för att förstå det man ser. 

Jämför nu med gränssnittet nedan.

På www.ted.com/talks har man arbetat aktivt med grupperingar av element vilket skapar ett gränssnitt som är lätt att ta in.

Här har man jobbat med gruppering av element vilket hjälper hjärnan att förstå vilka element som hör ihop. Gränssnittet har en tydlig struktur och en avskalad färgpalett, vilket gör att de färgglada videoklippen sticker ut och hamnar i fokus. Eftersom användarens mål förmodligen är att leta videoinnehåll är detta en design som underlättar för användaren.

Vad vill användaren?

Varje användare har ett mål i sitt användande, litet eller stort (mer om vad användaren egentligen vill uppnå kan du läsa i min artikel om jobs-to-be-done). Genom att skapa förståelse för dessa kan du designa din tjänst för att underlätta för användaren. Fundera på vilken information som behövs för att användaren ska uppnå sina mål. Hur kan du designa din tjänst för att underlätta i användandet? 

Prioritera informationen efter vilken som är kritisk för att användaren ska kunna nå sitt mål. Här kan den inverterade pyramiden för journalistik användas som ett verktyg:

Progressive disclosure utgår från den inverterade pyramiden av journalistik (min översättning).
När du vet vilken information som ska prioriteras finns det flera sätt att skapa ett gränssnitt som är lätt att ta till sig. 

3 steg för att underlätta för användaren

Det här med att lyfta fram primär information och dölja den som är mindre viktig har ett namn. Det kallas progressive disclosure, eller progressivt avslöjande, och går att applicera på flera sätt:

1. Visa primär information

Vad är det för information användaren är intresserad av? Lyft fram den så den syns! 

Och du... Tvinga inte användaren att leta efter relaterad information på flera olika ställen! På samma sätt som relaterade matvaror är lättare att hitta om de står på samma hylla bör liknande information gå att hitta på samma ställe. 

2. Göm undan sekundär information

Varje sak som inte är intressant för användaren skapar en distraktion från användarmålet. Därför är det viktigt att dölja, eller helt ta bort, sådan information.


Här kan dragspel, så kallade collapsing columns, användas. De döljer sekundär information samtidigt som den är lätt att komma åt om användaren behöver den.

Hopfällbara kolumner visar innehållet i närhet till triggerkomponenten.
Du kan även förkorta innehållet och ge en förhandsgranskning av det. Användaren kan sedan ladda in resten av innehållet genom att klicka på en länk.
Länkar kan användas för att "fälla ut" ytterligare detaljer eller för att ladda in mer innehåll.

3. Dela upp i flera steg

Underlätta för användaren genom att dela upp informationen i flera steg. Då blir det lättare att få en snabb överblick utan att behöva scanna igenom stora mängder information. Ett bra sätt att hjälpa användaren fokusera på en sak i taget.

Men kom ihåg - alltför många steg kan också bli frustrerande! Dela inte upp information i flera steg i onödan. 

Minska det visuella bruset genom att dela in informationen i flera steg.

Du kan läsa om fler sätt att designa med progressive disclosure i PrototypR's artikel. Dessutom kan du använda dig av följande knep för att lyfta designen ännu ett snäpp:

  1. Använd white space - Tomma utrymmen, så kallade white spaces, erbjuder hjärnan en paus och en möjlighet att bearbeta det den ser för att sedan ta ett beslut. Genom att arbeta med det på rätt sätt skapas också grupperingar som gör gränssnittet lättare att läsa av. 
  2. Låt vissa element dominera - Element med samma visuella dominans tävlar med varandra om användarens uppmärksamhet. Och du minns väl vad som händer då? Det blir jobbigt för hjärnan att ta in och blicken flackar överallt. Genom att sätta olika vikt på elementen skapar du en bättre översikt som snabbt går att scanna igenom.

Progressive disclosure i praktiken

Ett av de bästa sätten att lära sig skapa gränssnitt är att ta inspiration från andra. Här är ett par exempel på tjänster som applicerat progressive disclosure.

IKEA

Ikea har en massa information till varje produkt. Att visa precis allt på en gång skulle bli en chock för användaren - bra att någon tänkt till och dolt sekundär information med hjälp av dragspel. 😌


Man har använt väl separerade, tydliga rubriker med tillhörande ikoner vilket gör det lätt för användaren att hitta informationen hen söker. Lägg även märke till hur man kan ha flera rader öppna samtidigt - en underskattad funktion. 

Under raden 'Lagersaldo' dyker informationen dessutom upp direkt i anslutning till vad man valt. Fördelen med det är att användaren inte behöver skickas fram och tillbaka mellan flera sidor. Smidigt!

Apple

Apple's produktsida har man valt att dela upp informationen i flera steg. Visst, man hade säkert kunnat använda hälften så många slides och besparat användaren några varv på scrollhjulet, men det är också detta som gör det till en så mäktig upplevelse.

Här har man använt rejält med white space och gjort noggranna grupperingar av information, vilket ger användaren precis vad hen behöver i varje steg. De maffiga bilderna är snygga blickfång, och de häftiga övergångarna mellan varje segment ger användaren motivation till att scrolla vidare. Dessutom är det ju rätt coolt att se hur produkten bryts upp i delar! 🤩

Medium

Medium är ett onlinemagasin med ett oändligt antal artiklar. Tack vare puffarna för artiklarna får användaren en liten förhandstitt på vad artikeln innehåller, tillsammans med information om hur lång tid artikeln beräknas ta att läsa. Har man inte tid att läsa kan man även bokmärka artikeln för att komma tillbaka senare.

Dessutom laddas fler puffar in när användaren når botten av skärmen:

Detta mönster, så kallat infinite scroll, är dock inte helt oproblematiskt. Det gör det ju svårare för användaren att sluta scrolla! Skaparen av infinite scroll, Aza Raskin, har faktiskt själv bett om ursäkt för att han ens kom på idén... 🤯 Det ska med andra ord tillämpas med tillförsikt! 

Avslutningsvis...

Nej, det behöver inte vara så svårt. Det är faktiskt riktigt enkla knep som behövs för att skapa ett gränssnitt som är lätt att ta till sig och använda.

Om du vill lära dig mer om hur man kan applicera progressive disclosure i praktiken så kan jag rekommendera denna artikel från PrototypR. Även Nielsen & Norman Group har skrivit en läsvärd artikel om ämnet, där de bland annat radar upp för- och nackdelar med progressive disclosure.


Toppbild: Mick Haupt on Unsplash