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:
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:
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:
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å.
