Hieronder zal ik een aantal belangrijke punten behandelen waar je rekening mee kunt houden als je een website gaat optimaliseren voor touch interacties en tablet devices.

1. De vinger is de nieuwe muis

Vingers zijn eenmaal groter, ronder en minder precies dan een muis. Er is dus meer witruimte nodig rondom een hyperlink. Gebruik bijvoorbeeld liever een button of button-achtige hyperlink in plaats van een tekst hyperlink.

Het nieuwe ontwerp van Google speelt hier heel goed op in. Er is veel witruimte en de hyperlinks zijn zichtbaar ontworpen voor de vinger.

2. Het vasthouden van de tablet met twee handen

Er zijn allerlei manieren hoe je een tablet kunt vasthouden. Apple heeft met hetnieuwe iOS5 besturingssysteem slim ingespeeld op de behoefte van de gebruikers die de tablet met twee handen vasthouden. Het toetsenbord kan namelijk in twee delen worden gesplitst, waardoor de gebruiker met twee vingers (sneller) kan typen.

Ook heeft KLM recentelijk haar website volledig geoptimaliseerd voor tablet devices. Op de volledige website van KLM staan de actiegerichte tabbladen horizontaal gepositioneerd en op de tablet worden deze links verticaal gepositioneerd.De ontwerpers hebben hoogstwaarschijnlijk nagedacht over hoe gebruikers de tablet vasthouden. Er zijn helaas hier nog weinig onderzoeken naar gedaan. Maar het is zeker een goed punt om er over na te denken waar je de navigatie positioneert.

3. Geen hover (mouse-over) interacties

De meeste tablets devices ondersteunen geen hover interacties. Dit is een belangrijk usability punt voor touch interacties en kunnen vooral problemen geven bij (mega) dropdown menu’s.

Je kunt niet met je vinger overheen zweven en verwachten dat er een menulijst uitklapt zoals je dat met de muis kunt doen. Gebruikers moeten daadwerkelijk het menu-item aanraken voordat een menulijst uitklapt. Echter, hoe gebruikers dit ongedaan kunnen maken is vaak een lastige vraag. Op enkele website kan men de menulijst weer inklappen door op hetzelfde menu-item te klikken en enkele websites leiden je naar een overzichtspagina. Op aegon.nl wordt de mega dropdown menu zelfs niet getoond.

CBC heeft dit probleem heel goed opgelost door een kruisje in de mega dropdown menu aan te bieden. Bovendien wordt de uitgeklapte menulijst niet over de content geplaatst, maar de menulijst drukt de content omlaag zodat de pagina en het menu te allen tijde goed zichtbaar blijft.

4. Toetsenbord weergave instellen

Ken je het probleem dat je telkens het toetsenbord moet switchen om een “@” of “_” teken te selecteren? Merendeels van de tablets beschikken over verschillende toetsenbord weergaves. Als ontwerper of developer kun je deze slimmigheidjes toepassen om de invoer van formuliervelden gebruiksvriendelijker te maken. Op deze manier kan de gebruiker in één keer zijn e-mailadres of telefoonnummer invoeren, zonder te moeten switchen van toetsenbord. Uiteraard is het switchen van toetsenbord niet compleet te vermijden.

5.Gebruik touch interacties

Swipen is een vingerbeweging die we inmiddels hebben omarmd. Op camera’s, telefoons, tablets is het niet meer weg te denken. Maar waarom ook niet toepassen voor websites? Op m.funda.nl kun je middels swipen door het fotoalbum bladeren. En zou het dan niet fijn zijn als je de afbeelding kunt inzoomen door twee vingers uit elkaar te trekken? De technieken zijn er al en daar moeten we vooral gebruik van maken.

6. Geen flash

Hoewel er wel veel tablets zijn die flash ondersteunen, is Apple nog steeds de koploper volgens een benchmark onderzoek in Nederland van Mobilemetrics. Houd dus rekening mee dat Flash niet op iPad’s wordt ondersteund.Het omzetten van Flash naar HTML5 is een mogelijke alternatief. HTML5 wordt namelijk wel door iPad ondersteund.

7. De ideale breedte: 960 pixels

Doordat er verschillende devices met uiteenlopende schermgroottes zijn, is het van belang om je website zo goed mogelijk hierop te ontwerpen. Het vaststellen van de breedte van de website is hierbij een cruciaal punt en telt zwaarder mee dan de lengte van de pagina. Het 960 grid system is een vaak gebruikte afmeting om websites te ontwerpen. Dit grid biedt links en rechts genoeg marge om een ontwerp passend te maken voor tablet devices. Bovendien is het ook zeer geschikt voor desktop computers.

Tot slot

Kijk en leer hoe bedrijven als Google en Facebook continue bezig zijn met het optimaliseren van hun webdiensten. Google heeft recentelijk de nieuwe look van Gmail.com gelanceerd en Facebook heeft zelfs een eigen touch.facebook.com omgeving ingericht. Het is zeker de moeite waard om hier even rond te kijken.

Daarnaast is het tablet-friendly maken van websites een steeds belangrijker wordend uitgangspunt bij het ontwerpen van een website. Let vooral op dat de website overzichtelijk, helder en eenvoudig is. Samen met de tips en voorbeelden hierboven zal je een heel eind komen.