Entwerfen einer ansprechenden Suchfunktion – Grundlagen

Veröffentlichung des Originalartikels: 14.12.2012

​Hallo zusammen, mein Name ist Kate Dramstad, und ich bin Program Manager im SharePoint-Team für die Suche. Die Suchfunktionen in SharePoint 2013 sind so umfassend erweiterbar wie noch nie – wir bieten Designern und Entwicklern die Möglichkeit, beinahe alles zu erstellen, was in ihrer Vorstellungskraft liegt. Beim Anpassen von Suchfunktionen ist jedoch auch Vorsicht angebracht. Zwischen einer ausgewogenen und einer unübersichtlichen Seite liegt nur ein schmaler Grat, daher möchten wir einige Überlegungen zum Entwerfen einer sowohl ansprechenden als auch brauchbaren Sucherfahrung an Sie weitergeben.

Ausrichtung der gesamten Seite

Zu den wichtigsten Faktoren unserer Suchanwendung zählt die Ausrichtung aller Seitenelemente. In unserem Standardentwurf sehen Sie, dass das Einschränkungswebpart (in dem links auf der Seite einige Sortieroptionen angezeigt werden) und das SharePoint-Suchcenter-Symbol (das Vergrößerungsglas links oben) linksbündig ausgerichtet sind. Das Suchfeld, das Navigationsfeld und das Ergebnisfeld sind ebenfalls linksbündig ausgerichtet. Der obere Rand des Suchfelds schließt mit dem oberen Rand des Symbols ab; der untere Rand des Suchfelds schließt mit dem unteren Rand des Symbols ab. 

Abbildung 1. Alle Elemente auf der Suchergebnisseite sind an einem Raster ausgerichtet, das hier in grün angezeigt wird

Es mag wie ein beiläufiges Detail erscheinen, aber durch die Ausrichtung von Elementen am Raster können Benutzer die Seite leichter überblicken. Komponenten sind durch gut sichtbare vertikale und horizontale weiße Linien getrennt. Dadurch können verschiedene Komponenten auf der Seite leicht unterschieden werden, was äußerst wichtig ist. Eine falsch ausgerichtete Seite kommt Benutzern im besten Fall "komisch" vor, und im schlimmsten Fall kann der Benutzer die Suchergebnisse nicht mehr effizient überblicken. Bei falsch ausgerichteten Komponenten sehen die Ränder u. U. gezackt aus. Beim Überfliegen einer Seite mit gezackten Rändern müssen die Augen schnell hin- und herbewegt werden. Das Überfliegen einer Seite mit geraden Linien ist um vieles effizienter. 

Abbildung 2. In dieser Grafik ist das Suchsymbol nach links gerückt und nicht mehr am Raster ausgerichtet

Beim Hinzufügen einer neuen Komponente zur Seite oder bei der Neuanordnung vorhandener Komponenten ist es äußerst wichtig, sich am Raster zu orientieren, um ein möglichst reibungsloses Sucherlebnis sicherzustellen. 

Abbildung 3. Hier wurden den Inlineergebnissen eine Bewertungsfunktion mit Sternen sowie einige zusätzliche Metadaten hinzufügt. Wie Sie sehen, sind die hinzugefügten Features ebenfalls am Raster ausgerichtet.

Erscheinungsbild der gesamten Seite

Neben der Ausrichtung sind noch zahlreiche weitere Aspekte von Bedeutung. Beispielsweise sollten Sie auch auf die Anzahl von Farben sowie die Schriftart und effiziente Steuerelemente auf der Seite achten. Die Suchergebnisse sollten auf der Suchergebnisseite stets im Mittelpunkt stehen, daher sollten Sie beim Gestalten von Komponenten auf der Ergebnisseite sicherstellen, dass Benutzer nicht von den Ergebnissen abgelenkt werden. Im Folgenden finden Sie einige Tipps und Tricks.

Verwenden gängiger Farbzuordnungen

Beispielsweise ist bei Suchergebnissen generell üblich, dass der anklickbare Ergebnistitel als blauer Text und die URL eines Ergebnisses als grüner Text angezeigt wird. Durch ein Abweichen von dieser Farbgebung müssten Benutzer darüber nachdenken, was sie sehen. 

Abbildung 4. Das Vertauschen der Farben für den Titel und die URL kann den Benutzer verwirren. Verwenden Sie Farben den gängigen Standards entsprechend

Verwenden möglichst weniger verschiedener Farben

Farben werden in der Regel verwendet, um etwas hervorzuheben, z. B. eine ausgewählte Filteroption, einen Ergebnistitel oder eine URL. Die Verwendung zu vieler Farben hat jedoch zur Folge, dass alles hervorgehoben wird und die Aufmerksamkeit des Benutzers erregt.nbsp;Die Folge davon ist, dass letztendlich nichts hervorgehoben wird, sondern ein kunterbuntes Durcheinander entsteht. 

Abbildung 5. Zu viele verschiedene Farben lenken ab und Benutzer haben Schwierigkeiten zu erkennen, was wichtig ist. Verwenden Sie auf der Benutzeroberfläche möglichst wenige verschiedene Farben.

Verwenden möglichst weniger Schriftarten und -größen

Schriftarten, Schriftgrößen und Fett-/Kursivschrift werden aus ähnlichen Gründen verwendet wie Farben – um bestimmte wichtige Elemente hervorzuheben. Genau wie bei Farben erzeugt auch das Verwenden zu vieler Schriftarten und -größen den Eindruck von Unordnung. Unser Produktteam bezeichnet dies oft als "Erpresserbrief", da es so aussieht, als sei die Seite aus verschiedenen Zeitungsausschnitten zusammengestückelt!

Visuelle Einfachheit effizienter Steuerelemente

Sehen Sie sich in Abbildung 6 unter der Überschrift "Geändert" das Datumsfilterhistogramm an. Das Anzeigen dieser Einschränkung auf unserer Standardseite erschien uns zunächst riskant, da es sich um ein Steuerelement mit komplexem Erscheinungsbild handelt, das im Vergleich zu den textbasierten Filtern leicht hervorstechen könnte. Wir achteten jedoch auf eine Konsistenz der Farben mit der übrigen Seite sowie auf einfache und saubere Umrisse und Linien. Beim Hinzufügen eines benutzerdefinierten Steuerelements müssen diese Punkte beachtet werden.

Mit haben mit der Idee gespielt, einen Kreisdiagrammfilter hinzuzufügen. In Abbildung 6 sehen Sie jedoch, dass diese Einschränkung verwirrend ist. 

Abbildung 6. Der benutzerdefinierte Kreisdiagrammfilter enthält zu viele Farben und entspricht nicht dem visuellen Stil der anderen Steuerelemente; er wirkt verwirrend.

Sehen Sie jetzt in Abbildung 7 den gleichen Filter mit vereinfachten Farmschemas und Formen. 

Abbildung 7. Durch die Auswahl von bereits auf der Benutzeroberfläche vorhandenen Farben und das Beibehalten des visuellen Stils der anderen Steuerelemente wird diese Kreisdiagrammeinschränkung so interessant, dass Benutzer ihren Zweck erkunden – trotzdem werden sie dabei nicht von ihrer Aufgabe abgelenkt.

Konzeptionelle Einteilung der Seite

Beim Entwerfen einer Suchanwendung sollten Sie sowohl ästhetische als auch konzeptionelle Details berücksichtigen. Basierend auf beliebten Suchkonventionen und unseren eigenen Erfahrungen haben wir die Seitenkomponenten basierend auf der Funktionalität und dem Benutzerinteraktionsmodell in verschiedenen Bereichen organisiert. Beim Hinzufügen oder erneuten Anordnen von Komponenten sollten wir diese konzeptionelle Einteilung beibehalten, um die Benutzer nicht zu verwirren.

Beispielsweise befinden sich all unsere Filteraktionen links auf der Suchergebnisseite. Wenn Benutzer ihren Ergebnissatz filtern möchten, wissen sie immer, wo die Filter zu finden sind. Möchten Sie der Seite einen neuen Filter hinzufügen, sollte er sich am besten neben den anderen Filtern befinden, damit Benutzer nicht auf der gesamten Seite danach suchen müssen.

Abbildung 8 zeigt eine Übersicht über die konzeptionelle Einteilung der Standardseite für Suchergebnisse. 

Abbildung 8. Die Suchergebnisseite ist in fünf funktionelle Bereiche eingeteilt. Versuchen Sie beim Anpassen dieser Seite immer, neue Elemente im entsprechenden funktionellen Bereich hinzuzufügen.

Dies sind nur einige grobe Richtlinien, um Ihnen den Einstieg in das Erstellen ansprechender Suchanwendungen zu erleichtern. Ich freue mich auf Ihre Kommentare und Fragen!

Es handelt sich hierbei um einen übersetzten Blogbeitrag. Sie finden den Originalartikel unter Designing a beautiful search experience – The basics