Mobile UX: Websites für Smartphones optimieren

Ob die User eurer Webseiten Spaß an der Nutzung haben – und damit gern wiederkommen – oder auf Nimmerwiedersehen verschwinden, liegt wesentlich an der Mobile UX, der User Experience mit der Seite auf dem Handy. Hier kommen einige einfache Tipps, wie ihr eure Website für Smartphones optimieren könnt.

Mobile Darstellung: Usability für kleinere Bildschirme

Auf dem Desktop habt ihr jede Menge Platz, um Informationen, Icons und andere Elemente unterzubringen. Das lässt sich aber nicht einfach auf die Größe eines Handys eindampfen. Im Gegenteil: Es würde die Seite überfrachten und ziemlich chaotisch wirken lassen.

Für die Mobile UX ist deshalb Minimalismus Trumpf. Entscheidet euch, was die wirklich wesentlichen Inhalte sind, die ihr transportieren wollt. Alles andere fällt für eine gute Mobile Usability weg. Deshalb optimieren auch die Profis im Online-Marketing sehr minimalistisch. Der Fokus liegt auf Kernaussagen und holt eure User so optimal ab.

Mobile UX und die Bildschirmausrichtung

Desktop-Bildschirme haben ein Querformat – das könnt ihr auch nicht ändern. Handys hingegen sind drehbar. Trotzdem nutzen 82,5 Prozent der User den Bildschirm in senkrechter Position – sogar dann, wenn sie ein Video anschauen.[1] Nur 17,5 Prozent bevorzugen das Querformat.[2] Wenn ihr eure Website für Smartphones optimieren wollt, solltet ihr euch also zum einen an der senkrechten Ausrichtung orientieren – aber trotzdem auch darauf achten, wie gut die Mobile Usability ist, wenn ihr das Gerät dreht.

Wichtig: User nicht warten lassen

Ladezeiten sind nicht nur seit dem Google Speed Update im Jahr 2018 ein Ranking-Faktor.[3] Jede Sekunde, die eure Seite zum Laden braucht, erhöht die Wahrscheinlichkeit, dass euer User verschwindet.[4] Eine gute Mobile UX ist nur dann gegeben, wenn die Webseitenbesucher auch schnell auf die Inhalte zugreifen können.

Nicht nur das Design sollte also kompakt sein: Auch das Datenvolumen solltet ihr so klein wie möglich halten. Das heißt ganz konkret: keine XXL-Bilddateien und ähnliche Datenmonster integrieren. Weniger Bilder sind im Zweifel sowieso mehr.

Aktiviert die Komprimierung sowie das Caching und verzichtet soweit wie möglich auf JavaScript. Auch der Programmcode in HTML oder CSS sollte ein möglichst kleines Volumen haben. Nicht zuletzt verbessert ihr die Mobile Usability, wenn ihr die wichtigsten Inhalte einer Seite als erstes laden lasst und „above the fold“ platziert – also im oberen Bereich der Website, die der User sehen kann, ohne scrollen zu müssen..

Mobile UX beim Lesen

Schriften sind ein Stück weit Geschmackssache. Aber gerade auf dem kleinen Smartphone-Bildschirm ist eine klare Lesbarkeit besonders wichtig. Das bedeutet zum einen: Die Schrift muss groß genug sein. Als Basisgröße sind 16 CSS-Pixel eine gute Orientierung.[5] Zum anderen gilt: Die Schriftart sollte nicht zu verschnörkelt und detailreich sein. Klare, serifenlose Schriften haben deshalb in der Mobile Usability die Nase vorn.

Wenn ihr Websites für Smartphones optimieren wollt, solltet ihr außerdem wie beim Desktop auch beachten: Weniger ist mehr. Eine oder zwei Schriftarten reichen vollkommen aus. Sie werden ja auch noch in der Größe für Überschriften und Textstruktur variiert.

Die richtigen Button für die Mobile UX

Wenn man als User extrem genau zielen muss, um den Button überhaupt drücken zu können, ist das einfach nur nervig. Das Gleiche gilt, wenn man mit einem Touch gleich zwei Buttons trifft, weil sie einfach winzig und eng beieinander sind.

Eine bessere Mobile UX erreicht ihr, wenn eure Buttons zwischen 11,43 und 19,05 Millimeter breit sind.[6] Eine Studie hat gezeigt, dass Buttons unter- und oberhalb dieser Breite eine niedrige Touch-Genauigkeit haben.[7] Der ausreichende Abstand von Button zu Button sorgt außerdem dafür, dass eure User nicht aus Versehen den falschen Button drücken.

Mobile UX: Suche prominent einbinden

Niemand möchte die Suche suchen. Versteckt sie also nicht in irgendeiner Ecke. Das gilt nicht nur für Online-Shops, sondern auch für umfangreiche Informationsseiten, bei denen ihr davon ausgehen könnt, dass die Suche wirklich gebraucht wird.

Wenn ihr also eure Website für Smartphones optimieren wollt, platziert ihr sie am besten zentral oben, damit sie sofort ins Auge fällt. So erspart ihr dem User lästiges Klicken durch komplexe Menüs und eine längere Suche nach dem, was ihn eigentlich auf die Seite geleitet hat. Als Button eignet sich die Lupe, die zusätzlich anzeigt: „Hier kannst du suchen.“ So erspart ihr euch Text auf Buttons, die für leserliche Worte eigentlich zu klein sind.

Für eine komfortable Mobile UX ergänzt eine Auto Suggest die Suche optimal. Sie erspart vor allem bei langen, aber immer wiederkehrenden Suchbegriffen das lästige Tippen.

 

[1] ScientiaMobile: How Do Mobile Video Viewers Hold Their Phone? URL: https://www.scientiamobile.com/how-do-mobile-video-viewers-hold-their-phone/ (16.07.2021).

[2] ebd.

[3] Searchmetrics GmbH: Google Speed Update: Ladezeit als mobiler Ranking-Faktor. URL: https://blog.searchmetrics.com/de/google-speed-update/ (16.07.2021).

[4] ebd.

[5] Erlhofer, Sebastian/Brenner, Dorothea:Website-Konzeption und Relaunch: Planung, Optimierung, Usability. Das Handbuch für die Praxis. Bonn: Rheinwerk Verlag GmbH ²2019. S. 406.

[6] Jin, Zhao Xia/Plocher, Tom/Kiff, Liana M.: „Touch Screen User Interfaces for Older Adults: Button Size and Spacing.“ In: Lecture Notes in Computer Science. Stephanidis, Constantine (Hg.) Berlin Heidelberg: Springer Verlag 2007. S. 933-941, hier S. 938. http://dx.doi.org/10.1007/978-3-540-73279-2_104.

[7] ebd.

-----
Willst du keine News mehr verpassen? Dann folge uns auf Twitter oder werde Fan auf Facebook. Du kannst natürlich in Ergänzung unsere iPhone und iPad-App mit Push-Benachrichtigungen hier kostenlos laden.