Sie befinden sich hier: gap-medinfo.de » Methoden-Leitfaden » User Interface entwickeln

User Interface entwickeln

Als User Interface wird die Ansicht der Suchmaschine für die Nutzer bezeichnet. Der Entwicklungsprozess des User Interfaces bei der GAP-Suchmaschine wird im Folgenden kurz dargestellt.

Usability & User Experience von Suchmaschinen

User Experience / Nutzererlebnis nach DIN ISO 9241-210 beinhaltet die Wahrnehmung und Reaktionen einer Person, die aus der tatsächlichen und/oder erwarteten Benutzung eines Produktes, eines Systems oder einer Dienstleistung resultieren (Bitkom e. V. 2017).

Die folgende Abbildung zeigt die aufeinander aufbauenden, aber auch ineinander greifenden Elemente die beim User Experience Design beachtet werden müssen. Dies soll zeigen, dass das Design einer Suchmaschine nicht nur eine visuelle Ebene beinhaltet, sondern weitaus vielfältiger durchdacht werden muss, soll hier aber nicht ausführlicher behandelt werden.

Grafik User Experience
Abbildung zeigt Ausschnitt aus Garrett 2000

Gebrauchstauglichkeit / Usability ist nach der DIN ISO 9241-110 das Ausmaß, in dem ein Produkt von einem Benutzer verwendet werden kann, um bestimmte Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellend zu erreichen (Quirmbach 2013).

Hier eine Aufstellung der wahrscheinlichen Nutzererwartungen:

Der Nutzer möchte …
… schnell und einfach an die Information gelangen.
… die für ihn relevanten Informationen finden.
… das Suchsystem schnell erlernen.
… eine geringe Fehlerhäufigkeit bei der Suche.
… die Suchergebnisse filtern/anpassen können.
… Hilfestellungen und Rückmeldungen zur Suche.
… die Suchergebnisse schnell und einfach erfassen können.
… die Elemente der Suchergebnisseite strukturiert und übersichtlich angezeigt bekommen.
… ein attraktives und ein das Suchen unterstützendes Design.
… seine Erwartungen bei der Nutzung erfüllt bekommen.

Anbieteranalyse

Wir analysierten das User Interface von folgenden bekannten Suchmaschinen nach Aufbau und vorhandenen Funktionen, um eine Übersicht der vorhandenen Anbieter zu gewinnen:

Google (Größter Marktanteil, Hauptsitz in den USA); Bing (Zweitgrößter Anbieter, Hauptsitz in den USA); Startpage (Alternativer Anbieter mit erhöhtem Datenschutz, basiert auf Google, Sitz in den Niederlanden); DuckDuckGo (Sitz in den USA); Yandex (Großer Marktanteil in Russland, Sitz in Russland und den Niederlanden), Qwant (Großer Marktanteil in Frankreich, Sitz in Frankreich).

Die Auswahl der Suchmaschinen erfolgte nach weltweiter Beliebtheit und vorhandenen Funktionalitäten. Chinesische Suchmaschinen wie Baidu und SoGou wurden aufgrund der fehlenden Sprachkenntnisse nicht einbezogen.

Wir haben uns die wichtigsten Elemente der Startseite und der ersten Ergebnisseite (SERP) angesehen und darauf aufbauend dann das User Interface der GAP Suchmaschine in einem iterativen Prozess entwickelt.

Startseite

Wir haben alle oben genannten Anbieter im Hinblick auf Funktionen und Inhalte auf ihren Startseiten analysiert. Besonders auffällig ist die sehr reduzierte Darstellung von Inhalten auf den meisten Startseiten.

Schema Google Startseite
Beispiel-Wireframe der Bestandteile der Google Startseite
  • Das wichtigste Element dieser Seite ist das Eingabe-Suchfeld. Dieses Element wird in den allermeisten Fällen in der Seitenmitte dargestellt. Durch die reduzierte Darstellung liegt dieses für die Nutzer klar im Fokus. Generell wird eher auf viel Bildmaterial verzichtet (Ausnahme: Bing, großes Hintergrundbild und News-Beiträge im unteren Seitenbereich).
  • Bei Google und besonders bei Bing sind im Suchfeld weitere Sucheingabe-Funktionen untergebracht, wie eine Sprach- oder Tastatureingabe oder eine Bildsuche. Die Darstellung ist jedoch auch hier eher zurückhaltend.
  • Weitere Inhalte sind Links zu Informationen zum Anbieter, zu weiteren Produkten oder Services und News. Diese sind an den Rändern der Startseite integriert, meistens als Menü-Punkte, um nicht vom wesentlichen – der Suchfunktion – abzulenken.
  • Das Logo des Anbieters ist sehr präsent über oder neben dem Suchfeld integriert.

Durch die Analyse der Startseiten konnte ein erster Wireframe eines Layouts für die Anforderungen und Inhalte der GAP-Suche erstellt werden.

Schema GAP-Startseite
Wireframe für die Startseite der GAP-Suche
Startseite der GAP Suche mit Eingabefeld

Die Funktion der Suchvorschläge bei Eingabe ist mittlerweile standardmässig in allen Suchen vorhanden und soll daher auch in der GAP-Suche ermöglicht werden. Andererseits wurden Inhalte wie ein Benutzer-Bereich, Spracheinstellungen, Newsbereich u. ä. vorerst ausgeschlossen, da dies aus Ressourcen-Gründen nicht umsetzbar war und den Nutzern vorerst keinen Mehrwert geboten hätte.

Suchergebnisseite (SERP)

Die Suchergebnisseite (Search Engine Results Page, SERP) zeigt den Nutzern die für ihre Sucheingabe gefundenen Treffer an. Folgende Elemente sind auf den meisten der analysierten Seiten vorhanden:

  • Logo des Anbieters
  • Such-Eingabefeld mit eingetragenem Such-Term
  • Suchfilter wie z. B. Bild, Video, Musik, Sprache …
  • Anzahl der Ergebnisse
  • Suchergebnisse (pro Seite ca. 10) und bezahlte Anzeigen
  • Weitere Funktionen, wie Ähnliche Fragen, Verwandte Suchanfragen, Newsboxen, Shopping-Angebote
  • Paginierung zum Weiterblättern zu den nächsten Suchergebnissen
  • Footer mit Links zum Unternehmen und zum Datenschutz oder weiteren Angeboten
Schema SERP Google
Wireframe-Beispiel der Inhalte einer Suchergebnisseite

In vielen Suchergebnisseiten steht neben dem informativen Aspekt auch ein werbliches Interesse. Da dies für unsere Suchmaschine nicht zutrifft, haben wir keine kommerziellen Elemente wie Anzeigen oder Shopppingboxen integriert. Die Elemente der Suchunterstützung wie „Ähnliche Fragen“ oder „Verwandte Suchanfragen“ finden wir jedoch sehr hilfreich für den User. Aus Kapazitätsgründen wurden diese aber vorerst nicht integriert.

Schema SERP GAP
Wireframe-Beispiel einer GAP-Suchergebnisseite
Ausschnitt der Suchergebnisseite der GAP Suche
[Für Ansicht der ganzen Seite hier klicken]

Um den Nutzern möglichst relevante Suchergebnisse zu liefern, wurde eine Darstellung der von uns ausgewählten Qualitätsmerkmale (aktuell, nutzerfreundlich, vertrauenswürdig, verständlich) eingebaut. Bei Mouseover werden die Kategorien den Usern ausführlicher erklärt.

Schematischer Aufbau des Suchergebnisses
Schema Snippet google
Schema Snippet GAP
Beispiel-Suchergebnis
Snippet Beispiel Google
z.B. Google Suche



GAP Suche

Die User haben über einen Filter die Möglichkeit die Gewichtung der Qualitätsmerkmale selbst einzustellen.

qualitaetsmerkmale
Filtermöglichkeit der GAP Suche

Zudem wurden Standard-Elemente eingefügt, z. B. ein Footer, in dem die Projekt-Partner verlinkt wurden und benötigte Zusatzseiten wie Impressum und Datenschutz integriert wurden. Die Präsenz der offiziellen Partner im Footer soll die Vertrauenswürdigkeit der Suche aufzeigen und unterstützen.

Weiter ist am Ende der Suchergebnisse eine Paginierung zu finden, um sich mit deren Hilfe weitere Suchergebnisse anzuzeigen.

Autoren: Constanze Wegner M. A.
Erstmals veröffentlicht: 20.05.2021
Aktualisiert vom Editoren-Team: 26.07.2021

Literatur

Bitkom e.V. (2017): Usability & User Experience: Software näher zum Nutzer bringen. Leitfaden: 14.

Garrett J (2000): The Elements of User Experience. PDF verfügbar unter: http://www.jjg.net/elements/pdf/elements.pdf. (aufgerufen am 06.05.2021)

Quirmbach S (2013): Suchmaschinen – User Experience, Usability und nutzerzentrierte Website-Gestaltung. Springer-Vieweg Verlag: 60.