5 Mobile Ux-Tipps, die jeder Designer befolgen sollte

Derzeit liegt ein großer Fokus auf der Behebung mobiler Probleme, einschließlich mobiler Leistungsprobleme, da die Benutzer weiterhin an ihren kleineren Geräten festhalten.

Normalerweise werden diese Probleme nach dem Start einer Website behoben, wenn Fehler in den Berichten der Google Search Console zur mobilen Benutzerfreundlichkeit auftauchen. Während Entwicklungsteams solche Fehler oft beheben können, ist es für Designer viel effizienter, die Best Practices für mobile UX von Anfang an zu verstehen und umzusetzen.

Die mobile Geschwindigkeit ist auch ein wichtiger Faktor für die Suchmaschinenoptimierung, daher müssen Designer und Entwickler berücksichtigen, wie sich alles von Animationen bis hin zu Bildern auf diese Metriken auswirkt.

Konzentrieren Sie sich auf den Abstand der Designelemente

Beim Abstand von Designelementen geht es nicht nur darum, einen schönen visuellen Fluss zu schaffen; Es geht darum, Ihre Website für alle Besucher, einschließlich derer auf Mobilgeräten, benutzerfreundlich zu gestalten.

Ein häufiger Fehler in der mobilen Benutzerfreundlichkeit in der Google Search Console ist, dass „anklickbare Elemente zu nahe beieinander liegen“.

Dies schafft eine frustrierende Erfahrung für Besucher auf kleineren Geräten, wenn sie versehentlich auf Elemente klicken, während sie versuchen, auf der Website zu navigieren.

Aus Sicht des mobilen UX-Designs müssen Schaltflächen und interaktive oder anklickbare Elemente groß genug sein und im Design weit genug voneinander entfernt platziert werden.

Auf einem Desktop navigieren Besucher mit einer Maus, was ein sehr präzises Werkzeug ist, während auf Mobilgeräten die meisten Benutzer ihre Daumen verwenden. Daumen sind normalerweise größer als Ihr kleiner Mauszeiger und können etwas ungeschickter sein, insbesondere wenn Sie versuchen, beim Gehen oder Multitasking auf einer Website zu navigieren.

Daher müssen Sie genügend Platz zwischen Schaltflächen und Elementen entwerfen, damit der Besucher kein frustrierendes mobiles Erlebnis hat.

Sie müssen auch die Zugänglichkeit berücksichtigen und wie Besucher das kleinere Gerät halten. Einige halten das Telefon oder Tablet möglicherweise mit der linken Hand, andere mit der rechten Hand oder einige mit beiden Händen. Unabhängig davon muss das Website-Design einfach zu navigieren sein.

Schließlich verwenden Besucher auch ihren Daumen, um auf dem Gerät zu scrollen und durch die Webseite zu gehen, also müssen Sie sicherstellen, dass es keine großen anklickbaren Elemente gibt, auf die sie beim Scrollen versehentlich tippen könnten.

Stellen Sie die Lesbarkeit von Text und Schriftart sicher

Neben Leerzeichen ist ein weiterer häufiger Fehler in der mobilen Benutzerfreundlichkeit in Google Search Console-Berichten „Text ist zu klein zum Lesen“. Während ein Entwickler einige Aspekte der Schriftgröße anpassen kann, gibt es mehrere UX-Best Practices, die Designteams in Bezug auf die Lesbarkeit von Anfang an implementieren können.

Die Auswahl einer gut lesbaren Schriftart ist der erste Ausgangspunkt. Denken Sie daran, dass Benutzer häufig unterwegs sind, Multitasking betreiben oder draußen sind, während sie ihre kleineren Geräte verwenden, und dass sie sich möglicherweise in nicht idealen Szenarien befinden, während sie versuchen, auf Ihrer Website zu navigieren.

Das Erstellen einer visuellen Hierarchie in Bezug auf die Schriftgröße ist eine weitere Möglichkeit, diesen mobilen Benutzern zu helfen, den Inhalt der Seite schnell zu scannen und zu verstehen. Es hilft auch auf mobilen oder Tablet-Geräten, wo Überschriftentexte in die nächste Zeile umbrechen können. Die Verwendung der gleichen Schriftart und -größe auf der gesamten Seite kann zu Verwirrung hinsichtlich der Bedeutung der Seite führen.

In Ihren Designs können Sie auch die Zeilenhöhe zwischen Textzeilen erhöhen, um die Lesbarkeit einer Seite zu verbessern.

Sobald Sie sich für Schriftart und -größe entschieden haben, müssen Sie auch die Farbkontrastverhältnisse berücksichtigen.

Da sich Besucher drinnen oder draußen oder bei schlechter Beleuchtung aufhalten können, ist es wichtig, Standards für den Kontrast zwischen Hintergrund- und Vordergrundfarben einzuhalten.

Dies spielt auch eine Rolle bei der Barrierefreiheit und der Erstellung einer ADA-konformen Website. Gemäß den WCAG 2.1-Standards wird ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text empfohlen.

Stellen Sie sicher, dass Hoverover und Animationen den Best Practices entsprechen

Die meisten Webdesigns beinhalten heute einige Mikroanimationen und interaktive Komponenten; Dies ist eine häufige Anfrage von Kunden in einem Redesign-Prozess.

Das Hinzufügen von Bewegung zu einer Website ist oft eine Zusammenarbeit zwischen Designern und Entwicklern, da Animationen die Ladezeit der Seite beeinträchtigen und endlose Qualitätskontrollen verursachen können, wenn sie nicht gut codiert sind. Bei der Auswahl von Animationen im Designprozess müssen Sie auch planen, ob diese Interaktionen auf mobilen Geräten stattfinden.

Aufgrund von Leistungsproblemen ist es üblich, komplexe Animationen und Videohintergründe auf Mobilgeräten zu deaktivieren, da sie die Ladezeit der Website verlangsamen können, insbesondere für Besucher in einem mobilen Netzwerk. Diese Art der Änderung wird seit 2018 immer häufiger, als die Geschwindigkeit mobiler Seiten zu einem der Ranking-Faktoren von Google wurde.

Im Allgemeinen sollten Animationen und Interaktionen auf subtile Weise eingesetzt werden, um das Benutzererlebnis zu unterstützen, und sollten den Besucher nicht ablenken. Es sollte auch kein wesentlicher Bestandteil sein, um einem Besucher zu helfen, eine Aktion abzuschließen.

Hover-Overs sind ein weiteres gängiges Designelement, das auf Mobilgeräten anders aussehen kann. Auf dem Desktop bezieht sich ein Hover-Over auf ein Objekt oder ein Bild, das sich ändert oder Text anzeigt, wenn der Besucher mit der Maus darüber fährt. Während dies auf großen Geräten gut funktioniert, denken Sie daran, dass Besucher auf Mobilgeräten keine Maus verwenden, was bedeutet, dass der Besucher tippen muss, um den Hover-Over zu sehen.

Wenn Sie also ein Feld oder Bild haben, das Text anzeigt, wenn Sie mit der Maus darüber fahren, sollten Sie sicherstellen, dass die Botschaft für die Schritte der Besucher nicht kritisch ist.

Wenn Sie über Animationen sprechen, können Sie und Ihr Entwicklungsteam auch die Best Practices von Google für Richtlinien für Webanimationen lesen, um Fehler in Bezug auf Flash oder veraltete Technologie zu vermeiden.

Planen Sie die Platzierung von Pop-ups und Elementen von Drittanbietern

Es wurde schon immer viel darüber diskutiert, ob Pop-up-Formulare auf Websites verwendet und ob sie auf mobilen Geräten implementiert werden sollten.

Ein Argument für die Vermeidung von Popup-Formularen auf Mobilgeräten ist, dass es für einen Besucher schwieriger sein kann, das Formular oder die Nachricht zu schließen. Seit Januar 2017 warnt Google davor, aufdringliche Interstitials zu verwenden, die verhindern, dass alle Inhalte einer Seite für einen Besucher sichtbar sind, da sie auf Mobilgeräten besonders problematisch sind.

Sie können all diese Elemente in Gesprächen mit Kunden über Popup-Formulare abwägen und sich für die beste Benutzererfahrung für das Formulardesign entscheiden.

Wenn Sie einen Designansatz für Mobilgeräte verfolgen, ist es hilfreich zu überlegen, wie Elemente auf kleineren Geräten platziert werden. Beispielsweise funktioniert ein Sticky-Button auf der rechten Seite des Bildschirms, der bleibt, während ein Besucher scrollt, auf dem Desktop in Ordnung, aber diese Art von Sticky-Elementen kann den Anzeigebereich auf einem mobilen Gerät noch kleiner machen.

Während einige Elemente wie Live-Chat und Zugänglichkeits-Widgets im letzten Moment hinzugefügt werden können, kann eine Planung dieser Elemente zu einem früheren Zeitpunkt im Webdesign-Prozess dazu beitragen, eine chaotische Benutzeroberfläche für Besucher zu vermeiden.

Live-Chat ist zu einem äußerst beliebten Tool geworden und Chat-Widgets befinden sich oft in der unteren rechten oder linken Ecke des Designs. Wenn Sie Empfehlungen zur Platzierung dieser Elemente anbieten, indem Sie sie in Design-Mockups aufnehmen, können Sie Probleme mit überlappenden Elementen vorhersehen.

Überdenken Sie das Design und die Platzierung von Formularen

Das Ausfüllen und Absenden eines Formulars auf einem Mobilgerät oder einem kleineren Tablet kann für Besucher eine lästige Aufgabe sein. Aus diesem Grund ist es wichtig, beim Site-Design alternative Optionen zu Formularen in Betracht zu ziehen.

Ziehen Sie beim Erstellen der mobilen Menünavigation in Erwägung, eine „Click-to-Call“-Telefonnummer in die Kopfzeile aufzunehmen, damit Besucher das Unternehmen einfach erreichen können.

Beim Entwerfen aller Formulare auf der Website ist es sowohl für Desktop- als auch für Mobilgeräte eine bewährte Methode, die Anzahl der Formularfelder so weit wie möglich zu reduzieren – und klar anzugeben, was ein Pflichtfeld ist.

Ein Tipp für das mobile Erlebnis eines Formulars ist, Formularbeschriftungen zu entwerfen und nicht nur Platzhaltertext für die Formularfelder zu verwenden. Ein Besucher auf einem mobilen Gerät kann leicht durch andere Benachrichtigungen und Interaktionen unterbrochen werden, sodass er möglicherweise beim Ausfüllen des Formulars unterbrochen wird und vergisst, was der Platzhaltertext aufgeführt hat. Die Bereitstellung klarer Formularbeschriftungen und Fehlermeldungen ist auch für die ADA-Compliance wichtig.

Schließlich ist die Platzierung des Formulars auf der Seite und wie dies mit dem responsiven Layout angepasst werden kann, von entscheidender Bedeutung, da sich die Formularplatzierung auf die Conversions auswirken kann.

Fazit

Angesichts des zunehmenden Fokus auf die mobile Leistung sparen Sie Zeit und Frustration, wenn Sie einige der oben genannten Ideen beim Entwerfen Ihrer Projekte in die Praxis umsetzen, wenn diese Projekte gestartet werden. Gibt es zusätzliche mobile UX-Tipps, die Ihrem Designfluss geholfen haben? Hinterlasse unten einen Kommentar!

Weiter: Bauen Sie Ihre Webdesign-Fähigkeiten mit hilfreichen Online-Kursen aus!

Mobile UX-Design ist nur eines der vielen Dinge, die Sie als professioneller Webdesigner im Auge behalten müssen. Obwohl nicht immer viel Zeit zur Verfügung steht, um Ihre Fähigkeiten zu verbessern, ist die Teilnahme an einem Online-Kurs eine großartige Möglichkeit, um sicherzustellen, dass Sie sich weiterbilden.

Dieser Artikel bietet eine umfassende Liste einiger der besten Online-Kurse für Webdesigner (+ wie viel sie kosten), sodass Sie nicht noch mehr Zeit damit verbringen müssen, alle verfügbaren Optionen zu durchsuchen!