• Facebook
  • Google+
  • Twitter
  • XING
22.02.2014

Das Lupensymbol im Search Design: Pros und Kontras

Nutzer erkennen die Bedeutung "Suche" des Lupensymbols sogar ohne eine Textbezeichnung. Der Nachteil ist, dass die Suche, die nur über ein Icon funktioniert, für die Nutzer schwerer zu finden ist.

© alphaspirit - Fotolia.com

 

by Katie Sherwin (deutsche Übersetzung) - 23.02.2014

 

Im Zuge der Recherchen für die Aktualisierung unseres Kurses Emerging Patterns in Web Design sahen wir uns genauer an, was mit Suchfeldern passiert. Viele Designs ersetzen den traditionellen Button mit der Bezeichnung "Suche" durch ein Lupensymbol ohne eine Bezeichnung. Manche lassen das Textfeld sogar ganz weg und nutzen nur das Symbol. Welche Version ist heute am besten geeignet?

Frühere Richtlinien zum Suchfeld

Unsere Richtlinien rund um das Suchfeld (engl.) sind jahrelang dieselben geblieben. (Siehe die aktualisierte komplette Liste von 62 Design-Empfehlungen für die Suche, engl.). Hinsichtlich der Präsentation sind die wichtigsten Richtlinien:

  • Bieten Sie ein einfach erkennbares Suchfeld in der oberen rechten Ecke der Seite, mit einem textoffenen Feld, ergänzt durch den Such-Button.
  • Das Suchfeld benötigt keine Bezeichnung. Ein eindeutiger Such-Button neben dem Feld identifiziert die Suche für den Nutzer und sagt ihm genau, wie er die Suche ausführen kann.

Und dennoch gibt es heutzutage einige Muster, die in Mode kommen, obwohl sie genau diese grundlegenden Richtlinien missachten. Das Lupen-Icon spart Platz, also wird es von immer mehr Websites verwendet. Es ist in Ordnung, mit den früheren Richtlinien flexibel umzugehen, so lange wir erkennen, dass die Bedürfnisse der Nutzer unverändert bleiben. Die Nutzer interessiert es nicht, wie der Suchbereich aussieht: Sie wollen einfach nur eine Stelle, an der sie schnell ihre Suchanfrage eintippen können. Wenn die Designkonventionen sich ändern, aber den Nutzern immer noch erlauben, genauso schnell ans Ziel zu kommen, dass sollte es kein Problem geben. Wir wir an unseren Ergebnissen aber sehen werden, hat die Suche nur über ein Icon einige bedeutende Nachteile.

 

verschiedene Suchfelder

(a): Traditionelles Suchfeld mit einen Such-Button; (b, c, d): Aufkommende Suchfeld-Muster mit einem Lupen-Icon; (e): Mobil beeinflusstes Muster einer Suche nur über das Icon ohne offenes Textfeld. (Wir raten ab von diesem letzten Design.)

Einführung eines Icons

Die Lupe wird teilweise deswegen inzwischen mit Suchen assoziiert, weil so viele verschiedene Websites, Anwendungen und Betriebssysteme sie zuverlässig als eine Möglichkeit nutzen, um Informationen zu finden.

Dank dieses konsequenten Einsatzes haben die Nutzer gelernt, das Icon schneller zu erkennen. Besonders beliebt wurde das Nur-Icon-Muster mit dem Aufkommen des responsiven Designs (obwohl gute responsive Seiten beim Übergang auf grössere Bildschirme ebenfalls ein Suchfeld neben dem Icon zeigen).

 

Lupen-Icon bei Suchfeldern

Das Lupen-Icon, das in verschiedenen Anwendungen und Betriebssystemen für die Suche verwendet wird, hat zur Vertrautheit des Nutzers mit und seinen Erwartungen an das Icon beigetragen. Von oben nach unten: Google Chrome, Windows Explorer, Internet Explorer und Microsoft Word für Mac.

Ergebnisse unserer aktuellen Untersuchung

Unsere aktuellen Ergebnisse aus der Nutzerforschung zeigen, dass der Übergang zum Such-Icon nicht so reibungslos und risikofrei abläuft, wie die Designer das vielleicht gerne hätten. Hier sind einige der Schwierigkeiten, auf die Nutzer bei diesem neuen Icon-Such-Muster treffen.

Die Lupe allein macht es viel schwieriger, die Suche zu finden.

Wenn man das Icon ohne ein offenes Textfeld verwendet, nimmt das Icon weniger Platz weg. Visuell ist es weniger prominent und dadurch auch schlechter zu erkennen. Daher empfehlen wir das Nur-Icon-Muster nicht für Desktop-Webseiten. Sinn macht die Nur-Icon-Suche auf mobilen Geräten, weil dort weniger Platz auf dem Display ist und insgesamt weniger Icons und Beschriftungen vorhanden sind. Auf dem Desktop ist aber mehr zu sehen, und daher kann das alleinstehende Such-Icon viel einfacher in der Menge untergehen.

Nutzer verstehen das Symbol gut genug, wenn es entsprechend gestaltet ist, dass die Ausbuchstabierung des Wortes "Suche" als Bezeichnung nicht mehr erforderlich ist.

Nutzer erkennen und verstehen die Funktion der Lupe. Sie sehen sie und assoziieren sie mit Suche. Wenn das Icon offensichtlich ist und genug Aufforderungscharakter besitzt, also anklickbar ist, ist ein separater Button mit der Bezeichnung "Suche" nicht notwendig. Weil viele Nutzer noch gewöhnt sind, auf den Such-Button zu klicken, um die Suchanfrage abzuschicken, ist es unverzichtbar, dass sie abgeschickt wird, wenn man auf die Lupe klickt. Ein weiterer Vorteil für Seiten mit internationalen Versionen besteht darin, dass man das Wort "Suche" nicht übersetzen muss, wenn man das Icon anstelle eines Buttons verwendet. (Denken Sie jedoch aus Gründen der Barrierefreiheit daran, das Wort "Suche" oder seine Übersetzung als ALT-Text für jeden nur grafischen Button einzufügen.)

Wenn die Suche an einer unerwarteten Stelle platziert wird, brauchen die Nutzer zusätzliche Hilfe, um sie zu finden.

Nutzer schauen zuerst in der oberen rechten Ecke nach der Suche. Wenn sie sie dort nicht finden, fangen sie von oben an, die Seite zu überfliegen. Unter den Seiten, die ihr Such-Icon auf der linken Seite haben, schnitten diejenigen bei unseren Nutzern am besten ab, die ein grosses und leeres offenes Textfeld verwendeten. Obwohl unsere Nutzer das Suchfeld schliesslich fanden, sollten sie die Seite gar nicht erst durchkämmen müssen.

Eine Nur-Icon-Suche steigert den Interaktionsaufwand (engl.).

Ein Nachteil dessen, nur ein Icon für die Suche zur Verfügung zu haben, ist die Tatsache, dass der Nutzer darauf warten muss, dass ein Suchfeld auftaucht, herausfinden muss, wo er zu tippen anfangen kann und manchmal noch einmal klicken muss, um sich im Eingabefeld zu befinden. Diese zusätzlichen Schritte verlängern den Suchvorgang, wo es wesentlich schneller gegangen wäre, einfach in das Textfeld zu klicken und sofort mit der Eingabe anzufangen.

Die meisten anderen Icons erfordern immer noch Beschriftungen, um eindeutig zu sein.

Eindeutige Beschriftungen helfen den Nutzern dabei, ihre Entscheidungen schneller zu treffen: Sie geben einen guten Vorgeschmack auf die Informationen, die als nächste kommen werden. Für neuere Icons wie das Menü-Icon mit drei Linien, das auch als Hamburger-Icon bezeichnet wird, sollten immer noch Beschriftungen verwendet werden. Das Icon zur Kartenmarkierung ist ein weiteres Icon, dessen Bedeutung noch vage ist und das inkonsistent verwendet wird. Manchmal steht es für den aktuellen Standort oder einen anderen bestimmten Standort, manchmal für Standorte im Allgemeinen oder in der näheren Umgebung.

 

Menü- und Kartenmarkierungs-Icon

Die Nutzer sind noch nicht vertraut mit neueren Icons wie dem Menü-Icon mit drei Linien (links) und dem Kartenmarkierungs-Icon (rechts).

Die Nutzer lernen erst noch, was diese Icons bedeuten und wie sie sich verhalten, also ist es am besten, eine eindeutige Beschriftung zu verwenden. Dafür ist darüber hinaus genug Platz auf Desktop-Bildschirmen, warum sollte man es den Nutzern also nicht erleichtern, schneller zu finden, was sie suchen.

Empfehlungen für Designs mit dem Lupen-Icon

  1. Behalten Sie ein offenes Texteingabefeld neben dem Icon auf der Desktop-Version der Website bei. Am besten ist es, das auch bei Tablets so zu handhaben. Wenn eine Seite auf kleinen Displays angezeigt wird (wie bei Smartphones und Smartwatches), kann das Textfeld verborgen bleiben, bis der Nutzer das Lupen-Icon berührt. In keinem dieser Fälle ist eine Beschriftung innerhalb des Suchfelds erforderlich.
  2. Nutzen Sie ein schematisches Icon, die schlichteste Version der Lupe. Die Reduktion grafischer Details beschleunigt die Erkennung.
    Suche-Icon: nicht schematisch vs. Suche-Icon: schematisch
  3. Nutzen Sie ein grosses Icon mit breiten Linien. Eine grössere, anklickbare Fläche macht es leichter, das Icon zu finden und anzuklicken. Suchfeld mit kleinem Icon vs. Suchfeld mit grossem Icon
  4. Nutzen Sie viel Kontrast, damit sich das Icon vom Hintergrund und von der Umgebung abhebt.
  5. Platzieren Sie es in der Ecke oben rechts, weil das immer noch der erste Ort ist, wo die Nutzer die Suchfunktion erwarten.
  6. Erlauben Sie den Nutzern das Starten der Suchanfrage mit der Enter-Taste und durch Klick auf das Icon. Ich erwähnte es oben bereits, aber es ist der Mühe wert, es zu wiederholen: Viele Nutzer sind immer noch gewöhnt, auf einen tatsächlichen Button zu klicken, um die Suchanfrage zu starten.
  7. Ziehen Sie die Verwendung eines grösser werdenden Suchfelds in Betracht, das bei der Texteingabe mit einem Klick erweitert wird. Das spart Platz auf dem Bildschirm und gibt dem Nutzer zugleich genügend visuelle Hinweise, um die Suche schnell zu finden und auszuführen.
    grösserwerdendes Suchfeld
    Oben: Suchfeld vor dem Klick ins Textfeld. Unten: Nach den Klick wird das Suchfeld grösser.


    Die Empfehlungen 8-11 gelten, wenn Sie das Icon ohne das Texteingabefeld nutzen:
  8. Überfüllen Sie die Umgebung nicht mit anderen Icons, die eventuell davon ablenken. Räumen Sie der Suche die verdiente Priorität ein. Suche neben anderen Icons
  9. Die Umkehrseite der vorhergehenden Richtlinie: Isolieren Sie die Suche nicht; das kann es genauso schwer machen, wie, wenn die Umgebung vollgestopft ist. isoliertes Suche-Icon
  10. Wenn Nutzer auf das Such-Icon klicken, zeigen Sie das Texteingabefeld in der Nähe dieses Icons an. Das Texteingabefeld weit weg zu setzen, erhöht den Aufwand für die Interaktion für den Nutzer, indem es ihn zwingt, das Feld erst zu finden, bevor er anfangen kann zu tippen. Es steht auch im Widerspruch zur Gestaltungsregel der Nähe (engl.), miteinander verwandte Elemente weit voneinander entfernt anzuordnen. Distanz zwischen Icon und Suchfeld
  11. Zwingen Sie die Nutzer nicht, zwei Mal zu klicken, wenn einmal (oder gar nicht) ausreicht. In einigen Fällen muss der Nutzer erst auf das Icon klicken, um das Suchfeld zu öffnen, und dann noch einmal, um den Eingabefokus auf das Suchfeld zu verlegen. Ein Klick auf das Icon sollte den Cursor in das Feld setzen, fertig für die Eingabe. Noch besser: Lassen Sie das Suchfeld beim Draufzeigen grösser werden, so, dass der Cursor zur Eingabe bereit ist.

Das Ziel ist es, die Nutzer die Suche schnell finden und ausführen zu lassen

Wenn Ihre Website auf dem Desktop ein Lupen-Icon statt eines Such-Buttons verwendet, sollten diese Empfehlungen helfen. Bei NN/g nutzen wir auf der Website immer noch den Such-Button. Wir haben den Platz und es besteht kein Zweifel daran, dass die Nutzer die Suche auf unserer Website finden können. Wir werden auch andere neue Muster, die Suche betreffend, im Auge behalten, beispielsweise die Platzierung auf der linken Seite und die Verwendung von Sprachbefehlen.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen