Mobile UX-Designprinzipien

Gutes Design ist gutes Design, oder? Stimmt, aber es gibt spezielle Überlegungen, die je nach Medium für dieses Design ins Spiel kommen. Designprinzipien für so etwas wie eine App, die für die Ausführung auf einem Desktop-Computer entwickelt wurde, unterscheiden sich normalerweise geringfügig von den effektivsten Konventionen für mobiles UX-Design.

Selbst innerhalb einer Oberkategorie wie „Mobile UX Design“ gibt es Unterschiede zwischen dem Design einer App und dem Design einer mobilen Website. Wenn Nutzer eine App herunterladen, möchten sie nicht nur die mobile Version der Website. Sie möchten ein einzigartiges Erlebnis, das die Zeit rechtfertigt, die sie für das Herunterladen der App aufgewendet haben (sowie den Speicherplatz, den sie auf ihrem Telefon einnimmt). Benutzer haben keine Bedenken, eine App zu löschen, die sie nicht für sinnvoll halten – 75 % der App-Downloads werden nur einmal geöffnet.

Mobiles Design ist im Allgemeinen nicht zu übersehen. Weltweit greifen mehr Menschen über ihre Mobil- und Tablet-Geräte auf das Internet zu als über Desktop-Computer. Das Ignorieren dieser Benutzer ist nichts mehr, was UX-Designer rechtfertigen können. Für mobile Designer ist es wichtig, bei jedem Schritt des Designprozesses die Best Practices für mobile UX zu berücksichtigen.

Stellen Sie den Benutzer an die erste Stelle

Dies sollte selbstverständlich sein, aber bei jedem Designprojekt sollte der Benutzer immer an erster Stelle stehen, und die Benutzeranforderungen sind auf mobilen Geräten noch wichtiger (und spezifischer). Wenn Designer nicht auf die Bedürfnisse mobiler Benutzer eingehen, werden diese Benutzer sehr schnell zu anderen Websites, Apps oder Ablenkungen wechseln.

Im Folgenden sind einige Dinge aufgeführt, die Designer tun können, um die spezifischen Anforderungen mobiler Benutzer zu erfüllen.

Machen Sie die Navigation intuitiv

Die Navigation auf mobilen Websites und Apps muss intuitiver sein als auf Desktop-Websites. Benutzer müssen in der Lage sein, sofort zu erkennen, wie sie sich in einer mobilen App oder Website zurechtfinden. Dies kann durch erkennbare Designmuster (z. B. Hamburger-Menüs) sowie erkennbare Symbole (ein „Home“-Symbol für den Startbildschirm, eine Sprechblase für Nachrichten usw.) erreicht werden.

Wenn Benutzer darüber nachdenken müssen, wie sie navigieren sollen, verlassen sie die Website eher oder schließen die App und suchen nach einer einfacheren Lösung.

Erstellen Sie ein nahtloses Erlebnis auf allen Geräten

Unabhängig davon, ob ein Benutzer auf Inhalte in einer App, einer mobilen Website oder einer Desktop-Website zugreift, muss der Übergang zwischen der Nutzung nahtlos sein. Die Designelemente sollten einander spiegeln (Designer sollten beispielsweise nicht Blau für die App und Rot für die Website verwenden).

Ein nahtloses Erlebnis erleichtert nicht nur den Nutzern einer Website oder App die Arbeit, sondern baut auch Vertrauen in die Marke auf.

Konzentrieren Sie sich auf die Benutzerziele

Die Ziele, die eine Person mit einer mobilen App oder Website verfolgt, unterscheiden sich wahrscheinlich von denen, die sie mit einer vollständigen Desktop-Website verfolgen. Beispielsweise möchte ein Besucher in einer Restaurant-App wahrscheinlich nur eine Handvoll Dinge tun: die Speisekarte ansehen, eine Reservierung vornehmen oder eine Wegbeschreibung abrufen. In den meisten Fällen schlagen sie nicht die vollständige Historie des Unternehmens auf ihrem Mobiltelefon nach – diese Art von Inhalten kann in Menüs oder Untermenüs ausgeblendet sein.

Überlegen Sie, was ein Benutzer tatsächlich auf einer mobilen App tun möchte. Eine wichtige Sache, die Designer oft übersehen, ist die Notwendigkeit eines Logins für grundlegende Aufgaben. Banking-Apps fragen beispielsweise oft nach einem Login, um irgendetwas in der App zu tun. Aber für Aufgaben wie die Suche nach dem nächstgelegenen Geldautomaten muss sich der Benutzer nicht wirklich anmelden. Der einfache Zugriff auf diese Funktionen ist eine großartige Möglichkeit, die UX zu verbessern.

Personalisierung zulassen

Bei mobilen Apps ist die Personalisierung der Schlüssel zur Verbesserung der Benutzererfahrung. Personalisierung kann auch dazu beitragen, Marketingziele zu erreichen. Es ist eine Win-Win-Situation für alle Beteiligten.

Personalisierung sollte Benutzer zu Inhalten führen, nach denen sie suchen, und weg von Inhalten, die für sie irrelevant sind. Es kann auch Ablenkungen auf der Website beseitigen, Komponenten wie den Kaufprozess rationalisieren und sicherstellen, dass Marketingbotschaften mit dem übereinstimmen, was der Besucher tatsächlich möchte.

Zu viel Personalisierung kann jedoch leicht in eine Falle tappen. Der Grad der Personalisierung muss dem Grad des Vertrauens entsprechen, das ein Benutzer der App und dem Unternehmen entgegenbringt. Wie oft fühlen sich Menschen verunsichert oder seltsam, wenn eine Website Anzeigen für etwas anzeigt, an das sie gedacht (oder gesprochen) haben, aber noch nicht einmal gesucht haben? Sicher, es ist nur die vorausschauende Natur fortschrittlicher Werbealgorithmen, aber dieses Maß an Personalisierung kann bei Besuchern immer noch ein Gefühl der Besorgnis hervorrufen.

Machen Sie die Dinge immer einfacher

Wenn eine Person eine Website oder App auf einem mobilen Gerät besucht, möchte sie die anstehende Aufgabe so schnell wie möglich erledigen. Es ist Aufgabe des Designers, die Durchführung der erforderlichen Aufgaben so einfach wie möglich zu gestalten. Alles zu eliminieren, was für jede Aufgabe nicht unbedingt notwendig ist, ist ein guter Anfang. Die Vereinfachung notwendiger Aufgaben auf einer mobilen Schnittstelle ist ebenfalls von entscheidender Bedeutung.

Beispielsweise bieten viele E-Commerce-Apps und -Websites jetzt eine Kameraoption zur Eingabe von Kreditkarteninformationen. Anstatt eine Kartennummer einzugeben, können Käufer ihre Kamera auf ihre Kreditkarte richten und die App liest die Nummer automatisch.

Andere Dinge wie die Angabe des Eingabetyps in Formularfeldern (so dass beispielsweise, wenn eine E-Mail-Adresse die erwartete Eingabe ist, das @-Symbol und „.com“ auf dem Hauptbildschirm der Tastatur erscheinen).

Gute Onboarding-Praktiken

Gutes Onboarding ist für mobile Apps unerlässlich. Aber die Definition von „gut“ variiert stark zwischen verschiedenen Arten von Apps. Apps, die einfach zu verwenden sind – Dinge wie Aufgabenlisten oder Webbrowser – erfordern nur ein minimales Onboarding. Ein paar Begrüßungsbildschirme, die auf einzigartige Funktionen hinweisen, sind alles, was die meisten Benutzer brauchen, um loszulegen.

Aber komplexere Apps, wie die für Finanzdienstleistungen oder Projektmanagement, erfordern ein umfassenderes Onboarding.

Verwenden Sie etablierte Gesten

Dies sollte selbstverständlich sein, aber Designer von Mobilgeräten müssen etablierte Gesten berücksichtigen, die Menschen bereits auf ihren Geräten verwenden. Dinge wie Zoomen mit zwei Fingern oder Wischen sind für die meisten Benutzer intuitiv geworden und sollten wann immer möglich verwendet werden.

In Fällen, in denen ein Designer beschließt, von einer etablierten Geste abzuweichen, ist es wichtig, die Benutzer auf diese Abweichung hinzuweisen, entweder während des Onboarding-Prozesses oder wenn der Anwendungsfall zum ersten Mal erscheint.

Mobiles Layout-Design

Das Entwerfen mobiler Layouts unterscheidet sich nicht grundlegend vom Entwerfen anderer Arten von Layouts, aber es gibt bestimmte Überlegungen, die Designer berücksichtigen müssen.

Eine der größten Überlegungen ist die Größe von Touchscreen-Zielen. Während eine Maus oder ein Trackpad punktgenau klicken können, sind Fingerspitzen viel ungenauer. Idealerweise sollten die Ziele auf dem Bildschirm eines Mobilgeräts 7–10 mm groß sein. Dies ermöglicht es, mit einer Fingerspitze auf das Ziel zu tippen, ohne zu genau zielen zu müssen.

Ein verwandter zu berücksichtigender Bereich sind die Handpositionssteuerung und die „Daumenzone“ auf Mobilgeräten – der Bereich des Telefonbildschirms, auf den mit dem Daumen leicht zugegriffen werden kann, wenn eine Person ihr Telefon mit einer Hand hält. Die Platzierung der Mehrheit der interaktiven Inhalte (und insbesondere der Calls-to-Action) in dieser Zone ist für die Schaffung einer positiven Benutzererfahrung von entscheidender Bedeutung.

Bei mobilen Designs ist es wichtig, so viel Unordnung wie möglich zu vermeiden. Minimalismus ist der Freund eines Designers, wenn es um mobile Apps geht. Der Versuch, alles in einer Desktop-Benutzeroberfläche in einen Bildschirm zu packen, der nur einen Bruchteil der Größe hat, lässt das Design beengt erscheinen und kann überwältigend sein.

Die Fokussierung auf Ziele, die Minimierung von Navigationsoptionen (Menüs und Untermenüs können dabei helfen) und die allgemeine Eliminierung aller Elemente, die für die Benutzer nicht unbedingt erforderlich sind, wird eine schlankere und benutzerfreundlichere Benutzeroberfläche schaffen.

Während Designer das Durcheinander auf dem Bildschirm beseitigen, müssen sie sicherstellen, dass sie einige wichtige Designüberlegungen nicht übersehen. Eine solche Überlegung ist sicherzustellen, dass verschiedene Designelemente einen ausreichenden Kontrast aufweisen. Menschen schauen oft unter nicht idealen Bedingungen auf ihre Mobilgeräte. Dinge wie helles Sonnenlicht können Elemente auf einem Bildschirm schwer erkennbar machen, aber ein hoher Kontrast hilft, Elemente besser sichtbar zu machen.

Typografie ist ein weiterer wichtiger Aspekt. Es ist wichtig, eine klare typografische Hierarchie in einem mobilen Design zu haben. Titel und Überschriften sollten leicht zu erkennen sein, und Schriftarten sollten im Allgemeinen größer sein. Niemand schielt gerne auf seinen Bildschirm, um zu versuchen, große Textblöcke auf seinem Telefon zu lesen. Klare Kopfzeilen, Aufzählungen oder nummerierte Listen und kurze Absätze machen mobilen Text besser lesbar.

Eine letzte Überlegung zur Benutzeroberfläche ist die Verwendung von Übergängen und Animationen. Eine Animation kann ein wichtiges Signal für einen Benutzer sein, dass jede Aktion, die er gerade ausgeführt hat, etwas bewirkt hat. Animationen und klare Übergänge zwischen Bildschirmen oder Funktionen in einer mobilen App sind wichtige Rückmeldungen, die eine zufriedenstellendere Benutzererfahrung schaffen.

Mobile UX Best Practices

All dies sind wichtige Überlegungen beim Entwerfen mobiler Apps und Websites. Es gibt jedoch weitere Best Practices für mobile UX, die befolgt werden müssen, um die bestmögliche Benutzererfahrung zu gewährleisten.

Fokus auf Geschwindigkeit

Trotz der weit verbreiteten Verfügbarkeit von 4G-Daten sind Mobilfunknetze im Allgemeinen immer noch langsamer als WLAN- oder Breitbanddienste. Und in vielen Teilen der Welt existiert 4G nicht, und mobile Benutzer sind entweder mit 3G oder langsameren Datengeschwindigkeiten festgefahren.

Das bedeutet, dass mobile Websites und insbesondere mobile Apps schnell sein müssen. Das Einschließen von Inhalten in eine App, die nicht jedes Mal heruntergeladen werden müssen, wenn die App geladen wird, macht die App schneller. Ebenso wird das Laden von Inhalten nur bei Bedarf durchgeführt (obwohl das Voraussehen von Inhalten, die benötigt werden, und das Vorabladen eine App für den Benutzer schneller erscheinen lassen kann).

Es ist ein Balanceakt zwischen dem Nichtladen von Inhalten, die nicht verwendet werden (und dem Verbrauch von Daten), und dem Schaffen einer Geschwindigkeitswahrnehmung durch das Vorladen von Inhalten, die die Benutzer wahrscheinlich als nächstes benötigen werden.

Eine Möglichkeit, die Illusion von Geschwindigkeit zu erzeugen und ungeduldige Benutzer zu beruhigen, besteht darin, Platzhalter zu verwenden, bis der Inhalt geladen ist. Die mobile App von Facebook tut dies mit einem scheinbar ausgefeilten Drahtmodell, das geladen wird, sobald die App geöffnet wird, und Platz für die Beiträge bereithält, die beim Herunterladen geladen werden. Dieser Übergangsbildschirm signalisiert Benutzern, dass etwas mit dem Inhalt passiert, bevor er tatsächlich geladen wird.

Geben Sie Benutzern Feedback

Benutzern Feedback zu geben, während sie Aktionen in einer mobilen App ausführen, ist ein wichtiger Aspekt einer positiven Benutzererfahrung. Wie bereits erwähnt, sind Animationen und Übergänge eine Möglichkeit, Feedback zu geben.

Taktiles und akustisches Feedback ist auch mit mobilen Geräten möglich. Besonders beliebt bei Mobile Games ist die Bereitstellung von Touch-Feedback bei der Ausführung bestimmter Aktionen, aber auch bei Fehlermeldungen. Audio-Feedback ist bei Funktionen aller Arten von Apps beliebt. Dennoch sollten sich Designer nicht auf Audio-Feedback verlassen, da so viele Menschen ihr Telefon ständig stumm schalten.

Minimieren Sie die Dateneingabe

Eine weitere wichtige Best Practice für mobile UX ist die Minimierung der erforderlichen Dateneingabe. Dies wurde bereits angesprochen, aber je mehr Daten eine Person in eine mobile App eingeben muss, desto wahrscheinlicher ist es, dass sie die Aufgabe abbricht.

Das Ausfüllen eines Formulars mit vier oder fünf Feldern mag auf einem Desktop- oder Laptop-Computer keine große Sache sein, aber auf einem mobilen Gerät können diese vier oder fünf Felder ausreichen, um einen Benutzer abzuweisen, insbesondere wenn er seine nicht sehen kann Zweck. Stellen Sie sicher, dass jedes einzelne Feld in einem Formular, das auf einem mobilen Gerät ausgefüllt wird, erforderlich ist. Beseitigen Sie alle, die es nicht sind.

Dies ist ein Bereich, in dem Menschen die Möglichkeit geben, eines ihrer bestehenden Konten (z. B. ein Facebook-, Google- oder Twitter-Konto) zu verwenden, anstatt sich von Grund auf neu anzumelden, was die Conversions erheblich verbessern kann. Wenn ein Benutzer nur klicken muss, um den Zugriff zu autorisieren, anstatt ein Formular für eine neue Registrierung auszufüllen, ist die Wahrscheinlichkeit höher, dass er dies tut. Verlassen Sie sich nur nicht ausschließlich auf diese sekundären Apps – einige Benutzer sind immer noch misstrauisch, wenn es darum geht, ihre Konten zu verknüpfen, und nehmen sich die Zeit, ein Formular auszufüllen.

Fazit

Die Befolgung dieser etablierten UX-Designprinzipien für Mobilgeräte führt zu einem insgesamt besseren Benutzererlebnis für Personen, die eine mobile Website besuchen oder eine mobile App verwenden. Designer haben nur wenige Sekunden Zeit, um die Aufmerksamkeit der Leute zu erregen, bevor sie eine App oder Website zugunsten einer benutzerfreundlicheren, intuitiveren oder optimierten Website aufgeben.

Großartige mobile Designs werden immer häufiger, und die Messlatte wurde noch höher gelegt, was die Erwartungen der Benutzer an ihre mobilen Apps betrifft. Designer können mobiles Design nicht länger als nachträglichen Einfall betrachten, sondern müssen stattdessen genauso viel Zeit, Überlegung und Ressourcen in sie investieren wie in Designs in anderen Formaten.

Weiterführende Literatur im Toptal Design Blog:

• Mobile UX Design – Best Practices, Einschränkungen und Zusammenarbeit mit Entwicklern
• Binden Sie Benutzer mit diesen Inspirationen für das Onboarding mobiler Apps
• Der grundlegende Leitfaden zur mobilen Usability
• Heuristische Prinzipien für mobile Schnittstellen
• eCommerce UX für das mobile Erlebnis