Die 5 universell verstandenen Icons (und warum alles andere ein Label braucht)

Fragen Sie einen Raum voller Designer, welche Icons sie sich trauen würden, ohne Textlabels zu verwenden, und Sie bekommen zwanzig verschiedene Listen. Fragen Sie Nutzer, was diese gleichen Icons bedeuten, und Sie bekommen zweihundert verschiedene Antworten. Die Lücke zwischen dem, was Designer für universell halten, und dem, was Nutzer tatsächlich verstehen, ist einer der teuersten Fehler in der Ecommerce-Navigation.

Die Wahrheit, gestützt durch Jahre von Forschung der Nielsen Norman Group, Apple, Google und großflächigen A/B-Tests von Testfirmen, ist viel enger als die meisten Menschen denken. Nur eine kleine Handvoll Icons kann allein ohne Verwirrung verwendet werden. Alles andere braucht ein Label.

Die universellen fünf

Die Icons, die tatsächlich ohne Text funktionieren, sind diejenigen, die über Jahrzehnte hinweg plattformübergreifend standardisiert wurden und in praktisch jeder großen Anwendung, auf die Nutzer treffen, nahezu identisch implementiert sind. Die Liste ist kurz.

1. Home (Haus-Icon)

Das Haus-Icon bedeutet schon seit so langer Zeit „zur Homepage gehen”, dass seine Bedeutung in den Erwartungen der Nutzer verankert ist. Jeder Browser, jedes mobile Betriebssystem und praktisch jede App verwendet die gleiche visuelle Metapher. Erkennungsraten für das Home-Icon überschreiten in den meisten Nutzertests 95%.

Das Home-Icon ist allerdings in Ecommerce etwas redundant. Die meisten Shopify-Themes nutzen bereits das Store-Logo als Homepage-Link, was die gleiche Funktion erfüllt und die Markenidentität verstärkt. Wenn Sie sowohl ein Logo als auch ein Home-Icon haben, verwenden Sie zwei Navigation-Platzierungen für die gleiche Aktion.

2. Suche (Lupe)

Die Lupe ist eines der am meisten getesteten Icons im Web. Ihre Erkennungsrate liegt durchgehend über 90%, und Nutzer tippen es ohne zu zögern an. Dieses Icon hat den Vorteil, visuell beschreibend zu sein – eine Lupe sieht wie ein Werkzeug zum Finden von Dingen aus – und wird in Desktop-Betriebssystemen seit den 1980er Jahren verwendet.

Im Ecommerce ist die Suche kritisch. Das Lupe-Icon kann sicher allein in einem mobilen Header oder einer Tab-Leiste verwendet werden, allerdings erzeugt das Hinzufügen des Wortes „Suche” darunter immer noch einen kleinen, aber messbaren Anstieg beim Engagement. Auch universelle Icons erhalten mehr Klicks, wenn sie labeled sind.

3. Warenkorb oder Tasche

Jahrzehnte des Online-Shoppings haben das Warenkorb-Icon unverwechselbar gemacht. Ob es sich um einen Einkaufswagen aus einem Supermarkt oder eine Einkaufstasche aus einem Einzelhandelgeschäft handelt, Nutzer wissen, dass es „Artikel anzeigen, die ich kaufen möchte” bedeutet. Das Icon enthält normalerweise einen Badge mit der Anzahl der Artikel, was funktionale Klarheit hinzufügt.

Tests des Baymard Institute zeigen, dass die Warenkorb-Icon-Erkennung im Ecommerce-Kontext über 95% liegt. Anders als einige andere Icons ist das Warenkorb-Icon nicht mit alternativen Bedeutungen überlastet – es bedeutet eine Sache, und diese Bedeutung ist über Plattformen hinweg stabil.

4. Menü (Hamburger-Icon)

Das Drei-Linien-Hamburger-Icon ist zum Standardsymbol für „Menü öffnen” auf Mobilgeräten geworden. Seine Anerkennung hat sich in der letzten Dekade erheblich erhöht, da Mobile-First-Design zum Standard wurde. Frühe Kritik am Hamburger-Icon – insbesondere ein berühmter 2014-Test, der zeigte, dass das Wort „MENÜ” das Icon übertraf – wurde weitgehend gelöst, da Nutzer sich an das Muster angepasst haben.

Allerdings übertrifft die Kombination des Hamburger-Icons mit dem Wort „Menü” immer noch das Icon allein. Tests der Nielsen Norman Group über Hunderttausende von Sitzungen hinweg zeigten eine 20%ige Steigerung beim Menü-Engagement, wenn das Icon mit Text gepaart war. Das Icon wird verstanden, aber das Label beseitigt das letzte Zögern.

5. Schließen (X-Icon)

Das X-Icon zum Schließen von Fenstern, Dialogen und Overlays wird universell verstanden. Es ist seit den frühesten Desktop-Betriebssystemen ein Standard der grafischen Benutzeroberflächen. Die Anerkennung liegt nahe bei 100%, und Nutzer zögern nicht, wenn sie es sehen.

Das X-Icon ist einer der wenigen Fälle, in denen ein Label die Benutzerfreundlichkeit tatsächlich beeinträchtigen würde. Das Hinzufügen des Wortes „Schließen” neben einem X erzeugt Redundanz ohne Clarification und nimmt Platz ein, der oft sehr begrenzt ist.

Warum alles andere ohne Label scheitert

Sobald Sie diese fünf Icons verlassen, fallen die Erkennungsraten scharf ab. Der Grund ist Plattforminkonsistenz. Das gleiche visuelle Symbol bedeutet in verschiedenen Kontexten unterschiedliche Dinge, und Nutzer haben keine Möglichkeit zu wissen, welche Bedeutung auf Ihrem Store zutrifft, außer Sie sagen es ihnen.

Das Herz-Icon ist ein perfektes Beispiel. Auf Instagram bedeutet es „Gefällt mir”. Auf Pinterest bedeutet es „Speichern”. Auf vielen Ecommerce-Sites bedeutet es „Zur Wunschliste hinzufügen”. Auf Health-Apps stellt es Gesundheitsdaten oder Favoriten dar. Wenn ein Nutzer zum ersten Mal auf ein Herz-Icon auf Ihrem Store trifft, rät er. Forschung der Nielsen Norman Group ergab, dass unlabeled Herz-Icons im Ecommerce-Kontext von mehr als 40% der Nutzer missverstanden wurden.

Das Stern-Icon hat das gleiche Problem. Es kann je nach App Bewertungen, Favoriten, Premium-Features oder hervorgehobene Artikel bedeuten. Ohne Label müssen Nutzer es aus dem Kontext dekodieren, was zu Reibung führt.

Das Personen- oder Benutzer-Icon mag offensichtlich erscheinen – es stellt „Konto” oder „Profil” dar, richtig? Außer auf einigen Sites bedeutet es „Anmelden”, auf anderen bedeutet es „Kundenservice”, und auf noch anderen öffnet es ein Dropdown mit mehreren kontobezogenen Aktionen. Erkennungsstudien zeigen, dass nur etwa 60% der Nutzer das Personen-Icon beim ersten Treffen korrekt als „Konto” identifizieren.

Grid-, Tag-, Filter- und Bookmark-Icons leiden alle unter schwerer Mehrdeutigkeit. Ein Grid könnte „als Raster anzeigen”, „Kategorien”, „Kollektion” oder „alle Produkte” bedeuten. Ein Tag könnte „Artikel im Sale”, „Labels” oder „Organisieren” bedeuten. Ein Filter-Icon ist etwas besser, aber wird immer noch von nur etwa 70% der Nutzer ohne Label erkannt.

Das Muster ist klar: Icons, die über alle großen Plattformen hinweg eine stabile Bedeutung haben, können allein funktionieren. Icons, die in verschiedenen Apps unterschiedliche Dinge bedeuten, können das nicht.

Die Erkennungsdaten

Die Nielsen Norman Group hat im vergangenen Jahrzehnt mehrere Runden von Icon-Usability-Tests durchgeführt. Ihre Erkenntnisse sind konsistent. In einer weit zitierten Studie testeten sie 75 verschiedene Icons, die über Ecommerce und Content-Sites verwendet werden. Nur sechs Icons hatten Erkennungsraten über 80%. Der Rest fiel in einen Bereich, in dem 40% bis 70% der Nutzer das Icon entweder falsch identifizierten oder es ganz übersprangen, weil sie sich unsicher waren.

Apples interne Forschung, die ihre Human Interface Guidelines informiert, führte dazu, dass sie explizit Textlabels auf allen Tab-Bar-Elementen empfehlen. Ihre Richtlinie besagt: „Wenn Sie die Labels von Ihrer Tab-Leiste entfernen, stellen Sie sicher, dass die Icons klar und leicht verständlich sind.” Aber dann geht es weiter: „Es ist generell am besten, Labels einzubeziehen, da sie Nutzern helfen, den Zweck jedes Tabs auf einen Blick zu verstehen.”

Googles Material Design Guidelines sind noch direkter. Die Richtlinie für die untere Navigation gibt an: „Textlabels sollten für alle Ziele verwendet werden. Ziele ohne Textlabels kommunizieren nicht ausreichend klar allein.” Sie testeten Icon-only-Navigationen und stellten fest, dass das Hinzufügen von Textlabels die Navigations-Erfolgsraten um 18% verbesserte.

Das ist nicht theoretisch. Wenn große Plattformen mit Milliarden von Nutzern und praktisch unbegrenzten Ressourcen für Tests Ihnen sagen, dass Textlabels erforderlich sind, dann, weil ihre Daten zeigten, dass unlabeled Icons die Benutzerfreundlichkeit beeinträchtigen.

Wenn universelle Icons immer noch von Labels profitieren

Auch die fünf universellen Icons funktionieren in vielen Kontexten besser mit Labels. Der Unterschied ist kleiner als bei mehrdeutigen Icons, aber er ist messbar.

Tests von Blend Commerce auf Shopify-Stores zeigten, dass eine mobile Tab-Leiste mit Icons und Textlabels 10% höhere Konversionsraten erzeugte als die gleiche Tab-Leiste nur mit Icons – obwohl die verwendeten Icons aus dem universellen Set stammten (Home, Suche, Kollektion dargestellt durch ein Grid, Warenkorb, Konto).

Warum würde das Hinzufügen eines Labels zu einem Lupe-Icon das Engagement erhöhen? Zwei Gründe. Erstens bietet das Label Bestätigung. Ein Nutzer sieht das Icon, erkennt es, und das Label bestätigt, dass er korrekt ist, bevor er tippt. Dieser Moment der Sicherheit beseitigt Micro-Friction. Zweitens erzeugt das Label ein größeres, fehlerverzeihenderes Tapping-Ziel, was die Benutzerfreundlichkeit auf kleinen Bildschirmen verbessert.

Der praktische Takeaway: universelle Icons können allein verwendet werden, wenn Platz wirklich begrenzt ist, aber das Hinzufügen von kurzen Labels ist die bessere Standard-Einstellung.

Wo Sie dies für Ihre Navigation hinterlässt

Wenn Sie Navigation für einen Shopify-Store erstellen oder überprüfen, hier ist das Entscheidungsrahmen:

Icons, die allein sicher verwendet werden können:

• Suche (Lupe)
• Warenkorb oder Tasche
• Schließen (X)
• Home (wenn nicht redundant mit Logo)
• Menü (Hamburger)

Icons, die Labels brauchen:

• Alles andere. Kollektion, Konto, Wunschliste, Favoriten, Filter, Sortierung, Teilen, Einstellungen, Benachrichtigungen, Chat und jedes kategorienspezifische Icon, das Sie erwägen.

Best Practice: Auch die universellen Icons sollten Labels in persistenter Navigation wie einer mobilen Tab-Leiste haben. Die Platzierungskosten sind minimal – ein oder zwei Worte unter jedem Icon – und der Benutzerfreundlichkeitsgewinn ist real.

Wenn Ihre Navigation derzeit Icon-only-Buttons für etwas anderes als Suche, Warenkorb oder Schließen verwendet, führen Sie einen einfachen Test durch. Fügen Sie Textlabels hinzu und messen Sie das Engagement. Tools wie Navi+ machen es einfach, Labels ein- und auszuschalten, so dass Sie beide Versionen ohne Theme-Neuaufbau testen können. Die Daten werden fast immer die labeled-Version bevorzugen.

This article is part of the larger guide on Icons vs. Text in der Navigation: wann man was nutzt (und wann beides).