Wenn es um die Positionierung von Hotspot-Symbolen geht, gibt es unserer Meinung nach drei einfache Regeln, die sicherstellen, dass deine Hotspot-Symbole immer auf eine logische Art und Weise positioniert werden, die das Benutzererlebnis verbessert.
1. Setze deine Hotspot-Symbole an das produkt nicht auf das Produkt
Es ist wichtig, dass das Hotspot-Symbol und der dazugehörige Maus-Hover-Text an einer logischen Stelle platziert werden, ohne wichtige Details des Produkts zu verdecken. Wenn du das Symbol in der Mitte des Produkts platzierst, wird die Aufmerksamkeit vom Bild abgelenkt.
Beispiel für die richtige bzw. falsche Platzierung von Symbolen:
Ein weiterer Fehler, der die Benutzer oft verwirrt, sind schwebende Symbole. Diese Symbole sind von dem Produkt, zu dem sie gehören, losgelöst, so dass es so aussieht, als würden sie nur auf der Seite schweben.
Beispiel für ein schwebendes Symbol. Kannst du erraten, zu welchem Produkt dieses Symbol gehört?
2. Genügend Platz schaffen
Es ist auch wichtig, dass sich die Symbole nicht berühren oder übereinander gestapelt sind. Du erreichst das, indem du Platz zwischen den Symbolen schaffst, um Verwechslungen zu vermeiden und zu verdeutlichen, welches Symbol zu welchem Produkt gehört.
Beispiel für Icons, die nicht genügend Abstand zueinander haben:
Wie du im Beispiel oben sehen kannst, ist nicht sofort klar, welches Symbol zu welchem Produkt gehört. Dies ist viel klarer:
Beispiel für Symbole mit ausreichendem Abstand:
3. Sei konsequent
Die vielleicht wichtigste Regel für die Positionierung deiner Hotspot-Symbole ist Konsistenz. Es ist die Grundlage für eine gute Benutzererfahrung und hilft den Käufern, schnell zu erkennen, welches Produkt zu dem Symbol gehört.
Konsistente Platzierung der Symbole:
Hier ein Beispiel, wie man es nicht machen sollte:
Inkonsistente Platzierung der Symbole: