Knappens anatomi

Upplevelsedesign handlar om att förstå hela bilden när det gäller en verksamhet, dess verktyg och intressenter. Men det handlar också om att förstå hur små detaljer påverkar helheten. En kritiskt viktig komponent i en framgångsrik webbplats är knapparna. Knappar är  ingången till aktiviteter som du vill att användaren ska utföra, och om klicken uteblir så blir all energi vi lagt på upplevelsen bakom knappen ack så värdelös.

Låt mig först illustrera knappens betydelse med följande klipp ur den tecknade långfilmen Monsters vs Aliens. Rymdvarelser är på väg att ta över jorden (eller USA) och en något uppgiven president behöver en caffe latte:

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video

Den som tittar klart på filmen förbi eftertexterna vet att ingenjörerna aldrig hinner göra något åt knappen innan det är för sent.

Knappen är avgörande

Den eller de knappar du har på en webbplats är ofta tänkta att möjliggöra för besökare att slutföra en aktivitet. Men ibland syns inte knappen på det sätt du kanske vill. Jag har brutit ner knappens anatomi i följande egenskaper som illustrerar detaljer som kan vara avgörande för hur bra det går för din webbplats:

knappens-anatomi

Färg

Färgen på knappen bör signalera dess betydelse. Om den följer sajtens färgschema så smälter den in och stör inte så mycket, men den kanske inte heller blir uppenbar. Därmed inte sagt att en skrikande röd knapp alltid är rätt heller. Rätt färg kompletterar ofta bakgrunden, en liten knapp kan ha starkare färg en än en stor knapp och du måste förhålla dig till färgen på texten i knappen. Jodå, det finn en hel del psykologi inblandat bara i färgen. Observera att om du har många av samma knapp på en sida (som en köp-knapp) kan starka färger lätt bli överväldigande och tjänar då inte riktigt sitt syfte.

Form

Rundade hörn, diamanter, cirklar, pilar eller mer udda former (som handritade) är alla tillåtna och kan användas för att dra uppmärksamhet till sig. Kul är förstås om knappen kan spegla varumärket och anta en form som kan kopplas till sinnelaget i organisationen. En knapp som är formad som en pil ger ofta en signal om att du kommer vidare, vilket kan driva klick.

Storlek

Stora knappar är inne, men det kan också gå till överdrift. Dock bör du förstås jobba med storleken för att signalera hur viktig knappen är. En stor knapp är också lättar att klicka på, vilket kan vara relevant om du förväntar dig att många använder en mobil enhet för att besöka din webbplats – och ja, förhoppningsvis förväntar du dig det.

Relativ storlek

Storlek ska alltid ställas i relation till storleken på andra element, och andra knappar i närheten. Det här gäller förstås egentligen även färg. Man brukar prata om primära och sekundära knappar, där vi först och främst vill driva klick på primära knappar. En primär knapp är generellt större och tydligare än en sekundär knapp. Du bör faktiskt inte ha mer än en primär knapp.

Placering

Var på sidan knappen ligger; till höger om ett erbjudande, längst ner i en artikel, ovanför sidans brytpunkt — allt detta kommer påverka hur väl knappen fungerar eftersom det påverkar synlighet, var blicken faller och vad personen i fråga letar efter. Kanske måste du ha samma knapp på flera ställen om du har en riktigt lång sida. Fel placering av rätt erbjudande ger förstås en frustrerad användare istället för glad och tacksam dito.

Ikon

En bild i knappen kan ytterliga framhäva dess synlighet. Som alltid när det gäller små bilder måste du säkerställa att bilden inte förvirrar mer än den hjälper. Ofta är det så enkelt som pilar i någon form, ett brev när det gäller prenumerationer eller en dokument-symbol om det är dokument som ska laddas ner. Försök dock inte förmedla för mycket information i en symbol.

Copy

Texten i knappen kan göra en enorm skillnad på antal klick den får. Ofta hjälper det att förtydliga vad man får om man klickar på knappen men även direkta uppmaningar har rapporterats slå väl ut. Den text som funkar bäst på din knapp måste du själv arbeta fram, det finns inga rätta svar. Just texten på viktiga knappar är något som jag brukar rekommendera att man testar och förädlar löpande, flera gånger per år. Fenomenet med korta texter som ger stora utslag kallas populärt för microcopy.

Kontrast

Om det inte går att se vad det står i knappen så får du självklart problem. Det som du själv upplever som godkänd kontrast kanske inte funkar bra på andra skärmar eller med vissa synfel. Bara att använda fetstil kan ibland göra skillnad mellan suddig och tydlig text. Allra minst bör du använda gratisverktyget Colour Contrast Analyzer för att få en uppfattning om kontrast, och då inte bara i knappar.

Signalbeteende

Är det uppenbart att din knapp är en knapp och vad som händer när du klickar på den? Du kan styra hur knappen ser ut vid mouseover när markören flyter över den, för att ytterligare markera och förtydliga ett beteende – men du har också möjlighet, vilket tyvärr sällan görs, att skapa flytande rutor (så kallade tooltips) med ytterligare information om erbjudandet och/eller anledning att klicka.

Ett av mina favoritbeteenden hittar jag hos Mathem. Just när det gäller varukorgar är det hos många tjänster inte alltid uppenbart att varan jag klickar på faktiskt hamnar i varukorgen, utan jag måste dubbelkolla. Mathem lugnar mig genom att skapa en animation som flyttar en ram från varan till varukorgen, vilket ger en visuell bekräftelse på att det jag ville göra faktiskt hände.

Videoklipp som visar signalbeteendet hos Köp-knappen på Mathem:

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video

 

Skelett (koden)

Knappar kan vara enkla bilder med länkar, formulärknappar med CSS och kodas på olika sätt där button-taggen bara är ett alternativ. Sättet som knappen produceras på kan påverka hur knappen ser ut i olika webbläsare, hur den läses av skärmläsare och hur markören ser ut när den flyter ovanför knappen. Det gäller alltså att tänka igenom alla dessa aspekter och säkerställa att man når de kvaliteer man definierar.

Djävulen är i detaljerna

Här har du nu fått minst tio egenskaper hos knappar som kan påverka hur framgångsrik din webblösning blir. Det är alltså en bråkdel av din webbplats som kan brytas ner i ännu mindre komponenter, och direkt kan påverka din lönsamhet eller användarens förmåga. Genom att vara medveten om framgångsfaktorerna har du större chans att se potentiella problem, och möjligheter.

Dina knappar förtjänar verkligen lite uppmärksamhet då och då, även de små.

Per Axbom

Per Axbom

@axbom

Per Axbom är kommunikationsvetaren som föddes i Liberia. I 20 år har han utbildat den digitala yrkeskåren och hjälpt organisationer med digital användbarhet och tillgänglighet. Per gör teknik trygg och omtänksam genom design, coaching och utbildning. Du kan höra hans röst på UX Podcast.

Digital omtanke bokomslag Pers nya handbok om etik i teknikbranschen, Digital omtanke, finns att köpa hos Bokus. Den engelska upplagan finns även i Kindle-format hos Amazon.

Anlita Per för föreläsning, workshop eller coachning.

Leave a Reply

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.

12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

… plus skillnaden mellan en knapp som skickar vidare med http-kommandona GET eller POST, som gör stor skillnad som användaren backar eller laddar om sidan.
I kombination med en dåligt skriven applikation så kanske en sidomladdning bryter ett påbörjat köpflöde, lägger en extra artikel i varukorgen eller publicerar en två sidor istället för en. Delvis på grund av fel sorts knapp.
Eller ”radera-knappar” som faktiskt är vanliga länkar som en sökmotorrobot följer och faktiskt raderar kontaktregistret 😉

[SE] Dagens #blogg100-inlägg: Knappens anatomi http://t.co/sG7ih99J

Inlägget fick mig att tänka på denna film som visar hur knappar kan designas eller rättare sagt inte designas

Lästips: Ett helt inlägg om knapputformning. http://t.co/22HqZYRV Härligt nördigt. Blev sugen på att skriva liknande om sökrutans placering.

En kritiskt viktig komponent i en framgångsrik webbplats är knapparna http://t.co/vcak0is6 #webbdesign

Grymt matnyttigt artikel. Tack! Och mycket smart och användbart hos Mathem.

Knappens anatomi – axbom http://t.co/v6DcpTYA via

Knappens anatomi – en grym beskrivning av vad man ska tänka på när man placerar en knapp på sin sida. #ff http://t.co/ZPh9aPnZ

Apropå knappar…har du sett inloggningsknappen på https://www.nordnet.se? Det tog pinsamt lång tid innan jag hittade var jag skulle logga in när de hade gjort om sidan (knappen byter dessutom färg mellan gångerna man går in på sidan).