Think Big, Reduce Later – warum Mobile First nicht immer erste Wahl sein muss

Die Devise „Mobile First“ hat sich bei der Entwicklung digitaler Interfaces für mehrere Endgeräte mittlerweile durchgesetzt. Doch es lohnt sich, diese Vorgehensweise zu hinterfragen und  visuelle Alternativen zu positionieren.

Am 3. November 2009 von Luke Wroblewski zum ersten Mal beschrieben, meint Mobile First mehr, als nur bei responsiven Seiten mit dem kleinsten Display und somit mit dem kleinsten gemeinsamen Nenner anzufangen. Dieser entspricht heute dem Display einer Smart Watch. „Small Screen First“ dürfte es also eher treffen. Bei Mobile First geht es in erster Linie darum, Funktionen und Informationen auf ihre Essenz und Relevanz zu reduzieren und daraus das Gesamtbild zu entwickeln.

Aus Sicht des Entwicklers macht dieses Vorgehen Sinn. Ausgehend von einem gemeinsamen Programmcode für alle Auflösungen lassen sich so nach und nach die Besonderheiten erweiterter Ansichten hinzufügen. Auch bei der Konzeption kann dieser Ansatz sinnvoll sein, da so zu Beginn eine Priorisierung stattfindet und klar herausgestellt wird, warum verschiedene Seitenelemente den Kern einer Ansicht prägen, und andere nur bei entsprechenden Möglichkeiten hinzugefügt werden.

Doch schon konzeptionell gehen die Meinungen auseinander. Immer häufiger ist die Rede von Device First. Dabei stehen die Besonderheiten eines Gerätes bei dessen Nutzung im Vordergrund. Womit bediene ich das Gerät? An welchem Ort und in welchem Kontext nutze ich ein digitales Angebot? Es wäre in diesem Zusammenhang also nicht besonders zielführend, ein Tool zur Erfassung der Arbeitszeit am Desktop zuerst auf einem mobilen Device zu konzipieren.

„Flow and context are more important than screen size.“

Laura Klein

Für Publicitas entwarfen wir einen einfachen Editor, mit dem der Nutzer  eine Anzeige nach dem WYSIWYG-Prinzip erstellen kann

Als Designer geht mir aber noch um einen weiteren Aspekt. Die Komposition verschiedener Gestaltungselemente auf einen Blick, ihr Zusammenspiel und wie sich aus Raum und Gewichtung die Nutzerführung und der Fokus einer Ansicht ergeben, sind eben doch erheblich davon abhängig, wie groß die zur Verfügung stehende Fläche ist. Der sichtbare Bereich spielt eine wesentliche Rolle, um Funktionen einfach und schnell zu erreichen oder Informationen verständlich und ansprechend abzubilden.

Auf kleinen Displays mag Reduktion auf das Wesentliche ein notwendiges Übel sein und die Komposition von Informationen spielt bei aufeinanderfolgenden Elementen, wie sie zumeist auf Smartphones zu sehen sind, keine Rolle. Die Elemente hängen nicht voneinander ab. Oder anders ausgedrückt: Visuell wird aus einer komplexen Webseite mit verschiedensten Elementen auf einem kleinen Display zwangsläufig meist eine Aufzählung mit Burger-Menü.

Einfach gedacht, aber oft einfach nur einfallslos: Darstellung von Informationsblöcken auf Ansichten mit mehr Raum nach dem simplen Listenprinzip

Wer mit einer Liste als Gestaltungsgrundlage beginnt, läuft Gefahr diese Tristesse auf Ansichten mit mehr Platz zu überführen. Aus drei aufgelisteten Informationsblöcken entstehen auf größerem Raum leicht drei uninspiriert nebeneinander geklebte Teaser ohne Priorisierung. Die Blickführung des Nutzers – oder die Relevanz von Informationen – wird zum ignorierten Nebenschauplatz.

Gepflegte Langeweile: UI-Pattern mit standardisierten Musterelementen als Grundlage für ein Interface

Ein weiterer Aspekt, der viele Interfaces wie Variationen des immer Gleichen erscheinen lässt, sind UI Pattern – also die einheitliche und musterhafte Abbildung von Funktionen und Informationen. Diese Designschablonen haben selbstverständlich Vorteile: Der Anwender muss nicht erst lernen, wie ein Interface funktioniert, weil er mit vertrauten Elementen interagieren kann. Aber ein allzu geradliniger Einsatz derartiger Bausteine ist kein Garant für gutes Design. Maßgeschneiderte Ansichten und Lösungen, die in ihrem Erscheinungsbild spannender und zielgerichteter sind, kommen dabei oft zu kurz.

Aus meiner Vorliebe für Vielfalt und mutigen Kompositionen heraus bevorzuge ich deshalb gestalterisch immer noch einen anderen Weg: Beginnend mit dem großen Bild – dem gemeinsamen Auftritt aller relevanten Informationen und Funktionen – müssen auf kleinem Raum die kompakteren Abbilder folgen. Denn unnötige Informationen haben gestalterisch ohnehin nirgendwo einen Platz, und Arrangements sind eben doch zuallererst abhängig vom Ausgabegerät und Nutzungsumfeld. Sie gewinnen, wenn wir uns darauf konzentrieren. Weglassen ist visuell immer einfacher als Hinzufügen. Die Sorge, eine Ansicht funktioniere bei Reduktion weniger gut, ist also unbegründet.

Wenn wir komplexe Ansichtstypen stärker in den Fokus stellen und alle relevanten Ausgabegeräte von Beginn an mitdenken, führt das zu mehr Experimentierfreude und Abwechslung. Wir sorgen für Vielfalt im Erscheinungsbild und konzentrieren uns gezielter auf die Erwartungen, die Nutzer an die Bedienung von Interfaces stellen. Der Ansatz Think Big, Reduce Later rückt Vielfalt und Attraktivität wieder ins Zentrum und schafft damit intensivere User-Experience-Erlebnisse. Genauso sind wir auch an unsere eigenen Website herangegangen. Das Ergebnis: Jede Ansicht hat ihren eigenen Charakter und ist kein bisschen langweilig.

Image Credits: Ski Safari 2


Ralf Kienzler

Zauberer

rk@coeno.com

Newsletter

Bleib auf dem Laufenden!

Mit dem 4x jährlich erscheinenden Newsletter erhalten Sie alle 3 Monate aktuelle Neuigkeiten unserer Agentur. Wir werden Ihre E-Mail Adresse zu keinen weiteren Zwecken verwenden und Sie können den Newsletter jederzeit bequem über einen Link im Mailfooter abbestellen.
Mehr dazu erfahren Sie in unseren Datenschutzbestimmungen.

Thank you! Your submission has been received!
Oh! Etwas hat nicht geklappt. Bitte versuch es nochmal.