Google heeft begin dit jaar een nieuwe richting gegeven aan haar user interfaces: Material design. Ik moet zeggen dat het er mooi uitziet en vind het een enorme stap voorwaarts. Google laat hiermee zien dat design complexer is dan alleen maar statistiek toepassen.

Er is één element dat mij blijft storen: de 'Floating Action Button'. En ik ben niet de enige. Genoeg stof om over na te denken. Niet als doel om de designers van Google Material af te kraken, maar om aandacht te vragen voor een interessant probleem.

Er zijn verschillende vormen van de floating action button. Met de floating action button doel ik op de knop die rechtsonder in beeld over de content zweeft. Floating action buttons zie je steeds vaker in verschillende vormen verschijnen op websites, vaak om terug naar boven te scrollen.

Als je de floating button als designer bekijkt, denk je op het eerste gezicht dat het een geweldige oplossing is. Meer daarover strakjes. Echter als je het gaat gebruiken, ga je je er aan ergeren, en vreemd genoeg, niet in alle situaties.

Eén van de theorieën geeft aan dat de hoeveelheid ruimte die het inneemt, de ergernis veroorzaakt. Meer ruimte voor de knop betekent minder ruimte voor content, onze focus. Die knop zit in de weg. Waarom zouden we de knop in bijvoorbeeld Google Maps dan weer niet vervelend vinden? Dat komt doordat we, volgens deze theorie, ons dan op het centrum focussen.

Echter, het argument over de ruimte is zwak. De floating button neemt juist heel weinig schermruimte in en verbergt ook nog eens onbelangrijke content. Belangrijke content scrollen we onbewust naar boven op het scherm waar we het gemakkelijk kunnen lezen en het de minste kans heeft om achter een vinger te verdwijnen. De knop staat rechts onderin. Dat is ook wat ik er in eerste instantie zo elegant aan vond.

Groeperen van objecten

Mijn hypothese is dat de oorzaak van het probleem ligt in hoe onze hersenen visuele data interpreteren en groeperen: het vormen van objecten.

Onze hersenen verwerken continue beelden en we verdelen die onder in objecten die we kunnen begrijpen. Zo vinden we objecten, die makkelijk te interpreteren zijn, mooier. Hierbij laat ik factoren zoals emotionele associaties, bijvoorbeeld jeugdherinneringen, buiten beschouwing. Een foto of schilderij mag nooit rommelig zijn. We vinden eenvoud, rustige lijnen die onze ogen gemakkelijk kunnen volgen, mooi en duidelijk. Volgens mij is dit de sleutel om te begrijpen waarom de knop vervelend is: de knop oogt rommelig omdat het ontwerp ervan maakt dat we de content en knop niet gemakkelijk als verschillende objecten kunnen interpreteren. Dus een extra cognitieve last.

In de echte wereld, buiten, zijn overlappende elementen makkelijk te groeperen omdat we met onze ogen focussen. Objecten ervoor of erachter maken we zo onscherp. Het object in onze focus is dan gemakkelijk te ’verwerken’. Niet voor niks vinden we foto’s met een kleine DOF (Depth of Field) zo mooi. Er is geen ‘ruis’. Het lastige aan een plat beeldscherm is dat dit geen optie is. De overlappende elementen blijven altijd even scherp en een extra grote box-shadow lost dat niet op.

Maar waarom is de knop in enkele gevallen dan weer niet vervelend? Zoals bij Google Maps? Volgens mij komt dat door onze manier van kijken naar de content van de kaart. De kaart als geheel is opgebouwd uit objecten die over elkaar liggen en de floating knop heeft datzelfde karakter. De verschillende objecten zijn onderling vergelijkbaar over het canvas gelegd. Je hersenen hoeven steeds maar op één en dezelfde manier objecten van elkaar te onderscheiden.

Iconen versus labels

Een ander belangrijk punt, wat deze knop minder goed maakt, is het label. Of eigenlijk, het missen ervan. Google heeft ervoor gekozen om enkel een icoon te plaatsen in de floating knop. Iconen verbeelden nooit zo goed de functionaliteit zoals een label het kan beschrijven, met als gevolg dat gebruikers er minder gebruik van maken. Bij geïnstalleerde applicaties is dat een minder groot probleem dan bij websites. Een applicatie is al gedownload en je kunt de gebruiker in bepaalde maten forceren en leren de applicatie te gebruiken. Op het web heb je die luxe zelden. En gezien Google Material ook voor het web is bedoeld, vind ik het niet gebruiken van labels een onverstandige zet. Let daar dus als ontwerper op.

Hoe dan?

Een stap moet zijn om een label te gebruiken om de functionaliteit te beschrijven. De vraag blijft of er een alternatief is dat dicht in de buurt ligt van het originele concept. Je kunt de knop half transparant maken om de content in de achtergrond niet te onderbreken, je kunt de knop vastmaken aan de zijkant waardoor het element duidelijker losstaat van de content en visueel minder conflicteert. Dat zou er zo uit kunnen zien: