Mobilgeräte machen mehr als die Hälfte des Web Traffic aus. Dennoch ist ein nutzerorientiertes Mobilerlebnis keine Selbstverständlichkeit. Wir liefern euch die Best Practices für mehr Usability.
Der Mobile-First Ansatz
Beim Mobile-First Ansatz wird die Mobilversion vor der Desktopversion entwickelt. Dadurch müssen Entwickler:innen die Anforderungen und Eigenschaften mobiler Geräte frühzeitig berücksichtigen. Unter anderem gilt es die Größeneinschränkungen und die Bedienung via Touch zu beachten. Idealerweise sollte die Eingabe via Touch auch einhändig funktionieren. Es ist einfach ein riesiger Bonus, beim Reisen eine Verbindung mal schnell nebenbei zu checken. So ist die zweite Hand frei für etwaiges Gepäck oder den obligatorischen Kaffee.
Weiterhin sind komplexe Dateneingaben umständlicher, deswegen sollten Interaktionen minimalistischer gestaltet werden. Das Hovern mit dem Cursor entfällt beispielsweise ganz, daher lädt mobilfreundliches Webdesign dazu ein, Interaktionsmuster zu durchdenken und mit Blick auf die Usability zu simplifzieren.
Achtet auf die richtigen Größenmaße
Die gängigste Schriftgröße beträgt 16px, wobei sich das je nach Schriftart ein wenig unterscheidet. Achtet bei Überschriften vor allem darauf, dass sie klar hervortreten, also: Größe, Schriftart, Dicke, Farbe oder Kursive oder Unterstreichungen. Außerdem solltet ihr besonders auf die Größe der Touchelemente achten: Für Buttons beträgt die gängige Größe in der Regel zwischen 42 und 72px. Also: denkt dran nicht beeinträchtigt die Usability mehr als sich auf einer zu kleinen UI ständig zu “verdrücken”.
Optimiert für die Nutzung im Hochformat
Im Hochformat liegt das Smartphone besser in der Hand, idealerweise lässt es sich dann gemütlich und einhändig bedienen. Für mehr Usability solltet ihr also nicht nur eure App, sondern stets auch die konkrete Interaktion mit dem Endgerät mitbedenken. Um den vertikalen Raum ideal zu nutzen, bietet es sich an, Content untereinander zu platzieren. Hierdurch können Bilder größer abgebildet werden und der Lesefluss wird gefördert. Übrigens helfen leicht asymmetrische Backgrounds neben der Platzierung von Elementen dabei, Dynamik zu entwickeln. Ein simples, vertikal ausgerichtetes Layout muss nicht zwingend langweilig sein. Selbstverständlich könnt ihr auch auf einen ultra-minimalistischen Look abzielen. Also: gutes Design kombiniert Usability, Ästhetik und Präsentation.
Genauso wichtig ist es, den begrenzten Raum übersichtlich zu gestalten. Versucht nicht so viel Content wie möglich “reinzuzwängen”, sondern verwendet Elemente wie Slider und Expander. Macht euch allem voran Gedanken, wie ihr euren Content sinnvoll gruppiert und Themenabschnitte bildet.
Achtet auf die Wahl eurer Media-Assets
Sowohl bei Bild als auch bei Video-Content gilt es, die Größenverhältnisse des Screens zu berücksichtigen. Das 16:9 Seitenverhältnis der meisten Videos entspricht übrigens dem durchschnittlichen Seitenverhältnis der meisten Mobilgeräte im Querformat. Tatsächlich gibt es keine Universallösung: Durchdenkt, wie euer Konzept auf mobilen Geräten funktioniert. Im Zweifel könnt ihr Content-Elemente aus der mobilen Variante streichen. Zumal durch aufwändige Media-Assets die Ladezeiten bei schlechten Mobilfunkverbindungen leiden.
Obwohl Mobilverbindungen schneller geworden sind, mag es dennoch zu schlechten Verbindungen kommen. Denkt auch dran, dass nicht alle Nutzer:innen unlimitiertes Datenvolumen haben. Ihr solltet euren Media-Content immer optimieren, aber bei Mobilverbindungen ist das besonders relevant, denn kleinere Dateien werden schneller geladen. Übrigens fördern sowohl Performance als auch Usability euer SEO Ranking.
Strukturiert euer Navigationsmenü
Das Hamburger Menu ist bei mobilen Layouts quasi ein Standard: Es verbirgt das Navigationsmenü hinter einem Symbol – meistens drei horizontale Striche. Bei Bedarf können die Nutzer:innen das Menü auf oder zuklappen. Bei der mobilen Version wird das Menü in der Regel als fixiertes Layer implementiert, das sich entweder von oben ausklappt oder von der linken Seite einschiebt. Die Menüpunkte sind vertikal angeordnet, so nutzt ihr das Hochformat ideal aus.
Wie bei so vielem gilt auch hier, keep it simple. Bei komplexen Menüs schafft ihr mehr Übersichtlichkeit durch aufklappbare Unterkategorien oder dadurch, dass das Untermenü das Hauptmenü überlagert. Macht euch vor allem Gedanken über die Struktur und beachtet – wie oben erwähnt – die richtigen Schrift- und Buttongrößen. Nichts beeinträchtigt die Usability mehr, als sich in einem überfrachteten Menü ständig zu verklicken. Also erspart euren User:innen den Frust.
Gestaltet euren Content übersichtlich
Aufmerksame Leser:innen erkennen vielleicht langsam ein Muster: den begrenzten Raum. Gerade im mobilen Bereich hängen Usability und Übersichtlichkeit stark zusammen. Obwohl die Meisten wohl durch Social-Media langes Scrollen gewöhnt sind, wollt ihr in einigen Fällen platzsparend agieren. Mitunter empfiehlt es sich, Content zu kürzen oder ganz aus der mobilen Version zu streichen. Allgemein wollt ihr wesentliche Informationen prominent platzieren und in sinnvollen Abschnitten gruppieren. Einerseits sind auf mobilen Seiten weniger Informationen gleichzeitig sichtbar und andrerseits schafft eine gute Struktur Orientierungspunkte für eure Nutzer:innen. Hierbei helfen beispielsweise ausklappbare Elemente – die bereits oben erwähnten Expander.
Zusammenfassung
Die Relevanz von Mobilgeräten auf dem Markt ist unbestreitbar. Auch wenn die Entwicklung einer runden mobilen User-Experience zunächst aufwändig klingt, lohnt es sich. Allem voran profitieren eure Nutzer:innen von mehr Usability und dadurch auch euer Produkt. Zumal die Bedienung via Touch als auch der limitierte Screen vielfältige Möglichkeiten für innovatives Design und spielerische Interaktionen bieten. Wie bei der Einrichtung eines Raums gilt: bei begrenztem Raum ist Organisation der Key. Hierin liegt manchmal eine Herausforderung, aber auch viel Potenzial für kreative Lösungen. Also seid kreativ: Usability, Ästhetik und ein spielerischer Umgang mit den vielfältigen Möglichkeiten sind kein Widerspruch. Mobilfreundliche Entwicklung ist manchmal eine Herausforderung, aber eröffnet ebenso viel Potenziale. Also denkt dran: Zum mobilen Nutzungserlebnis gehört mehr als die Tatsache, dass eure Website auf einem Smartphone lädt. In diesem Sinne: Entwickelt eure Produkte – wie stets – mit euren Nutzer:innen im Blick.