{"id":1029,"date":"2017-07-06T10:24:05","date_gmt":"2017-07-06T08:24:05","guid":{"rendered":"https:\/\/www.visionconnect.de\/blog\/?p=1029"},"modified":"2022-04-29T08:52:47","modified_gmt":"2022-04-29T06:52:47","slug":"suche-gestaltung-und-usability","status":"publish","type":"post","link":"https:\/\/www.visionconnect.de\/blog\/2017\/suche-gestaltung-und-usability\/","title":{"rendered":"Suche \u2013 5 Gedanken zu Gestaltung und Usability"},"content":{"rendered":"

Webseiten mit vielen Inhalten, wie z.B. von Museen, gr\u00f6\u00dferen Unternehmen, Shop-Seiten, usw. haben eines gemeinsam: \u00a0sie bieten so viele Inhalte an, dass trotz guter Strukturierung, Nutzer h\u00e4ufig hoffen, mittels der Suche schneller zum Ziel zu kommen. Die Erfahrung zeigt, dass es nicht den K\u00f6nigsweg gibt, um zu Informationen zu gelangen. Einige Nutzer gehen \u00fcber die Seitenstruktur, andere \u00fcber die Suche. Daf\u00fcr muss die Suche ebenso prominent platziert werden, wie das Hauptmen\u00fc, einfach und klar im Design und einfach zu nutzen sein. Zudem sollte sie gut aufbereitete Ergebnisse liefern. Single- oder Landing-Pages hingegen ben\u00f6tigen meistens keine Suche, da der Umfang des Inhalts begrenzt ist.<\/span><\/p>\n

1. Prominente Platzierung<\/h2>\n

Die Zeiten kleiner, versteckter Sucheingabefelder ist definitiv vorbei und auf den Submit-Button (OK) der Suche wird immer h\u00e4ufiger verzichtet. Sei es, weil der UX\/UI-Designer die Komplexit\u00e4t reduzieren will, sei es, dass man davon ausgeht, dass der Nutzer wei\u00df, dass er die dicke Return-Taste \u00a0auf dem (virtuellen) Keyboard dr\u00fccken muss, um den Suchvorgang zu starten. Was bleibt ist ein Lupensymbol und ein Strich oder Eingabefeld, welches \u00a0sich bei Klick in ein gr\u00f6\u00dferes Suchfeld verwandelt. Das Lupensymbol hat sich als Zeichen f\u00fcr \u201eSuche\u201d durchgesetzt. Es gibt eigentlich kein anderes alternatives Symbol im europ\u00e4ischen Internetraum, welches die Suche sinnvoll repr\u00e4sentiert und von den meisten Nutzern richtig interpretiert wird.<\/span><\/p>\n

Beispiel Magazin Bauhaus Movement<\/h3>\n

Die Suche ist erst dezent in Form eines kleines Icons zu sehen, dann wird sie richtig gro\u00df:<\/p>\n

\"Bauhaus<\/a>
Bauhaus Suche im unteren drittel des Screens (rechts)<\/figcaption><\/figure>\n
\"Bauhaus<\/a>
Bauhaus Suche als sehr gro\u00dfes Input-Feld ohne sichtbaren Submit-Button<\/figcaption><\/figure>\n

Beispiel AEG<\/h3>\n

Auch hier ist das Eingabefeld sehr gro\u00df, gut lesbar, prominent, die Suchergebnisseite liebevoll und funktional gestaltet:<\/span><\/p>\n

\"AEG<\/a>
AEG Suche oben rechts, rotes Icon<\/figcaption><\/figure>\n
\"AEG<\/a>
AEG Suche, Eingabefeld<\/figcaption><\/figure>\n

Beispiel BUND<\/h3>\n

Das Eingabefeld auf der bund.net Seite vergr\u00f6\u00dfert sich dezent nach links, wenn man mit der Maus hineinklickt.<\/span><\/p>\n

\"BUND<\/a>
BUND Suche oben rechts, Icon<\/figcaption><\/figure>\n
\"BUND<\/a>
BUND Suche oben rechts nach Klick vergr\u00f6\u00dfert<\/figcaption><\/figure>\n

Beispiel Vitra Design Museum<\/h3>\n

Bei der Website des Vitra Design Museum erscheint nach dem Klick auf das Icon ein fast schon riesiges Eingabefeld.<\/span><\/p>\n

\"Vitra<\/a>
Vitra Design Museum, Suche, Icon oben rechts<\/figcaption><\/figure>\n
\"Vitra<\/a>
Vitra Design Museum Suche Eingabefeld<\/figcaption><\/figure>\n

2. Sortieren und Filtern von\u00a0Suchergebnissen<\/h2>\n

Nicht so sch\u00f6n, weil es dem Nutzer ein genaues Lesen und Verstehen abverlangt, sind eine Vielzahl an Sortier- und Filterm\u00f6glichkeiten auf der Suchergebnisseite. Diese hei\u00dfen dann auch noch \u201eSortieren nach Inhaltstypen\u201d, \u201eSortieren nach Erstellungsdatum\u201d oder auch \u00a0\u201eZeige Treffer aus den Bereichen ABC\u201d. Das Problem damit ist, dass man sich als Nutzer damit auseinandersetzen (lesen) und erst einmal verstehen muss, was genau damit gemeint ist. Das aber kostet Zeit und Aufmerksamkeit.<\/span><\/p>\n

Shops sind dazu \u00fcbergegangen, einfach Merkmale und Kriterien zum Ausw\u00e4hlen anzubieten, die das Suchergebnis haben soll, indem sie oben oder links alle Merkmale und Kriterien zum Anklicken auflisten.<\/span><\/p>\n

Beispiele Amazon und Zalando<\/h3>\n

\"Zalando<\/a><\/p>\n

Zalando Filter<\/p>\n

\"Amazon<\/a>
Amazon Filter<\/figcaption><\/figure>\n

Dieser Ansatz umgeht elegant die umst\u00e4ndlichen und nicht gerade selbsterkl\u00e4renden, wenn auch technisch korrekten Formulierungen, wie \u201eRubriken-Filter\u201d, \u201eSuchfilter\u201d oder \u201eNur Treffer aus bestimmten Bereichen\u201d zeigen.<\/span><\/p>\n

Manchmal findet man \u00fcbersichtliche Suchergebnisseiten, die versuchen, die technischen M\u00f6glichkeiten der Suche m\u00f6glichst gut gestaltet und benutzerfreundlich anzubieten. <\/span><\/p>\n

Beispiel BUND<\/h3>\n
\"BUND<\/a>
BUND Suchergebnis Filter<\/figcaption><\/figure>\n

Hier offenbart sich meiner Meinung nach das Dilemma zwischen dem Nutzer, der keine Lust hat, einen Such-F\u00fchrerschein zu machen, der nur eine einfache Suche ansto\u00dfen will und dem Power-User, der sich mit den Tricks und Kniffen von Suchen auskennt. F\u00fcr den UX\/UI Designer wird es immer eine Gratwanderung sein, so wenig wie m\u00f6glich, aber so viel wie n\u00f6tig an Suchtechnik anzubieten.<\/span><\/p>\n

3. Suggest-Funktion, von Google verw\u00f6hnt<\/h2>\n

In den letzten Jahren hat sich die Suggest-Funktion immer mehr durchgesetzt. Verw\u00f6hnt von Google, Bing & Co, ist unsere Erwartungshaltung, wenn wir Suchen nutzen, sehr hoch geworden. G\u00e4ngige Content Management Systeme (CMS) haben sich aber mittlerweile in dieser Richtung weiterentwickelt und bieten Funktionen wie Auto-Complete, bzw. Suggest-Funktionen an. Und wenn diese nicht direkt als Funktion im CMS zur Verf\u00fcgung stehen, so gibt es mit ziemlicher Sicherheit eine Extension oder ein Plug-In f\u00fcr diese Funktion. Ben\u00f6tigt man umfangreichere Such- und Sortier-Funktionen bieten sich z.B. \u00a0<\/span>solr<\/span><\/a> oder <\/span>elasticsearch<\/span><\/a> an.<\/span><\/p>\n

Beispiel Google und test.de<\/h3>\n
\"Google<\/a>
Google Suggest<\/figcaption><\/figure>\n
\"test.de<\/a>
test.de Suggest<\/figcaption><\/figure>\n

Bei Google werden vier, bei Bing acht und bei Stiftung Warentest 10 Vorschl\u00e4ge gemacht und ggf. noch die gesamte Trefferzahl genannt. Die Suggest-Funktion selber startet meist beim Eintippen des dritten Buchstabens des Suchwortes. Abh\u00e4ngig von der Menge der zu erwartenden Ergebnisse kann man auch schon nach dem ersten oder zweiten Buchstaben passende Stichworte anbieten.<\/span><\/p>\n

4. Komfort f\u00fcr die User<\/h2>\n

Bei Twitter wird die Suggest-Funktion schon nach dem ersten Buchstaben aktiv und als Ergebnis 10 Stichworte genannt. Facebook startet auch schon beim ersten Buchstaben und zeigt ca. acht Vorschl\u00e4ge an. Diese werden gegliedert dargestellt nach Orten, Seiten, Personen und Gruppen. Eine \u00e4hnliche Darstellung der Suchvorschl\u00e4ge kenne iOS-Nutzer seit langem durch Spotlight (die interne Suche auf dem Mac). Hier werden schon seit Jahren die Ergebnisse nach Top-Treffern, Mail, Ordner, Filme, Bilder, etc. gegliedert ausgegeben.<\/span> \u00a0\u00a0<\/span><\/p>\n

Beispiele Twitter und Avocadostore<\/h3>\n
\"Avocadostore<\/a>
Avocadostore Suggest mit Produktbildern<\/figcaption><\/figure>\n
\"Twitter<\/a>
Twitter Suggest mit Twitter-Profilbildern<\/figcaption><\/figure>\n

5. Mobil first<\/h2>\n

Seit 2015 werden in der mobilen Suche von Google Webseiten bevorzugt, die f\u00fcr Mobilger\u00e4te optimiert sind (<\/span>hier k\u00f6nnen Sie testen<\/span><\/a>, ob Ihre Seite f\u00fcr mobile Endger\u00e4te optimiert wurde). Nutzer sind schnell frustriert, wenn sie die Website mit den Fingern zoomen oder zusammenziehen m\u00fcssen. Auf den Seiten aeg.de und bund.net kann man sehen, wie die Suche f\u00fcr mobile Endger\u00e4te optimiert wurde und welchen Stellenwert sie hat. Die Suche selbst ist eines der drei Hauptelemente der responsiven Startseite, neben dem Logo und dem Burger-Men\u00fc.<\/span> \u00a0<\/span><\/p>\n

Weiterf\u00fchrende Informationen<\/h2>\n

Wer sich tiefer in diese Thematik einarbeiten m\u00f6chte, dem seien folgende Artikel empfohlen:<\/span><\/p>\n