Mobile first? User first!

Warum manchmal der Desktop entscheidend ist

Im Restaurant, an der Bushaltestelle, in der Arbeit oder selbst zu Hause – überall sind sie zu sehen: Menschen, die den Blick nach unten auf das Smartphone oder Tablet gerichtet haben. Mobile Websites sind heute wichtiger denn je. Ist für die Konzeption, das Design und die Implementierung einer Website, die sowohl für Mobile als auch für Desktop optimiert werden soll, der immer noch stark gehypte Mobile-First-Ansatz dabei der richtige? Ist es wirklich immer sinnvoll, die mobile Website zuerst zu gestalten?

 

(Foto: rawpixel.com/unsplash.com)

(Foto: rawpixel.com/unsplash.com)

 

Wenn es nach Mobile-first-Erfinder Luke Wroblewski geht, entwirft man die mobile Websitevariante zuerst. Ist diese gut durchdacht, soll es kein Extraaufwand mehr sein, diese anschließend auf Desktop zu übertragen. Mit diesem Ansatz erreicht man zwar eine optimale mobile Nutzererfahrung, allerdings kann die User Experience auf dem PC leiden – vor allem dann, wenn die mobile Seite in großen Teilen für den Desktop übernommen wird.

 

Da die Nutzer – je nachdem, wo sie sich befinden – nicht nur unterschiedliche Geräte nutzen, sondern auch unterschiedliche Bedürfnisse haben, müssen neben der äußeren Erscheinung der Seite auch die dargestellten Informationen sowie die Interaktionsmöglichkeiten des Benutzers angepasst werden.

 

Schnelle Infos für unterwegs, am liebsten ortsbezogen

 

Unterwegs wird das Internet meist nur nebenbei genutzt – für den schnellen Informationskonsum oder um Zeit totzuschlagen. Oftmals in Stress oder in Eile. Für den schnellen Preisvergleich im Geschäft oder auf dem Weg zur Haltestelle, wenn man wissen möchte, wann der nächste Bus fährt. Am Bahnhof angekommen, werden die Warteminuten mit dem Lesen von Nachrichten überbrückt oder man postet noch eben den Facebook-Status. Im mobilen Kontext ist es vor allem wichtig, kurze und prägnante sowie auf die Situation abgestimmte Informationen zu erhalten. Dabei spielt die verfügbare Bandbreite eine große Rolle. Nicht immer steht LTE zur Verfügung und das Datenvolumen ist begrenzt. Deshalb müssen Inhalte möglichst klein sein, damit sie schnell geladen werden können.

 

Informationen, die gerade im mobilen Kontext relevant sind, sollten deshalb besonders prominent angezeigt werden. Dazu zählen standortbezogene Informationen wie Adressen oder zeitbasierte Informationen wie Busverbindungen. Ob man unterwegs ist und in welcher Umgebung man sich befindet, lässt sich beispielsweise über den GPS-Sensor des mobilen Devices feststellen. Um die Lesbarkeit und Treffsicherheit zum Beispiel während des Laufens zu verbessern, können Schrift und Buttons vergrößert werden. Kontraste können verstärkt und Farben angepasst werden, wenn über den Lichtsensor festgestellt wird, dass die Sonne direkt auf das Display scheint.

 

Zu Hause sind das Surfverhalten und das Bedürfnis nach Informationen ganz anders als unterwegs: Wir machen es uns mit dem Notebook auf der Couch bequem und informieren uns – verbunden über das WLAN – gründlich über die nächste größere Anschaffung. Oder wir planen im Detail unseren Sommerurlaub. Meist steht eine unbegrenzte Bandbreite zur Verfügung. Problemlos kann auf längere Videos, Spiele und große Datenmengen zugegriffen werden.

 

(Foto: LinkedIn Sales Navigator/unsplash.com)

(Foto: LinkedIn Sales Navigator/unsplash.com)

 

In den eigenen vier Wänden sind die Lichtverhältnisse stabil. Für Desktop-PCs würde es wenig Sinn machen, die Umgebungshelligkeit zu messen und Websites an geänderte Bedingungen anzupassen. Allerdings besitzen einige Notebooks inzwischen Lichtsensoren – so können auch bei der mobilen Nutzung auf der Terrasse Farben und Kontraste verstärkt werden. Neben dem fehlenden Lichtsensor wird bei Desktop-PCs und auch andere Sensoren verzichtet, wie den GPS-Sensor und den Beschleunigungssensor.

 

Quer- oder Hochformat bestimmt die Navigation

 

Auf Computerbildschirmen steht wesentlich mehr Platz zur Verfügung als auf den kleinen Screens von iPhone und Co. Die Bildschirme, welche typischerweise im Querformat genutzt werden, haben den großen Vorteil, dass viele User-Interface-Elemente, die auf mobilen Screens versteckt oder verkleinert werden müssen, direkt angezeigt werden können. Hierzu zählt beispielsweise die Hauptnavigation. Meist ist auch noch genügend Platz für seitliche Untermenüs, Filter und andere Elemente vorhanden.

 

Smartphone und Co. nutzen jedoch kleine Bildschirme im Hochformat. Die Navigation wird oftmals aus Platzgründen im sogenannten Hamburgermenü versteckt. Diese drei übereinanderliegenden Striche haben sich im Laufe der vergangenen Jahre zu einem stark genutzten Navigationskonzept für mobile Websites entwickelt. Neben dem Platzgewinn bringt dieses aber leider auch viele Nachteile mit sich: Unter anderem kann man das Symbol leicht übersehen und auch nicht direkt erkennen, welche Menüpunkte sich dahinter verbergen.

 

Bilder sollten sich für verschiedene Seitenverhältnisse und für verschiedene Positionierungen eignen. Auf keinen Fall dürfen Gesichter und andere wichtige Bildinhalte verdeckt oder abgeschnitten werden, wenn sie von dem einen auf das andere Format übertragen werden. Außerdem muss der Informationsgehalt des Bildes auf die jeweilige Bildgröße abgestimmt sein. Statt ein Bild für Desktop nur groß zu skalieren, gilt es, diesem mehr Details hinzuzufügen. Natürlich müssen auch die Qualität sowie die Dateigröße für das WLAN zu Hause beziehungsweise für das mobile Internet stimmen.

 

Desktop-Websites werden hauptsächlich mit der Maus bedient. Diese ermöglicht es, sehr kleine Ziele wie Buttons oder Links präzise zu treffen. Dank der Tastatur ist das Tippen längerer Texte kein Problem. Für Touch Devices werden aufgrund des sogenannten Fetten-Finger-Problems wesentlich größere Klickflächen benötigt, die wiederum mehr Platz auf den zumeist viel kleineren Bildschirmen einnehmen.

 

Um die mobile UX zu erhöhen, können Sensoren und Features des Smartphones oder Tablets ins Webdesign mit einbezogen werden. Standortbezogene und zeitbasierte Informationen wie zum Beispiel Öffnungszeiten lassen sich einfach anzeigen, wenn das Gerät die eigene Position mit Hilfe des GPS-Sensors erkennt. So kann der Nutzer gezielt darauf hingewiesen werden, dass der Supermarkt, vor dem er gerade steht, bereits in zehn Minuten schließt. Der Fingerabdrucksensor des Smartphones vereinfacht und beschleunigt das Einloggen enorm.

 

1:1-Übertragung? Nein, danke!

 

Eine mobile Website 1:1 auf den Desktop zu übertragen, ist nie eine gute Idee. Seiten, die für Desktop optimiert sind, haben im Gegensatz zu mobilen Websites viele Vorteile. Hier ist meistens so viel Raum vorhanden, dass sich das Menü und weitere User-Interface-Elemente direkt anzeigen lassen. So ist die Navigation immer sichtbar, leicht zugänglich und das Ziel ist mit nur einem Klick erreicht.

 

Für mobile Websites steht viel weniger Platz zur Verfügung und der Bildschirm wird in einem abweichenden Format genutzt. Dafür kann die mobile UX gesteigert werden, wenn Funktionen und Sensoren der Devices sinnvoll einbezogen werden.

 

Nach dem Mobile-first-Prinzip soll ein User Interface so gestaltet sein, dass nur relevante Inhalte dargestellt sind. Dies sollte jedoch immer so sein – auch auf dem Desktop. Die Gestaltung der Website ist deshalb in erster Linie abhängig von der Zielgruppe in ihrem Nutzungskontext, der sich unter anderem in der Wahl des Devices zeigt. Sind die Unterschiede zwischen der mobilen und der häuslichen Nutzung zu groß oder spielt die Desktopversion eine größere Rolle als die mobile Website, kann es mehr Sinn machen, mit dieser zu beginnen. Oder alle Varianten parallel zu entwickeln.

 
janine-schneider

Über die Autorin:

Janine Schneider ist als UX Architect bei der UDG United Digital Group die Stimme der User. Sie ist Experte in Usability-Fragen und entwickelt in erster Linie Bedienkonzepte für Webanwendungen.

 

#MOBILE #UX


Regelmäßig News aus der digitalen Szene erhalten?


Ansprechpartner finden oder mehr zur

UDG United Digital Group erfahren?

Please turn on Javascript

Leave a Reply

Your email address will not be published.