Am 25. Oktober durfte ich im Zuge des UXability Workshops in Graz Vitaly Friedmans interessanten Erkenntnissen bezüglich User Experience und Responsive Design lauschen. Im Besonderen ging der Mitgründer von Smashing Magazine darauf ein, wie wichtig Usability, Accessibility und somit eine perfekte User Experience für einen Webauftritt sind. Die erste Frage lautet hier oft „Was wird funktionieren?“ Die Antwort darauf ist jedoch untrennbar verknüpft mit der Frage „Was hat funktioniert?“ – denn nichts sagt mehr über das User-Verhalten einer Seite aus als Auswertungen verschiedener Experimente.

Vitaly Friedman Vitaly Friedman präsentiert Erkenntnisse zur User Experience beim UXability Workshops in Graz
Bild: http://www.cnc.io/

Einige der wichtigsten Punkte aus Vitalys Vortrag im Recap:

1. Brauche ich eine Responsive Website oder eine App?

Dass ein Webauftritt auch mobil verfügbar sein muss, ist heutzutage keine Frage mehr. Man muss sich jedoch entscheiden, ob eine Responsive Website oder eine App besser geeignet ist. So viel sei gesagt, Apps machen nur einen kleinen Teil der Angebote aus. Neben der Erwägung der Kosten einer mobilen App muss man sich vor allem eine Frage stellen: Macht eine App wirklich Sinn? Eine App sollte immer einen Mehrwert durch Features bieten und keine bloße Abbildung einer Website sein. Sie macht also etwa bei E-Commerce-Produkten weit mehr Sinn als bei einer „regulären“ Website ohne zusätzliche Features.

2. Vom Atom zum Organismus

Design spielt in einer reibungslosen User Experience eine sehr wichtige Rolle. Hier wurde uns von Vitaly „Atomic Design“ empfohlen. Atomic Design ist eine Methode, die von Brad Frost entwickelt wurde, um Responsive Design in die kleinsten Einzelteile zu zerlegen.

Zwar gilt seit mehreren Jahren nun “mobile first”, was aber im Design leider nur selten stattfindet. In vielen Fällen wird zuerst die ganze Seite durchgestaltet und dann versucht, das ganze schmal und untereinander auf mobilen Geräten anzuordnen.

Atomic Design sieht vor, die Website in die kleinsten Teile zu zerlegen und sich im Vorfeld schon Gedanken zu machen, wie sich die Suche zum Beispiel auf dem Smartphone oder auf der Desktop-Variante verhält. Eine Unterteilung würde wie folgt aussehen:

  • Atome: Texte (Überschriften, Absätze, Zitate), Listen, Bilder, Formulare, Buttons, Tabellen
  • Moleküle: Texte (Artikel + Unterüberschrift, Einleitungstext), Layout (1-, 2- oder 3-spaltig), Blöcke (Video, großes Vorschaubild mit Text, …), Formulare (Suche, Kommentare, Newsletter-Anmeldung), Navigation (Hauptnavigation, Footer-Navigation, Tabs, …)
  • Organismen: Header, Footer, Artikel + Kommentare, Sektionen (neueste Artikel, ähnliche Posts)
  • Templates: Homepage, Blog, einzelner Artikel
  • Seiten: Homepage, Blog, einzelner Artikel

Über die Darstellung all dieser Aspekte sollte man sich im Vorfeld ausreichend Gedanken machen. Beginnt man bei den Atomen, so hat man die Grundlage – die Seite als Ganzes setzt sich dann aus den Bestandteilen zusammen. So ergibt sich eine durchgängige Struktur.

Kevin Niedermayr beim UXability Workshops in Graz Kevin Niedermayr beim UXability Workshop in Graz
Bild: http://www.cnc.io/

3. „Performance Optimierung ist wichtiger als Conversion Rate Optimierung“

Rasche Ladezeiten sind ein wesentlicher Erfolgsfaktor von Websites. Es bringt nichts, wenn ein Button zum Beispiel „above the fold“ perfekt optimiert ist, wenn er aufgrund zu langer Wartezeiten nicht für den Besucher sichtbar wird. Das zeigten die Erkenntnisse aus Vitalys eigenen Performance Tests – und auch andere Autoren von Smashing Magazine haben dies festgestellt.

4. Performance-Budget festlegen

Es hilft hier, ein so genanntes „Performance-Budget“ festzulegen, welches wie ein finanzielles Budget nicht überschritten werden soll. Dazu setzt man sich ein Ziel, etwa eine Landingpage mit maximal 500kb an Daten, die der Browser bereitstellen muss. Sollen nun drei verschiedene Content-Slider mit hochauflösenden Bildern angezeigt werden (wobei ein Bild schon mehr als 1MB hat), merkt man rasch, wo die Ladezeit verloren geht.

Um ein Performance Budget festzulegen, wertet man einfach mittels Excel die Ladezeiten aus. Die URL der getesteten Seite wird in eine Spalte eingetragen, die Ladezeiten mittels 3G, Edge und WIFI in die weiteren Spalten.

5. Hamburger-Icon oder Menü

Unter Designern und Entwicklern von Responsive Websites ist es ein leidiges Thema: Wie soll das Menü auf mobilen Geräten dargestellt werden? Eine Variante ist das sogenannte Hamburger-Icon, das man aus mobilen Websites und Apps kennt:

hamburger

Obwohl es wie ein Menü aussieht, führt dies oft zu Verwirrungen. Die Alternative ist ein Button mit der Aufschrift „Menü“. Auch Kombinationen sind möglich.

Hier ein paar Erfahrungswerte:

  • Das Hamburger-Icon hat in manchen Schriftsystemen eine eigene Bedeutung, was im internationalen Umfeld Verwirrung stiften kann
  • Eine Conversion kann hier trügen, weil zum Beispiel Besucher die Navigation ohnehin nicht nutzen.
  • Viele Untersuchungen ergeben vermehrt bessere Conversions mit „MENÜ“ alleine ohne Icon.
  • Allerdings kann es im Einzelfall auch ganz anders aussehen: Booking.com hat A/B-Tests durchgeführt und eine Änderung von 0,0% zwischen Hamburger-Icon und „MENU“ festgestellt. Das weist darauf hin, dass man keine allgemeingültigen Schlüsse ziehen kann und im Idealfall bei der eigenen Website selbst Tests durchführen sollte.

6. Responsive Design von Anfang an

Der UXability Workshop hat mir bezüglich Usability die Augen geöffnet. Zwei Punkte erscheinen mir besonders wichtig: Erstens gibt es hier kein Erfolgsrezept, das man als „Schablone“ verwenden kann – jeder Fall ist einzigartig und muss evaluiert werden. Zweitens wird und soll Responsive Design uns in den nächsten Jahren bereits in der Konzeption neuer Produkte vom Start weg beschäftigen. Es geht nicht mehr nur um die mobile Anzeige von Seiten – stattdessen werden Produkte von Anfang an anders konzeptioniert, sodass sie in ihren Funktionen an alle Devices angepasst sind und nicht „nur“ gut aussehen.