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.
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.
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.
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.
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.
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.
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.
Distinkt typografi i Futura och oregelbundna horisontalstreck speglar det möte mellan natur och designobjekt som Hikkis produkter är.
Två sigillogotyper avsedda för print, webb och så förstås blindprägling i läder. För Handcrafted by Sweden.
Ett interaktivt webbexperiment där musik, video och gränssnittsdesign möts. Genom att slå på/av fraser och justera volym kan besökaren skapa eviga ljudlandskap.
En produktkatalog med bra bildtryck på ett kvalitativt obestruket papper i en rejäl vikt blir en förlängning av Handcrafted by Swedens egen designfilosofi.
Tredje albumet med min enmannaorkester Nattavaara Rocks. Ett digitalt album i fysisk form, eller en skiva för det 21:a århundradet om man så vill.
Hösten 2015 lanserade Västerbottens-kuriren sin nya näringslivssajt. Jag stod för den grafiska profilen.
Andra skivan med mitt musikprojekt Nattavaara Rocks. En 16-sidig digitaltryckt inlaga inklistrad i ett handgjort, blindpräglat konvolut.
Hemsida för konstnär Elin Magnusson. Mycket luft, diskret typografi och knappt någon färg lämnar ett neutralt rum åt konsten.
Hur visar man mode på webben? Med bilder så stora som skärmen tillåter och diskret formgivning i en hemsida som egentligen är en look book.
Hemsida och typografiskt uttryck till konstnärsduon Sisters of Jam, ett samarbete mellan systrarna och konstnärerna Mikaela och Moa Krestesen.
En bok är, trots alla digitala innovationer, oöverträffad när det kommer till tillgänglighet och enkelhet. Dessutom saknar den batterier.
Logotyp för tryck och prägling samt en hemsida med fokus på stora produktbilder paketerar Annova H&B.
Om man kommer över en bit genomfärgad svart råkartong är det svårt att motstå impulsen att blindprägla den. Så det blev visitkort av alltihop.
En hemsida utan länkar, menyer eller undersidor rymmer innehållet: musik lämpad för rörlig bild, komponerad av mig.
Linoleumtryck är en av dom enklaste och billigaste grafiska teknikerna. Med lite tålamod, en vass kniv och en färgroller kan man åstadkomma storverk.
Det är inte givet att ord är det bästa sättet att förmedla information. Ibland fungerar bilder bättre, i synnerhet om dom bilderna tillhör familjen piktogram.
Lite förenklat är det hantverket att ge information en ändamålsenlig visuell form som kommunicerar ett avsett budskap på avsett sätt.
Varje profession har sina myter, och grafisk design är inget undantag. En av de mest seglivade är att seriftypsnitt är enklare att läsa i löpande text. Vilket är nonsens.
Retinaskärmar och OLED-teknik och E-bläck. Fint och bra och superduper. Men man har inte levt innan man blindpräglat ett läderband med blytyper.
Hur ser en knapp ut, vad händer när jag trycker på den, och hur platt kan den bli innan jag slutar att förstå att det är en knapp?
Jag heter Andreas Norberg och arbetar som frilansande grafisk designer med Umeå som bas och Sverige som fält.
Jag erbjuder visuell utformning och teknisk produktion av responsiva hemsidor, logotyper, visuella identiteter, annonser, kataloger, produktblad, förpackningar mm. Min målsättningen är alltid att göra enkel, rak och fungerande form i enlighet med uppdragsgivarens vision och behov.
Jag är tillgänglig för frilansuppdrag och intressanta samarbeten, så du är välkommen att höra av dig.
Andreas Norberg Design
hello@andreasnorberg.net
070-551 87 11
Dragongatan 14
903 22 Umeå