Wij gebruiken websites steeds vaker op onze tablets en telefoons. Het is de verwachting dat we dit jaar (2015) websites vaker gebruiken en bekijken op onze tablet en telefoon dan op een computer.
We bedienen websites op deze apparaten met onze vinger en niet met een muis. Dat maakt nogal wat uit voor hoe een website gemaakt is, bijvoorbeeld voor de grootte van buttons en links.
Je tablet en telefoon bedien je door aanraking (met je vingers dus). Dit zijn de zgn. touch devices. Uit onderzoek blijkt zelfs dat in 90% van de gevallen je je telefoon alleen met je duim bedient (bron: UX Matters).
Je vinger- en duimtop zijn aanzienlijk groter dan het pijltje van de muis waarmee je een website bedient op een computer. Dat betekent dat buttons en links voldoende groot moeten zijn.
Ik denk dat velen van ons wel de ervaring kennen van links die erg dicht op elkaar staan waardoor je de verkeerde selecteert (zie ook voorbeeld hieronder). Dit is frusterend en kost onnodig veel tijd. Een goede website is ‘touch friendly’ en houdt rekening met hoe wij tegenwoordig websites gebruiken.
Touch tab size
Hoe doe je dat dan? Bedrijven als Google, Microsoft en Nokia hebben uitgezocht wat de minimale afmetingen moeten zijn van buttons, links etc. op touch devices. Zij noemen dit de ‘Touch tab size’:
- minimaal: 7 x 7 mm *
- optimaal: 9 x 9 mm
- tussenruimte: 2 mm
* Deze richtlijn wordt opgegeven in mm, terwijl schermen werken met pixels. Dat maakt het wat lastiger, want je kunt niet zomaar pixels omzetten naar mm.
Voorbeeld
Een voorbeeld uit de praktijk. De website van ABN Amro zoals weergegeven op mobiel (zie afbeelding). Een redelijk standaard gebeuren, met info, een button en een rijtje links. Als je de Touch tab size richtlijnen er naast houdt, dan zie je dat het vooral bij de links misgaat. De kans dat je daar onbedoeld een verkeerde link selecteert is vrij groot.
Door het toepassen van de Touch tab size richtlijnen is dit probleem redelijk eenvoudig te verhelpen. De oplossing is het vergroten van de tussenruimte. De inhoud en functionaliteit van deze pagina blijft ongewijzigd, maar de gebruiksvriendelijkheid is een stuk verbeterd.
