8 Regeln für mobiles Design

Noch vor einem Jahrzehnt bedeutete Gestaltung für das Web das Entwerfen für einen Desktop-Computer. Seite einiger Zeit heißt es auch, für mobile Geräte zu entwickeln. Laut Statista gab es im Oktober 2018 3,9 Milliarden einzelne mobile Internetnutzer, mehr als 50% des weltweiten Website-Traffics wurden über Mobiltelefone generiert. Ein tolles Webdesign ist kein Luxus mehr, sondern eine Notwendigkeit.

Das Erstellen einer großartigen User Experience für mobile Benutzer erfordert jedoch mehr als nur das Erstellen eines reaktionsschnellen Webdesigns. In diesem Artikel können Sie die grundlegenden Designprinzipien für mobile Sites kennenlernen.

Mobile Nutzer sind sehr zielorientierte Nutzer. Jedes Mal, wenn sie eine Website besuchen, haben sie eine bestimmte Aufgabe, die sie erfüllen möchten. Und sie erwarten, dass sie wirklich 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 einem soliden Fundament. Und die Grundlage für großartiges Webdesign ist das Wissen, das Sie über Ihre Benutzer haben. Nutzerforschung 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 Customer Journey erstellen, von der Sie wissen, dass sie deren Erwartungen perfekt entspricht. Wenn Sie dann gründliche Benutzertests durchführen, stellen Sie sicher, dass Sie diese Ziele erreicht haben.

Verfeinern Sie die UX in Bezug auf Ihr Kernziel: Was möchten Sie mit dieser Website erreichen? Das Finden der Antworten auf diese Frage ist eine weitere wichtige Aufgabe bei der Erstellung eines mobilen Web-Erlebnisses. Versuchen Sie, das User-Engagement zu fördern, Nutzer 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.

Inhalte haben den größten Wert für die meisten Websites. Sie sind der Hauptgrund, warum Leute sie besuchen. Wenn es um mobiles Webdesign geht, ist es nahezu unmöglich, zuerst eine Desktop-Variante zu erstellen und sie dann einfach für Mobilgeräte zu replizieren. Es ist wichtig, Websites mit Blick auf mobile Benutzer zu gestalten. Das bedeutet, wir müssen Inhalte und Funktionen anpassen, um sie an die Bildschirmgröße und Gewohnheiten des Benutzers anzupassen. Welche Schritte können Sie unternehmen, um das zu erreichen?

• Vermeiden Sie horizontales Scrollen. Benutzer können zwar vertikal, aber nicht horizontal scrollen. Aus diesem Grund sollte es keine Seiten geben, auf denen horizontal gescrollt werden muss, um Inhalte anzuzeigen. Elemente mit fester Breite sind einer der häufigsten Gründe für horizontales Scrollen. Überprüfen Sie daher, dass Sie keinen Inhalt haben, der nur bei einer bestimmten Breite des Ansichtsfensters gut angezeigt wird.
  
  Einspaltige Layouts helfen bei der Verwaltung des begrenzten Platzes auf einem kleinen Bildschirm und ermöglichen auch eine einfache Skalierung zwischen Hoch- und Querformat. Benutzer können Websites problemlos vertikal, jedoch nicht horizontal scrollen. Aus diesem Grund sollte es keine Seiten geben, auf denen horizontal gescrollt werden muss.
   
• Stellen Sie sicher, dass Benutzer nicht zoomen müssen. User können leicht frustriert sein, wenn sie ein- oder auszoomen 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 sind die absolute Mindestgröße für Text. Diese Größe ermöglicht es Benutzern, Text in einem typischen Betrachtungsabstand zu lesen, ohne zu zoomen. Wählen Sie Schriftarten aus, die sich gut skalieren lassen. Wenn das Lesen der Website erforderlich ist, sollten Sie serifenlose Schriftarten wie Helvetica oder Roboto verwenden.
   
• Verwenden Sie ein fingerfreundliches Design: Wenn Sie eine mobile Website entwerfen, denken Sie daran, dass Besucher ihre Finger anstelle eines Mauspfeils verwenden und die menschlichen Fingerspitzen größer als ein Mauszeiger sind. Bemühen Sie sich um ein fingerfreundliches Interface, bei dem jedes interaktive Element die passende Größe hat. Berücksichtigen Sie auch den relativen Abstand zwischen den Berührungszielen. Wenn sich interaktive Elemente zu nahe beieinander befinden, können mobile Benutzer versehentlich mit dem Finger auf eine falsche Schaltfläche tippen. Stellen Sie sicher, dass die Größe der Schaltflächen korrekt ist, und fügen Sie zwischen den Schaltflächen ausreichend Platz ein, um dies zu verhindern.
   
• Produktbilder sollten vergrößert werden können. Viele Studien haben bewiesen, dass Menschen überwiegend visuell lernen. Die meisten Menschen sind in der Lage, Konzepte besser zu verstehen, wenn sie auf diese Weise übermittelt werden. Daher ist die Verwendung von Bildern im Webdesign eine großartige Möglichkeit, wichtige Botschaften schnell zusammenzufassen. Bilder spielen eine wichtige Rolle auf E-Commerce-Websites. Menschen verlassen sich auf Produktbilder, wenn sie eine Entscheidung treffen. Es ist wichtig, nicht nur hochwertige Assets bereitzustellen, sondern diese auch erweiterbar zu machen, damit die Benutzer sie problemlos im Detail sehen können. Bieten Sie an, das gesamte Bild zu vergrößern und nicht nur einen Teil davon.
   
• Seien Sie vorsichtig mit Werbeaktionen und Anzeigen. Sie können den Inhalt leicht überschatten. Während die Nachricht der Anzeige möglicherweise für einige Besucher funktioniert, überspringen die Nutzer sie in den meisten Fällen und gelangen zu wertvolleren Informationen. Dieses Phänomen ist als Bannerblindheit bekannt.
   
• Erleichtern Sie das Auffinden von Kontaktinformationen. Mobile Benutzer besuchen häufig Websites, um Kontaktinformationen zu finden. Je nach Dringlichkeit möchten Benutzer eine Firma anrufen, ein Kontaktformular ausfüllen oder die Adresse suchen. Für E-Commerce-Websites sollte die Telefonnummer direkt auf dem Startbildschirm verfügbar sein.

Es ist allgemein bekannt, dass Benutzer online nicht lesen, sondern scannen. Wenn sich ein neuer Besucher auf einer Webseite aufhält, scannt er zuerst die Seite und teilt den Inhalt in verdauliche Informationen auf. Es ist möglich, diese Aufgabe für Benutzer zu vereinfachen, indem einige einfache Regeln befolgt werden.

• Beachten Sie die Reihenfolge, in der Sie Inhalte auf einer Seite bereitstellen: Die Leser lesen von oben nach unten. Deshalb ist es wichtig, die wichtigen Informationen oben auf einer Seite beizubehalten und den Rest der Hierarchie entsprechend nach unten zu verschieben.
   
• Reduzieren Sie die Unordnung. Priorisieren Sie Inhalte der Benutzeroberfläche, reduzieren Sie Ablenkungen, indem Sie unnötige funktionale und dekorative Elemente entfernen. Bemühen Sie sich um einen minimalistischen Stil, denn auf diese Weise können sich die Benutzer leichter auf die Aufgabe konzentrieren.
   
• Vermeiden Sie lange Textblöcke ohne Bilder. Es ist sehr wahrscheinlich, dass große Mengen an Inhalten übersprungen werden. Verwenden Sie Überschriften, Absätze oder Aufzählungszeichen, um den Text aufzuteilen.
   
• Stellen Sie wichtige Elemente visuell in den Vordergrund, damit die Besucher sie sofort sehen können. Betonen Sie Elemente mit verschiedenen Größen, Leerzeichen oder lebendigen Farben.

Das Führen der Benutzer sollte für jede Website oberste Priorität haben. Schließlich ist der überzeugendste Inhalt nutzlos, wenn die User ihn nicht finden können. Aus diesem Grund ist es wichtig, mit den folgenden Schritten in die Entwicklung eines soliden Navigationssystems zu investieren.

• Verwenden Sie bekannte Navigationsmuster
  Wenn Sie einen Navigationsmechanismus für Ihre Website erstellen, sollten Sie sich an eine einfache Regel erinnern: Erfinden Sie das Rad nicht neu. Es ist immer besser, sich auf die Navigationsmuster zu verlassen, mit denen die meisten Benutzer vertraut sind (z. B. die obere Navigationsleiste oder das Hamburger-Menü), als ein eigenes einzigartiges Navigationssystem (z. B. ein gestenbasiertes Navigationssystem) zu erstellen. Wenn Sie eine vertraute Navigation erstellen, helfen Sie den Benutzern, sich bei der Interaktion mit Ihrem Produkt auf ihre bisherigen Erfahrungen zu verlassen.
   
• Beschränken 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, werden mobile Benutzer gezwungen, durch eine Liste von Optionen zu scrollen. Überlegen Sie, wie Sie möglichst wenige Menüpunkte präsentieren können. Idealerweise sollte das von Ihnen gestaltete Menü nicht mehr als sieben verschiedene Kategorien enthalten.
   
• Priorisieren Sie Navigationsoptionen
  Organisieren Sie die Navigation anhand der Funktionsweise der Benutzer. Die beliebtesten Navigationsoptionen sollten oben angezeigt werden und die wichtigsten Aktionen sollten in einem sichtbaren Bereich des Bildschirms verfügbar sein.
   
• Verwenden Sie eindeutige Beschriftungen
  Jede Navigationsoption sollte eine klare und präzise Beschriftung haben. Vermeiden Sie Jargon - die Navigation, die Sie entwerfen, sollte keine Begriffe enthalten, die Ihre Besucher nicht verstehen. Klare Beschriftungen geben den Besuchern die Möglichkeit, das Ergebnis ihrer Aktionen vorherzusagen.
   
• Stellen Sie sicher, dass interaktive Elemente auch so aussehen.
  Denken Sie beim Entwerfen von Button und Links darüber nach, wie das Design die Auforderung zur Interaktion kommuniziert. Verstehen Benutzer das Element als interaktives Objekt? Die Art und Weise, wie ein Objekt aussieht, sagt den Benutzern, wie es verwendet werden soll. Visuelle Elemente, die wie Links oder Schaltflächen aussehen, aber nicht interaktiv sind (z. B. unterstrichene Wörter, die keine Links sind, oder rechteckige Felder mit Wörtern, die keine Schaltflächen sind), können den Benutzer leicht verwirren.
   
• Stellen Sie eine Suchfunktion bereit.
  Wenn Sie eine komplexe Website mit vielen Inhalten oder Funktionen betreiben, stellen Sie sicher, dass Sie eine Suchleiste für die einfache Navigation bereitstellen. Durch die Implementierung der Suchfunktion bieten Sie mobilen Benutzern, die mit einer bestimmten Fragestellung auf die Website gelangen, einen schnellen Zugang zu Informationen und Funktionen. Verstecken Sie nicht die Suchoption im Menü. Sie sollte das erste sein, das die Besucher auf Ihren Seiten sehen.
   
• Erleichtern Sie Benutzern das Zurückkehren zur Startseite.
  Besucher erwarten, dass sie beim Tippen auf das Logo oben auf einer Seite zur Startseite zurückkehren und sind frustriert, wenn dies nicht funktioniert.
   
• Halten Sie Ihren Benutzer in einem einzigen Fenster.
  Vermeiden Sie Funktionen, die ein neues Fenster öffnen. Einige Benutzer haben Probleme beim Wechseln zwischen Fenstern in einem mobilen Browser und können möglicherweise die vorherige Seite nicht finden.

Sperren verursachen Reibung. Und Reibung ist der schlimmste Feind der Nutzer. 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 häufigsten Arten von Unterbrechungen im Web. Lange Zeit waren solche Banner Werbebotschaften gewidmet, aber in letzter Zeit verwendeten viele Websites ablenkende Pop-ups, um die Erlaubnis zur Verwendung von Cookies zu erhalten. Unabhängig davon, welche Informationen Sie Ihren Besuchern zeigen möchten, stellen Sie sicher, dass sie nicht vom Gesamterlebnis ablenken.

Lassen Sie Benutzer Ihre Website nicht einfach gehen: Identifizieren Sie Orte der Customer Journey, die dazu führen könnten, dass ein Benutzer außerhalb Ihrer Website weiter recherchiert, und stellen Sie dann Inhalte oder Funktionen bereit, um sie auf Ihrer Website zu halten. Ein Promo-Code-Feld auf E-Commerce-Websites ist 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.

Zwingen Sie Benutzer nicht zur Anmeldung. Die Aufforderung, sich zu registrieren, bevor man Informationen sehen oder einen Onlinedienst nutzen kann, verursacht eine hohe Interaktion. Eine zu frühe Registrierung kann dazu führen, dass Benutzer die Website verlassen. Bevor Besucher persönliche Informationen bereitstellen, möchten sie sich ein Bild davon machen, was eine Website für sie bietet.

Um ein Nutzererlebnis mit den geringsten Conversion-Barrieren zu entwickeln, sollten mobile Websites es Besuchern ermöglichen, Inhalte zu durchsuchen, ohne sich anmelden zu müssen. Für E-Commerce-Websites ist es wichtig, dass ein Benutzer auch als Gast einkaufen kann.

Machen Sie es leicht, auf ein anderes Gerät umzusteigen, um den Einkauf oder die Recherche fortzusetzen. Betrachten Sie Mobilgeräte nicht als eigenständige Erlebnisse. Ein typischer Benutzer verfügt über mehrere Geräte wie einen Desktop-Rechner, ein Mobiltelefon und ein Tablet und erwartet, dass bei der Verwendung Ihres Produkts auf allen diesen Geräten eine nahtlose User Experience erzielt wird. Beispielsweise verwenden viele Benutzer mobile Geräte nur für die Produktsuche und wechseln dann zum Konvertieren auf den Desktop. Benutzer rechnen damit, von der Stelle aus fortzufahren, an der sie auf dem Handy angehalten haben.

Hier einige Dinge, die Sie tun können, um den aktuellen Fortschritt eines Benutzers zu synchronisieren:

• Synchronisieren Sie Wunschlisten, Favoriten und den Warenkorb für ein Benutzerkonto
• Bieten Sie auch nicht registrierten Benutzern eine einfache Möglichkeit zum Speichern oder Teilen von Informationen auf verschiedenen Geräten (z. B. die Option, den Link an eine E-Mail zu senden).

Das Ausfüllen von Formularen ist eine der häufigsten Aufgaben im Web. Es ist selten, 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. Hier sind einige Tipps, mit denen Sie die Reibung auf ein Minimum reduzieren können.

Eingaben in Formularen minimieren: Je weniger Daten ein Benutzer zur Verfügung stellen muss, desto mehr Spaß macht ihm das Web-Erlebnis. Mithilfe dieser Zeiger können Sie die Anzahl der Tastenanschläge und Eingaben verringern, 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 Auto-Korrektur, die automatische Großschreibung und die automatische Vervollständigung, um das Risiko von Benutzerfehlern zu verringern.
• Vermeiden Sie Dropdown-Felder. Dropdown-Listen verbergen die Optionen und verursachen zusätzliche Interaktionen. 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 Echtzeit-Inline-Validierung.
• Nutzen Sie vorhandene Informationen, um die User Experience zu maximieren. Sie können beispielsweise einige Felder wie die Lieferadresse oder Zahlungsinformationen 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 User beispielsweise aufzufordern, Kreditkartendaten einzugeben, können Sie die Kamera des Gerätes zum Scannen der Karte verwenden und Systeme wie Apple Pay und Google Pay integrieren, um die Zahlung mit einem Fingertipp zu ermöglichen.

Benutzer mobiler Geräte schätzen Websites, die eine geeignete Tastatur für das Feld bereitstellen. Diese Funktion verhindert, dass sie zusätzliche Aktionen ausführen müssen. Wenn Benutzer beispielsweise eine Telefonnummer eingeben müssen, sollte auf Ihrer Website der Ziffernblock 0 bis 9 angezeigt werden.

Legen Sie die HTML-Eingabetypen fest, um die richtige Tastatur anzuzeigen. Hier sind sieben für den Formularentwurf relevante Eingabetypen:

• input type = ”text” zeigt die normale Tastatur des Mobilgeräts an.
• input type = ”email” zeigt die normale Tastatur und '@' und '.com' an.
• Eingabetyp = "tel" zeigt den Ziffernblock 0 bis 9 an.
• input type = ”number” zeigt eine Tastatur mit Zahlen und Symbolen an.
• input type = ”date” zeigt die Datumsauswahl des Mobilgeräts an.
• input type = ”datetime” zeigt die Datums- und Uhrzeitauswahl des Mobilgeräts an.
• input type = "month" zeigt die Monats- und Jahresauswahl des Mobilgeräts an.

Viele Websites erkennen den Standort des Benutzers automatisch und verwenden diese Informationen, um relevanten Inhalt bereitzustellen. Ermöglichen Sie Benutzern das Ändern des Standorts da er in einigen Fällen möglicherweise Ergebnisse für einen anderen Ort anzeigen bekommen möchte.

Konsistenz ist eine der wichtigsten Säulen der User Experience. Einheitliches Design ist benutzerfreundliches Design. Wenn Sie sich auf konsistentes Design konzentrieren, werden Sie intuitiveres Design erstellen. Bemühen Sie sich stets, die Website sowohl intern als auch extern einheitlich zu gestalten.

• Interne Konsistenz
  Erstellen Sie eine Bibliothek mit Design-Assets und verwenden Sie diese für alle Bereiche Ihrer Website. Schriftarten, Buttons, Links, Symbole und alle anderen Elemente der Benutzeroberfläche müssen auf der gesamten Website konsistent sein, um die visuelle Wiedererkennbarkeit zu gewährleisten.
• Externe Konsistenz
  Stellen Sie sicher, dass die von Ihnen gestaltete Website auch Teil einer größeren Produktfamilie ist. Wenn Sie beispielsweise eine mobile App betreiben, sollte Ihre mobile Website den Benutzern, die sie verwenden, ein Gefühl der Vertrautheit vermitteln.

Alle hier genannten Punkte können als Best Practices angesehen werden. Aber nur weil etwas als "Best Practice" bezeichnet wird, ist es noch lange nicht unbedingt die optimale Lösung für Ihre eigene Website. Aus diesem Grund ist es immer wichtig, Ihre Entscheidungen zu testen. Machen Sie Usability-Tests zu einem obligatorischen Bestandteil Ihres Designprozesses und verbessern Sie das Benutzererlebnis regelmäßig.