Hiërarchie in knoppen

Als klein kind was het enorm spannend om aan te bellen en daarna zo hard als je kon weg te rennen. Midden in een film vindt de avonturier een verborgen knop en drukt die in. Langzaam opent zich een mysterieuze doorgang binnen in de piramide. Knoppen hebben een magische kracht.

Tussen knoppen bestaat een onderlinge hiërarchie, die de ontwerper bepaalt. Hij creëert een verwachting en bepaalt daarom hoe belangrijk die functie of knop is. In deze blog besteed ik aandacht aan een aantal belangrijke variabelen van knoppen zoals kleur, context, plaatsing, effecten, grootte en wel of geen icoon. Allemaal ken­merken die knoppen anders maken en een verschillend signaal aan de gebruiker afgeven.

Warme kleuren komen op je af

Elke kleur heeft een betekenis en kan een bepaald gevoel versterken. De kleur van een knop heeft zelfs effect op het aantal bezoekers dat erop klikt. In een onderzoek hiernaar vergeleek Joshua Porter een groene met een rode knop in dezelfde website, een zogenaamde A/B test. Rood betekent aan de ene kant gevaar, bloed en stoppen, en aan de andere kant liefde, passie en warmte. Groen betekent juist rust, natuur, vrede en toegang.

Maar liefst 21% meer bezoekers klikte op de rode knop. Een groot verschil en boeiend resultaat, maar Joshua Porter geeft zelf geen verklaring voor het opvallende verschil. Hij adviseert dat je zelf het gebruik van je knoppen moet evalueren en blijven monitoren.

As always, we cannot generalize these results to all situations. The most we can say is that they hold for the conditions in which they occurred: in this page design, on this site, with the audience that viewed it. It could be that Performable’s audience happens to like red -or dislike green- or that red happens to contrast nicely with the green in our color scheme. There are many possible reasons that could explain why this particular test result happened the way it did.

Meer, breder en langduriger onderzoek is nodig om een conclusie te kunnen trekken. Een tegenstander van rood voor knoppen is Luke Wroblewski, schrijver van Filling in the Blanks. Hij is bang dat bezoekers rood te sterk associëren met de negatieve betekenis ervan, namelijk gevaar en fouten.

Personally, I’m always hesitant to use red to label any action, due to that color’s close association with errors. Red is used so often to indicate something bad has happened on a form—as we’ll see later in the book—that I’m quite wary of using it to represent either secondary or primary actions.

Luke Wroblewski, 2008, Web Form Design: Filling in the Blanks, p147.

In de vliegtuigindustrie is rood zelfs voorbehouden aan slechts enkel extreem belangrijke knoppen die te maken hebben met gevaarlijke situaties.

Een lastig dilemma, maar misschien is rood niet eens nodig om een knop vaker te laten gebruiken. Ik verwacht namelijk dat een belangrijk aspect van de hogere conversie is, dat rood een warme kleur is en gevoelsmatig op je afkomt. Objecten in de buitenlucht en in de verte krijgen een blauwige waas over zich en ervaart men als ‘kouder’ van kleur. Zo bezien, zouden andere warme kleuren als oranje en geel ook goed moeten werken voor belangrijke (call to action) knoppen.

Koude versus warme kleuren. Rood en geel komen gevoelsmatig naar voren.

Voor knoppen, lager in de hiërarchie en minder belangrijk, kan je de kleur­verzadiging verlagen of de kleur en lichtheid van de omgeving laten overnemen of in over laten gaan waardoor de knop minder opvalt.

Gebruik context voor de vormgeving

Knoppen in formulieren hebben als standaard de kleur en vormgeving van het bijbehorende operating systeem (e.g. Windows, Mac OS, Ubuntu). Moeten wij als ontwerpers überhaupt hier zelf kleur en vorm aan willen geven? Een aan­tal ontwerpers zijn voorstander ervan om dat zo te houden. Ze vinden dat door de vormgeving van een operating systeem aan te houden, de werking voor bezoekers herkenbaar en betrouwbaar is.

Maar ze vergeten dat je hierdoor de controle over de hiërarchie kwijt raakt. Een knop die niet in jouw vormgeving of stijl past kan zo ongewenst te veel of juist te weinig opvallen voor de functie, die de knop vertegenwoordigt. Een knop moet als een puzzelstukje, precies op de context aansluiten. Daarnaast hebben de huidige gebruikers echt wel genoeg ervaring met een breed scala aan knoppen, zowel online als offline in het dagelijks leven en kan herkenning eigenlijk geen probleem meer zijn. Mijn advies is: Geef knoppen, ook in formulieren, zelf vorm.

Oogbewegingen bepalen de juiste locatie

Om informatie van een website in je op te nemen, scan je met je ogen de content. Ook zonder een uitgebreide eye-tracking kan je redelijk inschatten hoe de kijkbeweging van gebruikers zal zijn. Zorg er altijd voor dat de ogen van gebruikers de kortste weg kunnen afleggen en minimaal van richting hoeven te veranderen.

People’s fixations were longest when using Option F. And, as a whole, they were around six seconds slower [...], which is a considerable gap when you consider that the placement of the buttons was the only thing that differed between the two. We believe that this was because they expected the two buttons to be left-aligned, i.e. to appear directly below the last input field on the page, and upon finding that this wasn’t the case, they had to search around to find them.

Luke Wroblewski, 2008, Web Form Design: Filling in the Blanks, p148.

Belangrijke knoppen moeten dus in het verlengde, in de baan van de eerdere oog­bewegingen liggen. Dat klinkt logisch, toch zie ik dat het te vaak fout gaat bij grote websites en in dure software.

Doseer effecten

Je verhoogt de affordance door effecten als gradiënten, highlights, schaduwen en letterpress aan een knop toe te voegen. Het ziet er meer als een knop uit, waardoor bezoekers sneller geneigd zijn erop te klikken. Goed voor belangrijke knoppen.

Het kan echter verstandig zijn om juist weinig effecten toe te voegen aan knoppen die niet moeten opvallen. Knoppen die niet moeten opvallen zijn knoppen die gevaarlijke of secundaire acties uitvoeren, zoals een knop die een account verwijdert of ervoor zorgt dat je een stap terug doet in een procedure. Dit soort knoppen geef je beter weer als simpele onderlijnde tekst, als een link.

Door effecten te doseren speel je in op de hiërarchie in knoppen. Effecten die je kan gebruiken zijn gradiënten, highlights, schaduwen en letterpress.

44pt hoog voor vingertoppen

Steeds meer mensen surfen op het web niet meer met een muis maar met een aanraakscherm. Apple’s iPad is populair maar ook andere bedrijven komen met aanraakschermen. Het oppervlakte van een vingertop is een stuk groter dan het pijltje van de muiscursor. Apple gebruikt op de iPad, als standaard, knoppen van 44 punten (7mm) hoog, en dat is inderdaad een prima maat. Ook met de muis merk je dat het fijner is om op grote knoppen te klikken: sneller en minder foutgevoelig.

De iPad met z’n grote knoppen en aanraakscherm zorgt er zelfs voor dat sumoworstelaars en ook andere zwaarlijvige personen overal het Internet op kunnen. Voor hen was het hiervoor niet mogelijk vanwege hun dikke vingers en de te kleine knoppen.

A digital novice himself, the 62-year-old former wrestler admitted that while he can read incoming text messages on his mobile phone, he doesn’t know how to write replies and does not usually use a computer. But “time flies if you play with this”, he said of the Apple gadget. The iPad was chosen because the sumo association believed the device was big enough to cater to wrestler’s fat fingers, unlike the minuscule keys on cellphones, media reports said.

Sommige call-to-action knoppen zijn nog veel groter en omsluiten naast een label ook uitleg met iconen. Deze ‘giant’ knoppen zeggen tegen de gebruiker dat hij of zij speciaal voor deze functie naar de pagina is gekomen.

Downloadknop voor Firefox 3.

Mozilla heeft dit zo toegepast bij de download knop van ‘Firefox 3’. De knop zegt luid en duidelijk wat de gebruiker kan verwachten. Persoonlijk vind ik de knop onaantrekkelijk, te groot en rommelig met te veel stijlen door elkaar. Een ongewenst effect daardoor zou kunnen zijn dat een bezoeker de knop niet als zodanig herkent en denkt dat alleen het rondje met de pijl de download-knop is.

Iconen altijd met labels

Ook in de knoppen zelf kun je iconen verwerken, waardoor ze nog meer opvallen. In tegenstelling tot wat mensen denken, namelijk dat iconen ervoor zorgen dat nieuwe gebruikers sneller en beter begrijpen wat een knop zal uitvoeren, is het tegengestelde waar. Iconen zijn vooral voor ervaren gebruikers handig, omdat zij de iconen hebben leren kennen en zo sneller functies terug vinden in de interface.

In every study that considered the question, icons were demonstrated to be more difficult to understand than were labels, especially at first viewing, which contradicts one of the most frequently cited reasons for using icons, namely, comprehensibility for beginners.

Jef Raskin, 2004, The Humane Interface, p.170.

Daarnaast is begrip voor iconen afhankelijk van cultuur en achtergrond. Gebruik daarom altijd labels, ook bij iconen om misleiding te voorkomen.

Overzicht

Tenslotte geef ik een overzicht met voorbeelden voor iedere variabel. Het verschil in één of twee variabelen is vaak genoeg om knoppen van elkaar te laten onderscheiden.

Variabel Onbelangrijk Neutraal Belangrijk
Kleur transparant of grijsgrijs, groen, blauw, paarsgeel of oranje
Context n.v.t.n.v.t.n.v.t.
Locatie ver van locus (locatie van focus)dichtbij locus of in baan van oogbewegingin baan van oogbeweging
Grootte als link, de lettergrootte of 30 pixels hoog40 pixels hoog42 pixels hoog
Effecten Als link of plat vlakMet gradiënt, letterpress en geen of subtiele highlightsMet gradiënt, letterpress, highlights en schaduwen
Iconen of Illustraties geengeenwel
Tabel 1: Overzicht van variabelen voor knoppen. Keuzen afhankelijk van context.
Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.