"Where's the 'any' key?"

En knapp är en visuell artefakt som representerar en eller flera funktioner, funktioner som verkställs när man trycker på den. Hur vi läser och förstår knappen och dess representerade funktion(er) avgörs av många olika, ofta kombinerade, variabler; kompletterande text och/eller bild, färg, knappens egna fysiska utformning och känsla, och i vilken kontext du läser knappen.

Att läsa och förstå knappen

För att veta att någonting är en knapp måste vi alltså läsa det som en knapp. Det är den enkla biten – oftast är den rund, färgad och det står/finns ett ord eller en bild i den. Att förstå vad den i sin tur faktiskt gör (vilken funktion den representerar), ja det kan vara klurigare beroende på hur väl designad den är, var den är placerad i förhållande mot andra element, samt hur komplex kontexten är.

• stavmixer – enkelt.
• Meny på hemsida – rimligtvis enkelt.
• Fjärrkontroll digitalbox – i bästa fall någorlunda begripligt till rejält kryptiskt. 

En bra knapp är en knapp man förstår, även om man är obekant med den kontext som den påträffas i. Om vi köper en matberedare utgår vi, förmodligen utan att ens reflektera över det, att den antagligen är utrustad med ett antal knappar, vars representerade funktioner vi snabbt klarar av att förstå. Produktdesignern utgår förmodligen från att vi utgår från det. En dålig knapp i sin tur är en knapp man inte klarar av att identifiera som en knapp (försök hitta spolknappen på toaletten på ett designhotell), eller inte förstår vad den gör. Det handlar helt enkelt om användarvänlighet; att besökaren ska kunna navigera på din hemsida, kunna mixa sin hummus eller byta kanal på digitalboxen.

En CD-spelare helt utan tradtionella knappar. Även om du inte är bekant med den här produkten i fråga så får du säkert en föraning om hur du startar den bara av att kasta en blick på den. Enkelt, intuitivt och lekfullt.

Baby Box Noise Generator – en ljudgenerator med avsiktligt svårbegripliga knappar och reglage. Tanken är att du inte ska förstå gränssnittet, och på så sätt styr slumpen vilka ljud som genereras och vilken karaktär de får.

Konkreta effekter

Varför jag ägnar ett blogginlägg till att utreda någonting som kan förefalla så självklart som vad som utgör en bra eller dålig knapp beror på två anledningar: 1. Jag tycker om designdetaljer, ofta sådana som vi kanske förbiser. 2. En dålig knapp bidrar till en dålig användarupplevelse, och en dålig användarupplevelse är inget bra. Ett konkret exempel på effekten av en dålig användarupplevelse är att din presumtiva kund tröttnar på din hemsida och drar, väljer en konkurrents app eller produkt, och så vidare.

Användarvänlighet kontra estetik

Ibland kan det uppstå situationer där funktionell begriplighet står i en ringhörna och visuellt uttryck i den andra. En sådan balansakt rör en stor samtida trend inom grafisk-, webb- och gränssnittsdesign, nämligen platt design (eller ”flat design” på engelska). Lite förenklat kan man säga att det är design vars element saknar skuggningar, texturer eller andra effekter som får dem att se tredimensionella ut:

Platt design: inga skuggningar, inga upphöjda knappar. Istället används färger, färgnivåer och ikoner som designelement för att visa var du kan trycka, vilket läge som är aktiverat.

Och här kommer resonemanget om hur vi läser knappar tillbaka igen – platt design har fått kritik för att vara icke-intuitiv och en trend som bottnar i en estetisk strömning snarare än funktionell rationalism. Kort sagt, användare fattar inte riktigt vilka element i ett gränssnitt som är interaktiva (länkar, knappar, reglage) och vad som är statiskt icke-interaktivt innehåll.

Min personliga åsikt är att platt design inte svepande bör dömas ut som mindre användarvänlig. Det handlar lika mycket om hur den används: hur interaktiva element är placerade i förhållande till icke-interaktiva, hur information struktureras hierarkiskt, vilka ord som helt enkelt står i knappen eller vilken symbol man väljer att använda som representant för en specifik funktion.

Skeumorphism: begriplighetens bästis?

På andra sidan om platt design hittar vi skeumorphistisk design, det vill säga design som försöker imitera föremåls fysiska gestalt: en knapp på en hemsida eller i ett program kan till exempel vara röd, ha en glansig plasttextur och en skugga, som den hade sett ut i det verkliga livet helt enkelt. Tittar man på tidiga versioner av operativsystem ser man hur gränssnittsformgivarna försökt efterlikna fysiska knappars utseenden, och göra dem tredimensionella genom att simulera höjdskillnader med skuggor, texturer och konturer:

Skeumorphism 1995: Gamla goda Windows 95. Yttre svart ram + ljus och skugga simulerar höjdskillnad. En inre prickad ram visar att det är den här specifika knappen som aktiveras ifall man skulle föredra att trycka på enter istället för på musen.

Skeumorphism 2001: Färgade glaspärlor (?) insprängda i borstad metall fungerar som knappar för fönsterhantering i mac OS X. Pärlorna hängde med ända fram till 2014, då de blev platta som pannkakor i och med OS X Yosemite. Metallen pensionerades likaså.

Ett skeumorphistiskt gränssnitt. Just det här exemplet är i mitt tycke förhållandevis sofistikerat tack vare en återhållsam användning av texturer i kombination med mycket vita ytor.

Världen efter knappen

Knappen har funnits länge och kommer säkerligen finnas lång tid framöver. Men om det fanns en tid före knappen, så kanske det är rimligt att anta att det kommer en tid efter den. Det har väl inte gått någon förbi att vi lever i intressanta tider; nya futuristiska sätt att interagera med våra föremål håller ständigt på att utvecklas, allt från sofistikerad röststyrning i Apples Siri eller Microsofts Cortana, till handrörelser i luften i Microsofts XBox och Googles projekt Soli.

Att knappen fått sin form är, som allt annat, ett resultat av den tekniska och kulturella miljö som omgav den. Då var en liten rund tingest med en fjädermekanism under sig den bäst fungerande lösningen, och kanske kommer trumfa framtida tekniker i funktionalitet. Det kommer vi veta när vi om tio år står och vädjar till krånglande espressomaskiner eller försöker luftzooma i ett oförstående Google Maps.