Wie kannst du deine Website auch für die mobile Nutzung zu einem angenehmen Erlebnis machen? Was bedeutet User Experience für mobile Geräte? Welche Designprinzipien kannst du anwenden? Auf all diese Fragen findest du in diesem Beitrag eine Antwort. Schauen wir uns die Best Practices für Mobile UX Design mal genauer an!

Warum Mobile UX Design?

Designbewegungen wie Mobile First versuchen unsere Aufmerksamkeit schon länger in Richtung Mobiltelefone zu lenken. Mittlerweile funktionieren die meisten professionellen Websites gut auf mobilen Geräten. Dazu tragen natürlich gewissenhafte Designer:innen bei. Doch auch wer eine WordPress Website betreibt, verwendet häufig Frameworks wie Bootstrap oder vorgefertigte WordPress Themes. Hier ist die responsive Darstellung in der Regel schon integriert. Dadurch sparen Entwickler:innen unheimlich viel Zeit. 

Allerdings birgt der Einsatz von Bootstrap, WordPress Themes & Co. die Gefahr, dass das Design auf Desktop ausgelegt – und dann lediglich für Mobilgeräte angepasst wird.

Warum ist das ein Problem? Besuchende, die deine WordPress Website über mobile Geräte anschauen, haben andere Bedürfnisse, die nur vom ästhetischen und technischen Anpassen der WordPress Website nicht unbedingt befriedigt werden.

User Experience Design basiert auf der Grundlage von Problemlösungen. Die Ausgangsfrage hier ist immer: Welche Probleme können Nutzer:innen haben und wie lösen wir das? In Zusammenhang mit mobilen Geräten solltest du also eine zentrale Frage beachten: Welche zusätzlichen Probleme entstehen, wenn Nutzer:innen deine WordPress Website von einem mobilen Gerät aus besuchen?

Viele von uns nutzen ihre Smartphones besonders unterwegs. Die User Experience wird hier stark von äußeren Einflüssen geprägt: Es kann um uns herum laut sein. Unter Umständen befinden wir uns außerdem in Bewegung – die Interaktion mit dem Telefon ist weniger akkurat. Die Lichteinflüsse können rapide zwischen strahlend hell und düster wechseln. Der Empfang kann zwischen gut und schlecht wechseln oder sogar ganz abbrechen. Besuchende deiner WordPress Website nutzen vielleicht Prepaid Tarife und versuchen daher Websites zu meiden, die viel Datenvolumen in kurzer Zeit verbrauchen.

Die Position kann weniger komfortabel sein und deine Nutzer:innen dadurch weniger entspannt. Wir haben generell weniger Geduld, weil wir weniger Zeit für einzelne Tasks haben. Funktioniert etwas nicht in kürzester Zeit – oder müssen wir zu lange warten, bis Inhalte geladen werden – tendieren wir auf dem Smartphone eher dazu, den Vorgang abzubrechen und widmen unsere kurze Aufmerksamkeit einer anderen WordPress Website.

Auch der Wille, durch viel Text zu lesen oder zu scrollen, ist kleiner. Wir suchen klar strukturierte Informationen in kleinen Häppchen. Unter Umständen haben wir zudem nur eine Hand frei.

Die Gründe, mit dem Smartphone im Internet zu surfen, unterscheiden sich sehr zu denen der Desktop-Nutzenden: Mobil wollen wir entweder gezielt Informationen suchen oder versuchen, unsere Zeit totzuschlagen. 

Wenn ich von meinem Smartphone auf eine kommerzielle Website navigiere, dann interessieren mich wahrscheinlich am ehesten die grundsätzlichen Informationen:

• Wie lautet die Adresse?
• Wie komme ich dahin?
• Was sind die Öffnungszeiten?
• Wie kann ich Kontakt aufnehmen?
• Welche Produkte werden angeboten?
• Was sind die Preise?

Bleibt nur noch die Frage: Ist deine WordPress Website mobil optimiert? Um besser zusammenzufassen, was das im Detail bedeutet, habe ich dir die wichtigsten UX Prinzipien für mobiles Design zusammengefasst.

13 Mobile UX Design Prinzipien

1. Inhalte

Besuchende deiner Website verfolgen unterschiedliche Ziele – je nachdem, über welche Geräte sie auf deine Website zugreifen. Lange Texte auf mobilen Geräten bedeuten oft viel Scrollen, um das zu finden, wofür sie gekommen sind. Als mobile Nutzer:innen suchen wir vorwiegend schnelle, knappe Informationen. Wer deinen Shop mobil besucht, möchte wahrscheinlich eher wissen, welche Produkte du anbietest, als mehr über deinen Werdegang zu erfahren.

Inhalte müssen deswegen angepasst werden. Auf dem Smartphone und dem Tablet herrscht eine andere Hierarchie als auf dem Desktop. Hier gibt es mehrere Möglichkeiten:

• Inhalte komplett weglassen: Bei manchen Inhalten bietet es sich gegebenenfalls an, diese komplett auszublenden. Dies kann der Fall sein, wenn es sich um etwas handelt, das auf dem Telefon ohnehin nicht funktioniert. Oder wenn das verbrauchte Datenvolumen den Nutzen für die User:innen übersteigen würde.
• Inhalte kürzen: Du kannst deine WordPress Website vom Aufbau so übernehmen, lange Inhalte aber entsprechend kürzen und zum Beispiel auf eine Unterseite verlinken. So können Besuchende selbst entscheiden, ob diese Information für sie relevant ist oder nicht.
• Anordnung der Inhalte verändern: Du kannst die Struktur deiner Inhalte überarbeiten und diese auf mobilen Geräten anders anordnen. Die Produkte könnten dann an erster Stelle stehen und die Hintergründe zum Shop erst später kommen. So ersparst du überflüssiges Scrollen, zeigst aber trotzdem alle Inhalte an.

In folgendem Beispiel habe ich die Website eines Restaurants (links) inhaltlich etwas angepasst, um sie freundlicher zu gestalten. Den Text habe ich gekürzt und dafür mit einem CTA zu einer Unterseite verlinkt (rechts). Zudem habe ich die Typografie angepasst, dazu aber später mehr.

2. Layout

In seinem Artikel Design for Fingers, Touch, and People berichtet Steven Hoober über die Ergebnisse seiner umfangreichen Recherche zur Nutzung von Smartphones. Oft wird als Anhaltspunkt die Daumentechnik verwendet. Hierbei zählt der Radius, den der Daumen über den Screen machen kann. Es wird häufig suggeriert, dass die oberen Ecken absolute Tabuzonen sind, die Nutzende nicht erreichen können. Laut den Ergebnissen seiner Recherche ist dies aber nicht ganz richtig.

Die 6 häufigsten Arten, wie Smartphones gehalten werden:

Daraus ergibt sich folgende optimale Aufteilung der Elemente für Smartphones:

Das Ergebnis: Die wichtigsten Informationen sollten auf mobilen Geräten mittig des Screens angeordnet werden.

3. Minimalismus

Ein minimalistischer Designansatz ist niemals verkehrt. Doch gerade auf einem kleineren Gerät fühlen wir uns von zu viel Inhalt und zu wenig Whitespace eingeengt und verwirrt. Es wird unklar, wo sich welche Information verbirgt und wie wir dorthin gelangen.

Die mobile Version von Streetartnews wirkt strukturiert und übersichtlich. Auf den Inhaltsseiten befinden sich nur die nötigsten Elemente und gut lesbare Serifenschrift mit passendem Zeilenabstand:

4. Konsistenz

Wichtig ist, dass deine Website plattformübergreifend konsistent ist. Google hat das sehr elegant gelöst. Egal von welchem Gerät aus ich auf Google zugreife: Ich erkenne die Marke Google sofort.

Deine Marke sollte sich also trotz minimalistischer Gestaltung auch auf mobilen Geräten widerspiegeln. Sollte deine Website einen User-Bereich haben, müssen vorgenommene Änderungen entsprechend auf allen Geräten übernommen werden.

5. Medien

Bilder sollten eine geeignete Größe haben und auch in dieser dargestellt werden, sodass nichts verzerrt oder skaliert werden muss. Auch unnötig langes Laden kann so vermieden werden. Am schwierigsten kann dabei der Übergang zwischen Landscape- zu Portrait-Format werden: Je nach Bildinhalt solltest du entweder nur einen Teil des Bildes zeigen oder deine Bilder gezielt für mobile Geräte hinterlegen. Bei Websites mit vielen Bildern solltest du Lazy Load integrieren oder entsprechende WordPress Plugins nutzen. 

Ähnliches gilt für Videos. Auch hier wird von Landscape zu Portrait gewechselt. Videos sollten außerdem so eingestellt sein, dass sie stumm laufen und nicht von selbst starten. Videos sollten generell für Web optimiert werden, aber gerade für mobile Geräte ist das besonders wichtig.

6. Typografie

Wichtiger als das Aussehen deiner Website ist immer deren Funktionalität. Dazu gehört auch lesbarer Text. Die Standard-Textgröße in HTML sind 16px. Diese Größe wird verwendet, wenn du nichts anderes angibst. Je nach Schriftart kann dein Text allerdings größer beziehungsweise kleiner wirken. 

Um Typografie lesbarer zu machen, gibt es aber noch einiges anderes zu beachten:

• Kontrast zwischen Schriftfarbe und Hintergrund: Gerade, weil mobile Geräte auch draußen verwendet werden, ist dies besonders wichtig. Dies gilt auch für den Rest deiner Website. Ein guter Kontrast zwischen Elementen erleichtert das Anschauen deiner Website. ContrastChecker.com analysiert deine Farbwahl und lässt dich wissen, ob kombinierte Farben genügend Kontrast zueinander haben.
• Abstand: Wenn dein Text zu nah beieinander steht, wird es zunehmend schwieriger, ihn zu lesen. Der Zeilenabstand bei Desktop und mobile Geräten darf durchaus unterschiedlich sein.
• Zentrierung: Meine Grundsatzregel ist es, niemals Blocksatz auf Websites zu verwenden. Blocksatz mag auf den ersten Blick schön aussehen, sorgt aber dafür, dass der Lesefluss unterbrochen wird. Zentrierte Schrift hat einen ähnlichen Effekt. Textabschnitte auf mobilen Geräten sollten deshalb nur in besonderen Fällen mittig zentriert werden.

Hier wieder das Beispiel von EggShop: Um den Text (links) lesbarer zu gestalten, habe ich die Schriftgröße auf 16px angehoben und die Line Height auf 1.7 gesetzt (rechts). Zudem habe ich den Text links zentriert und ein paar Abstände nach oben verkleinert beziehungsweise die doppelte Überschrift herausgenommen. In der Desktop-Version macht die doppelte Überschrift durchaus Sinn. Mobil erzeugt sie lediglich ungewollten Whitespace und eine Doppelung. 

Man könnte noch etwas weiter gehen und Stichwörter fett machen. Dadurch können User:innen den Text noch schneller überfliegen und trotzdem relevante Informationen für sich mitnehmen. Manche Schriftarten eignen sich generell schlecht für kleine Screens, weil sie beim Skalieren ihre Lesbarkeit verlieren. Auch Light Fonts, die auf dem Desktop elegant wirken, können auf dem Smartphone weniger gut lesbar sein.

7. Navigation

Die Navigation deiner Website sollte so intuitiv wie möglich sein. Das heißt, bei der Erstellung deiner Navigationsarchitektur orientiert du dich am besten an bereits vorhandenen Strukturen. Damit erleichterst du User:innen das Navigieren durch deine Website. Intuitiv ist zum Beispiel nach unten und oben zu scrollen, um durch eine Website zu navigieren, aber nicht zwingend nach links oder rechts.

Als primäres Menü hat sich mobil ein vertikales Menü durchgesetzt. Aber auch auf dem Desktop sehen wir immer häufiger ein vertikales statt horizontales Menü. Darüber oder darunter befindet sich in der Regel, wenn nötig etwas weniger prominent, das sekundäre Menü. Alternativ kann sich das auch am unteren Rand befinden. 

Sekundäre Menüs können zum Beispiel Spracheinstellungen oder Social Media Links sein. Sollte ein tertiäres Menü notwendig sein, wird das als ausklappbares Menü untergebracht. Das kann zum Beispiel ein Login oder Logout sein.

Sollte deine Website mehr als ein One-Pager sein, ist es besonders wichtig, dass Besuchende immer mühelos herausfinden können, wo sie sich gerade befinden.

CTA & Links

Interaktive Elemente sollten ruhig größer dargestellt werden. So wissen Besuchende deiner Website, was sie auf deiner Website machen können. Und sie sind in der Lage sind, das Gewünschte anzuklicken. Die Anordnung zueinander spielt auch eine Rolle. Es muss genügend Freiraum gelassen werden, um die Gefahr zu verringern, dass aus Versehen der falsche Link oder Button getappt wird. Buttons wie “Ausloggen”, “Löschen”, “Absenden” solltest du außerdem im Abstand zu den anderen Call to Action platzieren, damit diese nicht versehentlich ausgelöst werden.

Versteckte Interaktion

Es ist durchaus üblich, Interaktionen durch mehrere Wege zuzulassen. Solange es eine Möglichkeit für neue Besuchende gibt, deine Website trotzdem zu bedienen. Damit kannst du den wiederkehrenden User:innen Abkürzungen anbieten, ohne den Einstieg zu erschweren.

Links

Wenn du deiner Website weitere Funktionen hinzufügen möchtest, ist es sinnvoll, vorhandene Systeme zu nutzen – anstatt neue zu programmieren. Dies trifft zum Beispiel zu, wenn der E-Mail-Client der Nutzer:innen verwendet wird, anstatt eines Kontaktformulars. Oder bei der Integration von Wegbeschreibungen durch die favorisierte App der Nutzer:innen. Das erleichtert ihnen das Nutzen deiner Website insofern als dass sie schon gelernte Apps verwenden können, um bestimmte Aufgaben zu lösen.

8. UI Design Patterns

Wie auch für Desktop bietet es sich an, bei der Erstellung deiner Website oder deines E-Commerce Stores auf bewährte Lösungen, auch UI Design Patterns genannt, zurückzugreifen. Einige dieser Patterns sind geräteübergreifend, andere eher spezifisch. Ferner hat sich dieses E-Book von UXPin als guter Anhaltspunkt bewährt.

Besonders kleine Screens bieten wenig Platz zum Navigieren. Da fallen unstrukturierte und verwirrende Websites besonders negativ auf.

Ähnlich zu den UI Design Patterns empfiehlt es sich, sich an schon vorhandenen Websites und erfolgreichen Web Apps zu orientieren und diese zu analysieren:

• Wo befindet sich in der Regel das Menü?
• Wie schaut es aus?
• Was passiert, wenn ich darauf drücke? 

Dabei solltest du allerdings kritisch vorgehen, damit du keine Fehler oder „schlechte“ UX Elemente kopierst. 

9. Formulare

Lange Fomulare können anstrengend sein und schnell unübersichtlich wirken. Generell solltest du Formulare auf mobilen Geräten nur, wenn nötig verwenden. Beim Integrieren von Formularen solltest du darauf achten, dass du nur so viel Daten abfragst, wie eigentlich notwendig, ist und den Nutzer:innen das entsprechende Keyboard zur Verfügung stellst. Dies machst du, indem du geeignete HTML Form Types verwendest. Dadurch wird dem Browser mitgeteilt, um welchen Input es sich handelt. Und das geeignete Keyboard wird bereitgestellt.

Alternativ kannst du automatisches Ausfüllen beziehungsweise Vorschlagen der Inhalte integrieren. Oder auch den Social Media Login anstelle eines langwierigen Registrierens einsetzen.

10. Feedback

Da wir mobile Geräte mit unseren Händen nutzen, erwarten wir da eher, dass wir echtes Feedback erhalten: ein Feedback, das an reale Objekte angelehnt ist. Dies kann zum Beispiel ein Button sein, der den Anschein erweckt, eingedrückt zu werden, wenn wir ihn drücken.

Wenn diese Art von Feedback nicht in dein Konzept passt, ist es trotzdem wichtig, irgendein Feedback zu geben. Wer hat noch nicht viele Male hintereinander auf einen Link oder Button gepresst und war sich unsicher, ob dieser einfach nicht funktioniert oder die Internetverbindung weg ist. Das gilt es, zu vermeiden. Dafür gibt es gängige Tricks wie Ladeanimationen. Wichtig ist, dass die User:innen wissen, dass ihre Interaktion funktioniert hat und etwas passieren wird.

11. Errorhandling

Fehler werden gemacht. Du drückst aus Versehen auf einen falschen Link und landest auf einer falschen Website. Oder du schickst etwas ab, was noch nicht fertig war. Wichtig ist, dass Fehler keine (oder so wenig wie möglich) negative Konsequenzen haben. Dafür eignen sich Undo Funktionen und Zurück Buttons. Auch der Home Button ist hier unheimlich wichtig: der Anker, wenn sich deine Nutzer:innen doch mal verirrt haben. Damit wissen sie immer, wie sie zurück auf die Startseite gelangen.

12. Speed

Auch die Ladezeit deiner Website kann unter Umständen auf mobilen Geräten ein Problem darstellen. Gerade wenn man von instabilen Netzwerken zugreifen möchte, darf die Wartezeit nicht so lange sein, dass es Besuchende abschreckt.

13. Accessibility

Accessibility ist ein plattformübergreifendes Thema, das endlich mehr und mehr an Bedeutung gewinnt. Die Grundidee und Mission: Das Web muss für alle Menschen zugänglich sein. Dies ist insbesondere für Menschen mit solchen Behinderungen relevant, die sich auf die Art und Weise auswirken können, wie Menschen auf das Web zugreifen und es nutzen.

Wenn du das Thema Accessibility ignorierst, schließt du heute bereits 20 Prozent der Weltbevölkerung von der Möglichkeit aus, deine Website zu nutzen. Kurz gesagt: Die Accessibility zu vernachlässigen, ist nicht gut für dein Business. Doch was noch wichtiger ist: Es ist schrecklich für die Schaffung einer gerechteren und fairen Welt.

Tools für UX Testing

Je nachdem wie deine Website aufgebaut ist, hast du unter Umständen eine Möglichkeit, die mobile Ansicht direkt zu editieren. In der Regel bleiben ein paar händige CSS Anpassungen aber nicht aus. Zum Testen eignen sich mehrere Möglichkeiten:

• Inspektionstools im Browser: Die gängigen Browser ermöglichen, deine Website mit den sogenannten Developer Tools zu inspizieren. Dort kannst du deine Website auch in verschiedene Gerätegrößen überprüfen. Weitere gute Tools für Website Testing sind Responsinator und BrowserStack Responsive.

• Im Gerät: Am effektivsten siehst du deine Website im Gerät selbst. Das Testen auf dem eigenen Mobiltelefon oder Tablet darf deshalb nie fehlen. Da es sehr kostenaufwendig wäre, jedes Gerät zu Hause zu besitzen, gibt es sogenannte Emulatoren.
• Emulatoren: Diese Software wird vom Betriebssystemhersteller selbst zur Verfügung gestellt. Dort kannst du entwickeln und siehst deine Ergebnisse direkt im Browser – zugeschnitten auf Größe des Gerätes und dem jeweiligen Betriebssystem wie Android oder iOS.

Fazit zu Mobile UX Design

Setzt du diese Tipps um, machst du die mobile Nutzung deiner Website zu einem besseren Erlebnis und kannst so mehr Kund:innen gewinnen. Und vielleicht helfen dir die Beispiele und Best Practices dabei, neue Ideen für deine Website zu entwickeln. Gerade das mobile Design wird bei einer Website leider immer noch häufig vernachlässigt – was sich negativ auf die Conversion Rate mobiler Nutzer:innen auswirkt.

Für mehr Input zu Mobile UX Design, lege ich dir die Web Fundamentals von Google ans Herz und empfehle dir diesen Artikel für besseres mobiles UX Design.