So verbessern Sie die mobile UX: 11 effektive Strategien

Warum Sie sich auf mobile Benutzer konzentrieren müssen

Sie haben eine für Mobilgeräte optimierte Website, nicht wahr? Halten Sie es mit relevanten Inhalten auf dem Laufenden und befolgen Sie die neuesten SEO-Richtlinien? Natürlich tust du! Und ich wette, es bietet eine großartige Benutzererfahrung auf Ihrem Desktop oder Laptop.

Aber konvertiert es auf Mobilgeräten? Da die mobile Internetnutzung im Laufe der Jahre explodiert ist, sollte Ihre mobile Benutzererfahrung (oder Mobile UX) genauso viel Aufmerksamkeit erhalten wie die Benutzererfahrung Ihrer Desktop-Website.

Im Jahr 2022 kommen bis zu 70 Prozent des Web-Traffics von mobilen Geräten — TECHJURY

Wissen Sie, wie Sie die mobile UX verbessern können? Leider leiden die meisten mobilen Erfahrungen aus einem einfachen Grund unter schlechter UX: Ihre Ersteller haben die Best Practices, Standards und Konventionen für das mobile UX-Design nicht eingehalten.

Da Google Ihre Website zunehmend basierend auf Ihrer mobilen Version bewertet, wird die Verbesserung Ihrer mobilen Benutzererfahrung noch wichtiger. In diesem Beitrag möchte ich 11 praktische Strategien zur Verbesserung der Benutzererfahrung (UX) Ihrer mobilen Website vorstellen.

Obwohl alle in diesem Beitrag erwähnten Dinge auch für Tablets gelten, hatte ich beim Schreiben dieses Beitrags Smartphones im Sinn. Aber im Jahr 2022 müssen Sie nicht nur Smartphones im Auge behalten, da viele andere Geräte Ihre Inhalte konsumieren können. Einige von Ihnen lesen diesen Beitrag vielleicht sogar auf Ihrer Smartwatch.

So verbessern Sie die mobile UX

1. Verwenden Sie ein aufgabenbasiertes Design

Frage: Was ist der Hauptgrund für Benutzer, Ihre Website zu besuchen?

Gestalten Sie Ihre mobile Website und ihre Struktur mit Blick auf den Benutzer – ohne die mobile SEO zu vergessen. Ihr Besucher verwendet sein Mobiltelefon. Vielleicht sind sie auf dem Weg zu was auch immer und müssen etwas auf Ihrer Website überprüfen. Was könnte das sein? Denken Sie einen Moment darüber nach, was Besucher auf Ihrer Website tun (überprüfen Sie Google Analytics, verwenden Sie Ihren gesunden Menschenverstand in Bezug auf Ihr Unternehmen oder führen Sie angemessene Tests durch). Legen Sie dann die wichtigsten Aufgaben für Ihre mobile Website fest.

Top-Aufgaben sind die kleinen Aufgaben (normalerweise weniger als zehn, oft weniger als fünf), die für Ihre Besucher am wichtigsten sind. Dies sind die wesentlichen Aufgaben, die Benutzer auf Ihrer Website voraussichtlich ausführen werden. Optimieren Sie Ihre mobile Website, damit diese Aufgaben so einfach wie möglich zugänglich sind.

Der Hauptzweck Ihrer Website besteht darin, Besuchern dabei zu helfen, Dinge zu erledigen. Wenn jemand Ihre Website findet und beginnt, sie zu durchsuchen, stellen Sie sicher, dass er leicht finden und abschließen kann, was er tun möchte. Es gibt wahrscheinlich jede Menge Apps auf ihrem Handy, an die sie gewöhnt sind. Auf einem mobilen Gerät kann es für den Benutzer schwieriger sein, sich zu konzentrieren. Ablenkungen gibt es überall, nicht nur am Telefon. Entwerfen Sie Ihre mobile UX, um sicherzustellen, dass sie ihre Aufgaben erledigen, bevor sie stattdessen zu anderen Apps wechseln.

2. Halten Sie es einfach

Sie denken vielleicht, dass Ihre Desktop-Site mit Heldenbildern und riesigem Text fantastisch aussieht. Aber auf Ihrer mobilen Website werden Benutzer den Effekt anders wahrnehmen. Es wird weniger Fokus geben. Ihre Website muss nicht nur schwarz-weiß sein, aber ein einfacher weißer Hintergrund, schwarze Buchstaben und eine oder vielleicht zwei unterstützende Farben reichen für eine bessere mobile UX aus.

Stellen Sie sicher, dass Ihre mobile Website und Ihre Desktop-Website dieselbe Benutzererfahrung bieten. Konsistenz gilt für den Inhalt und sollte auch für das Design gelten. Außerdem sollten Sie Ihre Website heute bei der Bewertung immer aus einer Mobile-First-Perspektive betrachten. Sollten Sie also jemals ein Redesign-Projekt für Ihre Website starten, stellen Sie sicher, dass es zuerst auf Mobilgeräte ausgerichtet ist.

Das Abschwächen gilt auch für Ihre Animationen und andere Mikrointeraktionen. Jedes unwesentliche Stück JavaScript, das Sie Ihrer Website hinzufügen, erschwert das Laden und Ausführen. Außerdem sind Animationen auf einer mobilen Website nicht immer sinnvoll. Also halten Sie Ihre Website schlank und gemein!

3. Auf Geschwindigkeit optimieren

Wenn Sie Ihre mobile Website so einfach wie möglich halten, können Sie auch die Seitenladegeschwindigkeit auf mobilen Geräten verbessern. Die Seitengeschwindigkeit trägt wesentlich zu einer mobilen Benutzererfahrung bei. Es gibt viele Tools, um die Website-Geschwindigkeit zu überprüfen. Oft gibt es mehrere Dinge, die Sie tun können, um die Seitengeschwindigkeit zu optimieren.

Auch bei Google ist die Seitengeschwindigkeit ein heißes Thema. Im Jahr 2021 kündigte die Suchmaschine einen neuen Satz von Metriken namens Core Web Vitals an. Diese Metriken geben Google Insights für einen neuen Rankingfaktor: Page Experience. Im Jahr 2022 werden Benutzer mobile Websites danach beurteilen, welche Erfahrung sie den Benutzern bieten. Und Sie haben es erraten, die Geschwindigkeit der Website ist einer dieser Faktoren.

Eines der einfachsten und effektivsten Dinge, die Sie tun können, ist die Optimierung Ihrer Bilder für SEO und Benutzererfahrung. Es gibt mehrere Tools, die Ihnen dabei helfen. Ich mag Imagify, aber Smush und Short Pixel sind brauchbare Alternativen.

Darüber hinaus sollten Sie die geladenen CSS- und JavaScript-Dateien kombinieren und minimieren. Je weniger Verbindungen zum Server erforderlich sind, desto schneller wird Ihre Website und desto besser ist die mobile Benutzererfahrung. Dieser Schritt kann jedoch Ihre Website beschädigen, und Sie sollten sich von einem professionellen Webdesigner helfen lassen.

Natürlich sollten Sie auch Premium-Hosting verwenden, da sich dies für viele Websites oft als schneller Gewinn herausstellt.

4. Verwenden Sie anklickbare Schaltflächen

Es ist so offensichtlich, aber dennoch ein Grund zur Sorge. Besucher durchsuchen mobile Websites mit Fingern und Daumen, und Schaltflächen bieten nicht immer genügend Platz, um sie schnell zu treffen. Diese finden Sie unter Accessible Tap Targets in der Entwicklerdokumentation von Google. Und wir müssen in der Lage sein, Elemente mit diesem Daumen anzuklicken.

In diesem oben verlinkten Google-Artikel finden Sie Zahlen für dieses Tap-Ziel:

Die empfohlene Mindestgröße für Touch-Ziele liegt bei etwa 48 geräteunabhängigen Pixeln auf einer Website mit einem korrekt eingestellten Darstellungsbereich für Mobilgeräte. Während ein Symbol beispielsweise nur eine Breite und Höhe von 24 Pixel haben kann, können Sie zusätzliche Polsterung verwenden, um die Tap-Zielgröße auf 48 Pixel zu bringen. Die Fläche von 48 x 48 Pixeln entspricht etwa 9 mm, was ungefähr der Größe der Fingerkuppenfläche einer Person entspricht.

Darüber hinaus stellten die Usability-Experten von Nielsen fest, dass Berührungsziele auf Mobilgeräten eine gerenderte Größe von mindestens 1 cm x 1 cm haben sollten, um Fehler und Frustration zu vermeiden. Im Zusammenhang mit Schaltflächen-Trefferbereichen stehen Berührungselemente, die oft zu nahe beieinander liegen – etwas, das Nielsen auch in diesem Forschungsartikel beschrieben hat. Es ist beispielsweise nicht vorteilhaft, auf einen Link zu klicken und woanders zu landen, weil der Link daneben zu nahe an dem gewünschten Link liegt.

5. Konzentrieren Sie sich auf die mobile Daumenzone

Als die Bildschirmgröße zunahm, wurde der Begriff „mobile Daumenzone“ plötzlich zum entscheidenden Begriff für den Designer-Jargon. Die meisten Menschen halten ihre mobilen Geräte im Alleingang und verwenden ihren Daumen, um auf der Website zu navigieren.

Natürlich muss die mobile Benutzeroberfläche die meisten anklickbaren Elemente und wichtige Navigationsschaltflächen in bequemer Reichweite des Daumens bieten. Daher wird diese bequem erreichbare Zone um den Daumen des Benutzers als bewegliche Daumenzone bezeichnet.

Das bedeutet, dass Sie Ihr mobiles Website-Erlebnis für die „Daumenzone“ optimieren müssen – den Bereich des Bildschirms eines Telefons, auf den mit dem Daumen leicht zugegriffen werden kann, wenn eine Person ihr Telefon mit einer Hand hält.

Platzieren Sie primäre Interaktionen im Wesentlichen vorne und in der Mitte (leicht erreichbare Bereiche des Bildschirms) und weniger wichtige an den oberen und unteren Bildschirmrändern. Denken Sie daran, dass mit zunehmender Bildschirmgröße die Daumenzone abnimmt.

6. Fügen Sie ein einfaches Menü und eine Suchoption hinzu

Eines der Hauptelemente der mobilen UX ist die Suche. Sie müssen in der Lage sein, im Handumdrehen zu suchen. Daher sollte beim Lesen einer Seite beim Klicken auf eine andere immer eine Suchoption verfügbar sein. Die Sache ist die, obwohl wir uns bemühen, eine möglichst unkomplizierte Website zu präsentieren, wird es immer Elemente geben, die einfach nicht so einfach hineinpassen. Für all diese Inhalte wäre es also gut, eine mobile Suchoption zu verwenden.

Wenn Sie Immobilienmakler sind oder Kleidung online verkaufen, kann diese Suchoption auch das wesentliche Element auf Ihrer mobilen Homepage sein. Zeigen Sie in diesem Fall also bitte diese Suchoption im Inhaltsbereich an und stellen Sie sie über die Menüleiste auf anderen Seiten zur Verfügung.

Eine weitere Sache zur mobilen UX im Zusammenhang mit der Suche: Die Möglichkeit zu haben, ist der erste Schritt. Stellen Sie sicher, dass auch Ihre internen Suchergebnisseiten fantastisch aussehen. Die Ergebnisse sollten nach Relevanz geordnet werden, z. B. Desktop und Mobil. Stellen Sie sicher, dass einzelne Ergebnisse unterschieden werden können, und verbessern Sie so die Trennung der Ergebnisse.

7. Verwenden Sie visuelle Trennzeichen

Dieser Mangel an Trennung bedeutet nicht, dass Sie alle Arten von Trennlinien auf Ihrer mobilen Website verwenden sollten. Trennwände nehmen Platz ein, was sich stattdessen negativ auf die mobile UX auswirkt.

Überlegen Sie, wie Sie Elemente so gestalten können, dass sie alle wie separate Abschnitte aussehen, ohne dass eine Trennwand erforderlich ist. Verwenden Sie Rahmen, Leerzeichen, Überschriften usw. Sie können viele Dinge tun, um die mobile UX zu verbessern, ohne Zeilenelemente hinzuzufügen, die Platz beanspruchen. Natürlich spricht nichts dagegen, sie zu verwenden. Stellen Sie einfach sicher, dass sie sich einfügen und die Benutzer nicht von der Ausführung ihrer Aufgaben ablenken.

8. Verwenden Sie Kurzformen

Wie auf Ihrer Desktop-Website könnte oder sollte Ihre mobile Website auf Conversion abzielen. Beispielsweise möchten Besucher Produkte kaufen oder ein Angebot für Ihre Dienstleistungen einholen. Das Abonnieren Ihres Newsletters oder das einfache Ausfüllen eines Kontaktformulars sind alles Aktionen, die eine Benutzereingabe erfordern. Auf einem Mobiltelefon ruinieren mehrseitige Formulare die mobile UX. Benutzer können diese ausfüllen, aber es verlangt viel. Ehrlich gesagt mag ich mehrseitige Formulare auf Desktops oder Laptops nicht besonders.

Für eine optimale mobile UX möchten Sie Formulare so kurz wie möglich halten. Entfernen Sie alle Dinge, die Sie fragen möchten, aber nicht benötigen:

• Newsletter? Nur die E-Mail-Adresse (mit einem <input type=“email“>-Eingabefeld).
• Zitieren? Nachname und E-Mail-Adresse.
• Geschäft? Liefer-, Rechnungs- und E-Mail-Adresse. Bonuspunkte für eine Option zum Kopieren der Lieferadresse in die Rechnungsadresse.

Stellen Sie jedoch sicher, dass Sie die DSGVO-Richtlinien befolgen!

9. Schriftgrößen begrenzen

Typografie kann eine mobile Website machen oder zerstören. Nicht nur die Schriftart, die Sie auswählen, ist wichtig, sondern auch die Größe dieser Schriftarten. Leider können Sie nicht alle Desktop-Schriftgrößen auf Ihrer mobilen Website verwenden. Dafür gibt es zwei Gründe:

1. Die mobile Bildschirmgröße. Sie möchten nicht, dass der Titel den Bildschirm ausfüllt; Sie möchten sicherstellen, dass der Artikel bei der ersten Ansicht der Seite beginnt. Sie möchten auch nicht, dass die Basisschriftart (wie Ihre Absatzschriftart) zu klein ist, um gelesen zu werden, ohne dass Sie kneifen und zoomen müssen.
2. Mobile UX leidet, wenn mehr als drei Schriftgrößen verwendet werden. Die Größenunterschiede werden viel sichtbarer sein. Sie sollten die Anzahl der Schriftgrößen auf zwei, vielleicht drei beschränken.

Die Handy-freundlichen Tests von Google überprüfen sogar, ob Sie die empfohlenen Schriftgrößen verwenden. Dies gilt natürlich hauptsächlich für die Körperschrift, aber trotzdem.

10. Begrenzen Sie Anzeigen und Pop-ups

Viele Websites verwenden Anzeigen, um ein wenig Geld zu verdienen, und das ist in Ordnung. Aber Sie sollten den Benutzer nicht mit aufdringlichen Popups und einer Fülle von Anzeigen von Drittanbietern erschrecken. Sie respektieren den Benutzer nicht, wenn Sie ihm als Erstes ein Anmeldeformular für Ihren Newsletter zeigen. Stellen Sie sicher, dass Ihre primären Inhalte geladen werden, bevor Sie Ihre Anzeigen und CTAs einführen.

Halten Sie die Anzeigen außerdem geschmackvoll und abgeschwächt. Sie möchten eine Verbindung aufbauen und eine Beziehung zu einem Benutzer aufbauen, und das passiert nicht, wenn Sie ihnen JETZT KAUFEN ins Gesicht blitzen, sobald sie auf Ihre mobile Website gelangen. Übermäßig aggressive Werbung schafft eine schlechte Benutzererfahrung.

11. Testen Sie Ihre Mobile UX. Wiederholen!

Wenn Sie Ihren Besuchern eine mobile Website bereitstellen, müssen Sie jede Änderung auf Ihrer Desktop-Website und der mobilen Version Ihrer Website testen. Nur so ist Ihre mobile Website immer aktuell. Stellen Sie also sicher, dass Sie Ihre mobile Website immer wieder testen.

Die Vorteile der Verbesserung der mobilen UX

Das mobile Zeitalter steht vor der Tür und die Verbesserung der UX auf mobilen Geräten ist genauso wichtig wie die Verbesserung für Desktop-Benutzer. Natürlich erfordert es viel Arbeit, aber die Endvorteile von zufriedeneren Benutzern, verbesserten Suchrankings und höheren Einnahmen machen alles lohnenswert.

Bei der Verbesserung der mobilen UX geht es jedoch nicht darum, die Dinge gleich oder sogar ähnlich aussehen zu lassen. Es geht darum, die Dinge besser funktionieren zu lassen und die Barrieren für die Einführung zu senken. Sobald Designer und Entwickler die Best Practices beherrschen, können sie innovativ sein und sich verzweigen, um einzigartige Designs zu erstellen, die die Regeln beugen oder brechen.

Die Bereitstellung der bestmöglichen mobilen Benutzererfahrung ist der beste Weg, um Website-Besucher davon zu überzeugen, dass Ihr Unternehmen tatsächlich die richtige Wahl ist.

Die meisten der Trends und Tipps, die ich hier besprochen habe, sind einfach zu implementieren und erfordern nicht viel Ressourcen oder Aufwand, während einige eine gründlichere Neugestaltung erfordern.

Indem Sie die mobile UX verbessern, geben Sie ein klares Statement ab, dass Ihnen die Art der Erfahrung wichtig ist, die Benutzer mit Ihrem Unternehmen haben, und dies ist die beste Markenbotschaft, die Sie vermitteln können. Wir sind hier um zu helfen!

Sind Sie sich nicht sicher, wie Sie die mobile UX verbessern können?

Die Verbesserung der mobilen UX ist entscheidend, um die bestmögliche Benutzererfahrung zu bieten. Benutzerfreundlichkeit ist entscheidend, wenn Sie den immer anspruchsvolleren mobilen Verbraucher anziehen und ansprechen wollen.

Möchten Sie die mobile UX für Ihre Online-Präsenz verbessern? Unser Team aus professionellen Designern hilft Ihnen gerne dabei. Aber schauen Sie sich zuerst unser Portfolio an und lesen Sie unsere Fallstudien.

Dann lassen Sie uns reden, wenn Sie der Meinung sind, dass wir gut zu Ihren mobilen Designanforderungen passen! Wir bieten eine umfassende Palette an Beratungs- und Designlösungen für Unternehmen und Produktmarken.

Wenn Sie sich nicht sicher sind, wie die Verbesserung der mobilen UX Ihrem Unternehmen oder Ihrer Produktmarke zugute kommt, können wir Ihnen helfen! Unser Team hört sich Ihre Bedenken an, bewertet Ihre Bedürfnisse und erstellt eine Liste mit Dingen, die Sie zur Verbesserung der mobilen UX und Benutzerfreundlichkeit benötigen.

Haben Sie die mobile UX auf Ihrer Website verbessert?

Haben Sie einen meiner Vorschläge zur Verbesserung der mobilen UX ausprobiert? Welche haben Sie ausprobiert und welche Ergebnisse haben Sie erzielt? Haben Sie weitere Tipps oder Ideen zur Verbesserung der mobilen UX?

Bitte zögern Sie nicht, unten einen Kommentar abzugeben, damit unser Publikum davon profitieren kann, und holen Sie sich unseren Feed, damit Sie unseren nächsten Beitrag nicht verpassen! Und teilen Sie unseren Beitrag gerne mit Ihrem Publikum!

Danke! Wir wissen Ihre Hilfe zu schätzen, um schlechte Geschäftswebsites Pixel für Pixel zu beenden!

Von Gregor Saita
Mitbegründer / CXO
@gregorsaita