Sponsored Post Was ist das?

UX-Elemente, die du für eine gute, mobile Website unbedingt beachten solltest

User hält sein Smartphone vor seinen Laptop, im Hintergrund Kopfhörer

Websites sollten von Anfang an für mobile Surfer optimiert werden – das ist, mit den richtigen UX-Tipps, gar nicht so schwer. (Foto: Ryte)

Anzeige

Mobile-first ist längst keine nett gemeinte Floskel mehr – wer seine Website nicht für mobile User optimiert, der lässt viel Potential hinsichtlich SEO und Usability liegen. Wie Websites von Anfang an für mobile Geräte optimiert werden können, erfährst du in diesem Artikel.

Wie oft nutzt du dein Smartphone? Die Antwort ist der Grund, weshalb sich die Technologien der mobilen Devices und Dienstleister in den letzten Jahrzehnten enorm weiterentwickelt und mit all den Trends eine neue Denkweise ermöglicht haben. Der Tech-Konzern Google zeigte 2015 mit seinem Mobile-Friendliness-Update und 2018 mit Einführung seiner Mobile-first-Indexierung, dass mobil optimierte Websites unverzichtbar sind, wenn man als Online-Marketer die User, die ihre Journey via Google-Suche starten, erreichen möchte.

Warum mobile Website-Optimierung?

Neben einzigartigen Inhalten und den Varianten der technischen Umsetzung von mobile-friendly Websites sollten auch UX-Gesichtspunkte beachtet werden. Ein User, der positive Erfahrungen mit der Website macht, kommt gerne wieder – Usability spielt dabei eine wichtige Rolle. Und auch die Suchmaschine legt nicht nur Wert auf gute Inhalte; es kommt auf das große Ganze an.

Die optimierte Desktop-Version per copy-and-paste für die mobile Version verwenden oder die Inhalte für mobile Devices reduzieren – so dachte man vor ein paar Jahren. Spätestens seit dem Mobile-first-Indexing sollten diese Vorgehen verworfen werden.

Die Inhalte der Website sollten für Mobilgeräte gestaltet werden, wenn man weiterhin unter den indexierten Seiten bei Google auftauchen möchte. Google empfiehlt das responsive Website-Design – damit lassen sich die Inhalte auch auf den Desktop-Varianten ohne zusätzlichen Aufwand darstellen. Wer hier einen Schritt weitergehen möchte, sollte sich mit der Verwendung von Progressive-Web-Apps (PWA) auseinandersetzen.

Umdenken statt anpassen

„Mobile > Desktop“ setzt eine neue Denkweise voraus, da nicht mehr von groß zu klein, sondern vice versa optimiert werden sollte. Dies öffnet neue Türen: Es zahlt sich aus, Inhalte zu sichten und zu überlegen, was der User will. Unnötig aufgeblasene Texte werden kürzer und platzfüllende Bilder, die nur als Deko-Elemente für Inhalte dienen, fallen weg. Verwendest du auf deiner Website Formate, die auf mobilen Varianten unterstützt werden? Vermeide Flash und JavaScript. Befreie dich von deinen Website-Lastern!

Top UX-Facts für userfreundliche, mobile Websites

Bedienung

Mobile- und Desktop-Devices unterscheiden sich durch ihre Größe und Bedienelemente. Der Darstellungsbereich sollte angepasst sein, um vertikales Scrollen zu vermeiden. Bei mobilen Touchscreens ist vieles zuerst versteckt und erst durch Antippen sichtbar. Da die Inhalte nach Öffnen oftmals den kompletten Screen einnehmen, muss der User diese wieder schließen können. Beachte auch Größe und Abstand der Touch-Elemente: nicht zu klein und zu nah. Die Mouse-over-Funktion entfällt mobil gänzlich.

Um es dem User leicht zu machen, solltest du Funktionen, die für Conversions wichtig sind, präsent platzieren. Auf deiner Website kann man Buchungen abschließen? Dann biete dem User auf der Startseite die Buchungsmaske an. Das spart Zeit und erleichtert den Weg zum Abschluss. Eine weitere Zeitersparnis stellt die Autovervollständigung bei Formularen oder Suggestions in der Suche dar. Aber auch das Anbieten eines bekannten Logins („über Google anmelden“ o. Ä.), bei dem im besten Fall Zahlungsdetails hinterlegt sind, wird von den Usern zwischenzeitlich gerne angenommen.

Navigation

Viele Websitebetreiber verwenden Icon-Elemente wie das Burger-Menü, die Suche, einen persönlichen Bereich, Warenkorb etc. im oberen Teil. Der Trend geht jedoch Richtung „Bottom-Sheet“: Der Navigation im unteren Bereich des Screens. Eine logische Folgerung, beachtet man die Tatsache, dass die Screens der mobilen Devices immer größer werden und die User ihre Smartphones hauptsächlich über einen ihrer Daumen bedienen. Elemente im oberen Bereich sind nur schlecht erreichbar.

Beim Aufbau der Navigation empfiehlt es sich, die eigenen Analytics-Daten unter die Lupe zu nehmen. Welche meiner Seiten werden oft aufgerufen und sollten aus diesem Grund eine hohe Priorität erhalten? Achte bei der Strukturierung deiner Navi also darauf, deine wichtigen Seiten im Vordergrund beziehungsweise im oberen Bereich zu platzieren.

Content – Text, Bild und Video

Ryte
Ryte

Entdecke und korrigiere Fehler auf deiner Website, bewerte und verbessere die Google-Performance – mit Ryte.

Der Smartphone-Surfer ist viel unterwegs, mobile Devices werden überall genutzt. Der Rund-um-die-Uhr-Onliner möchte seine Infos schnell erhalten. Bilde also deine Inhalte in absteigender Wichtigkeit ab. Stelle dir immer wieder die Frage: Was erwartet der User auf dieser Seite, was muss ich ihm wo anbieten? Berücksichtige bei der Content-Optimierung auch, dass sich Text oftmals durch Icons ersetzen lässt. Die optimale Schriftgröße beträgt 16px – da auch die mobilen Screens unterschiedlich groß sind, sollten die Schriftgrößen mitskaliert werden.

Bilder und Videos sind durchaus wichtige Content-Arten – die schönsten Darstellungen sind nur leider nutzlos, wenn sie zu lange laden. Page-Speed spielt eine wichtige Rolle. Zum einen ist der Page-Speed ein Rankingfaktor bei Google, zum anderen springen User bei langen Ladezeiten ab. Deshalb zu guter Letzt: Komprimiere und skaliere deine Bilder und Videos. Checke mit dem Free Account von Ryte, ob deine Inhalte optimiert sind.

Dashboard mit relevanten KPI für die Performance einer Website

Das übersichtliche Dashboard von Ryte liefert euch alle relevanten KPI eurer Website auf einen Blick (Screenshot: Ryte)

UX im Trend – jetzt Website-Inhalte checken

Wer vor einigen Jahren mit einzelnen Keywords nach Infos gegoogelt hat, stellt seine Fragen heute Siri, Alexa, Google und Co. – Longtail ist das Stichwort. User machen Fotos von Dingen, die ihnen gefallen und die sie gerne hätten. Beachte also auch das Suchverhalten über Voice oder Visual – macht es Sinn, diese Elemente für deine Suchfunktion auf der Website zu integrieren? Happy optimizing!

Jetzt gratis Account anlegen!

 

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung