Fallstrick 1: Kleiner Bildschirm, dicke Finger

Viele der Schwierigkeiten auf der mobilen Plattform sind auf die extrem begrenzte Bildschirmfläche zurückzuführen. Ein häufiger Fehler besteht darin, alle verfügbaren Daten so anzeigen zu wollen, wie man es auf einem Desktop tun würde.

Darüber hinaus ist die Übertragung von Informationen vom Kopf in die Anwendung einfach, wenn der Nutzer alle zehn Finger einer Tastatur in Standardgröße verwenden kann. Auf einem mobilen Display mit nur zwei Daumen gestaltet sich dies deutlich schwieriger. Die Informationsausgabe auf Mobilgeräten ist erheblich reduziert.

Fallstrick 2: Mobile Nutzer sind nun mal mobil.

Wir nutzen unsere Mobiltelefone oft unter suboptimalen Bedingungen, beispielsweise in einem wackeligen Zug oder beim Gehen. Solche Umgebungen erschweren die Konzentration und können die Informationsaufnahme für den Nutzer beeinträchtigen.

Fallstrick 3: Netzwerk oder dessen Fehlen

Die Möglichkeit, sein Gerät unterwegs zu nutzen und mit dem Internet verbunden zu sein, ist ein Vorteil von Mobiltelefonen. Doch die Netzabdeckung ist selbst in Großstädten nicht immer optimal. Schlechte Verbindungen sind für den Nutzer äußerst frustrierend: Planen Sie daher vorausschauend und berücksichtigen Sie mögliche Offline-Zeiten.

Fallstrick 4: Zielkonflikt zwischen Quantität und Qualität

Angesichts der oben genannten Einschränkungen ist die Anzahl der angezeigten Ergebnisse und der Umfang der Informationen zu jedem Ergebnis ein wichtiger Faktor. Weniger Ergebnisse pro Seite bedeuten höhere Anforderungen an die Relevanz – bei nur fünf angezeigten Ergebnissen darf kein einziges unpassendes Ergebnis auftauchen. Die Informationsmenge pro Ergebnis sollte auf ein Minimum beschränkt werden, um zwei einfache Ziele zu erreichen:

1. Ist dieses Ergebnis für die Suchanfrage relevant?
2. Ist dieses Ergebnis an sich schon interessant?

Berücksichtigen Sie auch Filter und Verfeinerungsoptionen. Auf einem Desktop bietet die Seitenleiste reichlich Platz für Filter und Facetten; wenn hingegen der Platz auf dem Bildschirm begrenzt ist und die Benutzeroberfläche touchbasiert ist, müssen Sie Prioritäten setzen und das eine dem anderen vorziehen.

Mobile Geräte sollen den Nutzern das Gefühl vermitteln, alles auf Knopfdruck zur Hand zu haben, doch hinter den Kulissen müssen wir bei der Vielzahl an Anzeigeoptionen unserer mobilen App selektiv vorgehen.

Fallstrick 5: Die Suche ist ein aktiver Prozess

Ein Touchscreen ist ideal, wenn der Nutzer Inhalte eher passiv konsumiert, doch die Suche ist komplexer. Der Nutzer muss etwas eingeben und anschließend die Suchergebnisse auswerten. Der Suchprozess ist alles andere als eine Ein-Klick-Aktion: Die Minimierung des Nutzeraufwands, beispielsweise der Anzahl der Klicks, ist geschäftskritisch. Wir müssen relevante Inhalte mit so wenigen Eingaben wie möglich bereitstellen.

Fallstrick 6: Hohe Nutzererwartungen

Nutzer sind schnelle und reaktionsschnelle Suchergebnisse gewohnt. Google liefert seit Jahren relevante Suchvorschläge in Millisekunden direkt während der Eingabe. Auch Amazon bietet Zugriff auf seinen riesigen Katalog, der mit einem automatischen Suchvorschlagsmenü und dynamischen Filtern durchsucht werden kann. Um ein wirklich herausragendes Sucherlebnis zu bieten, müssen wir die Erwartungen der Nutzer, die von den großen Anbietern gesetzt wurden, erfüllen oder sogar übertreffen.

Abschnitt 2: Wie, was und warum – Lösungen für Fallstricke der mobilen UX

Nachdem wir uns mit den häufigsten Problemen befasst haben, die mobile Suchfunktionen mit sich bringen können, welche Schritte können wir unternehmen, um diese zu beheben?

Die Lösung liegt in einem strategischen Zusammenspiel von Suchleiste und Suchergebnissen. Das betrifft die Gestaltung der Suchleiste, die Darstellung auf dem Suchbildschirm und den eigentlichen Grund für die Suche: die Suchergebnisse selbst. Alle Elemente müssen harmonisch zusammenwirken, um eine stimmige und komfortable Nutzererfahrung zu gewährleisten.

Anleitung: Konfigurieren der Suchleiste

Die Entscheidung, wie Sie Ihre Nutzer durch die mobile Suche führen, hängt von vielen Faktoren ab: der Größe und Komplexität Ihrer Daten, dem Vorwissen Ihrer Nutzer über die zu durchsuchenden Daten und Ihrem Wunsch, die Suchintention und die Informationssuche in Einklang zu bringen. Die Form und Position Ihrer Suchleiste auf dem mobilen Display sind wichtige Aspekte, die das Nutzerverhalten in Ihrer App beeinflussen. Es gibt drei gängige Optionen: vollständige Suchleiste, Tab-Leiste und Symbol.

Vollständige Suchleiste

Die Suchleiste in voller Länge wird in der Regel oben auf dem Hauptbildschirm angezeigt und ermöglicht den sofortigen Zugriff auf die Suchfunktion.

Wenn es bei Ihrem Produkt oder Ihrer App darum geht, Ihren Nutzern einen schnellen und einfachen Zugriff auf eine Vielzahl von Inhalten zu ermöglichen, dann ist dies der richtige Weg. Die Suche rückt in den Mittelpunkt der Nutzerinteraktion, wobei die Ergebnisse bereits während der Eingabe darunter angezeigt werden.

Registerleiste

Die Tab-Leiste ist möglicherweise gar keine Leiste, sondern oft ein Symbol, das Nutzer beim Antippen zu einer separaten Suchseite führt. Die Tab-Leiste ist dann sinnvoll, wenn die Suche nicht der primäre Zugriffspunkt auf Ihre Inhalte ist, Sie sie Nutzern aber dennoch anbieten möchten. Spotify beispielsweise bevorzugt Vorschläge für Alben, Playlists oder Songs auf der Startseite, aber ein bestimmter Song kann über das entsprechende Symbol in der Tab-Leiste aufgerufen werden.

Symbol

Das Symbol für die kontextbezogene Suche gehört zu den am wenigsten aufdringlichen Optionen. Es ist mit Abstand der flexibelste Ansatz – man kann die Schaltfläche nur in den Bereichen der App anzeigen, in denen eine Suche sinnvoll ist.

Bei Gmail besteht der Hauptanwendungsfall darin, E-Mails im Posteingang zu durchsuchen. Über das Suchsymbol in der Navigationsleiste oben rechts können Nutzer alle E-Mails durchsuchen.

Was: Suchabsicht über den Suchbildschirm anzeigen

Sobald in einem Suchfeld über eine der zuvor beschriebenen Suchkonfigurationen Text eingegeben wird, wird die Suchabsicht des Nutzers deutlich. Diese Absicht kann als Übergang zwischen der Hauptansicht (ohne Suchfunktion) und der Ergebnisseite verstanden werden.

Durch eine gezielte Benutzeroberfläche lässt sich dieser Prozess erleichtern und die Suchanfrage des Nutzers unterstützen. Anstatt einer standardmäßigen leeren Tabellenansicht, die auf die Suchanfrage des Nutzers wartet, um Inhalte abzurufen und anzuzeigen, gibt es bessere Möglichkeiten, den Nutzer gezielter zum Warenkorb zu führen.

• Letzte Suchanfragen: Wenn ein Nutzer nach einem Produkt sucht, ist es sinnvoll, ihm einen praktischen Schnellzugriff auf frühere Suchanfragen zum Vergleich anzubieten.
• Trend-Suchanfragen: Leiten Sie den Nutzer, indem Sie ihm anzeigen, wonach andere Nutzer in Ihrer App suchen. So kann auch ein unentschlossener Kunde Produkte leichter entdecken.
• Kategorien: Bieten Sie dem Nutzer verschiedene Filteroptionen mit durchsuchbaren Themenbereichen an. Durch Verfeinerung der Suche und Erhöhung der Spezifizierung kann die Trefferrate beschleunigt werden.

Warum: Strategie zur Ergebnisdarstellung

Die Suchergebnisseite beantwortet die Suchanfrage des Nutzers und sollte dessen Hauptmotivation für den Besuch Ihres Onlineshops erfüllen. Sie muss relevant und übersichtlich sein – keine leichte Aufgabe bei einem großen Sortiment oder unklaren Suchkriterien. Die Suchfunktion während der Eingabe kann hier Abhilfe schaffen. Heutzutage erwarten Nutzer eine sofortige Suche, nicht nur hinsichtlich der Geschwindigkeit des Abrufs, sondern auch der Aktualisierungsfrequenz der Ergebnisse. Mit der Suchfunktion während der Eingabe liefert jeder Tastendruck neue, sofort aktualisierte Ergebnisse.

Hier sind drei UX-Strategien, die auf der Funktion „Suche während der Eingabe“ basieren:

Suchvorschläge

Suchvorschläge bieten eine kurze Pause zwischen Suche und Ergebnissen, indem sie Nutzern helfen, die Suchergebnisse besser zu filtern. Nach Eingabe einer Suchanfrage werden vollständige Suchanfragen generiert, sortiert nach Beliebtheit oder Relevanz. Angenommen, ich gebe „iPhone“ in das Suchfeld ein. Die angezeigten Vorschläge basieren auf der Texteingabe und enthalten somit beispielsweise Vorschläge wie „iPhone-Hülle“ und „iPhone-Kabel“.

Bewährte Verfahren sehen vor, die Anzahl der Tippen und Scrollen zu minimieren, die ein Nutzer ausführen muss, bevor er sein Ziel erreicht. Zwar fügen Suchvorschläge einen weiteren Schritt hinzu, doch sind sie eine hervorragende Lösung für Nutzer, die riesige Datensätze durchsuchen und sich angesichts der Vielzahl möglicher Ergebnisse möglicherweise überfordert fühlen.

Anstatt sich in einer Flut von Ergebnissen zu verlieren und einen zusätzlichen Fingertipp zu benötigen, sind Suchvorschläge die bessere Wahl, um schnell relevante Ergebnisse zu erhalten.

Sofortige Ergebnisse

Sofortige Ergebnisse beantworten das „Warum“, indem sie den umgekehrten Weg gehen. Sie liefern eine begrenzte Anzahl von Ergebnissen, da davon ausgegangen wird, dass die Suche abgeschlossen ist. Dieser Ansatz ist besonders effektiv, wenn der Datensatz begrenzt ist oder die Suchvorstellung klar definiert ist. Im Beispiel von Spotify beschränkt das Produkt die Suche naturgemäß auf Alben, Songs, Playlists und Künstler. Bei einer Suche wie „Beatles“ wird als erstes Ergebnis „The Beatles (Künstler)“ angezeigt, wodurch unnötige Schritte zwischen Suchanfrage und Ergebnis vermieden werden. Zusätzliche Informationen zur Eingabe, wie Alben, Songs und Playlists, werden in begrenzter Anzahl angezeigt, während der Nutzer weiter nach unten scrollt.

Kombination aus Suchvorschlägen und sofortigen Ergebnissen

Es ist auch möglich, beide Strategien zu kombinieren, um Nutzern schneller zum gewünschten Inhalt oder Produkt zu führen. Diese Kombination ist besonders effektiv bei großen Datensätzen, wenn gleichzeitig relevante Ergebnisse identifiziert werden können. Der Google Play Store nutzt diese Strategie beispielsweise, um Suchergebnisse für „Airbnb“ anzuzeigen. Das erste Ergebnis führt direkt zur Airbnb-App – natürlich gibt es Millionen anderer Apps, aber Airbnb ist tatsächlich die wahrscheinlichste Übereinstimmung. Darunter sieht der Nutzer detailliertere Ergebnisse, die der ursprünglichen Suchanfrage sehr nahekommen.

Abschnitt 3: Design für ästhetisches mobiles UX

Was die Benutzererfahrung (UX) auf Mobilgeräten angeht, sieht die Sache etwas anders aus. Natürlich ist es wichtig, dass sich Ihre Suchleiste ästhetisch in das Design Ihrer mobilen Website einfügt. Aber spiegelt Ihre mobile Anzeige im Hinblick auf die Benutzererfahrung den aktuellen Status Ihrer Suche oder Ihres Filters wider? Unterstützt und ergänzt sie diesen, um ein Erlebnis zu schaffen, das sowohl optisch ansprechend als auch zweckmäßig in der Nutzung ist?

Ergebnisse richtig anzeigen

Bei der Anzeige von Suchergebnissen sollte der Endnutzer den gewünschten Artikel einfach sehen und auswählen können. Daher ist es wichtig, die Informationen visuell ansprechend darzustellen und gleichzeitig den begrenzten Bildschirmplatz optimal zu nutzen. Analysieren Sie zunächst, wie Kunden Ihren Katalog durchsuchen. Bei Artikeln, die visuell ausgewählt werden, wie Schuhe oder Kleidung, könnten Sie die Suchergebnisse als vergrößerte Bilder präsentieren.

Im Gegensatz dazu können Filter wie Preis, Entfernung und Bewertungen genutzt werden, um Ergebnisse für Einträge anzuzeigen, bei denen die technischen Details eine große Rolle spielen, wie beispielsweise bei Restaurants.

Anzeige von Rückmeldungen beim Filtern

Filter sorgen für mehr Präzision und ermöglichen es, eine große Anzahl von Ergebnissen schnell zu überblicken. Es ist jedoch eine Herausforderung, sowohl Filter als auch Suchergebnisse in derselben Ansicht darzustellen, ohne dass der Bildschirm überladen wirkt.

Meistens müssen wir jedoch eine eigene Ansicht mit allen möglichen Filtern anzeigen. Gute Filterfunktionen haben eines gemeinsam: Sie geben dem Nutzer eine Rückmeldung, wenn er einen Filter anwendet.

Amazon zeigt beispielsweise ein Feld an, das zwei Drittel der Bildschirmbreite auf Mobilgeräten einnimmt. Wenn ein Filter angewendet wird, wird die Ergebnisansicht der „Hintergrundsuche“ sofort aktualisiert, um die neuen Ergebnisse anzuzeigen:

Ein weiteres Beispiel ist die Airbnb-App, bei der eine Schaltfläche am unteren Bildschirmrand jedes Mal, wenn sich ein Filter ändert, die Anzahl der Ergebnisse anzeigt.

Relevante Ergebnisse anzeigen

Relevanz ist auf Mobilgeräten entscheidend, da der kleine Bildschirm nur eine begrenzte Anzahl an Suchergebnissen anzeigt. Auf dem Desktop muss das relevanteste Ergebnis nicht unbedingt an erster Stelle stehen, da der Nutzer einfach weiter scrollen kann. Auf Mobilgeräten sind aufgrund des begrenzten Platzes nur die obersten Suchergebnisse sichtbar, daher müssen diese relevant sein.

Abschnitt 4: Benutzerfreundlichkeit: Respektieren Sie die Bemühungen des Benutzers

Die Tippfehler erkennen

Tippfehler sind leider allzu häufig, insbesondere auf kleinen Mobilbildschirmen. Ein Mechanismus, der Tippfehler toleriert, ermöglicht es, die Absicht des Nutzers vorherzusehen und dennoch Ergebnisse zu liefern, die dem Sinn der falsch geschriebenen Eingabe möglichst nahekommen.

Lassen Sie sie die Ergebnisse scannen.

Durch das Hervorheben von Ergebnissen können Nutzer die Resultate schnell überfliegen und verstehen, warum sie bestimmte Ergebnisse oder Vorschläge erhalten. Es gibt zwei effektive Anwendungsbereiche für das Hervorheben. Das Standardhervorheben, das exakt der Suchanfrage entspricht, eignet sich am besten für die Anzeige von Sofortergebnissen.

Die zweite Methode ist die invertierte Hervorhebung, bei der alles außer der Suchanfrage hervorgehoben wird. Diese Strategie ist besonders nützlich für Suchvorschläge .

Umgebung: Geschwindigkeit und Konnektivität

Die Suchfunktion muss für die Nutzung auf Mobilgeräten mit schlechter Internetverbindung optimiert sein. Sie muss auf diese Umstände bestmöglich reagieren, um eine reibungslose Nutzererfahrung zu gewährleisten.

Bei langsamer Internetverbindung gibt es Optionen, die dem Nutzer ein Gefühl des Fortschritts und Feedback vermitteln können:

1. Verwenden Sie eine Fortschrittsanzeige wie drehende Räder, Ladesymbole oder Fortschrittsbalken.
2. Zeigen Sie einen Bildschirm mit Platzhaltern an, wie im obigen Screenshot dargestellt. Dies vermittelt dem Benutzer ein Gefühl von Fortschritt und Feedback.
3. Implementieren Sie Lazy Loading, bei dem Sie bestimmten Inhaltstypen Priorität vor anderen einräumen und diese separat abrufen.

Im gefürchteten Fall, dass überhaupt keine Netzwerkverbindung besteht, können Sie dem Benutzer bessere Optionen anbieten, als nur eine Schaltfläche „Wiederholen“ anzuzeigen: Sie können die besten Ergebnisse offline zwischenspeichern und dann eine einfache lokale Suchfunktion anbieten.

Eine bessere Lösung wäre eine schlanke, vollwertige Suchmaschine direkt auf dem Gerät, die die meisten Funktionen einer Online-Suchmaschine bietet. Dies ist jedoch keine leichte Aufgabe und erfordert, wie wir bei der Entwicklung mit Algolia feststellen mussten, viel Know-how, Ressourcen und Zeit.

Abschnitt 5: Wichtigste Erkenntnisse

Die Suche muss ein nahtloser Dialog zwischen dem Nutzer und dem Produkt sein, insbesondere auf mobilen Geräten. Im Sinne einer hervorragenden Nutzererfahrung sollte die Führung Ihrer Kunden von der Suchanfrage bis zum Warenkorb reibungslos und unkompliziert verlaufen.

Damit Käufer ihre Fragen überhaupt formulieren können, sind Strategien zur Überwindung der durch mobile Displays bedingten Einschränkungen wichtig.

1. Physische Herausforderungen wie der Fat-Finger-Effekt und die unregelmäßige Konnektivität eines Netzwerks müssen bewältigt werden.
2. Auch wenn die Platzierung Ihrer Suchleiste oder die Art und Weise, wie die Ergebnisse angezeigt werden, auf den ersten Blick selbstverständlich erscheinen mag, macht die Anwendung der richtigen UX-Strategie einen riesigen Unterschied, wenn es darum geht, dem Nutzer einen schnelleren Weg zum Warenkorb zu ermöglichen.
3. Auf Mobilgeräten sind Nutzer unterwegs und haben oft eine schlechte oder gar keine Internetverbindung. Die Suchfunktion muss sich an diese Umstände anpassen, um ein reibungsloses Nutzererlebnis zu gewährleisten.
4. Mobile Geräte sind ein starker Katalysator, um Käufer mit Ihrer Website zu verbinden: Durch leistungsstarke Such- und Navigationsfunktionen können Sie Hindernisse beim Finden des richtigen Produkts beseitigen und den Warenkorbwert sowohl auf Mobilgeräten als auch im Rahmen von Omni-Channel-Strategien steigern.

Über Algolia

Algolia ermöglicht E-Commerce-Unternehmen, schnelle, relevante und intuitive Such- und Entdeckungserlebnisse zu schaffen, die Konversionen, Engagement und Kundenbindung steigern. Wir bieten personalisierte Einkaufserlebnisse und unterstützen Ihre digitale Strategie mit fortschrittlichen Suchtechnologien wie der dialogorientierten Suche. Mehr als 9.000 Unternehmen wie Under Armour, Lacoste, Birchbox, Dior, L'Occitane En Provence und Bringmeister vertrauen auf Algolia.