Jetzt anrufen 0221 775 36 58

Rückruf vereinbaren

5 UX-Tipps, damit sich Ihre Kundschaft auf Ihrer Seite zurechtfindet

28.12.2021, 7m

Es sollte eine Ihrer höchsten Prioritäten sein, Ihrer (potentiellen) Kundschaft den Einkauf mit einer übersichtlichen Navigationsmöglichkeiten auf Ihrer Webseite zu erleichtern.

Ist Ihre Webseite oder Shop schwierig zu navigieren, wird es Besucher*innen schnell frustieren, was dafür sorgt, dass sie eher bei Ihrer Konkurrenz einkauft.

Schließlich wirkt sich das „Zurechtfinden“ auf einer Webseite immens auf die User Experience und das generelle Einkaufserlebnis aus. Gerade deshalb ist die Navigation eines der wichtigsten Elemente im Webdesign.

In diesem Blogartikel befassen wir uns mit einigen grundlegenden Funktionen, die dazu beitragen, dass die Navigation auf Ihrer Webseite erleichtert wird. Ebenso stellen wir Ihnen konkrete Beispiele vor.

BlogTitle-Tips_Navigate_website-w1920h1200

1. Die Navigationsleiste

Die Navigationsleiste sollte das erste Element auf Ihrer Webseite sein, das Sie mit einem kritischen Auge betrachten. Schließlich können Sie ohne eine gute Navigationsleiste nicht erwarten, Ihre Besucher*innen von den angebotenen Produkten und dem Unternehmen, das dahinter steht, zu überzeugen.

Zunächst sollten Sie sicherstellen, dass Sie die richtigen Kategorien für Ihre Navigationsleiste ausgewählt haben.

Gerade als Shopbetreiber*in sollten Sie darauf Acht geben, dass Ihre Produktkategorien richtig aufgeteilt sind und nicht zu viele verschiedene (Unter-)Kategorien auf der ersten Ebene angezeigt werden.

Sinnvoll ist es zudem, dass sich die Navigationsleiste von den umgebenden Elementen auf Ihrer Seite abhebt: Dadurch fällt die Leiste eher auf und es ist für Ihre potentielle Kundschaft deutlich einfacher zu erkennen, wo sie sich befinden. Das ist insbesondere wichtig, wenn Besucher*innen zum Beispiel über Google oder eine Empfehlungsseite auf Ihre Webseite gelangt sind.

Laut einer Studie von KoMarketing nutzt die Hälfte aller Besucher*innen von Online-Shops (rund 50%) das Navigationsmenü, um sich auf der Webseite zu orientieren.

Ein weiterer Punkt, den Sie bei Ihrer Navigationsleiste bedenken sollten, ist die Überlegung die Navigationsleiste „sticky“ zu machen.

Unter einer sogenannten Sticky Navigation versteht man eine Navigationsleiste, die stets am oberen Bildschirmrand eingeblendet wird, unabhängig davon, wie weit User nach unten scrollen. Dadurch wird die Navigation vereinfacht und Kund*innen können leichter zu anderen Seiten auf der Webseite gelangen.

Screenshot_Schuhe.de_navigation bar_example_DE

Beim Online-Shop von Schuhe.de wird die Navigationsleiste konstant oben angezeigt; auch wenn man nach unten scrollt.

Darüber hinaus könnte es eine Überlegung wert sein, Ihrer Navigationsleiste ein sogenanntes „Mega-Menü“ hinzuzufügen.

Sie kennen diesen Stil vielleicht von großen Einzelhändlern wie Ikea oder Amazon. Gerade wenn Ihr Online-Shop über ein großes Produktangebot verfügt oder Produkte aus vielen verschiedenen Produktkategorien anbietet, sind die großen „Mega-Menüs“ besonders praktisch.

Sie helfen Ihrer Kundschaft dabei, sich besser zu orientieren und schneller ein bestimmtes Produkt zu finden.

Screenshot_Adidias_Navigation_bar_example_DE

Der Online-Shop von Adidas verfügt über viele Produktkategorien. Sobald Sie mit der Maus auf eine Hauptkategorie in der Navigation gehen (z.B. „Männer“), klappt darunter das Mega-Menü aus.

BONUS-TIPP: Ihr Firmenlogo befindet sich vermutlich in der oberen linken Ecke Ihrer Webseite. Stellen Sie sicher, dass ein Klick darauf Besucher*innen zurück auf die Homepage bringt. Das ist heutzutage Standard und trägt zu einer intuitiven Navigation bei.

Design-Begriffe

2. Zeigen Sie Breadcrumbs

Der Begriff „Breadcrumbs“ ist Ihnen nicht geläufig? Stellen Sie sich Breadcrumbs einfach als eine Art Spur vor, die hinterlassen wird, damit Ihre potentielle Kundschaft sich daran orientieren kann und auf Ihrer Webseite zurecht findet.

Diese Elemente (letztendlich nichts anderes als Links) helfen Usern nicht nur herauszufinden, wo sie sich gerade befinden, sondern auch dabei, einen Überblick über eine bestimmte Produktkategorie zu erhalten.

Nehmen wir mal an, Sie sind gerade durch eine Werbeanzeige oder über einen Social Media Post auf eine bestimmte Seite gelangt. Obwohl Sie sich anfangs von dem Ihnen gezeigten Produkt angezogen fühlten, würden Sie gerne sehen, welche anderen Produkte es in dieser bestimmten Kategorie noch gibt.

Breadcrumbs helfen also auch dabei, andere Produkte zu finden, die außerhalb einer Produktseite in einem Online-Shop zu finden sind.

Lesetipp: Google Ranking verbessern in 3 Schritten (in 2022)

Breadcrumbs können sich sowohl positiv auf Ihr SEO als auch auf Ihre Werbekampagnen auswirken.

Wenn Nutzer*innen auf anderen Seiten Ihrer Webseite unterwegs sind, verringert das die Wahrscheinlichkeit, dass sie Ihren Shop verlassen, ohne etwas gekauft zu haben (Stichwort: geringere „Bounce Rate“).

Das wiederum signalisiert Google, dass Ihre Anzeige/Produktseite/Ihr Blogartikel beziehungsweise der Link, auf den die Nutzerin oder der Nutzer geklickt hat, relevant und hilfreich ist.

Dies kann zu höheren Rankings für Ihre Keywords und zugleich zu geringeren Kosten für Ihre Werbekampagnen führen.

Screenshot_breadcrumbs_TennisPoint_example_DE

Die Produktübersichtsseiten von Tennis Point verfügen über Breadcrumbs (im blauen Kasten hervorgehoben), sodass Kund*innen sich auch rückwärts durch die Produktkategorien bewegen und die Webseite mithilfe der Breadcrumbs erkunden können.

Lesetipp: Was sind Breadcrumbs und wie können sie Ihrem SEO helfen?

3. Die Suchleiste

Eine Suchleiste kann insbesondere für Online-Shops hilfreich sein, die viele verschiedene Produkte anbieten (ähnlich wie beim Mega-Menü).

Die Suchleiste ist etwa das Online-Pendant zu eine*r Verkäufer*in im lokalen Handel. Schließlich fragen Sie als Kund*in dort eine*n Mitarbeiter*in, wenn Sie ein bestimmtes Produkt nicht sofort finden können.

Wenn Kund*innen auf der Suche nach einem ganz bestimmten Artikel sind und diesen nicht finden können, verlassen sie oft schnell den jeweiligen Online-Shop.

Um das zu verhindern und Ihrer Kundschaft bei der Suche zu helfen, sollten Sie eine Suchleiste in Ihre Webseite integrieren.

Je nach der Art der Produkte, die Sie verkaufen, sollten Sie eine Suchfunktion in Erwägung ziehen, die bei der Eingabe von relevanten Keywords, Inhaltsstoffen, Modellnummer, Produktkategorie usw. Produkte aus Ihrem Online-Shop anzeigen kann. Auf keinem Fall sollte eine Suchanfrage nicht mit „keine Ergebnisse für Ihre Suche gefunden" enden.

Stellen Sie außerdem sicher, dass die Suchleiste oben am Bildschirmrand stets sichtbar ist. Sie können dieses Element genau wie die Navigationsleiste als „sticky“ auf Ihrer Webseite integrieren.

Wenn Sie die Suchfunktion zum Beispiel direkt neben Ihrem Firmenlogo platzieren, wird diese ziemlich schwer zu übersehen und dementsprechend leicht zu finden sein.

Als hilfreiches Tool eignet sich beispielsweise Findify, da es viele nützliche Funktionen wie das Anzeigen von Synonymergebnissen, eine Rechtschreibfehlertoleranz bietet, Autocomplete und vieles mehr anbietet.

Swiftype und Addsearch sind vergleichbare Tools, die Sie nutzen können.

Screenshot_searchbar_Voelkner_example_DE

Die Suchleiste im Voelkner-Online-Shop ist gut sichtbar platziert und ist zudem „sticky“.

4. Konsistenz

Kunde*innen mögen Konsistenz, wenn sie auf einer Webseite unterwegs sind. Jede Seite sollte die gleiche Struktur und Design haben, damit sie den Weg zu einer neuen Seite oder zurück zur vorherigen Seite einfach finden können.

Mit anderen Worten: Das Design und die Struktur Ihres Online-Shops müssen stets einheitlich sein.

Kund*innen wollen nicht nur auf einer Webseite, sondern bestmöglich auch im gesamten Internet Konsistenz vorfinden. Obwohl es natürlich nicht schaden kann, wenn Sie versuchen, mit Ihrer Webseite innovativ zu sein, sollten einige Dinge im Aufbau und Design „standardisiert" werden.

Symbole wie das des Warenkorbs und das Firmenlogo, welches als Link zurück zur Homepage leitet, sehen so gut wie überall gleich aus. Ihr Online-Shop sollte dabei keine Ausnahme sein.

Wenn Besucher*innen Ihrer Webseite erst länger überlegen müssen, wo und wie sie beispielsweise Artikel ihrem Warenkorb hinzufügen können, wird das wahrscheinlich frustrierend sein und führt eher dazu, dass sie zur Konkurrenz wechseln, wo der Aufbau des Shops dem üblichen Standard entspricht.

Seien Sie ruhig kreativ bei Bildern und Überschriften, aber halten Sie die klassischen Elemente (wie Produktbilder und -beschreibungen) klar und leicht auffindbar.

Ein weiterer Punkt, der für Vereinheitlichung sorgt, ist die Tatsache, dass Ihr mobiles Design responsiv sein sollte. Die mobile Version Ihrer Webseite sollte dem Erlebnis auf Desktop-Geräten sehr ähnlich sein.

Lesetipp: Das sind die größten Störfaktoren im Mobile Commerce

Viele Einkäufe werden über mehrere Plattformen hinweg getätigt (z.B. Surfen auf dem Smartphone und Kaufabschluss auf dem Desktop), daher möchten sich Ihre Kund*innen genauso einfach wie zuvor auf Ihrer Webseite bewegen können – selbst wenn sie das Gerät wechseln.    

Download Responsive Design whitepaper

5. Die 3-Klicks-Regel

Diese Regel ist ziemlich einfach. Obwohl sie ein wenig umstritten ist, schwören viele Designer*innen sehr auf diese Regel.

Im Grunde besagt die Regel, dass Besucher*innen einer Webseite in der Lage sein sollten, jede Information innerhalb von maximal 3 Mausklicks zu finden.

Mit einer guten Navigationsleiste (die ein Mega-Menü und eine Suchfunktion enthält) sollte dies kein Problem sein.

Auch wenn Sie sich nicht explizit an diese Regel halten, sollten Sie das Konzept stets im Hinterkopf behalten.

Es gibt nichts Schlimmeres, als wenn potenzielle Kundschaft frustriert Ihre Webseite verlässt, weil aufgrund der schlechten Webseiten-Struktur nicht gefunden wurde, wonach gesucht wurde.

Die 3-Klicks-Regel (oder „3-click-rule“) unterstreicht also die Bedeutung einer guten Navigationsleiste sowie die der anderen in diesem Artikel genannten Punkte.

Fazit

Um die Navigation auf Ihrer Webseite zu verbessern, sollten Sie sich vor allem auf die Benutzerfreundlichkeit fokussieren. Viele Online-Shops haben einen „Standard“-Look, den Kund*innen gewohnt sind.

Sorgen Sie dafür, dass sich User einfach auf Ihrer Webseite bewegen können, dass sie auf bekannte Symbole und Elemente stoßen und Ihre potenzielle Kundschaft wird gerne und öfter bei Ihnen einkaufen.

Die 5 häufigsten Fehler in Online-Shops