8 goldene Regeln des mobilen Designs
Mobiles Design ist eine relativ neue, aber wichtige Überlegung. Noch vor einem Jahrzehnt bedeutete das Entwerfen für das Web das Entwerfen für einen Desktop-Computer. Jetzt bedeutet es, auch für mobile Geräte zu entwerfen. Mobiltelefone führen zu einem zunehmenden Web-Traffic und die Anzahl wird nur noch steigen.
Laut Statista hatten wir im Oktober 2018 3,9 Milliarden einzigartige mobile Internetnutzer und mehr als 50 Prozent des gesamten Website-Verkehrs weltweit wurde über Mobiltelefone generiert . Ein großartiges Webdesign ist kein Luxus mehr, sondern eine Notwendigkeit.
Das Erstellen eines großartigen Web-Erlebnisses für mobile Benutzer erfordert mehr als nur das Erstellen sich anpassendes Webdesign (obwohl ein Top Webseitenersteller kann helfen, wie auch Ihre Web-Hosting Wahl). In diesem Artikel erfahren Sie, wie Sie die grundlegenden Designprinzipien für mobile Websites kennen.
01. Zielorientierte Erfahrungen machen
Mobile Benutzer sind sehr zielorientierte Benutzer. Jedes Mal, wenn sie eine Website besuchen, haben sie eine bestimmte Aufgabe, die sie erfüllen möchten, und sie erwarten, dass sie schnell das bekommen, was sie brauchen. Wie können Sie das erreichen?
Stellen Sie sich Ihre idealen Benutzer vor: Ähnlich wie beim Hausbau beginnt der Bau einer Website mit einer soliden Grundlage. Die Grundlage für großartiges Webdesign ist das Wissen, das Sie über Ihre Benutzer haben. Benutzerforschung sollte einer der ersten Schritte im Produktdesign sein. Sie müssen genau herausfinden, wer Ihre Benutzer sind und was sie erreichen möchten. Sobald Sie die Wünsche und Bedürfnisse Ihrer Benutzer kennen, können Sie eine Benutzerreise erstellen, von der Sie wissen, dass sie ihren Erwartungen perfekt entspricht (stellen Sie sicher, dass Sie alle Ergebnisse sicher speichern Cloud-Speicher ). Dann gründlich durchführen Benutzertests wird sicherstellen, dass Sie diese Ziele erreicht haben.
Verfeinern Sie die Erfahrung um Ihr Kernziel: Was möchten Sie mit dieser Website erreichen? Das Finden der Antworten auf diese Frage ist eine weitere wichtige Aufgabe beim Erstellen eines mobilen Web-Erlebnisses. Versuchen Sie, das Engagement zu fördern, Benutzer zum Kauf von Produkten zu bewegen oder sich für einen Service anzumelden? Geben Sie das Ziel klar an und überlegen Sie, wie Sie die Anzahl der Schritte reduzieren können, die ein Benutzer unternehmen muss, um es zu erreichen.
02. Passen Sie Ihre Inhalte an, um auf kleinerem Raum zu arbeiten
Inhalt ist das, was für die meisten Websites einen Mehrwert bietet. Dies ist der Hauptgrund, warum Menschen sie besuchen. Wenn es um mobiles Webdesign geht, ist es unmöglich, ein Desktop-Erlebnis zu nutzen und es auf Mobilgeräten zu replizieren. Es ist wichtig, Websites für mobile Benutzer zu gestalten. Das bedeutet, dass wir Inhalte und Funktionen an die Bildschirmgröße und -gewohnheiten des Benutzers anpassen müssen. Welche Schritte können Sie unternehmen, um dies zu erreichen?
Vermeiden Sie horizontales Scrollen: Benutzer sind mit Websites vertraut, die vertikal, aber nicht horizontal scrollen. Aus diesem Grund sollte es keine Seiten geben, auf denen horizontales Scrollen erforderlich ist, um Inhalte anzuzeigen. Elemente mit fester Breite sind einer der häufigsten Gründe für das horizontale Scrollen. Überprüfen Sie daher, ob Sie keinen Inhalt haben, der nur bei einer bestimmten Breite des Ansichtsfensters gut angezeigt wird.
Streben Sie ein einspaltiges Layout an: Einspaltige Layouts helfen bei der Verwaltung des begrenzten Platzes auf einem kleinen Bildschirm und ermöglichen eine einfache Skalierung zwischen Hoch- und Querformat.
Benutzer sind mit Websites vertraut, die vertikal, aber nicht horizontal scrollen. Aus diesem Grund sollte es keine Seiten geben, auf denen horizontales Scrollen erforderlich ist.
Stellen Sie sicher, dass Benutzer nicht zum Zoomen kneifen müssen: Besucher können leicht frustriert sein, wenn sie hinein- oder herauszoomen müssen, um einen Text zu lesen oder ein Bild zu sehen. Gestalten Sie Ihre mobile Website so, dass Benutzer die Größe nie ändern müssen.
Verwenden Sie eine lesbare Schriftgröße: 11 Punkte ist die absolute Mindestgröße für Text. Mit dieser Größe können Benutzer Text in einem typischen Betrachtungsabstand lesen, ohne zu zoomen.
Wählen Sie gut skalierbare Schriftarten aus: Wenn das Website-Erlebnis gelesen werden muss, ist es besser, serifenlose Schriftarten wie Helvetica oder Roboto zu verwenden.
Verwenden Sie ein fingerfreundliches Design: Denken Sie beim Entwerfen einer mobilen Website daran, dass Besucher ihre Finger anstelle eines Mauspfeils verwenden und die menschlichen Fingerspitzen größer als ein Mauszeiger sind. Bemühen Sie sich um eine fingerfreundliche Oberfläche, in der jedes interaktive Element die richtige Größe hat.
Eine MIT Touch Lab-Studie fanden heraus, dass die durchschnittliche Größe einer Fingerspitze 8-10 mm beträgt Dies macht 10 mm x 10 mm zu einer guten Mindestgröße für Berührungsziele.
Berücksichtigen Sie auch den relativen Abstand zwischen Berührungszielen. Wenn sich interaktive Elemente zu nahe beieinander befinden, können mobile Benutzer versehentlich mit dem Finger auf eine falsche Schaltfläche tippen. Um dies zu verhindern, stellen Sie sicher, dass die Schaltflächen die richtige Größe haben und dass zwischen ihnen genügend Platz ist.
Produktbilder erweiterbar machen: Viele Studien haben gezeigt, dass Menschen überwiegend visuelle Lernende sind. Die meisten Menschen sind in der Lage, Konzepte viel besser zu verstehen und zu erfassen, wenn sie auf diese Weise geliefert werden. Daher ist die Verwendung von Bildern im Webdesign eine hervorragende Möglichkeit, wichtige Botschaften schnell zusammenzufassen.
Es ist wichtig, qualitativ hochwertige Assets nicht nur bereitzustellen, sondern sie auch erweiterbar zu machen, damit Benutzer sie leicht im Detail sehen können.
Bilder spielen eine wichtige Rolle in E-Commerce-Websites - Menschen verlassen sich bei ihrer Entscheidung auf Produktbilder. Es ist wichtig, qualitativ hochwertige Assets nicht nur bereitzustellen, sondern sie auch erweiterbar zu machen, damit Benutzer sie leicht im Detail sehen können. Erweitern Sie das gesamte Bild und nicht nur einen Teil davon.
Seien Sie vorsichtig mit Werbeaktionen und Anzeigen: Werbeaktionen und Anzeigen können den Inhalt leicht überschatten. Während die Nachricht der Anzeige für einige Besucher möglicherweise funktioniert, überspringen Nutzer sie in den meisten Fällen und wechseln zu wertvolleren Informationen. Dieses Phänomen ist als Bannerblindheit bekannt.
Machen Sie es einfach, Kontaktinformationen zu finden: Mobile Benutzer besuchen häufig Websites, um Kontaktinformationen zu finden. Je nach Dringlichkeit möchten Benutzer möglicherweise ein Unternehmen anrufen, ein Kontaktformular ausfüllen oder die Adresse suchen. Bei E-Commerce-Websites sollte die Telefonnummer direkt auf dem Startbildschirm verfügbar sein.
03. Optimieren Sie den Inhalt zum Scannen
Es ist eine bekannte Tatsache, dass Benutzer nicht online lesen. sie scannen. Wenn sich ein neuer Besucher einer Webseite nähert, scannt er zunächst die Seite und teilt den Inhalt in verdauliche Informationen auf. Es ist möglich, diese Aufgabe für Benutzer zu vereinfachen, indem Sie einige einfache Regeln befolgen.
Beachten Sie die Reihenfolge, in der Sie Inhalte auf einer Seite bereitstellen: Die Leute lesen von oben nach unten. Aus diesem Grund ist es wichtig, die wichtigen Elemente oben auf einer Seite beizubehalten und den Rest entsprechend der Hierarchie nach unten zu verschieben.
Reduzieren Sie die Unordnung: Priorisieren Sie Inhalte vor Elementen der Benutzeroberfläche - reduzieren Sie Ablenkungen, indem Sie unnötige funktionale und dekorative Elemente entfernen. Versuchen Sie, einen minimalistischen Stil zu erstellen, da Sie dem Benutzer auf diese Weise die Möglichkeit geben, sich auf die Aufgabe zu konzentrieren.
Vermeiden Sie lange Textblöcke ohne Bilder: Es ist sehr wahrscheinlich, dass große Teile des Inhalts übersprungen werden. Verwenden Sie Überschriften, Absätze oder Aufzählungszeichen, um Text aufzubrechen.
Legen Sie mehr visuelles Gewicht auf wichtige Elemente: Stellen Sie wichtige Elemente wie Schlüsselbotschaften in den Mittelpunkt, damit Besucher sie sofort sehen können. Betonen Sie Elemente mit verschiedenen Größen, Leerzeichen oder leuchtenden Farben.
04. Erstellen Sie eine vorhersehbare Navigation
Die Unterstützung der Benutzer bei der Navigation sollte für jede Website oberste Priorität haben. Schließlich ist der überzeugendste Inhalt nutzlos, wenn die Leute ihn nicht finden können. Aus diesem Grund ist es wichtig, mithilfe einiger der folgenden Schritte in die Entwicklung eines soliden Navigationssystems zu investieren.
Verwenden Sie bekannte Navigationsmuster: Wenn Sie einen Navigationsmechanismus für Ihre Website erstellen möchten, sollten Sie sich an eine einfache Regel erinnern: Erfinden Sie das Rad nicht neu - bemühen Sie sich um eine vertraute Erfahrung. Es ist immer besser, sich auf Navigationsmuster zu verlassen, mit denen die meisten Benutzer vertraut sind (z. B. die obere Navigationsleiste oder das Hamburger-Menü), als ein eigenes Navigationssystem zu erstellen (z. B. ein gestenbasiertes Navigationssystem). Wenn Sie eine vertraute Navigation erstellen, helfen Sie Benutzern, sich bei der Interaktion mit Ihrem Produkt auf ihre bisherigen Erfahrungen zu verlassen.
Begrenzen Sie die Gesamtzahl der Navigationsoptionen: Fügen Sie nicht zu viele Optionen in Menüs ein. Ein umfangreiches Menü eignet sich möglicherweise gut für Desktop-Websites, passt jedoch nicht zum mobilen Design. Da nicht alle Navigationsoptionen in einem sichtbaren Bereich des Bildschirms verfügbar sind, zwingen Sie mobile Benutzer, durch eine Liste von Optionen zu scrollen. Überlegen Sie, wie Sie möglichst wenige Menüpunkte präsentieren können. Idealerweise das Menü, das Sie entwerfen sollte nicht mehr als sieben verschiedene Kategorien haben .
Priorisieren Sie die Navigationsoptionen : Organisieren Sie die Navigation basierend auf der Art und Weise, wie Benutzer mit Funktionen arbeiten. Die beliebtesten Navigationsoptionen in einem globalen Menü sollten oben stehen und die primären Aktionen sollten in einem sichtbaren Bereich des Bildschirms verfügbar sein.
Schreiben Sie klare Etiketten: Jede Navigationsoption sollte eine klare und präzise Bezeichnung haben. Vermeiden Sie Jargon - die von Ihnen entworfene Navigation sollte keine Begriffe enthalten, die Ihre Besucher nicht verstehen. Durch klare Beschriftungen können Besucher das Ergebnis ihrer Aktionen vorhersagen.
Stellen Sie sicher, dass interaktive Elemente wie interaktive Elemente aussehen : Denken Sie beim Entwerfen von Schaltflächen und Links darüber nach, wie das Design die Erschwinglichkeit kommuniziert. Wie verstehen Benutzer das Element als interaktives Objekt? Die Art und Weise, wie ein Objekt aussieht, zeigt den Benutzern, wie es verwendet wird. Visuelle Elemente, die wie Links oder Schaltflächen aussehen, aber nicht interaktiv sind (z. B. unterstrichene Wörter, die keine Verknüpfungen sind, oder rechteckige Felder mit Wörtern, die keine Schaltflächen sind), können Benutzer leicht verwirren.
Teilen Sie den aktuellen Standort mit: 'Wo bin ich?' ist eine grundlegende Frage, auf die Benutzer eine Antwort benötigen, um effektiv navigieren zu können. Geben Sie den aktuellen Standort deutlich an.
Stellen Sie eine Suchfunktion bereit: Wenn Sie eine komplexe Website mit vielen Inhalten oder Funktionen entwerfen, müssen Sie sicherstellen, dass Sie eine Suchleiste für die einfache Navigation bereitstellen. Durch die Implementierung der Suchfunktion bieten Sie mobilen Benutzern, die mit einer bestimmten Frage auf die Website kommen, einen schnellen Weg zu Informationen / Funktionen.
Verstecken Sie die Suchoption nicht im Menü. Es sollte eines der ersten Dinge sein, die Besucher auf Ihren Seiten sehen.
Machen Sie es Benutzern einfach, zur Startseite zurückzukehren: Besucher erwarten, dass sie beim Tippen auf das Logo oben auf einer Seite zur Startseite zurückkehren und frustriert werden, wenn dies nicht funktioniert.
Halten Sie Ihren Benutzer in einem einzigen Fenster: Vermeiden Sie Handlungsaufforderungen, die einen Benutzer zu neuen Fenstern schicken. Einige Benutzer haben Probleme beim Wechseln zwischen Fenstern in einem mobilen Browser und können die vorherige Seite möglicherweise nicht finden.
05. Vermeiden Sie Straßensperren
Straßensperren erzeugen Reibung und Reibung ist der schlimmste Feind der Bekehrung. Glücklicherweise gibt es einfache Dinge, die Sie tun können, um sie zu umgehen.
Unterbrechen Sie Besucher nicht: Große Popups sind eine der typischsten Arten von Unterbrechungen im Web. Lange Zeit waren solche Banner Werbebotschaften gewidmet, aber in letzter Zeit verwendeten viele Websites ablenkende Popups, um die Erlaubnis zur Verwendung von Cookies (GDPR) zu erhalten. Unabhängig davon, welche Informationen Sie Ihren Besuchern anzeigen möchten, stellen Sie sicher, dass diese nicht vom Gesamterlebnis ablenken.
Lassen Sie Benutzer Ihre Website nicht verlassen: Identifizieren Sie Orte auf Benutzerreisen, die dazu führen können, dass ein Benutzer außerhalb Ihrer Website schaut, und stellen Sie dann Inhalte / Funktionen bereit, um sie auf Ihrer Website zu halten. Ein Promo-Code-Feld auf E-Commerce-Websites ist möglicherweise das häufigste Beispiel dafür, dass Besucher eine Website verlassen, um den Gutschein zu finden. Es ist viel besser, einige Gutscheine direkt auf der Website anzubieten, um ein solches Verhalten zu verhindern.
Benutzer nicht zwingen, sich anzumelden: Anspruchsvolle Benutzer, die sich registrieren, bevor sie Informationen sehen oder einen Onlinedienst nutzen können, haben hohe Interaktionskosten - eine zu frühe Registrierung kann dazu führen Benutzer veranlassen, die Site zu verlassen . Vor der Bereitstellung persönlicher Informationen möchten Besucher einen Eindruck davon bekommen, was eine Website ihnen bietet.
Um einen Benutzerfluss mit den geringsten Hindernissen für die Conversion zu schaffen, sollten mobile Websites es Besuchern ermöglichen, Inhalte zu erkunden, ohne sich anmelden zu müssen. Für E-Commerce-Websites ist es wichtig, dass Benutzer als Gast einkaufen.
Machen Sie es sich einfach, zu einem anderen Gerät zu wechseln, um die Reise fortzusetzen: Betrachten Sie Mobilgeräte nicht als eigenständige Erlebnisse. Ein typischer Benutzer verfügt über mehrere Geräte wie einen Desktop, ein Mobiltelefon und ein Tablet und erwartet bei der Verwendung Ihres Produkts eine nahtlose Benutzererfahrung auf allen diesen Geräten. Beispielsweise verwenden viele Benutzer mobile Geräte nur für die Produktsuche und wechseln dann zum Konvertieren zum Desktop. Benutzer erwarten, die Reise dort fortzusetzen, wo sie auf dem Handy angehalten haben.
Hier sind einige Dinge, die Sie tun können, um den aktuellen Fortschritt eines Benutzers zu synchronisieren:
- Synchronisieren Sie Wunschliste, Favoriten und Warenkorb für ein Benutzerkonto.
- Bieten Sie nicht registrierten Benutzern eine einfache Möglichkeit zum Speichern oder Teilen von Informationen auf verschiedenen Geräten (z. B. eine Option zum Senden des Links an eine E-Mail).
06. Entwerfen Sie effiziente Formulare
Die Formulareingabe ist eine der häufigsten Aufgaben im Web. Es ist schwer vorstellbar, dass Benutzer keine Formulare ausfüllen müssen. Da dies eine allgegenwärtige Praxis ist, ist die Fähigkeit, ein Formular schmerzfrei auszufüllen, entscheidend, um einen Benutzer zu beschäftigen. Hier sind einige Tipps, die Ihnen helfen können, die Reibung auf ein Minimum zu beschränken:
Eingaben in Formularen minimieren: Je weniger Daten ein Benutzer bereitstellen muss, desto mehr Spaß hat er im Allgemeinen an Ihrem Web-Erlebnis. Diese Zeiger helfen Ihnen dabei, die Tastenanschläge und Eingaben zu reduzieren, die Benutzer vornehmen müssen:
- Minimieren Sie die Gesamtzahl der Felder. Halten Sie Formulare immer so kurz und einfach wie möglich, indem Sie unnötige Felder entfernen. Fragen Sie nur, was Sie wirklich wissen müssen.
- Verwenden Sie die automatische Korrektur, die automatische Großschreibung und die automatische Vervollständigung, um die Wahrscheinlichkeit von Benutzerfehlern zu verringern.
- Vermeiden Sie Dropdown-Felder. Dropdowns verbergen die Optionen und dies verursacht zusätzliche Interaktionskosten. Benutzer müssen zweimal tippen, um die richtige Option auszuwählen. Wenn Sie ein Dropdown-Feld für eine Auswahl von Optionen verwenden, sollten Sie es durch Optionsfelder ersetzen.
- Wechseln Sie automatisch zum nächsten Feld, wenn ein Benutzer die Eingabetaste drückt.
- Minimieren Sie Formularfehler mit Inline-Validierung in Echtzeit.
- Verwenden Sie vorhandene Informationen, um den Komfort zu maximieren. Beispielsweise können Sie einige Felder wie Versandadresse oder Rechnungsinformationen für Ihre registrierten Benutzer vorab ausfüllen.
- Denken Sie darüber nach, alternative Eingabemechanismen anzubieten. Überlegen Sie, welche Gerätefunktionen verwendet werden können, um eine bessere Benutzererfahrung zu erzielen. Anstatt Benutzer beispielsweise zur Eingabe von Kreditkartendaten aufzufordern, können Sie die Karte mit der Kamera des Geräts scannen und Systeme wie Apple Pay und Google Pay integrieren, um die Zahlung mit einem Fingertipp zu ermöglichen.
Stellen Sie eine passende Tastatur bereit: Mobile Benutzer schätzen Websites, die eine geeignete Tastatur für das Feld bieten. Diese Funktion verhindert, dass sie zusätzliche Aktionen ausführen müssen. Wenn Benutzer beispielsweise eine Telefonnummer eingeben müssen, sollte auf Ihrer Website die Zifferntastatur 0 bis 9 angezeigt werden.
Stellen Sie die HTML-Eingabetypen so ein, dass die richtige Tastatur angezeigt wird. Hier sind sieben Eingabetypen, die für das Formular-Design relevant sind:
- Eingabetyp = 'Text' Zeigt die normale Tastatur des Mobilgeräts an.
- Eingabetyp = 'E-Mail' zeigt die normale Tastatur und '@' und '.com' an.
- Eingabetyp = ”tel” Zeigt die Zehnertastatur 0 bis 9 an.
- Eingabetyp = 'Nummer' Zeigt eine Tastatur mit Zahlen und Symbolen an.
- Eingabetyp = 'Datum' Zeigt die Datumsauswahl des Mobilgeräts an.
- Eingabetyp = 'Datum / Uhrzeit' Zeigt die Datums- und Uhrzeitauswahl des Mobilgeräts an.
- Eingabetyp = 'Monat' Zeigt die Monats- und Jahresauswahl des Mobilgeräts an.
Benutzer können das Standortfeld ändern: Viele Websites erkennen den Benutzerstandort automatisch und verwenden diese Informationen, um relevante Inhalte bereitzustellen. Es ist wichtig, dass Benutzer den Standort ändern, da Benutzer in einigen Fällen möglicherweise Ergebnisse für einen anderen Ort anzeigen möchten.
07. Bemühen Sie sich um eine konsistente Erfahrung
Konsistenz ist eine der wichtigsten Säulen der Benutzererfahrung. Konsistentes Design ist benutzerfreundliches Design. Wenn Sie sich auf die Erstellung eines konsistenten Designs konzentrieren, erstellen Sie ein intuitiveres Design. Bemühen Sie sich immer, die Website sowohl intern als auch extern konsistent zu machen.
Interne Konsistenz: Erstellen Sie eine konsistente Bibliothek mit Design-Assets und verwenden Sie diese für alle Seiten Ihrer Website. Schriftarten, Schaltflächen, Links, Symbole und alle anderen Elemente der Benutzeroberfläche müssen auf der gesamten Website konsistent sein, um die visuelle Konsistenz zu gewährleisten.
Externe Konsistenz: Stellen Sie sicher, dass die von Ihnen gestaltete Website Teil einer größeren Produktfamilie ist. Wenn Sie beispielsweise eine mobile App haben, sollte Ihre mobile Website den Benutzern, die sie verwenden, ein Gefühl der Vertrautheit vermitteln.
08. Erstellen Sie Ihre beste mobile Website
Alle hier genannten Punkte können als Best Practices der Branche angesehen werden. Nur weil etwas als 'Best Practice' bezeichnet wird, bedeutet dies nicht, dass es die optimale Lösung für Ihre Website ist. Deshalb ist es immer wichtig, Ihre Entwurfsentscheidungen zu testen. Machen Sie Usability-Tests zu einem obligatorischen Bestandteil Ihres Designprozesses und verbessern Sie die Erfahrung regelmäßig.
Dieser Artikel wurde ursprünglich in Ausgabe 317 von veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Ausgabe 317 kaufen oder net abonnieren .
Zum Thema passende Artikel:
- 6 Trends, die das Gesicht der mobilen Benutzeroberfläche verändern
- 10 Tipps für ein besseres mobiles UX-Design
- So gestalten Sie benutzerfreundliche mobile Schnittstellen
