Icon-Menü

Visualisierung eines Icon-Menüs

Icons sind kleine Grafiken, die jeweils ein bestimmtes Ziel oder eine Funktion darstellen. Durch Klick auf ein Menü-Icon gelangt der Nutzer schnell zum entsprechenden Inhalt.

Geeignet für:

Icons sind aus dem mobilen Bereich nicht mehr wegzudenken und werden auf jedem Touchgerät benutzt. Sie können das Hauptmenü einer Website ersetzen und auf vielfältige Weise dargestellt werden, zum Beispiel als Karussell.

Vorteile

  • Durch die Verwendung von Icons können auf kleinen Displays mehr Informationen zur Verfügung gestellt werden

  • Icons sind leichter mit dem Finger zu bedienen als beispielsweise Links

  • Nutzer sind es gewöhnt, Funktionen auf ihrem mobilen Gerät durch Icons auszuwählen. Diese entsprechen somit ihrer Erwartungshaltung.

  • Icons sehen in den meisten Fällen ästhetisch aus und können den positiven Gesamteindruck einer mobilen Website erhöhen

  • Mit einem Icon wird jeder Inhalt eindeutig gekennzeichnet, da sie nicht doppelt verwendet werden

Zu beachten

  • Die Icons sollten so ausgewählt werden, dass der Nutzer die zur Verfügung stehenden Auswahlmöglichkeiten sofort versteht

  • Wenn möglich, sollte die Anzahl der Items so begrenzt werden, dass sie auf einen Bildschirm passen

  • Die Auswahl der Grafiken sollte gut durchdacht werden, vor allem auf internationalen Oberflächen. Der Einkaufswagen als Warenkorbicon wird womöglich nicht überall auf der Welt verstanden.

  • Icons sollten zusätzlich beschriftet werden, um Eindeutigkeit zu gewährleisten und die Klickfläche zu vergrößern

  • Icons in einem Menü sollten alle das gleiche Design und die gleiche Größe haben

Empfehlungen

Mithilfe der durchgeführten Benutzertests sollte herausgefunden werden, ob die untersuchten Icons verständlich und eindeutig sind. Dabei konnte beobachtet werden, dass dies nicht für alle Icons zutrifft. Auf mobilen Online-Shops wird das Icon für den Warenkorb beispielsweise von den meisten Nutzern als Einkaufswagen erwartet. Die abgebildete Tüte des mobilen Online-Shops von Bonprix wurde hier teilweise nicht erkannt. Für die Verwendung von Icons und Symbolen im mobilen Kontext ist deshalb wichtig, dass sie vom Nutzer erkannt werden und den Erfahrungswerten des stationären Webs entsprechen.

Weiterführende Informationen

Berkman, Eric; Hoober, Steven (2012): Designing Mobile Interfaces. Sebastopol: O'Reilly, S. 213-217.


Neil, Theresa (2012): Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More. Navigation ? Sprinboard. <http://mobiledesignpatterngallery.com/mobile-patterns-details.php?colid=65438029-72157627607680275&setid=72157629206166752&s=1>

Beispiele

Icon-Menü auf der mobilen Website der Deutschen Post