6 Erkenntnisse zur Zukunft von User Experience und Responsive Design
Im Zuge des UXability Workshops in Graz präsentierte Vitaly Friedmans interessante Erkenntnisse bezüglich User Experience und Responsive Design.
Im Zuge des UXability Workshops in Graz präsentierte Vitaly Friedmans interessante Erkenntnisse bezüglich User Experience und Responsive Design.
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.
Einige der wichtigsten Punkte aus Vitalys Vortrag im Recap:
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.
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:
Ü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.
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.
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.
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:
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:
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.
Newsletter abonnieren