Mobiele ontwikkelingen gaan razendsnel. Het is daarom belangrijk uw webshop met enige regelmaat onder de loep te nemen om te kijken hoe u met deze ontwikkelingen mee kunt gaan en er optimaal van kunt profiteren.
Een belangrijk aandachtspunt, vooral in fashion, is het optimaliseren van de zoom functionaliteit.
Tekst: Annemieke Raven
De zoom-functionaliteit blijkt voor veel webshops op een tablet slecht of soms zelfs helemaal niet te werken, vaak doordat deze:
- reageert op basis van een mouse-over. Dit is niet mogelijk op een tablet, hierdoor werkt vaak de hele zoom-functionaliteit niet of heel beperkt.
- werkt op basis van Flash. De iPad en veel Android tablets ondersteunen dit niet. Dit zorgt ervoor dat zoom-functionaliteit helemaal niet werkt.
- opent in een lightbox (ook wel pop-up genoemd) die vervolgens niet meer af te sluiten is.
- niet geoptimaliseerd is voor het gebruik op een tablet, waardoor de zoom-functionaliteit niet goed werkt of onverwacht gedrag vertoont.
Bovendien heb je op een tablet een andere interactie dan op een desktop. Zo wordt er vaak intuïtief gebruik gemaakt van ‘gestures’ die ook bij het in-en uitzoomen op een tablet een belangrijke rol spelen:
Afbeelding 1: bewegingen op een touchscreen
Er zijn verschillende mogelijkheden om de zoom-functionaliteit voor de tablet te optimaliseren. Deze zullen in dit artikel worden besproken aan de hand van voorbeelden uit de praktijk.
1. Multi-platform zoom-functionaliteit
Een goed voorbeeld van een optimalisatieslag is het aanbieden van een zogenoemde multi-platform zoom-functionaliteit. Dit is een zoom-functionaliteit die met alle platforms (zowel desktop als tablet) compatible is en op alle platforms even goed werkt. Dit zorgt voor een consistente user interface, die herkenbaar en gebruiksvriendelijk is voor de consument.
PME-legend
Een mooi voorbeeld van een webshop die de multi-platform functionaliteit heeft toegepast is PME legend. De weergave van de zoom-functionaliteit is op beide platforms precies dezelfde.
Op de desktop kan de gebruiker in-en uitzoomen met behulp van de zoom-buttons of inzoomen door op de afbeelding te klikken. Vervolgens kan hij de productafbeelding verplaatsen met de muis.
Op de tablet kan de gebruiker ook in-en uitzoomen met behulp van de in-en uitzoom buttons of inzoomen door op de productafbeelding te tappen (zie afbeelding 1). Vervolgens kan hij/zij de vergrote afbeelding met drag (and drop) verplaatsen. Uitzoomen is iets lastiger, dit kan enkel met de buttons.
Zowel op een tablet als op de desktop is het daarnaast mogelijk via de link ‘view full screen’ een vergrote afbeelding van het product in een lightbox te bekijken (die ook weer eenvoudig is af te sluiten). Op beide platforms worden hier verder geen zoomopties aangeboden.
Protest
Een ander goed voorbeeld is de webshop van Protest. Dat merk zet de multi-platform zoom-functionaliteit in principe hetzelfde in als PME-legend. Ook hier ziet de zoom-functionaliteit op beide platforms er hetzelfde uit en is de werking in grote lijnen dezelfde.
Op de tablet biedt Protest als extra feature dat de gebruiker, naast het gebruik van de buttons en ‘tappen’ ook de mogelijkheid heeft in- en uit te zoomen via de gestures ‘pinch’ en ‘spread’ (zie afbeelding 1). Dit maakt het in-en uitzoomen op de tablet nog makkelijker en intuïtiever.
Net als bij PME-legend is het op beide platforms mogelijk een vergrote afbeelding van de productafbeelding in een full screen view bekijken. Deze vergrote afbeelding wordt in een schermvullende lightbox geopend.
Bijzonder aan deze full screen view is dat de gebruiker ook hier zowel op de
desktop als op de tablet in- en uit kan zoomen, met dezelfde middelen als op de productdetailpagina, dus ook met behulp van de gestures. Dit verhoogt de gebruiksvriendelijkheid van de zoom-functie en ook zeker de algehele productbeleving.
Wel is het in deze schermvullende weergave lastig om terug te keren naar de productdetailpagina. Dit kan enkel door op het kleine ‘huis’-icoontje te klikken. Dat is zowel op de desktop als op de tablet lastig, omdat de icoontjes erg klein zijn en dicht op elkaar staan.
-> Vergrote afbeelding openen in een lightbox
Een ander goed voorbeeld van een optimalisatieslag, die wellicht eenvoudiger te implementeren is, is het enkel aanbieden van de mogelijkheid een vergrote versie van de productafbeelding te openen in een lightbox. Al dan niet aangevuld met een zoom-functionaliteit.
Bol.com
Een goed voorbeeld van een webshop die deze oplossing toepast is Bol.com. De webwinkel biedt geen zoom-functionaliteit op de productafbeelding zelf, maar kiest ervoor om zowel op desktop als op de tablet alleen bij het klikken (of ‘tappen’) op de productafbeelding een vergrote afbeelding in een lightbox te tonen.
Daarbij is het op beide platforms mogelijk om alle productafbeeldingen te bekijken, door op de pijltjes rechts en links te klikken. Verder zijn er geen extra in-en uitzooom mogelijkheden.
-> Voor elk platform een apart geoptimaliseerde zoom-functionaliteit
Een derde oplossing is om een platformspecifieke en geoptimaliseerde zoom-functionaliteit aan te bieden.
Een mooi voorbeeld biedt H&M. Het bedrijf heeft zelfs een aparte tablet-site ontwikkeld met een eigen zoom-functionaliteit.
Op de desktop kan de gebruiker in-en uitzoomen via de zoom button of door op de afbeelding te klikken.
Op de tablet kan de gebruiker enkel intuïtief in- en uit zoomen door middel van ‘pinch’ en ‘spread’
Daarnaast kan de gebruiker de ingezoomde productafbeelding op de desktop verplaatsen door middel van de muis. Op de tablet kan dit ook, hier door middel van ‘drag (and drop)’.
H&M biedt zowel op de desktop als op de tablet de optie om een vergrote afbeelding in een aparte lightbox te bekijken. De desktop laat dan alleen een vergrote afbeelding zien in een lightbox. Verder kan er niet in- of uitgezoomd worden.
De tablet biedt daarentegen extra features ten opzichte van alle andere oplossingen. Zo worden aan de rechterkant alle beschikbare productafbeeldingen als thumbnails getoond. Hierdoor kan de gebruiker direct zien welke afbeeldingen er beschikbaar zijn en ze direct selecteren.
Daarnaast krijgt de gebruiker aan de linkerkant ook alle beschikbare kleurvarianten te zien en kan hij/zij deze direct selecteren. Dit maakt het voor de klant heel makkelijk en aantrekkelijk om alle verschillende kleuren en afbeeldingen te bekijken. Dit verhoogt zeker de productbeleving.
Het is echter niet mogelijk in de lightbox verder in- en uit te zoomen.
V&D
V&D heeft geen aparte tablet-site, maar het warenhuis past wel de zoom-functionaliteit aan per platform.
Op de desktop site wordt een standaard zoom toegepast, waarbij de gebruiker kan inzoomen door met zijn muis over de productafbeelding heen te gaan. Aan de rechterkant verschijnt dan vervolgens het ingezoomde deel van de productafbeelding.
Op de tablet werkt dit niet, dus hier biedt V&D een andere zoom optie. Hier klikt de gebruiker op de productafbeelding, waarna de vergrote afbeelding in een schermvullende lightbox wordt geopend.
Conclusie
De opkomst van tablets biedt nieuwe uitdagingen en mogelijkheden om producten (nog) beter te kunnen presenteren. Aan de hand van verschillende voorbeelden heb ik hierboven aangegeven hoe de zoom-functionaliteit hier een rol in kan spelen; door middel van het toepassen van een multi-platform zoom-functionaliteit, het openen van vergrote productafbeeldingen in een lightbox of het zorgen voor een zoom-functionaliteit die per platform anders ingericht en geoptimaliseerd is. Alle drie de oplossingen bieden een gebruiksvriendelijke en aantrekkelijke zoom-functionaliteit voor gebruik op zowel de tablet als de desktop.
Bovendien verhogen de genoemde oplossingen ook de productbeleving, met name op een platform als een tablet. Helemaal wanneer er bij de vergroting ook mogelijkheden geboden worden om andere productafbeeldingen en kleuren te selecteren (zoals bij H&M) of wanneer de bediening goed is afgestemd op het platform en de afbeelding door middel van gestures in-en uitgezoomd en verplaatst kan worden, zelfs in de lightbox (zoals bijvoorbeeld bij Protest en V&D).
Elke oplossing heeft zijn eigen charme. Op basis van alle voorbeelden zou ik pleiten voor een zoom-functionaliteit die voor elk platform anders ingericht en geoptimaliseerd is, zodat je niet direct een aparte site hoeft te ontwikkelen maar alleen de zoom-functionaliteit aan hoeft te passen.
Voor de desktop is er al veel goede zoom functionaliteit beschikbaar, onder andere degene beschreven in dit artikel, en heb ik niet een specifieke voorkeur.
Voor de tablet zou ik gaan voor een mix van de voorbeelden die ik laten zien heb.
* Ten eerste zou ik kiezen voor een productafbeelding op de productdetailpagina waar je door middel van ‘pinch’ en ‘spread’ in- en uit kunt zoomen en de ingezoomde afbeelding door middel van ‘drag (and drop)’ kunt verplaatsen.
* Ten tweede zou ik het mogelijk maken een vergrote afbeelding te openen in een lightbox. Hier zou ik wederom dezelfde gestures als eerder genoemd mogelijk maken om in- en uit te zoomen en verplaatsen mogelijk te maken.
* Als laatste zou ik alle productafbeeldingen en alle beschikbare kleuren als thumbnails tonen, zodat je direct alle variaties en afbeeldingen van het product kunt bekijken.
Volgens mij bereik je op die manier een optimale productbeleving met een intuïtieve gebruiksvriendelijke bediening.
Mocht je nog andere goede voorbeelden hebben van een goed werkende zoom-functionaliteit op de tablet, deel deze dan graag!
Annemieke Raven is User Experience Designer en Visual Designer bij Eperium. Dit artikel verscheen eerder op het weblog van het bureau.
Er is op dit moment 0 keer gereageerd op:
Tips om de zoom-functionaliteit van tablets te optimaliseren
Je kunt niet meer reageren op dit artikel.