Det mest underskattade ordet inom webbdesign

Annelie Alm

Härom dagen publicerades en artikel i Smashing Magazine om ”Det mest underskattade ordet inom webbdesign”, nämligen affordance. Affordance kan beskrivas som en uppfattad signal eller ledtråd som indikerar hur ett objekt kan användas för att utföra en specifik handling. Till exempel signalerar en stol att den kan ge stöd och den är knähög – alltså, den signalerar att man kan sitta. Allt runt om oss har affordance oavsett om den är explicit eller gömd och vanligast är att man pratar om affordance när man designar fysiska produkter, men affordance är alltså minst lika viktigt när det kommer till webbdesign.

Artikeln tog upp sex olika typer av affordance som är viktiga att känna till och kunna dra nytta av (eller hålla sig ifrån!) när man jobbar med webbdesign och digitala produkter. Här kommer en superkort summering samt några bildexempel av dessa:

1. Explicit affordance Tydlig affordance med liten risk för att den skulle kunna missas. Kan dock bidra till att gränssnittet känns övertydligt för vissa användare. Används för att förklara icke-intuitiv affordance.

Explicit affordance

Text på knapp som förklarar vad som händer vid klick.

2. Mönster-affordance Kommunicerar affordance på ett snabbt och smidigt sätt, men förlitar sig på användarens tidigare erfarenheter och upplevelser. Används med fördel i situationer där mönstret är tydligt och välkänt.

Mönster-affordance

Exempel på mönster-affordance är navigering/meny som används för att ta sig runt på sajten och logotyp som alltid leder hem.

3. Gömd affordance Skapar ett ”rent” gränssnitt då funktioner och annan interaktion göms och endast visas genom att användaren vet hur hen ska plocka fram den. Kan användas för mindre vitala funktioner och när användargruppen ses som belägna att testa-sig-fram.

Gömd affordance

Gömda knappar som vid mouse-over syns och avslöjar funktionalitet.

4. Metaforbaserad affordance Det lättaste sättet för att kommunicera komplex affordance då de är av en mer beskrivande karaktär. Används endast när de behövs, d.v.s. när interaktionen inte kan förklaras på annat sätt.

Metaforbaserad affordance

Beskrivande ikoner är ett exempel på metaforbaserad affordance.

5. Falsk affordance Den typ av affordance som indikerar att det finns en interaktion trots att det ej finns, alternativt signalerar fel signaler. Bör aldrig användas då det bara störa användarupplevelsen.

Falsk affordance2

Falsk affordance, grön knapp som används för att stänga ner - knappen signalerar "positivitet" trots att den används för att stänga vilket blir missledande.

6. Negativ affordance Negativ affordacne används med syftet att signalera att ett designelement inte har någon affordance, och därmed hjälpa användaren att förstå detta och på så sätt undvika frustration. Bör användas med försiktighet i de fall där det finns ett faktiskt syfte.

Negativ affordance

Exempel på detta är att visa ett tillstånd av inaktivitet, så att användaren kan förstå att det är ett input-fält men som just nu inte går att skriva i.

Sammanfattningen blir: rätt affordance på rätt plats = grym UX! Om du vill läsa mer hittar du hela artikeln här.

Lämna en kommentar

2 kommentarer

  • Mattias Arvola

    Allt här i världen är inte handlingsinviter (affordance). Menar man mönster så kan kalla det mönster, menar man metafor så kan man kalla det metafor, menar man begränsning (constraint) så kan man kalla det det. Begreppet används slarvigt i den här kategoriseringen och blandar äpplen och päron.

  • Annelie Alm

    Hej Mattias!

    Kul att du följer oss här på inuse.se/blogg :)

    Syftet med artikeln på Smashing, och det som jag gillade med den, var att påminna om vikten av att beakta affordance även när man designar för webb - Något som blir allt viktigare med tanke på "gömda" funktioner och platta gränssnitt. Man kan absolut använda andra ord för detta, precis som du är inne på, men jag tycker att just affordance fångar upp ett större spektra gällande mängden faktorer som påverkar om något känns lätt/intuitivt att använda eller inte.

    Hoppas detta gav lite mer klarhet i vad jag menar med blogginlägget. Ha en härlig sommar!