Mobile UX: Die best practices im Überblick

Die Mobile User Experience hat sich in den letzten Jahren deutlich verbessert. Das heißt aber leider nicht, dass alle mobile Websites eine gute Leistung erbringen. User sind mit allgemeinen als auch spezifischen Problemen konfrontiert, die einzeln oder in Kombination zum Abbruch führen können - es gibt also noch viel Raum zur Verbesserung. Wie sehen also typische „Stolperfallen“ aus und wie kann man sie aus dem Weg schaffen? 

Mobile Homepage

Werbeanzeigen im primären Bereich
Das Platzieren von Anzeigen in primären Bereichen der mobilen Startseite führt zu mehreren Problemen. Zum einen kommt es zu Übersichtsproblemen. Anzeigen sind oft in voller Breite oder nehmen gar den gesamten Sichtbereich ein, wodurch wichtige Inhalte aus dem Blickfeld geraten. Darüber hinaus sind andere Website-Elemente, die auf Desktop-Websites dargestellt werden, auf Mobilgeräten häufig ausgeblendet. Zum anderen fühlen sich User von zu vielen Inhalten überwältigt. Beispielsweise, wenn mehr als eine Anzeige im Darstellungsbereich sichtbar ist oder wenn die Anzeige selbst visuell sehr ablenkend ist. Diese beiden Faktoren führen schlussendlich zu Interaktionsproblemen. Diese summieren sich im Laufe der Zeit und verschlechtern das Gesamterlebnis und tragen so dazu bei, dass Benutzer eine negative Wahrnehmung der Website oder der Marke entwickeln. Wenn Sie sich also entscheiden, Anzeigen auf der Startseite einer mobilen Websiteversion einzufügen, stellen Sie sicher, dass die Anzeigen nicht übermäßig hervorstechen (z. B. nicht mehr als die Hälfte des vertikalen Platzes des Darstellungsbereichs einnehmen) oder zu visuell ablenkend sind. Wählen Sie einfache Bilder und Grafiken statt stark ablenkendet Inhalte bzw. Animationen und minimieren Sie so die Wahrscheinlichkeit von Interaktionsproblemen.

Linktexts und vorgeschlagene Pfade
User, die auf der Homepage auf empfohlene Pfade tippen, landen immer wieder in "falschen" Bereichen – teilweise ohne es zu bemerken. Dies kann dazu führen, dass User die Website verlassen, da sie davon ausgehen, dass die Website entweder fehlerhaft sei oder die gesuchten Produkte nicht verfügbar wären. Auf mobilen Websites besteht zudem die Gefahr, dass User einen Tunnelblick entwickeln, da der kleinere Darstellungsbereich ihre Fähigkeit einschränkt, sich einen Überblick über ihren aktuellen „Standort“ zu verschaffen. Während das Bewerben von Bereichen auf der Homepage vielen Benutzern helfen kann, auf hochrelevante Produktlisten zuzugreifen, verliert eine Untergruppe von Usern jeglichen Kontext darüber, wo sie sich in der Site-Hierarchie befinden. Dies passiert dann, wenn die Bereichslinks unklar sind.
Um dieses Problem zu beheben, gibt es zwei Möglichkeiten:

• Zeigen Sie nur Bereiche der obersten Ebene auf der Startseite an.
• Fügen Sie den vollständigen Umfang in den Link oder die Schaltfläche selbst ein – zum Beispiel sowohl die Kategorie- als auch die Unterkategorienamen.

Mobile On-Site Search

Suchbegriffe und Suchanfragen
Suchanfragen, die mit einer Genauigkeit von weniger als 100 % eingegeben werden, sind beim mobilen Surfverhalten üblich. Die Verwendung mobiler Tastaturen erweist sich dabei als besonders fehleranfällig. Falsch geschriebenen Benutzerangaben werden zwar häufig durch automatische Vervollständigungen ersetzt, jedoch sind diese nur zu oft irrelevant. Da die automatische Vervollständigung eine Schlüsselrolle bei frühen Suchinteraktionen spielt, können unerwartete Vorschläge aufgrund kleiner Tippfehler dazu führen, dass User ihre Produktfindungsstrategien ändern oder die Suche komplett abgebrochen wird.

Autovervollständigung im Suchbereich
User denken bei der Suche an die Art des gewünschten Produkts und versuchen Begriffe zu finden, die sich als gut geeignet erweisen könnten, um solche Ergebnisse zu erzielen. Sobald Benutzern Kategorievorschläge angezeigt werden, können sie eine engere und relevantere Liste von Produkten vorab auswählen, anstatt eine Website-weite Suche durchzuführen.

Produktvorschläge vs. Suchanfragevorschläge
Kategoriespezifische Seiten und Ergebnisse bieten oft Vorteile, die den Standard-Suchergebnisseiten fehlen, also klare Unterkategorie-Navigation, kontextbezogene Produktfilter und Links zu relevanten Inhalten wie Produktleitfäden oder Findern. Auf vielen Websites sehen Suchbenutzer eine andere, unterdurchschnittliche Produktergebnisliste im Vergleich zu Benutzern, die mit der globalen Navigation zum gleichen Bereich oder zur gleichen Kategorie navigieren.

Mobile Formulare
Es kann manchmal ganz schön problematisch für User sein, digitale Formulare auf ihrem Mobilgerät auszufüllen. Zu viele unintelligente Formulare, unzureichende Markierung von Textfeldern oder andere Probleme zeigen, wie fehleranfällig das mobile Erlebnis ist. Daher ist es entscheidend, dass jedes Feld für die Benutzerinteraktion optimiert ist und dass den Benutzern bei Auftreten von Problemen ein klares Feedback gegeben wird. 

Formularbeschriftungen
Wenn Benutzer Formulare ausfüllen, schränkt die mobile Tastatur den tatsächlich sichtbaren Bereich stark ein. Beispielsweise bleiben auf einem iPhone 11 Pro Max im Hochformat nur 56 % des Bildschirms für das Formular. Dies schränkt die Übersicht über das Formular ein und kann es schwierig machen, beim Checkout einen Sinn für den Kontext zu behalten. Vor allem dann, wenn das Formular sehr lang ist und Abschnitte und Felder schlecht beschriftet sind. Darüber hinaus gibt es zahlreiche Benutzer, die zum Ausfüllen von Formularen bevorzugt das Querformat verwenden, da die Tastatur im Querformat im Vergleich zur Tastatur im Hochformat deutlich größer ist. Im Querformat steht jedoch noch weniger Bildschirmfläche zum Anzeigen des Formulars zur Verfügung – die sichtbare Formularmenge im Querformat verringert sich um 73 % im Vergleich zum Hochformat. Beim Ausfüllen im Querformat ist es für den Benutzer daher noch schwieriger, den Überblick zu behalten. Das führt zu schwerwiegenden Fehlinterpretationen und zur Eingabe falscher Daten. Um das Problem zu lösen, sollten Websites die Beschriftungsposition von über dem Feld im Hochformat nach links vom Feld im Querformat ändern. Dadurch erhält der Benutzer etwas mehr Übersicht über das Formular. Dieser zusätzliche Kontext kann für Benutzer entscheidend sein und die Anzahl der Fehler reduzieren.

Fehlermeldungen
Während des Checkouts treten häufig Fehler auf. Während Fehler für zumindest einige der Benutzer mehr oder weniger unvermeidbar sind, ist die Fehlerbeseitigung entscheidend. Der erste Schritt besteht darin, als User zu verstehen, dass überhaupt ein Fehler aufgetreten ist und welche Eingabe bzw. Eingaben den Fehler verursacht haben. Dass die Benutzer die Felder selbst durchsuchen müssen, führt nicht nur zu Frustration, sondern auch zu Warenkorbabbrüchen. Unter allen Umständen muss das fehlerhafte Feld deshalb immer gekennzeichnet werden, typischerweise durch Verwendung roter Feldgrenzen, einer roten Feldhintergrundfarbe oder rote Pfeile. Außerdem sollte die Fehlermeldung immer direkt neben dem fehlerhaften Feld angezeigt werden, damit Benutzer verstehen können, was schiefgelaufen ist und wie es korrigiert werden kann. Die Implementierung hängt jedoch davon ab, wie viele Fehler auf der Seite vorhanden sind. Wenn nur ein Fehler auf einer Seite aufgetreten ist, kann Autoscroll verwendet werden, um dem Benutzer den Fehler direkt in seinem Ansichtsfenster anzuzeigen. Wenn es jedoch mehrere Fehler auf mehreren Seiten gibt, die größer als ein Ansichtsfenster sind, wird es etwas komplizierter. Es zeigt sich, dass das Scrollen der Benutzer zum ersten Fehler schlecht funktioniert, da sie die nachfolgenden Fehler wahrscheinlich übersehen. Eine bessere Lösung wäre, den Benutzer an den Anfang der Seite zu leiten und eine Fehleranweisung einzufügen, in der die erkannten Fehler und möglicherweise deren Ursache aufgeführt sind. Dies geschieht natürlich zusätzlich zur Hervorhebung aller Fehler auf allen Seiten.

Adressvalidierung und Adresssuchfunktion
Ungenaue Adressen verursachen mehrere Probleme. Benutzer haben möglicherweise Probleme beim Empfang ihrer Bestellungen, erhalten sie überhaupt nicht oder nicht rechtzeitig. Websites müssen bei Lieferproblemen einen umfassenden Kundensupport bieten. Die Folgen: Negative UX und die daraus resultierenden negativen Website-Bewertungen. Eine Adressvalidierung funktioniert durch Abfragen einer Adressdatenbank. Obwohl diese nicht perfekt sind, ermöglichen sie Anbietern eine schnelle Überprüfung der eingegebenen Adresse durchzuführen. Der Vorteil wird vor allem bei der mobilen Nutzung deutlich. Aufgrund der automatischen Tastaturkorrektur und der Schwierigkeit beim Tippen auf einer kleinen Touch-Tastatur machen User viel häufiger Fehler. Außerdem haben Nutzer auf mobilen Endgeräten aufgrund der fehlenden Seitenübersicht und des kleinen Bildschirms größere Schwierigkeiten, Fehler zu erkennen.

Formularfelder
Benutzer sind oft eingeschüchtert, wenn sie zu viele Formularfelder im selben Ansichtsbereich anzeigt bekommen – ein Gefühl, das sich auf Mobilgeräten verstärkt. Während Bezahlvorgänge von Natur aus formularlastig sind, können intelligente Formularfunktionen und -designs die Einschüchterung erheblich minimieren.

Erforderliche und optionale Felder
Welche Informationen Benutzer während eines Bezahlvorgangs angeben müssen, ist sehr uneinheitlich. Daher können User nur schwer einschätzen, welche Informationen erforderlich und welche optional sind. Durch die explizite Markierung der Felder erhalten Benutzer nützliche Informationen und können sich so schnell durch ein Formular bewegen.

Tastaturlayout
Indem Sie ein oder zwei Attribute im Code der Eingabefelder ändern, können Sie das Telefon eines Benutzers anweisen, automatisch einen bestimmten Tastaturtyp anzuzeigen, der für die angeforderte Eingabe optimiert ist. Beispielsweise können Sie eine numerische Tastatur für das Kreditkartenfeld, eine Telefontastatur für die Telefonnummer des Benutzers und eine E-Mail-Tastatur für seine E-Mail-Adresse aufrufen. Dies erspart dem Benutzer das Wechseln vom Standard-Tastaturlayout und minimiert bei numerischen Eingaben Tippfehler, da diese Spezialtastaturen meist größere Tasten haben.

Mobile Sitewidefunktionen und -elemente

Es gibt einige allgemeine, mobilspezifische Probleme, die auf vielen Websites beobachtet werden können und unsere Aufmerksamkeit erfordern. Insbesondere gibt es vier wesentliche Probleme, wenn es um mobile Websitefunktionen und -elemente geht.

Ladeindikatoren
Wenn es keine Ladeindikatoren gibt, neigen Benutzer auf Mobilgeräten sehr schnell dazu anzunehmen, dass die Aktion, die sie gerade versucht haben (z. B. das Antippen eines Listenelements in der Produktliste), nicht registriert wurde und sie tippen erneut. Das führt häufig dazu, versehentlich auf einen anderen Inhalt zu tippen oder den Ladevorgang einfach von vorne zu beginnen. Stellen Sie daher immer kontrastreiche Ladeindikatoren bereit, die unmittelbar nach einer Benutzeraktion (< 1 Sekunde) angezeigt werden und nach 10 Sekunden aktualisiert werden.

Antippbare Elemente
Die Frage des Abstands zwischen antippbaren Elementen steht in engem Zusammenhang mit deren Größe. Beide Probleme zusammen erschweren es dem Benutzer, auf der mobilen Schnittstelle zu navigieren. Kurz gesagt, ein unzureichender Abstand zwischen den Elementen führt zu Tippfehlern, unbeabsichtigten Umwegen und Abbrüchen. Was ist also ein angemessener Abstand? Die Designrichtlinien zahlreicher Gerätehersteller schreiben einen Mindestabstand von 2 mm vor. In Fällen, in denen die Folgen eines unbeabsichtigten Tippens auf ein Element aufgrund von Abstandsproblemen schwerwiegender sind, sollte der Abstand jedoch viel größer sein (~10 mm). Schließlich sollten Elemente niemals ganz am Rand des Bildschirms platziert werden, da dieser Bereich normalerweise nicht reagiert.
Obwohl die Größe des Trefferbereichs eine Grundlage für das mobile Design ist, beobachten man immer wieder, dass Websites Elemente und Links mit zu kleinen Trefferbereichen implementieren. Dies beeinflusst die Nutzererfahrung negativ und kann ebenfalls zum Verlassen der Website führen. Die Lösung für diese Probleme ist einfach: Mindestens eine Trefferfläche von 7 mm x 7 mm (gemessen auf durchschnittlichen Smartphone-Displays) einplanen.

Rückgabebedingungen und Versandinformationen
Häufig informieren sich Benutzer über die Rückgaberichtlinien bzw. Versandoptionen der Website, bevor sie eine Kaufentscheidung treffen. Diese Informationen sollten über mehrere Pfade verfügbar sein, zum Beispiel über die Kopfzeile, auf der Produktseite oder Fußzeile. Wenn sie dort nicht vorhanden sind, müssen Benutzer auf „Informationsjagd“ gehen, was oft zu einer erheblichen Verzögerung beim eigentlichen Kaufvorhaben führt. Wenn Benutzer Schwierigkeiten haben, schnell auf grundlegende Rücksendungs- und Versandinformationen zuzugreifen, überdenken einige möglicherweise ihr Kaufvorhaben. Das Bereitstellen von Links zu den Rückgaberichtlinien und Versandinformationen in der Fußzeile ist eine kleine und einfache Implementierung, die Benutzern bei der Suche nach Informationen zu ihrer Bestellung sehr helfen kann.
Das amerikanische UX Forschungsinstitut Baymard hat dazu eine ausgiebige Studie durchgeführt, bei der eine Benchmark-Datenbank führender Online-Marken mit mehr als 12.000 mobilen Website-Elementen untersucht wurde. Die ganze Studie im Orignal finden Sie hier.