Als het gaat om het positioneren van pictogrammen, geloven we dat er drie eenvoudige regels zijn om ervoor te zorgen dat je pictogrammen altijd op een logische manier worden geplaatst die de gebruikerservaring verbetert.
1. Raak de rand van een product aan, maar bedek het niet
Het is belangrijk ervoor te zorgen dat het hotspotpictogram en de mouse-overtekst ervan op een logische plek worden geplaatst zonder belangrijke details van het product te blokkeren of te bedekken. Als je het pictogram in het midden van het product plaatst, leidt dit de aandacht af van de afbeelding. Probeer het pictogram daarom waar mogelijk aan de rand van het product te plaatsen.
Voorbeeld van respectievelijk correcte en incorrecte plaatsing van pictogrammen:
Een andere fout die gebruikers vaak in verwarring brengt, zijn zwevende pictogrammen. Deze pictogrammen zijn losgekoppeld van het product waartoe ze behoren, waardoor het lijkt alsof ze gewoon op de pagina zweven.
Voorbeeld van een zwevend pictogram. Kun je raden bij welk product dit pictogram hoort?
2. Creëer voldoende ruimte
Het is ook belangrijk ervoor te zorgen dat pictogrammen elkaar niet raken of op elkaar gestapeld zijn. Je kunt dit doen door ruimte tussen pictogrammen te creëren om verwarring te voorkomen en duidelijk te maken welk pictogram bij welk product hoort.
Voorbeeld van pictogrammen waartussen niet genoeg ruimte is:
Zoals je in het bovenstaande voorbeeld kunt zien, is het niet meteen duidelijk welk pictogram bij welk product hoort. Dit is veel duidelijker:
Voorbeeld van pictogrammen met genoeg ruimte ertussen:
3. Wees consistent
Misschien is consistentie de belangrijkste regel voor het positioneren van je pictogrammen. Het vormt de basis voor een goede gebruikerservaring en helpt shoppers ook snel te bepalen welk product bij het pictogram hoort.
Consistente plaatsing van pictogrammen:
Zo moet je het niet doen:
Inconsistente plaatsing van pictogrammen: