Mobile-Webdesign: Weniger ist mehr
Kommentare

In den letzten drei Jahren hat sich das Surfverhalten der User erheblich verändert. In dieser Zeit ist die Verwendung von Desktop-Anwendungen von 90 Prozent auf 60 Prozent zurückgegangen. Das Surfen mit mobilen Geräten hingegen hat um 40 Prozent zugenommen. Von den Zahlen her gehört dem mobilen Surfen also die Zukunft. Jedoch schlägt sich dieser Trend kaum in der Optimierung von Seiteninhalten nieder.

Die Anpassung vollzieht sich hauptsächlich nach folgendem Muster: Die Desktop-Version einer Homepage wird durch den Einsatz responsiver Techniken skaliert und so auf mobile Geräte zugeschnitten. Eine äußerst dürftige Strategie – wie Richa Jain in ihrem Artikel „7 Best Practices for Designing a Mobile User Experience“ herausstellt. Sie argumentiert, dass sich Beliebtheit und Konversationsrate einer Homepage steigern lassen, wenn sich der Webauftritt auch speziell an die User mobiler Endgeräte richtet. In ihrem Artikel stellt sie die wichtigsten Techniken des Mobile-Webdesigns vor.

Mobile-Webdesign: Anpassung des Layouts

Desktops und mobile Geräte besitzen unterschiedliche Eingabemethoden: Der herkömmliche Einsatz von Maus und Tastatur wird durch Berührungsgesten ersetzt. Was auf den ersten Blick banal erscheint, wirkt sich entscheidend auf die Interaktion zwischen User und Website aus. Die Elemente einer Homepage werden nicht mehr präzise mit einem Cursor angesteuert, sondern per Hand bedient.

Formulare und Buttons etwa müssen so gestaltet sein, dass sie per Touch einfach und effektiv benutzt werden können. Ein Problem stellt hierbei die Vielzahl unterschiedlichster mobiler Geräte dar. Laut Jain ist es deshalb wichtig, die eigene Seite nicht bloß für eine gängige, sondern für eine Fülle verschiedenartiger Gerätebreiten zu optimieren. Um eine angemessene Darstellung auf verschiedenen Devices zu gewährleisten, sollte das Design deshalb so gestaltet sein, dass es sich flexibel an die jeweilige Bildschirmbreite anpasst. Dadurch soll sichergestellt werden, dass die Homepage auf allen gängigen Geräten ähnlich dargestellt wird.

Die Features mobiler Geräte ausnutzen

Ebenfalls sollten die Features von mobilen Geräten, die bei Desktop-Anwendungen nicht ohne Weiteres zur Verfügung stehen, intensiv genutzt werden. Dienste wie GPS können beispielsweise dazu dienen, standortspezifische Informationen und Dienstleistungen anzubieten. Auch Features wie das Scannen von Barcodes oder die automatische Bilderkennung können in den eigenen Webauftritt vorteilhaft integriert werden. Ebenfalls denkbar: Die Bildschirmhelligkeit passt sich automatisch an das Umgebungslicht an; die Schriftgröße wird mittels Bewegungssensoren situationsbedingt verkleinert oder vergrößert – der eigenen Kreativität sind hier kaum Grenzen gesetzt. Jain zufolge verbessert vor allem die richtige Einbindung gerätespezifischer Features die mobile Surferfahrung der Anwender erheblich.

Performanz ist das A und O

Insbesondere auf die Performanz einer Website sollte großes Gewicht gelegt werden. Größe und Ladegeschwindigkeit sind für Jain das A und O des Mobile-Webdesigns. So sollte auf den Einsatz von Bilddateien verzichtet werden, wenn sie bloß dazu dienen, bestimmte Effekte zu simulieren. Wichtiger als ausgefallene Farbverläufe und Schatteneffekte sei es, sich die Basics im Umgang mit CSS anzueignen und anzuwenden. Als Faustregel gilt: Je weniger Effekte durch Bildelemente, desto besser. Zur Verbesserung der Ladezeiten sollte deshalb auch davon abgesehen werden, den Text einer Website mit aufwendigen Bildeffekten aufwerten zu wollen.

Einfache und klare Menüführung

Auch die Menüführung sollte so einfach wie möglich gehalten werden. So sollte auf die traditionelle Ausrichtung des Menüs am oberen Bildrand verzichtet werden. Im Gegensatz zu Desktop-Anwendungen werde hierdurch wichtiger Platz auf mobilen Geräten verschenkt. Es sei ratsamer, entweder Dropdown-Menüs zu verwenden oder die Navigation durch den Einsatz von Icons zu organisieren; sie sollten in der rechten oder linken oberen Bildschirmecke platziert werden.

Ausdrücklich vermieden werden sollte die Verwendung von „Multi-Level“-Menüs mit „Hover“-Effekten. Auch wenn der Gebrauch solcher Menüs auf Desktop-Anwendungen weit verbreitet ist; auf mobilen Geräten ist das Navigieren durch verschiedene Untermenüs äußerst umständlich und aufwendig. Muss sich der User erst durch eine Vielzahl von Subkategorien klicken, ist es wahrscheinlich, dass er die Website aus Frust verlassen wird. Jain rät deshalb dazu, die Menüs übersichtlich zu gestalten, indem sie inhaltlich auf die Kernbotschaft einer Website reduziert werden. Im Unterschied zu Desktop-Anwendungen sollte nicht versucht werden, alle angebotenen Informationen im Menü unterzubringen.

Minimalistischer und fokussierter Seitenaufbau

Mobile Geräte sind nicht auf ein intensives Navigieren durch Seiteninhalte ausgelegt, und ebenso wenig auf ein langwieriges Suchen nach bestimmten Angeboten. Beim Gestalten einer Website sollte beachtet werden, dass das mobile Surfen zumeist unterwegs und nebenbei erfolgt. Laut Jain ist es deswegen angebracht, das Design so minimalistisch wie möglich zu halten. Jede Seite einer Homepage sollte nur einen spezifischen Themeninhalt behandeln; unnötige Informationen sollten hierbei so weit wie möglich vermieden werden.

Ebenfalls sollte auf den Einsatz atypischer Gestensteuerungen verzichtet werden. Stattdessen schlägt Jain vor, durch richtig platzierte Hinweise – etwa in Form kleiner Pfeile – den User die Verwendung verschiedener Seitenelemente zu erklären. Ihr zufolge schätzen Mobile-User insbesondere die kleinen Dinge, die zur Verbesserung ihrer Surferfahrung beitragen – und letztlich wirke sich die Zufriedenheit der User positiv auf Beliebtheit der eigenen Website aus.

Simple Formulare

Kleine Bildschirme sind nicht für längere Texteingaben gemacht. Aufgrund dessen sollten Formulare auf mobilen Geräten simpel gestaltet sein. Sofern umsetzbar, empfiehlt es sich laut Jain, für mobile Anwender separate Formularfelder auf der Homepage einzubinden. Hierbei sollte darauf Wert gelegt werden, so wenige Felder wie möglich zu verwenden, um die benötigten Informationen zu erhalten.

Für die am häufigsten verwendeten Formularfelder sollten Standardvorgaben und Auto-Vervollständigungen integriert werden; ebenfalls hätten sich bei längeren Eingabeprozessen der Einsatz von Fortschrittsleisten sowie zur Datumsabfrage die Verwendung von visuellen Kalendern als hilfreich erwiesen. Die Beschriftung der einzelnen Formularfelder sollte über das jeweilige Element platziert werden. Laut Jain würden die User hierdurch die Formulare deutlich schneller ausfüllen. Zudem seien auf diese Weise die Titel auch dann noch lesbar, wenn Seiteninhalte herangezoomt werden.

Nicht für jeden Internetauftritt lohnt es sich, seine Homepage auf diese Weise an das mobile Surfverhalten der User anzupassen. Für die meisten Webseiten ist die Optimierung ihrer Seiteninhalte durch eine Skalierung des Desktop-Angebots weiterhin völlig ausreichend. Jedoch erscheint die Einbindung eines Mobile-Webdesigns für gewisse Internetangebote, wie etwa Online-Stores, mehr als ratsam.

Aufmacherbild: Photo of a web designer via Shutterstock / Urheberrecht: baranq

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -