Die Desktop-Version der Website sieht super aus und bietet alles, was man braucht. Dann ist man unterwegs und will nochmal schnell etwas nachschauen, doch auf dem Smartphone ist das Design der Seite komplett zerschossen und man findet nichts mehr wieder. Jeder ist wohl schon einmal über so eine Seite gestolpert und weiß aus eigener Erfahrung, wie abschreckend das ist. Die Zeiten, als das noch ein leicht verzeihbarer Fehler war, der nicht groß ins Gewicht fiel, sind längst vorbei. Ein funktionales Mobile Design ist mittlerweile kein optionaler Pluspunkt mehr, sondern eine absolute Notwendigkeit, wenn man sich als Unternehmen professionell und erfolgreich präsentieren will.

Mobile First Design ist genau das, wonach es klingt: die mobile Version einer Website wird zuerst entwickelt und anschließend für die Verwendung am Desktop erweitert und angepasst. Dafür werden Raster (oder auch Grids) im Smartphone-Format eingesetzt, die sich dann automatisch an jedes Screen-Format anpassen und die Inhalte stets optimal wiedergeben. Immer mehr Menschen nutzten Smartphones und Tablets, um sich durchs Web zu bewegen, sei es privat oder geschäftlich. Mobile Friendliness ist daher im Google Ranking nicht länger nur ein Faktor, inzwischen werden statt der Desktopversionen nur noch die mobilen Versionen einer Website gecrawlt. Wer Mobile Design also immer noch vernachlässigt, schießt sich damit selbst ins Aus.

Natürlich ist Mobile Design eine Herausforderung, schließlich sollen Inhalte, für die auf dem Desktop jede Menge Platz wäre, auf kleinstem Raum optimal dargestellt und kommuniziert werden. Doch Mobile First bringt auch einige Vorteile mit sich. So zwingt der beschränkte Platz dazu, Inhalte auf das Wesentliche zu reduzieren, wodurch Layouts automatisch an Übersichtlichkeit und Benutzerfreundlichkeit zulegen. Diese Reduzierung macht es auch leichter, die Seite an neue Entwicklungen anzupassen. Zudem erschließen Mobile First Designs eine bedeutend größere potenzielle Reichweite.

Von der anfänglichen Nutzerforschung über die Entwicklung der userfreundlichsten Navigation bis hin zu abschließenden Usability-Tests müssen einige Schritte auf dem Weg zum idealen Mobile Design durchlaufen werden. Unsere Erfahrung bei JALI.STUDIO hat gezeigt, dass dies einige der wichtigsten im Entwicklungsprozess sind:

1. Wege kurzhalten
Der Besucher einer Website sucht meist gezielt nach einer Information. Gutes Mobile Design lässt ihn dieses Ziel in so wenig Schritten wie möglich erreichen.

2. Den Raum beachten
Erschwerter Zugang zu Inhalten frustrieren die User und führen im schlimmsten Fall zum Verlassen der Seite. Fürs Mobile Design gilt es daher, horizontales Scrollen und Zoomen zu vermeiden. Übersichtlichkeit und Lesbarkeit sind entscheidend, weshalb sich eine Schriftgröße von mindestens 11 Punkt, serifenlose Schriften und einspaltige Layouts empfehlen. Zudem ist es wichtig, das Interface an die Benutzung des Fingers als Bedienelement anzupassen, sprich genügend Abstand zwischen Elementen zu lassen und diese groß genug zur problemlosen Interaktion aufzuziehen.

3. Scannen erleichtern
Auf einer neuen Website verschaffen sich User erst einmal einen groben Überblick, indem sie die Seite „scannen“ und unterteilen, um den Inhalt leichter verarbeiten zu können. Je leichter ihnen das durch klare Hierarchien, reduzierte Ablenkungen und mit Bildern aufgelockerte Textpassagen gemacht wird, desto mehr steigt die Wahrscheinlichkeit, dass sie nach dem ersten Scannen zum aufmerksamen Lesen und Interagieren übergehen.

4. Navigation simpel halten
Originalität ist etwas Schönes, beim Erstellen eines Navigationssystems allerdings eher unangebracht. Nutzer möchten sich auf ihre Erfahrung verlassen können, wenn sie sich auf einer Website bewegen, weshalb vertraute Navigationsmuster wie das Hamburger-Menü oder die obere Navigationsleiste verwendet werden sollten, statt neuartige Elemente einzuführen, die erst noch verstanden werden müssen. Des Weiteren sollte das Menü so wenig Kategorien wie möglich enthalten, um lange Listen zu vermeiden. Eine Suchfunktion erleichtert dem User besonders auf Seiten mit komplexerem Inhalt die Navigation, wobei die Suchleiste idealerweise das Erste ist, das er sieht.

5. Unterbrechungen vermeiden
Je öfter der User auf dem Weg zu seinem Ziel aufgehalten wird, desto unzufriedener wird er, im schlimmsten Fall bricht er die Reise ab und besucht die Seite nie wieder. Egal ob er nur da ist, um einen Artikel zu lesen oder einen Kauf tätigen will, er sollte dabei möglichst nicht unterbrochen werden. Es schreckt ab, wenn man sich erst anmelden muss, bevor man den Inhalt einer Seite überhaupt sehen konnte, und es führt auf Abwege, wenn man den Online-Shop erst verlassen muss, um nach einem Promo-Code zu suchen. Wer klug ist, bietet seinem User alles, was er braucht und sucht, auf der eigenen Website an oder macht sich Touchpoints der Customer Journey zunutze, die ihn immer wieder zur Seite zurückführen. Mehr zur Customer Journey in unserem Beitrag Die Reise zum Kauf: Warum jede Marke die Customer Journey nutzen sollte.

6. Eingaben minimieren
Sehr häufig müssen Besucher einer Website Angaben machen, etwa um sich registrieren, eine Anfrage zu senden oder einen Kauf abzuwickeln. Dabei ist es wichtig, diese Interaktion so unkompliziert und kurz zu halten wie möglich. Wenig Felder zum Ausfüllen, möglichst keine Dropdown-Felder und das automatische Ausfüllen von Informationen, die zuvor schon einmal angegeben wurden, sind Möglichkeiten, es dem User leichter zu machen.

7. Konsistenz wahren
Eine einheitliche Gestaltung der Benutzeroberfläche mit wiederkehrenden Elementen erleichtert dem User die Navigation. Einmal mit diesem Erscheinungsbild vertraut, erwartet er natürlich, es genauso auch bei allen anderen Komponenten der Produktfamilie wiederzufinden, beispielweise einer zur Website zugehörigen App.

Smartphones sind aus dem alltäglichen Leben nicht mehr wegzudenken und gewinnen immer mehr an Bedeutung sowohl im privaten als auch im geschäftlichen Bereich. Mobile First Design ist daher keine Zusatzoption mehr, die man eventuell für die eigene Online-Präsenz in Erwägung ziehen könnte, sondern eine unumgängliche Bedingung für den Erfolg eines Unternehmens im digitalen Zeitalter.