7 Tipps für besseres mobiles UX-Design

Wer etwas für Bildschirme in Smartphonegröße gestaltet, muss ein UI-Design haben, das in Sekundenschnelle mit dem User kommuniziert. Es muss im Idealfall für den Nutzer, der zum ersten Mal auf die Webseite kommt, einfach genug sein, während es den wiederkehrenden Nutzer nicht langweilen darf.

Die Ansprüche an Komfort und Schnelligkeit und nicht zu vergessen an der UX sind groß, daher sollte man einige Tipps zur Umsetzung des mobilen UX-Designs beachten. Hier findest du sieben Tipps für ein gut durchdachtes UX-Design für mobile Endgeräte.

1. Die Regeln für ein gutes UX-Design gelten auf allen Endgeräten

Auch auf einem kleinen Bildschirm solltest du die fünf Eckpfeiler für ein gutes UX-Design beachten.

1. Dazu gehört, dass du ein zielgerichtetes Design erstellst, das du für deinen Nutzer kreierst. Im Zweifel ist es eine gute Idee seine potentiellen Nutzer zu fragen, was sie sich wünschen. Hier sind Umfragen sehr hilfreich. So kannst du Ziele für deine Nutzer formulieren und daran das Design deiner Webseite anpassen.
2. Auch Usability sollte auf deiner Liste ganz oben stehen. Der Nutzer muss deine Webseite intuitiv verstehen und von jeder Seite, auf der er sich befindet, bedienen können.
3. Neben zielgerichtetem Design und Usability ist es wichtig, einen einheitlichen Anzeiger zu nutzen. Im Webdesign bedeutet das, dass blauer, unterstrichener Text in aller Regel einen Link suggeriert. Der Nutzer weiß, dass er bei einem Klick auf dieses Element woanders hingeführt wird.
4. Mit Hilfe von Design-Pattern sorgst du bei deinem User für eine sogenannte „Erlernbarkeit von Elementen„. Das bedeutet, dass du Elemente, die dieselbe Funktion haben, auch immer wieder in demselben Design darstellst. Dies hilft dem Nutzer bei der Orientierung. Ein Beispiel wäre ein Button in einer bestimmten Farbe, der immer auf ein Produkt hinweist. Wenn der Nutzer in einem Artikel auf diesen Button stößt, weiß er, dass du ihm ein Produkt vorstellst.
5. Der fünfte Eckpfeiler für ein gutes UX-Design ist die sogenannte Feedback- und Antwort-Zeit. Wenn der Nutzer eine Handlung durchführt, sollte er immer ein Feedback erhalten, so dass er weiß, ob seine Handlung erfolgreich war. Wichtig ist, dass dieses Feedback in einem kurzen zeitlichen Rahmen stattfindet. Gerade Online User sind ungeduldig und, wenn sie glauben, dass etwas nicht funktioniert, auch schnell wieder verschwunden.

Beachtest du diese fünf Eckpfeiler für gutes UX-Design kann nicht viel schief gehen. Sie sind das Fundament und sollten in jeder Webanwendung berücksichtigt werden.

2. Kenne deine Nutzer

Nicht nur die Bildschirmgröße sondern auch die Nutzer sind eine Beschränkung im mobilen Design. Daher ist es unablässig, dass du deine Nutzer gut kennst und weißt, was sie mögen und worauf sie wie reagieren.

Mobile UX-Design: Je besser du deine Nutzer kennst, desto einfacher kannst du es ihnen machen, zu ihrem gewünschten Ergebnis zu kommen.

Es gibt drei grundlegende Taktiken deine Nutzer zu verstehen.

1. Personas: Erstelle eine fiktive Figur und stelle dir diese als Nutzer deiner Webseite vor. Gib ihr die typischen Eigenschaften, die ein Benutzer deiner Webseite hat. Je näher du dabei an deinem wirklichen Nutzer bist, desto besser findest du heraus, welche Entscheidungen der Nutzer deiner Webseite als beim nächsten Klick trifft. Auch hier hilft es wieder, wenn du mit einer Umfrage mehr über deine typischen Nutzer herausfindest.
2. Erstelle Nutzer-Szenarien. Stelle dir vor, was der „next best click“ deines Nutzers auf deiner Webseite ist, um etwas bestimmtes zu erreichen. Sagen wir, ein Nutzer landet auf einer Unterseite deiner Webseite und er möchte das Produkt, das du in dem Artikel beschreibst, kaufen (Nutzer-Szenario). Wie einfach gelangt er zum Warenkorb, um den Artikel kaufen zu können? Deine Aufgabe ist es nun, dass der User mit möglichst wenig Klicks und raten zu seinem gewünschten Ergebnis gelangen kann.
3. Erstelle sogenannte Experience-Maps, damit du alle möglichen Zustände für eine einzelne Interaktion entdecken kannst. Experience-Maps zeichnen dabei die Schritte auf, die deine Persona sehr wahrscheinlich gehen wird, um ein bestimmtes Ziel auf deiner Webseite zu erreichen. Sie helfen dir zu verstehen, welche Umstände und Emotionen deinen Nutzer bei der Benutzung deiner Webseite begleiten.

Je besser du deine Nutzer kennst, desto einfacher kannst du es ihnen machen, zu ihrem gewünschten Ergebnis zu kommen. Im Notfall hilft immer fragen und testen.

3. Das beste UX-Design beginnt mit der Festlegung der Inhalte und Nutzerströme

Die ersten Fragen, die du dir stellen musst, sind: Was kann dein Nutzer auf deiner Webseite alles erledigen? Welche Handlungen kann er durchführen? Was tut deine Webseite für ihn? Erstelle verschiedene Szenarios. Sagen wir, du hast eine Webseite, die ihn über verschiedene Spiegelreflex Kameras informiert und dazu passende Objektive vorstellt.

Das beste UX-Design beginnt mit der Festlegung der Inhalte und Nutzerströme

Ein Nutzer, der auf deiner Webseite landet, möchte also umfassend über eine bestimmte Kamera informiert werden. Er möchte wissen, welche Objektive es zu der Kamera gibt, welche weiteren Gadgets er nutzen kann, ob die Kamera vielleicht mit dem Handy zu steuern ist oder nicht und natürlich, ob und welche Filter, Bücher, Taschen, etc. es noch gibt.

Dementsprechend solltest du dafür sorgen, dass dein Nutzer alle Links zu diesen Fragen auf der Produktseite findet und natürlich auf der Seite über die Filter zur Kamera oder Bücher.

4. Nutze gebräuchliche mobile Patterns

Sicherlich gibt es bereits eine ähnliche Webseite zu dem Thema, zu dem du gerade eine Webseite erstellst. Was sind dort die gebräuchlichen mobilen Patterns? Heißt: Was nutzt der Ersteller der Webseite, damit sein Nutzer sich „Zuhause“ fühlt und bei bestimmten Klicks die Funktion ausgeführt wird, die der User erwartet? Es geht nicht darum, das Design einer anderen Webseite zu kopieren.

mobile UX-Design: Wenn die Nutzer einer mobilen Webseite an ein bestimmtes Muster gewöhnt sind, behalte es bei.

Aber wenn die Nutzer einer mobilen Webseite an ein bestimmtes Muster (Pattern) gewöhnt sind, darfst du es ruhig beibehalten. Dazu gehören auch Gesten wie pinchen, rotieren oder spreaden, die der Nutzer immer wieder auf seinem mobilen Endgerät ausführt. Die kannst du dir zu nutze machen.

5. Barrierefreiheit

Da es einfacher ist, mit der schlanken Maus etwas anzuklicken als mit dem im Gegensatz dazu dicken Finger, solltest du auf ein fingerfreundliches Design achten. Gib deinen Nutzern genug Platz, damit sie mit der Fingerspitze tippen können und achte darauf, dass Buttons nicht zu eng aneinander liegen.

Achte auf ein fingerfreundliches mobiles Design.

Wenn User nicht akkurat auf deine Buttons klicken können, erhöht dies die Frustration und damit die Abbruchrate. Apple empfiehlt einen quadratischen Button mit einer Fläche von ca. 44 Pixeln, der menschliche Finger ist zwischen 45 und 57 Pixel breit und kommt mit diesem Wert gut aus. Du solltest auch im Hinterkopf behalten, dass ein Button, der zu groß ist, ebenfalls die Interaktionsrate verringert. Der User glaubt dann nicht mehr daran, dass hinter dem Button eine Funktion ausgeführt wird.

6. Es gibt sie noch: Schatten und Farbverläufe

Nachdem Microsoft sich dem Flatdesign verschrieben hat, sind wir alle mehr und mehr dazu geneigt, Schatten und Verläufe einfach wegzulassen. Es gibt sie aber noch, du findest sie noch auf den „Zum Warenkorb hinzufügen“ Buttons von Amazon und auch auf zahlreichen Schaltflächen von Google. Also nein, Schatten und Farbverläufe sind nicht aus dem Webdesign verband. Vielmehr helfen sie dem Nutzer eine Bedieneroberfläche zu interpretieren. Dadurch grenzt sich das UI-Element vom Hintergrund ab und hilft dem User sich zu orientieren oder eine bestimmte Handlung auszuführen.

7. Je weniger Klicks desto besser

Obwohl es die Drei-Klicks-Regel im UX nicht mehr gibt, solltest du sie im Hinterkopf behalten. Es kann nicht falsch sein, wenn der User mit so wenig Klicks wie möglich das gewünschte Ziel erreicht. Als Designer zwingt es dich zu überlegen, ob du wirklich alle Seiten der Webseite benötigst oder ob verschiedene Aktionen auch mit weniger Klicks erreicht werden können.
Auch hier gilt: Je weniger deine Nutzer bei der Benutzung deiner mobilen Webseite nachdenken müssen, desto eher wird deine Webseite Erfolg haben und auch mobil immer wieder besucht werden.

Fazit

Wie du in diesem Artikel sehen kannst, ist ein gutes UX-Design von vielen Faktoren abhängig. Gerade beim mobilen Design solltest du auf eine gewinnende UX achten. Der Nutzer von heute ist viel mit seinem Smartphone oder Tablett im Internet unterwegs und hält sich nicht mehr unbedingt am Computer auf. Daher sollte die mobile Webseite nicht mehr so stiefmütterlich behandelt werden wie es in der Vergangenheit der Fall war.

Ein Blick auf Google Analytics lohnt: dort kannst du das mobile Verhalten deiner Besucher sehen und Hinweise zur Bedeutung erhalten.

Im Zweifelsfall hilft ein Blick auf Google Analytics. Auch dort kannst du sehen, von wie vielen Nutzern deine Webseite mobil genutzt wird. Diese Zahlen geben dir bereits einen Hinweis darauf, wie wichtig deine mobile Webseite ist.

Selbst wenn du zu diesem Zeitpunkt noch wesentlich mehr Nutzer über den Desktop PC ansprichst als über deine mobile Webseite, kannst du davon ausgehen, dass sich das in Zukunft ändern wird. Immer mehr Menschen gehen online und immer weniger sind bereit, dafür den PC zu starten. Mal eben schnell etwas nachsehen funktioniert gerade für wenig erfahrene User am Smartphone oder Tablet genau so gut wie am Desktop PC.