Mobile Usability: Tipps für eine gute mobile Website

Ohne Zweifel sind es heutzutage die Smartphone User, die mehr Zeit auf den Websites verschiedener Anbieter verbringen als die PC-User. Woran das liegt? Zum einen daran, dass in vielen Ländern ausschließlich mobil gesurft wird. Zum anderen an der Tatsache, sich die Technologien der mobilen Devices und Dienstleister – siehe beispielsweise Google und sein Machine Learning – in den letzten Jahrzehnten enorm weiterentwickelt haben. Die Folge: Wir Menschen wurden so “erzogen”, die kleinen Alltagshelfer dementsprechend oft zu verwenden. Ein nie enden wollender Kreislauf zwischen menschlicher Nachfrage und maschinellem Angebot – wir können gespannt sein, ob es hier jemals ein Marktgleichgewicht geben wird.

Warum mobile Usability-Optimierung so wichtig ist

Was machen wir eigentlich, wenn wir mit unserem Smartphone online sind? Wir vergleichen, shoppen, kommunizieren und nutzen das Gerät für unser tägliches Entertainment. Dabei sei nicht zu vernachlässigen, dass wir unsere Journey oftmals – wenn die favorisierte App nicht schon installiert ist – über den altbekannten Freund Google starten.

Google trieb 2015 mit Ausrollen seines “Mobile-Friendliness”-Updates die Notwendigkeit der Optimierung mobiler Websites voran, 2018 mit der “mobile-first”-Indexierung sogar auf die Spitze. Was anfangs also ein panisches Anpassen von Desktop zu Mobile war, sollte spätestens nach Bekanntgabe der “mobile first”-Indexierung ein Umdenken auf Seiten der Webmaster hervorgerufen haben. Damit Du also überhaupt noch unter den indexierten Websites in den Google Suchergebnissen erscheinst, solltest Du Deine Website zwingend für Mobilgeräte optimieren.

Dafür gibt es aus technischer Sicht verschiedene Möglichkeiten wie responsive Webdesign, mobile Subdomains, native Apps, Progressive Web Apps (PWA) oder Accelerated Mobile Pages (AMP). Seitens Google wird das responsive Webdesign empfohlen, da aufgrund der Anpassungen über alle Devices kein zusätzlicher Kapazitäts- oder Kostenaufwand entsteht. Wer allerdings die Extra-Meile laufen möchte, ist mit der technischen Umsetzung von PWAs gut beraten. Einen ausführlichen Guide zur Optimierung für erfolgreiche mobile Webseiten findest Du in unserem kostenlosen E-Book oder in unseren Tipps zum Thema mobile friendly.

Mobile Usability-Optimierung: Was spielt alles eine Rolle?

Bei der Gestaltung Deiner mobilen Website solltest Du neben der Schaffung von einzigartigen Inhalten auch einige Faktoren der mobilen Usability beachten. Denn wenn Dein Besucher sich gut auf der Website zurechtfindet und sie problemlos bedienen kann, wird er aufgrund seiner positiven User Experience (UX) auch gerne wieder kommen. Mobile Usability beeinflusst die mobile UX der User.

“Awesomeness” in allen Bereichen wird also sowohl von Usern als auch von der Suchmaschine geliebt. Mobile First bedeutet bei der mobilen Optimierung nun das Umdenken von klein nach groß – weshalb eigentlich nicht von einer Optimierung auf mobile, sondern eher von mobiler Website-(Neu-)Gestaltung gesprochen werden sollte. Mache Dir keine Gedanken darüber, wie Du Deine Desktop-Inhalte in die mobile Website pressen kannst. Nutze eher die Chance, Dir zu überlegen, was der User in dem Fall eines mobilen Website-Aufrufs an Information benötigt und wie er sich dort am besten zurecht findet. Die Usability Deiner Website solltest Du Dir detailliert ansehen. Mobile Websites sollen keine reduzierte Version der Desktop-Variante sein! Stelle Dir dabei die folgenden Fragen:

Die Beantwortung all dieser Fragen wird Dir dabei helfen, Deiner Website die notwendige Diät zu verpassen. Denn auch hier gilt das Motto: Weniger ist oft mehr.

Die Top Facts für Deine optimierte mobile Usability

1. Funktionalitäten

Die beiden auffälligsten Unterschiede von Desktop & Mobile sind eindeutig die Größe und ihre Bedienungselemente. Der Darstellungsbereich Deiner Website sollte angepasst sein, damit dem Besucher ein vertikales Scrollen erspart bleibt.

Was auf Desktop-Displays schnell ersichtlich ist, ist auf mobilen Touchscreens oftmals nicht auf den ersten Blick ersichtlich, sondern erst durch Klicken auf Icons etc. Die Inhalte erstrecken sich dann meist über den gesamten Bildschirm. Achte darauf, dass der User diese dann auch wieder schließen kann.

Der mobile Onliner hat keine Bedienhilfen wie eine Maus. Er navigiert mit seinen Fingern durch Deine Seite. Für mobile Usability sollten die Touch-Elemente zum einen die richtige Größe und zum anderen ausreichenden Abstand zueinander haben. Mouseover als eine oft verwendete Desktop-Funktion entfällt auf mobilen Devices gänzlich.

Das alte “wichtige Inhalte above the fold darstellen” ist in Zeiten der mobilen Kommunikation schlichtweg nicht mehr realisierbar. Die Displaygrößen und -auflösungen der Smartphones variieren enorm. Spätestens, wenn der User die Ausrichtung vom gewöhnlichen Hochformat in das Querformat ändert, ist das “fold” bis zur Unterkante des Screens somit nicht mehr definierbar. Zusätzlich ist der mobile User nicht gewillt, sich längere Zeit durch die Seite zu suchen.
Buchungen abschließen ist ein Conversion-Ziel auf Deiner Website? Mobile Usability sollte einfach sein: Verorte die dafür wichtigen Funktionalitäten präsent – bspw. eine Buchungsmaske auf der Startseite. Eine Zeitersparnis also und der User kann “direkt über Los gehen”.

Abbildung 1: Conversion-Funktionalität präsent auf Startseite verortet

2. Navigation

Bekannt und gelernt ist bei den Usern, dass Icon-Elemente wie Burger-Menü, Suche, persönlicher Bereich, Warenkorb etc. im oberen Teil der mobilen Website platziert sind. Der Trend der Smartphone-Industrie, die Geräte wieder größer zu designen, lässt uns diese jedoch auch immer schwerer bedienen. Immer mehr Leute nutzen die zweite Hand oder eine Halterung für die Finger, damit es mit dem Daumen bedient werden kann – Elemente im oberen Website-Bereich können nicht mehr leicht angesteuert werden. Ein negativer Einfluss auf die physische mobile Usability also. Die Lösung: “Bottom sheet”. Dabei befindet sich die Smartphone-Navigation im unteren Bereich des Screens.

Bei der Strukturierung Deiner Navigation solltest einen Blick in Deine Analytics-Daten werfen, um herauszufinden, welchen Seiten Du besondere Aufmerksamkeit schenken solltest. Welche Seiten weisen höheren Traffic auf? Diese sollten dann im Vordergrund bzw. oberen Bereich platziert werden. Da das menschliche Kurzzeitgedächtnis sich etwa 5 Dinge ohne große Anstrengung merken kann, sollte sich Deine Hauptnavigation auf 5 bis maximal 7 Menüeinträge beschränken.

Abbildung 2: Schwierigkeitsstufen der einhändigen Smartphone-Steuerung

3. Content – Text, Bild & Video

Der Rund-um-die-Uhr-Onliner nutzt sein Smartphone nicht nur von unterwegs, sondern überall und möchte seine Infos schnell erhalten. Auf was solltest Du deshalb bei Deinem mobilen Website Content achten?

Bilde Deine Inhalte in absteigender Wichtigkeit ab. Beantworte Dir dabei die Frage, was der User von den einzelnen Seiten erwartet und welche Inhalte wo platziert werden müssten.

Dabei solltest Du auch darauf achten, dass Deine Website einen lesbaren Kontrast aufweist. Aufgrund des kleineren Displays ist es für mobile Usability wichtig, dass der User die Inhalte gut erfassen kann. Schrift und Bild sollten sich farblich genug voneinander abheben.

Abbildung 3: Beispiel für eine schlecht lesbare Website

Texte, die Du bisher auf Deiner Desktop-Variante angeboten hast, können auf Mobile extreme Längen annehmen. Vereinfache Texte und beschränke Dich auf das Wichtigste. Scanbarkeit ist hier das Stichwort. Text kann oftmals durch Icons ersetzt oder durch Aufzählungen weniger komplex dargestellt werden. Führe keinen Monolog, stelle Fragen und interagiere mit dem User.

Die optimale Schriftgröße beträgt 16px – aufgrund der variablen Displaygrößen sollten diese mitskaliert werden.

Weitere Contentarten wie Bilder und Videos sind durchaus wichtig, können Deine mobile Usability aber negativ beeinflussen, wenn sie zu lange laden. Zum einen ist Page Speed Rankingfaktor bei Google, zum anderen springen User bei langen Ladezeiten ab. Beachte also auch die Optionen, mit denen Du Deinen Website Speed verbessern kannst. Der neue Page Speed Report der Ryte Suite liefert Dir hierfür die perfekten Insights. Checke mit unserem Free Account, ob Deine Inhalte optimiert sind.

Hinsichtlich Deiner Content-Optimierung sollte am Ende die Schnittmenge aus dem, was Du zu sagen hast und dem, was Deine Zielgruppen interessiert, auf der Website gezeigt werden.

4. Konsistenz

Wir Menschen sind Gewohnheitstiere. Beachte, dass es den mobilen User als solchen nicht gibt. Die User, die ihr Smartphone verwenden, sind dieselben, die vielleicht vorher schon per PC auf Deine Website gelangt sind. Oder aber es ist der User, der vorerst sein Smartphone für Vergleiche oder Informationsbeschaffung nutzt, später seinen Kauf dann über Desktop abschließt.

Verwirre Deine User nicht! In Sachen Mobile ist Usability durch Buttons etc. etwas anders als auf Desktop. Um ein einheitliches Bild nach Außen zu geben, ist es aber wichtig, dass Deine Seiten Wiedererkennungswert haben. Deshalb entferne Dich von dem Gedanken, auf der mobilen Variante einfach einige Elemente wegzulassen und unterschiedliche “Look&Feels” für verschiedene Devices zu gestalten. Denke bei Deiner mobilen Website also auch Multi-Device.

Gleiches gilt auch für Farben und Typografie: Je harmonischer die Farben aufeinander abgestimmt sind, desto vorteilhafter. Mobile Usability sollte Ordnung vermitteln. Das gelingt neben der Rasterausrichtung auch durch den Einsatz gut harmonierender Schriften. Maximal 2 Schriftarten sollen auf einer Seite und in den Bildern verwendet werden.

5. Mobile Usability im Search-Trend

“Beste Smartphonekamera” – so hätte eine Google-Suchanfrage noch vor ein paar Jahren aussehen können, aber getippt. Die gleiche Frage stellen wir heute Siri, Alexa, Google & Co., aber stimmhaft. Neben dem Voice-Search Trend gerät Visual-Search immer mehr ins Visier. User fotografieren Dingen, die ihnen gefallen und die sie gerne hätten und suchen über ihre Fotos online danach. Tippfehler und Zeitaufwand adé! Diese neuartigen Suchverhalten über Voice und Visual sind bestimmt von unserer Bequemlichkeit. Überlege Dir also, ob es für Deine mobile Usability sinnvoll wäre, diese Such-Funktionen auf der Website zu integrieren, mit denen die mobilen User eine neue Search Experience erfahren können.

Oder biete ihnen häufig gesuchte Begriffe via Suggestions oder des Users letzte Suchanfragen an.

Auch die Autovervollständigung bei Formularen oder das Anbieten eines bekannten Logins (“über Google anmelden” etc.), bei dem im besten Fall Zahlungsdetails hinterlegt sind, wird von den mobilen Usern zwischenzeitlich gerne angenommen.

Abbildung 4: interne Suchfunktionen visual & voice search & suggestions

Wie Du Dich auch entscheidest: Mach es Deinen Usern so einfach wie möglich!

Checkliste unserer Top mobile Usability Facts

1. FUNKTIONALITÄT

• Darstellungsbereich anpassen

• Funktionalitäten müssen geschlossen werden können

• Richtige Größe und ausreichenden Abstand der Touch-Elemente

• Conversion-Elemente zu Beginn präsent anbieten

2. NAVIGATION

• Bottom Sheet

• Wichtige Seiten priorisiert darstellen

• maximal sieben Hauptnavigationspunkte

3. CONTENT

• Inhalte in absteigender Wichtigkeit abbilden

• Texte scanbar machen

• Interaktion mit dem User

• Schriftgröße 16 px

• Bild- & Videodateien komprimieren & skalieren

4. KONSISTENZ

• Wiedererkennungswert über alle Device-Websites schaffen

• Konsistenz in Farbgestaltung & Typografie

5. MOBILE USABILITY IM SEARCH-TREND

• Voice Search-Funktionalität

• Visual Search-Funktionalität

• Autovervollständigung für Formulare

• Suggestions oder letzte Suchanfragen für die internen Suche

• Anbieten eines bekannten Log-ins