OPTIMIERUNG DER INTERNEN SUCHE …ODER ALLES WIE …ODER ALLES WIE GOOGLE!
SMX München, 2015
Sonja Quirmbach, Deutsche Telekom AG
AN GOOGLE MÖGEN WIR Z.B. …
„Das Wichtigste steht immer oben unter den ersten drei
Treffern!“
„Übersichtliche und strukturierte
Darstellung!“
„Sehr schnelle Ergebnisauslieferung!“
„Suchvorschläge, die auch sofort bei Eingabe erscheinen!““
„Neutrales,
20.03.2015 4
„Bewertungssternchen! Irgendwie lass ich mich ja doch davon beeinflussen“
„Seite ist angenehm zu lesen!“
„Neutrales, schlichtes Design!“
SMX München 2015 Sonja Quirmbach
DANN MACHEN WIR ES DOCH SO WIE GOOGLE …Sieht aus wie Google! => War es das wirklich?
20.03.2015 6SMX München 2015 Sonja Quirmbach
NEIN …
…nach „Google-Art“ zu optimieren bedeutet weit mehr als
nur die Farben für Titel und URL zu übernehmen!
20.03.2015 7SMX München 2015 Sonja Quirmbach
DAS LOOK & FEEL BASIERT AUF …
� User Experience (ISO 9241-210):
Das Benutzererlebnis umfasst Wahrnehmung, Reaktion einer Person, die aus der tatsächlichen und/oder erwarteten Benutzung eines Produktes .. .resultieren.
UX umfasst dabei sämtliche Emotionen, Vorstellungen, Vorlieben, Wahrnehmungen, physiologischen/psychologischen Reaktionen, Verhaltensweisen und Leistungen die sich vor, während und nach der Nutzung ergeben.
� Usability (ISO 9241-11):
Das Ausmaß, in dem ein Produkt von einem Benutzer verwendet werden kann, um bestimmte Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellendzu erreichen.
20.03.2015 9SMX München 2015 Sonja Quirmbach
ES GEHT ALSO UM …
Attraktivität
SchnelligkeitInnovation
Übersichtlichkeit
EindeutigkeitEffektivität
Zufriedenheit
Aufgabenangemessenheit
Fehlertoleranz
Lernförderlichkeit Steuerbarkeit
Orientierung
Nützlichkeit
SchönheitDesign
20.03.2015 10SMX München 2015 Sonja Quirmbach
Übersichtlichkeit
Spaß
EinfachheitVerlässlichkeit Erfolgsrate
Time To Task
Verständnis Unterstützung
JEDES KRITERIUM IST…
1. Nach belieben gestaltbar und formbar!
2. Individuell messbar, d. h. der Erfolg ist sowohl quantitativ als auch qualitativ bewertbar!
20.03.2015 11SMX München 2015 Sonja Quirmbach
ÜBER DAS VIELZITIERTE „LOOK“ BEI GOOGLE
Was heißt Look*?
� Optische Akzentuierung (Farben, Kontraste)
� Visuelle Ankerpunkte (Formen, Abstände, Bilder)
� Visuelle Hierarchien (Titel größere Schrift als Fließtext)
� Schlichtes, modernes Design (Verzicht auf ablenkende Farbspiele oder Zierelemente, wie Farbverläufe)
� Übersichtlich strukturierte Ergebnisseite (Ergebnisse haben den idealen Abstand untereinander, treten sich nicht auf die Füße/verlieren sich nicht)nicht auf die Füße/verlieren sich nicht)
� Eindeutige Sucheingabe und Funktionen
� Eindeutige Beschriftungen der Funktionen
� Eindeutige Hilfetexte
� Kontext wird hervorgehoben
*Abgeleitet von den Usability Kriterien
20.03.2015 13SMX München 2015 Sonja Quirmbach
DAS LOOK IM SUCHPROZESS …
1. Sucheingabe 2. Verarbeitung der Suchanfrage
3. Ausgabe der Suchergebnisse
4. Interaktion mit den Ergebnissen
Der Suchprozess im Einzelnen:
14
5. Hilfestellung und Rückmeldung im Suchprozess
� Jeder Prozessschritt und jede Seite lässt sich ausgestalten.
SMX München 2015 Sonja Quirmbach
DAS LOOK IM SUCHPROZESS …
� Jeder Prozessschritt bzw. jede Seite lässt sich ausgestalten.
15SMX München 2015 Sonja Quirmbach
ÜBER DAS VIELZITIERTE „FEEL“ BEI GOOGLE
Was heißt Feel*?
� Hilfe und Unterstützung (Starke Nutzerführung von Beginn an, immer Rückmeldung vom System)
� Nützlichkeit (Persönlicher Kontext der Suchanfrage wird beachtet)
� Sinnhaftigkeit (Immer sinnvolle Ergebnisse)
� Komfort (Angenehmes, komfortables Interface)
� Verlässlichkeit (Schnell lesbare Ergebnisübersicht, die Orientierung bietet, immer gleich aufgebaut)� Verlässlichkeit (Schnell lesbare Ergebnisübersicht, die Orientierung bietet, immer gleich aufgebaut)
� Eindeutigkeit (Intuitive Bedienung)
� Vorhersehbarkeit (man weiß immer, wohin man bei Klick auf ein Ergebnis gelangt)
� Persönlichkeit/Individualität (Google Logo mit verschiedenen Themen)
� Keine Störer (außer Werbung)
*Abgeleitet aus den User Experience Kriterien
20.03.2015 17SMX München 2015 Sonja Quirmbach
DAS FEEL IM SUCHPROZESS …
1. Sucheingabe
Don‘tDon‘tDon‘tDon‘t makemakemakemake
MEMEMEME thinkthinkthinkthink!!!!
19SMX München 2015 Sonja Quirmbach
1. Sucheingabe
2. Verarbeitung der Suche
Don‘tDon‘tDon‘tDon‘t makemakemakemake
MEMEMEME thinkthinkthinkthink!!!!
50 50 50 50 wayswayswaysways totototo kill kill kill kill
YOURYOURYOURYOUR customercustomercustomercustomer!!!!
DAS FEEL IM SUCHPROZESS …
20SMX München 2015 Sonja Quirmbach
1. Sucheingabe
2. Verarbeitung der Suche
3. Ausgabe der Suchergebnisse
Don‘tDon‘tDon‘tDon‘t makemakemakemake
MEMEMEME thinkthinkthinkthink!!!!
50 50 50 50 wayswayswaysways totototo kill kill kill kill
YOURYOURYOURYOUR customercustomercustomercustomer!!!!Just Just Just Just givegivegivegive MEMEMEME a a a a
reasonreasonreasonreason whywhywhywhy…………
DAS FEEL IM SUCHPROZESS …
21SMX München 2015 Sonja Quirmbach
1. Sucheingabe
2. Verarbeitung der Suche
3. Ausgabe der Suchergebnisse
4. Interaktion mit den
Don‘tDon‘tDon‘tDon‘t makemakemakemake
MEMEMEME thinkthinkthinkthink!!!!
50 50 50 50 wayswayswaysways totototo kill kill kill kill
YOURYOURYOURYOUR customercustomercustomercustomer!!!!Just Just Just Just givegivegivegive MEMEMEME a a a a
reasonreasonreasonreason whywhywhywhy…………
DAS FEEL IM SUCHPROZESS …
22
4. Interaktion mit den Ergebnissen
Keep Keep Keep Keep MEMEMEME in a in a in a in a
goodgoodgoodgood flowflowflowflow!!!!
SMX München 2015 Sonja Quirmbach
1. Sucheingabe
2. Verarbeitung der Suche
3. Ausgabe der Suchergebnisse
4. Interaktion mit den
Don‘tDon‘tDon‘tDon‘t makemakemakemake
MEMEMEME thinkthinkthinkthink!!!!
50 50 50 50 wayswayswaysways totototo kill kill kill kill
YOURYOURYOURYOUR customercustomercustomercustomer!!!!Just Just Just Just givegivegivegive MEMEMEME a a a a
reasonreasonreasonreason whywhywhywhy…………
DAS FEEL IM SUCHPROZESS …
23
4. Interaktion mit den Ergebnissen
5. Hilfestellung und Rückmeldung im Suchprozess
Keep Keep Keep Keep MEMEMEME in a in a in a in a
goodgoodgoodgood flowflowflowflow!!!!
Don‘tDon‘tDon‘tDon‘t disturbdisturbdisturbdisturb
MEMEMEME!!!!
DAS FEEL IM SUCHPROZESS …
� Jedes Gefühl, das der Nutzer haben (fühlen) soll lässt
sich formen und ausgestalten.
SMX München 2015 Sonja Quirmbach
WENN AUS KATZEN LÖWEN WERDEN
Look
20.03.2015 27SMX München 2015 Sonja Quirmbach
Was WIR denken, wie wir etwas gestalten …
(„Schnurrr“)
WENN AUS KATZEN LÖWEN WERDEN
Look Feel
20.03.2015 28SMX München 2015 Sonja Quirmbach
Was WIR denken, wie wir etwas gestalten …
(„Schnurrr“)
Was die Gestaltung bei den NUTZERNbewirken kann ...
(„Fauuuch“)
1. STATION: DIE SUCHEINGABE
Gestaltungselemente:
� Sucheingabefeld
� Suchebutton Don‘tDon‘tDon‘tDon‘t makemakemakemake
MEMEMEME thinkthinkthinkthink!!!!
Look Feel
20.03.2015 29
� Suchvorschläge
� Website (Position)
MEMEMEME thinkthinkthinkthink!!!!
SMX München 2015 Sonja Quirmbach
Problem:
�Abgrenzung Eingabefeld mit Hintergrund
�Darstellung allgemein
UX Kriterium:
DIE AUSWIRKUNG VON DESIGN …
20.03.2015 30
UX Kriterium:
�Sichtbarkeit
�Eindeutigkeit
�Vorhersehbarkeit
�Effizienz
SMX München 2015 Sonja Quirmbach
HERAUSFORDERUNG VERSUS ÜBERFORDERUNG …
Problem:
� Erweiterung bei Sucheingabe erscheint jedes mal
� Nicht logische Aktionen werden an dieser Stelle angeteasert (z. B. Filialsuche)
20.03.2015 31
UX Kriterium:
� Übersichtlichkeit
� Sinnhaftigkeit
� Erwartungshaltung
� Vorhersehbarkeit
SMX München 2015 Sonja Quirmbach
2. STATION: VERARBEITUNG DER SUCHERGEBNISSE
Gestaltungselemente:
� Weiterer Prozessverlauf
� Performance (Schnelligkeit bei der Ergebnisauslieferung) 50 50 50 50 wayswayswaysways totototo kill kill kill kill
YOURYOURYOURYOUR customercustomercustomercustomer!!!!
Look Feel
20.03.2015 32
� Die Arbeit hat der Suchmaschinenbetreiber! Und zwar mit …
� Homonyme
� Synonyme
� Fehlschreibweisen
� Vorschläge
� Alles…nur keine Null Treffer!
YOURYOURYOURYOUR customercustomercustomercustomer!!!!
SMX München 2015 Sonja Quirmbach
HERAUSFORDERUNG ERSCHLIEßUNG DER ERGEBNISSE …Problem:
� Nutzer muss 2mal die Suche eingeben
� Muss erkennen, das seine Frage im DropDown steht
� Umständliche Zielführung
20.03.2015 33
UX Kriterium:
� Komfort
� Eindeutigkeit
� Einfachheit
� Sinnhaftigkeit
SMX München 2015 Sonja Quirmbach
HERAUSFORDERUNG ERSCHLIEßUNG DER ERGEBNISSE …Problem:
� Fehlendes Bild im Ergebnis
UX Kriterium:
� Eindeutigkeit
� Sinnhaftigkeit
Nützlichkeit
20.03.2015 34
� Nützlichkeit
SMX München 2015 Sonja Quirmbach
3. STATION: AUSGABE DER SUCHERGEBNISSE
Gestaltungselemente:
� Aufbau der Seite
� einzelnes Ergebnis Just Just Just Just givegivegivegive MEMEMEME a a a a
Look Feel
20.03.2015 35
� einzelnes Ergebnis
� Texte (Textwüste versus Leere)
� Bilder, Medien
� Akzentuierung
� Abstände
� Informationscent, Relevanz
Just Just Just Just givegivegivegive MEMEMEME a a a a
reasonreasonreasonreason whywhywhywhy…………
SMX München 2015 Sonja Quirmbach
Problem:
� Dunkelgraue Schrift auf mittelgrauem Hintergrund
� Schriftgröße
UX Kriterium:
� Leserlichkeit
� Scanbarkeit
� Komfort
DIE AUSWIRKUNG VON DESIGN …
20.03.2015 36
Problem:
� Benennung: Sortieren nach „Treffergüte“
UX Kriterium:
� Verständnis
� Eindeutigkeit
� Komfort
SMX München 2015 Sonja Quirmbach
Problem:
�Abstand linker Textrand zum Browserfenster
UX Kriterium:
�Orientierung
�Abgrenzung
SIND WIR MAL GAAANZ GENAU …
20.03.2015 37
�Abgrenzung
�Scanbarkeit
�Komfort
SMX München 2015 Sonja Quirmbach
ERGEBNISMENGE UND AKZENTUIERUNG…
20.03.2015 38
Gleiches Seitenverhältnis!SMX München 2015 Sonja Quirmbach
DIE SACHE MIT DER RELEVANZ …
Problem:
� Wo genau liegt der Unterschied zwischen 83, 85% und 86%?
UX Kriterium:
� Nachvollziehbarkeit
Transparenz
20.03.2015 39
� Transparenz
� Sicherheit (Relevanzanzeige verunsichert eher, als das sie Sicherheit gibt!)
SMX München 2015 Sonja Quirmbach
RUCKELN UND ZUCKELN …� Bei Mouse Over
noch mehr Infos anzeigen hilft nur dann, wenn die einen Mehrwert bieten
� Weitere Suchbegriffe bei
20.03.2015 40
Suchbegriffe bei jedem einzelnen Ergebnis
SMX München 2015 Sonja Quirmbach
4. STATION: INTERAKTION MIT DEN ERGEBNISSEN
Gestaltungselemente:
� Sortieroptionen
� Kategorien Keep Keep Keep Keep MEMEMEME in a in a in a in a
goodgoodgoodgood flowflowflowflow!!!!
Look Feel
20.03.2015 41
� Kategorien
� Filter
� Recommendations
� Weitere Funktionen
goodgoodgoodgood flowflowflowflow!!!!
SMX München 2015 Sonja Quirmbach
ALLES AUF EINMAL …
Problem:
� Funktion für „Filter aufheben“ versteckt
� Darstellung als Textlink, wie die Kategorien
20.03.2015 42SMX München 2015 Sonja Quirmbach
UX Kriterium:
� Übersichtlichkeit
� Orientierung
� Eindeutigkeit
DIE SACHE MIT DEM ZEILENUMBRUCH …
Problem:
� Zeilenumbrüche innerhalb der Kategorien erschweren das Lesen
20.03.2015 43SMX München 2015 Sonja Quirmbach
Lesen
UX Kriterium:
� Scanbarkeit, Leserlichkeit
� Effizienz
SINNHAFTIGKEIT VON ELEMENTEN …Problem:
� Art der Visualisierung für „Treffer in Personen“ zeigt zwei Texteingabefelder, die wie eine Suche aussehen
UX Kriterium:
20.03.2015 44
UX Kriterium:
� Eindeutigkeit
� Sinnhaftigkeit
� Verständnis
SMX München 2015 Sonja Quirmbach
ERWARTUNGSHALTUNG …Jede Funktion muss für den Nutzer einen ersichtlichen Mehrwert haben!
Es muss sich für ihn lohnen, dass er sich die Mühe macht und auf etwas klickt.
20.03.2015 45SMX München 2015 Sonja Quirmbach
5. DIE BASIS: HILFESTELLUNG UND RÜCKMELDUNG
Zu jedem Problem … gibt es eine Lösung …
Don‘tDon‘tDon‘tDon‘t disturbdisturbdisturbdisturb
MEMEMEME!!!! LookFeel
20.03.2015 46
Zu jedem Problem … gibt es eine Lösung …
„Wenn ich was nicht verstehe oder weiß?“ Hilfetexte/FAQs anbieten
„Wenn die Suche mal wieder etwas länger dauert…?“ Performanceanzeige
„Wenn die Suchmaschine nicht funktioniert?“ Technische Fehler benennen
„Wenn etwas nicht so geht wie ICH es will?“ Bedienungsfehler hinweisen
„Null Treffer? Öh…das gibt es doch gar nicht!“ Stimmt! Immer Auswege anbieten
SMX München 2015 Sonja Quirmbach
EIN SUCHEINTERFACE WIE GOOGLE BEDEUTET…
... jedem Pixel einen Sinn und eine Bedeutung geben!
… gezielte Kommunikation mit dem Nutzer!
20.03.2015 49
… nichts dem Zufall überlassen!
… immer im Flow halten!
„Schnurrr“
SMX München 2015 Sonja Quirmbach