Von einem lieben Kollegen (hust Philipp hust) wurde ich auf einen interessanten Artikel zum Thema UX aufmerksam gemacht.
Beim Erstellen einer Website wird meistens viel Wert auf das Design gelegt. Schick soll sie aussehen, modern, vielleicht sogar innovativ und nicht zu überladen. Aber auch funktional, praktisch und übersichtlich, wenn es geht.
Aber was bedeutet das in der Praxis? Zu diesem Thema wurden bereits ganze Bücher geschrieben. Ich will heute jedoch erstmal nur auf ein Element eingehen, das vielleicht auch auf deiner Website zu finden ist:
“Versteckte Inhalte” hinter horizontalen Tabs👻
Beispiel: Sony
Durch das große Angebot an Onlineshops wird Benutzerfreundlichkeit immer mehr zum entscheidenden Faktor, der über den Erfolg einer Website bestimmen kann.
Horizontale Tabs auf einer Produktdetailseite (PDP) wirken da erstmal gar nicht verkehrt.
Sie bringen Struktur auf die Seite, verbergen erstmal weitere Informationen, lassen die Seite dadurch auf den ersten Blick übersichtlich erscheinen und können ja bei Bedarf angeklickt werden.
Edward Scott vom Baymard Institute hat sich das ganze Thema jedoch genauer angesehen und kam zu dem Ergebnis, dass horizontale Tabs (Reiter) auf PDPs oft übersehen werden und somit auch die Inhalte. Sie sind für Nutzer nicht so intuitiv, wie es scheint.
Ein Hindernis für Deine Nutzer
Horizontale Tabs, die Inhalte in separate Abschnitte unterteilen, sorgen auf Desktop-Websites oft für Probleme in der Benutzerführung. Viele Nutzer sind es gewohnt, sich durch Scrollen vertikal über eine Seite zu bewegen, und übersehen horizontale Tabs deshalb oft.
Die Tabs sind oft sehr unauffällig gestaltet und können leicht übergangen werden. Dadurch bleibt der zweite, dritte oder vierte Tab unbeachtet, und viele Nutzer denken, sie hätten schon alles gesehen, jedoch können genau diese Informationen für die Conversion entscheidend sein:
“Content that is hidden in “Horizontal Tabs” layouts will often be crucial to a user’s purchase decision — e.g., user reviews, specs, FAQs, cross-sells, manuals, etc.
Our testing shows that some users who are unable to locate this content — despite actively looking for it — will abandon a product or a site as a direct result of this perceived lack of information.”
Durch fehlende Informationen verlieren Nutzer das Vertrauen in die Website und springen ab. So kann es im schlimmsten Fall zu Umsatzeinbußen kommen, da sie sich das Produkt lieber bei der Konkurrenz anschauen, die die vermeintlich fehlenden Informationen liefert und dann direkt dort kaufen.
Außerdem ist die Bereitstellung von Informationen in Tabs oft überflüssig, weil es entweder für das Produkt gar keine gibt, wie fehlende Bewertungen:
Beispiel: Sony
oder sich so wenig Informationen hinter dem Tab befinden, dass sie auch direkt auf der Seite eingebunden werden könnten.
Beispiel: REWE
Zusammenfassung der Learning von Scott
Nachteile von Horizontalen Tabs:
- Oft sind extra Tabs für wenig Informationen unnötig
- Leere Tabs bewirken Enttäuschung
- Es gibt meistens nur sehr wenig Platz für Titel aufgrund der horizontalen Anordnung, diese bieten Raum für Fehlinterpretationen und falsche Erwartungen
- Manche Nutzer klicken einfach nicht, weil sie denken, dass es sich nicht lohnt, teilweise aufgrund der sehr kurzen Titel
- Weiterführende hilfreiche Informationen werden dadurch nicht gesehen
- Es wird dem Nutzer schwer gemacht, über Inhalte zu „stolpern“, die für seine Kaufentscheidung äußerst wertvoll sein könnte
In der Vergangenheit habe ich auch bereits erlebt, dass Inhalte, die in einem Tab verborgen waren, nicht im HTML bzw. für Suchmaschinen Crawler verfügbar waren. Dies wäre aus SEO-Sicht natürlich fatal.
Außerdem gab es des Öfteren den Fall, dass jeder Tab eine eigene URL erzeugt hat, was zu Indexierungsproblemen führen kann.
Diese beiden Fälle habe ich zum Glück schon lange nicht mehr gesehen.
Mögliche Auswirkungen von horizontalen Tabs:
- Umsatz bleibt aus
- Wechsel des Nutzers zu Mitbewerber
- Negative Nutzersignale werden an Suchmaschinen gesendet, wie Absprünge und kürzere Verweildauer → führt zu schlechteren Rankings
- Negative Auswirkungen auf die Wahrnehmung der ganzen Website sind möglich
Ich sehe Licht am Horizont 🌅: bessere Alternativen
Statt horizontaler Tabs eignen sich vertikal zusammengeklappte Abschnitte, wie sie oft bei FAQs genutzt werden, oder gut strukturierte, längere Seiten, die alle Informationen durch einfaches Scrollen zugänglich machen. So stellst Du sicher, dass kein wichtiger Inhalt unbemerkt bleibt.
Ich gehe da eher mit der zweiten Variante, da die erste Punkte wie “Manche Nutzer klicken einfach nicht” nicht löst.
Zusätzlich können Sprungmarken helfen, die Nutzer durch Abschnitte einer Seite zu führen, ohne Inhalte visuell zu verstecken.
Beispiel: DELL nutzt Desktop eine sticky Sprungmarkennavigation am oberen Bereich der PDP, die sich dynamisch verändert, je nachdem, wo man sich auf der Seite gerade befindet.
Auf mobile entfällt dieses Element. Durch die direkte Bereitstellung aller Informationen wird die Seite sehr lang. Um schnell wieder zum Above the Fold Bereich gelangen zu können, haben sie mobil deshalb einen Sticky “Top”-Button eingebaut.
Und was ist eigentlich mit Barrierefreiheit?
Ein zusätzlicher Vorteil des Verzichts auf horizontale Tabs liegt in der Barrierefreiheit. Horizontal angeordnete Tabs sind schwerer mit Tastatur und Screenreadern anzusteuern, während eine gut strukturierte Seite besser zugänglich ist. Vor dem Hintergrund des bald in Kraft tretenden Barrierefreiheitsstärkungsgesetz am 28.06.25, ist dies ein entscheidender Faktor.
Bist Du hier schon auf einem guten Weg? Falls nicht, wir können Dir helfen!
Nutzer lernen, aber nicht alles
Nun sind die Untersuchungen von Scott bereits 6 Jahre alt und Nutzer lernen dazu. Jedoch stelle ich immer noch bei mir selbst fest, dass ich manchmal horizontale Tabs übersehe und sie erst aktiv suchen muss. Und ich würde mal behaupten, dass ich aufgrund meines SEO-Backgrounds Websites mit sehr wachen Augen abscanne.
Außerdem konnte ich keine aktuelle Studie darüber finden, die besagt, dass horizontale Tabs auf PDPs eine gute Idee sind.
Ebenfalls auffällig ist, dass die von Scott aufgeführten Beispiel-Seiten Sephora und REI mittlerweile die horizontalen Tabs entfernt haben.
Schreib mir doch gerne, wenn Du eigene Erfahrungen zu dem Thema sammeln konntest.
Fazit
Horizontale Tabs auf PDPs sind nicht komplett falsch. Es ist anzumerken, dass die Mehrheit der Nutzer während der Tests die in den horizontalen Registerkarten versteckten Inhalte gefunden hat. Jedoch:
“However, during our product page testing the 27% of users who never found the content were understandably frustrated, perplexed, and upset.”
Und wir wollen schließlich alle Nutzer abholen!
Wer in UX investieren und die Conversion-Raten steigern möchte, sollte auf horizontale Tabs verzichten und stattdessen auf die direkte Verfügbarkeit aller Informationen setzen.
Abschließend ist zu sagen - horizontale Tabs sind auf Produktseiten noch immer weit verbreitet. Falls dies auch bei Dir der Fall ist, teste doch mal, ob sich durch eine Umstellung Deine Conversionrate signifikant erhöhen lässt. Im Zweifel hilft vor der Live-Stellung auch immer ein UX-Test.
Wenn Dein Budget aktuell nicht für große UX-Tests ausgelegt ist, schau doch mal beim Usability Testessen vorbei.