5 Best Practices zur Verbesserung der mobilen Erfahrung Ihrer Website
In einer Zeit, in der Mobilgeräte mehr denn je eine Rolle spielen, können Sie sich durch die Einhaltung von UX-Best Practices zur Steigerung der Konversionsrate einen deutlichen Vorsprung vor Ihrer Konkurrenz verschaffen.
Im Moment lohnt es sich noch, darüber gesondert zu sprechen, aber das könnte schon bald nicht mehr der Fall sein. Es ist klar, dass der mobile Traffic in den letzten Jahren massiv zugenommen hat.
Die 5 best practices, die wir behandeln werden:
Daten von Statista zeigen zum Beispiel, dass 50,81 % des weltweiten Internetverkehrs von mobilen Geräten stammt, und das ohne Tablets.
Statcounter meldet derweil eine etwas höhere Zahl von 55,68 %, wobei der mobile Webverkehr im Jahr 2017 endlich den Desktop überholt hat.
Aus der obigen Grafik können Sie ersehen, dass es sieben Jahre nach dem Start dauerte, bis die mobile Nutzung den Desktop überholt hatte.
Die Erfahrungen der mobilen Nutzer mögen in der Vergangenheit trübe gewesen sein, aber die Dinge beginnen sich definitiv zu verbessern:
- Es entwickeln sich Standards.
- Bewährte Praktiken werden in größerem Umfang übernommen.
- Und auch wenn es hier und da noch die eine oder andere Website gibt, die überhaupt nicht für mobile Geräte geeignet ist, so werden diese Websites doch immer mehr an den Rand gedrängt.
Mit anderen Worten: Wir verlassen die Wildwest-Phase des Mobilfunks.
Und mit Googles Umstellung auf Mobile-First-Indexierung werden mehr Website-Besitzer gezwungen sein, ihren mobilen Websites Aufmerksamkeit zu schenken. Da Google jetzt die mobile Version einer Website für die Suchindexierung und das Ranking verwendet, wird eine schlechte mobile Erfahrung zu einer schlechten Suchleistung führen.
Wenn Sie also das Gefühl haben, dass Ihre mobile Website immer noch im Wilden Westen lebt, sollten Ihnen diese 5 Tipps helfen, einen Ausweg zu finden.
1. Optimieren Sie die mobile Navigation, um das mobile Erlebnis zu verbessern
Die größte Herausforderung, die wir bei vielen mobilen Websites immer wieder feststellen, ist eine gute Navigation.
Die Navigation ist für Ihre mobile Website von entscheidender Bedeutung, da sie als Wegweiser für Ihre Online-Besucher dient und es ihnen ermöglicht, die benötigten Inhalte oder Informationen leicht zu finden. Eine gute Navigation zu entwerfen bedeutet, die Auffindbarkeit zu gewährleisten und das Einprägen von Informationen zu erleichtern.
Dies können Sie durch folgende Maßnahmen erreichen:
- Optimieren Sie Ihr Verhältnis von Inhalt zu Farbe
- Organisieren Sie Ihre Navigationselemente
- Verwenden Sie große Touch-Ziele für die Navigation
Lassen Sie uns beginnen.
Optimieren Sie Ihr Verhältnis von Inhalt zu Chrom
Zunächst einige Aufräumarbeiten.
Der Teil Ihrer Website, der die Navigationselemente enthält, wird „Chrom“ genannt.
Der Chrome ist der gesamte Platz, den Ihre Website für Navigationselemente verwendet. Dazu gehören die URL-Leiste, die Zurück-Schaltfläche, die Vorwärts-Schaltfläche, die Hauptnavigation oben auf der Seite und die linke Navigation.
Auf Desktops haben Sie viel Platz für den Chrome. Daher ist es sinnvoll, alle primären Navigationselemente auf allen Seiten anzuzeigen.
Auf mobilen Geräten sollten Sie das Verhältnis zwischen Chrom und Inhalt besser optimieren. Das heißt, Sie sollten den wenigen Platz, der Ihnen zur Verfügung steht, mehr für den Inhalt und weniger für die Navigation verwenden.
Hier erfahren Sie, wie Sie den angezeigten Inhalt maximieren können:
- Führen Sie Ihre primären Navigationsoptionen nicht auf jedem Bildschirm auf. Lassen Sie das Menü stattdessen nur dann anzeigen, wenn der Benutzer es aktivieren muss. Das bedeutet, dass das Menü angezeigt wird, wenn der Benutzer mit einem Navigationselement wie dem Hamburger-Menü interagiert.
- Stellen Sie sicher, dass der Auslöser für das Menü leicht zu erkennen ist. Sobald der Nutzer durch Tippen auf das Hamburger-Menü signalisiert, dass er Navigationselemente sehen möchte, können Sie den Navigationselementen so viel Platz wie nötig einräumen.
Nach Angaben der Nielsen Norman Group beeinträchtigen Elemente wie das Hamburger-Menü die Auffindbarkeit, da sie die Navigation verdecken. Dies gilt zwar hauptsächlich für Desktops, aber die versteckte Navigation wirkt sich dennoch negativ auf die Benutzerfreundlichkeit von Mobiltelefonen aus (wenn auch in geringerem Maße als auf dem Desktop).
Die Verwendung einer Kombination aus versteckter und sichtbarer Navigation ist eine Alternative, die man für die mobile Nutzung in Betracht ziehen kann.
Organisieren Sie Ihre Navigationselemente mit Bedacht
Um die richtigen Elemente auf den richtigen Geräten anzeigen zu können, ist es wichtig zu wissen, worauf die Besucher mit ihren Mobiltelefonen am häufigsten zugreifen. Bei dem geringen Platz, der zur Verfügung steht, können Sie es sich nicht leisten, alle Kategorien alphabetisch anzuzeigen.
Wenn Nutzer auf mobilen Geräten auf Menüs tippen, erwarten sie, dass der Inhalt leicht zu sortieren ist. Hier ist, was Sie tun können, um dies zu erreichen:
- Überprüfen Sie Google Analytics oder andere Clickstream-Tools und filtern Sie den mobilen Datenverkehr heraus.
- Wenn Sie die am häufigsten besuchten Bereiche ermittelt haben, segmentieren Sie diese nach Gemeinsamkeiten (allgemeine Themen, am häufigsten verwendete Produktkategorien usw.).
- Zeigen Sie die am häufigsten aufgerufenen Themen oder Produktbereiche in Ihrem Hamburger-Menü an – verlassen Sie sich nicht auf die Standardsortierung.
Das sollten Sie eigentlich auch bei Ihrer Desktop-Website tun. Das heißt, dass Sie die Navigationselemente nach den folgenden Kriterien priorisieren sollten:
- Was wird von der Mehrheit Ihrer Online-Besucher häufig genutzt?
- Was trägt zum Umsatz Ihres Unternehmens bei?
Wenn Ihre Besucher nun überwiegend von Mobiltelefonen kommen, haben Sie einen noch zwingenderen Grund, die Navigation auf der Grundlage der meistverkauften Produkte und der Vorlieben Ihres mobilen Publikums zu organisieren.
Sie könnten zum Beispiel eine visuelle Navigation in den Hauptinhaltsbereich einfügen, so dass Ihre mobilen Besucher sofort Ihre wichtigsten Produkt- oder Dienstleistungskategorien sehen.
Verwenden Sie große Touch-Ziele für die Navigation
Wenn Besucher auf die Startleiste eines Menüs tippen, haben Sie im Grunde die Lizenz, den gesamten Bildschirm Ihres mobilen Geräts zu nutzen. Das müssen Sie voll ausnutzen.
Die meisten mobilen Benutzer verlassen sich bei Smartphone-Interaktionen auf ihre Daumen, so dass eine Vergrößerung der Berührungsziele eine erhebliche Auswirkung auf die Reduzierung von Benutzerfehlern haben kann.
Größere Ziele bedeuten natürlich auch weniger Elemente auf dem Bildschirm, daher müssen Sie Ihre Zielgruppe sehr gut kennen. Was ist ihnen an Ihrer Produktlinie am wichtigsten?
Stellen Sie sicher, dass Ihre Berührungsziele der Mindestgröße entsprechen
Die Vergrößerung von Handlungsaufrufen ist nicht nur für mobile Websites eine bewährte Praxis.
Allerdings gibt es bestimmte Maße, die Sie für mobile Geräte einhalten müssen, da die Aktionen des Daumens weit weniger präzise sind als die der Maus.
Bedenken Sie dies:
- Die Fingerspitze eines durchschnittlichen Menschen ist etwa 1,6 bis 2 cm breit.
- Der Daumen eines Durchschnittsmenschen hat eine Schlagfläche von etwa 2,5 cm (~1 Zoll).
Eine Studie zeigt, dass die Mindestabmessungen eines Berührungsziels 1 cm × 1 cm betragen sollten.
Achten Sie darauf, dass die Größe und die Abstände Ihrer Touch-Ziele die physischen Einschränkungen der Benutzer berücksichtigen, die ihre Smartphones benutzen.
2. Ladezeitoptimierung zur Verbesserung des mobilen Erlebnisses
Untersuchungen zeigen, dass 53 % der Verbraucher eine mobile Website, die länger als 3 Sekunden zum Laden braucht, wieder verlassen.
Es gibt einige Möglichkeiten, wie Sie verhindern können, dass die meisten dieser Besucher Ihre Website aufgrund der Geschwindigkeit verlassen:
Latenz ausblenden
Sie können „above-the-fold“-Elemente bereitstellen, während die Elemente weiter unten auf der Seite im Hintergrund geladen werden.
Dies wird als „Lazy Loading“ bezeichnet und ist eine weit verbreitete Technik, um die tatsächliche Ladezeit zu verbergen.
Seien Sie jedoch vorsichtig, wenn es darum geht, die Latenzzeit durch „Lazy Loading“ zu verbergen. Google warnt davor, dass eine unsachgemäße Implementierung von „Lazy Loading“ auf Ihrer mobilen Website Google versehentlich daran hindern kann, den Inhalt Ihrer Website zu crawlen.
Bilder optimeren
Es ist äußerst wichtig, die Pixelgröße und die Dateigröße eines Bildes zu optimieren. Sie können dies zu Ihrem Vorteil nutzen und die Ladezeit auf mobilen Geräten erheblich verkürzen, da Sie eine kleinere Gesamtseite bereitstellen.
Mit Webpagetest und Pagespeed Insights von Google können Sie eine Prüfung Ihrer Ladezeit durchführen und potenzielle Verbesserungsbereiche ermitteln.
Zudem können Sie mit dem Website Bild Analyse Tool von Cloudinary die Bilder Ihrer Website schnell und einfach optimieren und downloaden.
3. Verbessern Sie die mobile Erfahrung von wiederkehrenden Besuchern
Wenn Sie schon einmal Daten in ein Formular auf einem mobilen Gerät eingegeben oder eine mehrstufige Kaufabwicklung auf einem Smartphone versucht haben, wissen Sie, wie frustrierend es ist, wenn die ganze Arbeit, die Sie bis dahin geleistet haben, verloren geht.
Das Eingeben von Werten auf winzigen Geräten ohne richtige Tastatur ist mühsam. Wenn Sie also Wert auf Ihre wiederkehrenden Besucher legen, sollten Sie einen Mechanismus einrichten, der es wiederkehrenden Besuchern erspart, die Arbeit von Grund auf neu zu machen.
Wenn Ihr Content-Management-System (CMS) Cookies erfordert, können Sie Cookies verwenden. Wenn Ihr CMS cloudbasiert ist, verwenden Sie das cloudbasierte Gegenstück.
Ein weiterer Bereich, dem Sie Aufmerksamkeit schenken sollten, ist die kanalübergreifende mobile Erfahrung. Viele Online-Besucher wechseln zwischen verschiedenen Geräten hin und her, bevor sie schließlich auf ihrem bevorzugten Gerät konvertieren.
Eine nahtlose Erfahrung für wiederkehrende Besucher bedeutet, dass sie einfach mit dem fortfahren können, was sie in ihrer vorherigen Sitzung getan haben. Dazu gehört auch, dass die Daten oder Informationen, die sie auf einem anderen Gerät eingegeben haben, bei der Weitergabe nicht verloren gehen.
Was auch immer Sie tun, lassen Sie die harte Arbeit des wiederkehrenden Besuchers nicht umsonst gewesen sein.
4. Fügen Sie Abkürzungen für mobile Nutzer hinzu
Der mobile Datenverkehr mag den Desktop-Verkehr überholt haben, aber die Conversionsrates für mobile Geräte liegen weiterhin unter denen für Desktop-Geräte. Der 2020 Ecommerce Stats Report von SaleCycle zeigt zum Beispiel, dass die mobilen Verkäufe zwar weiter steigen, die Mehrheit der Käufer aber immer noch lieber auf dem Desktop einkauft.
Die niedrigere mobile Konversionsrate ist teilweise auf die Ambivalenz und das geringe Vertrauen der mobilen Nutzer zurückzuführen. Es gibt jedoch noch einen einfacheren, wichtigeren Grund: Die Konvertierung auf dem Handy ist eine schwierige Aufgabe.
SaleCycle stellt zum Beispiel fest, dass die Rate der in den Warenkorb gelegten Artikel auf mobilen Geräten fast genauso hoch ist wie auf Desktop-Websites. Das bedeutet, dass mobile Nutzer gerne auf mobilen Websites einkaufen, aber zögern, wenn es darum geht, ihre Transaktionen abzuschließen.
Indem Sie also bewusst den Aufwand für die Nutzung Ihrer mobilen Website verringern, können Sie das mobile Erlebnis verbessern und die Besucher zum Kauf animieren. Sie können die integrierten Funktionen der meisten Mobiltelefone nutzen, um Ihren Nutzern Verknüpfungen anzubieten, die die Benutzerfreundlichkeit erhöhen.
5. Testen Sie Ihre Website für das mobile Erlebnis
Selbst wenn Sie ein wichtiges mobiles Gerät zum Testen Ihrer Website haben, werden UX-Lücken wahrscheinlich immer noch durch die Maschen fallen.
Sie können den DevTools-Gerätemodus von Chrome verwenden, um zu simulieren, wie Ihre Website auf verschiedenen mobilen Geräten angezeigt wird:
Anschließend können Sie die Darstellung auf 3-5 tatsächlichen Mobilgeräten überprüfen, nachdem Sie Funktionen oder Seitengruppen gestartet haben. Vergewissern Sie sich, dass Sie mehrere Arten von Funktionen erreichen, einschließlich Ihres Videoplayers.
Sie können Ihre mobile Erfahrung auch mit Googles Test My Site überprüfen. Sie brauchen nur die URL Ihrer Website einzugeben, und Google erstellt einen vollständigen Bericht mit Empfehlungen für Verbesserungen Ihrer mobilen Website.
Befolgen Sie die Best Practices für mobile UX, um die Conversions zu steigern
Die richtige mobile Erfahrung zu machen ist schwierig, aber letztendlich lohnend.
Diejenigen, die …
- die mobile Navigation verbessern,
- eine niedrige Seitenladezeit anstrebt,
- das Benutzererlebnis für wiederkehrende Besucher verbessern,
- Abkürzungen auf dem Handy nutzen und
- mehrere Tools zum Testen ihrer Websites verwenden
… haben in einer Zeit, in der Mobile mehr denn je eine Rolle spielt, einen deutlichen Vorsprung vor der Konkurrenz.
Analysieren Sie UX, Design, Content, Verkaufspsychologie, SEO und die Sicherheit.
