User Experience von Responsive Webdesigns

Vielerorts als eines der Trendthemen 2012 bezeichnet, dreht sich beim Responsive Design alles um die Anpassung des Erscheinungsbildes und der Bedienung einer Website abhängig vom Endgerät. Das Websitelayout (Content, Navigation, Textdarstellung, …) passt sich mithilfe neuster Webstandards wie HTML5 und CSS3 optimal an die variierenden Auflösungen von Laptops, PCs, Tablets, Smartphones oder Fernsehern an.

responsive design Beispiel

Nettes Beispiel für Responsive Design für verschiedene Endgeräte / Auflösungen (http://2012.newadventuresconf.com)

Vor dem Hintergrund einer plattformübergreifenden, konsistenten Usability und User Experience eine hervorragende Entwicklung! Jedoch stellt sich dies alles andere als einfach und trivial dar…

Was gilt es zu beachten in Sachen UX?

U.a. Juergen Liechtenecker beschreibt es in seinem Blogartikel „Responsive Webdesign – die Basics“ bereits sehr treffend:

  • Konsistentes Design über alle Plattformen
    Zentrale Elemente wie Logos und Farbwelten sollten konsistent bleiben. Der Nutzer sollte sich in allen Layouts (egal ob mobile Version oder stationäre Website) zurechtfinden, ohne dabei den grundlegenden Aufbau als auch den Navigationsmechanismus neu erlernen zu müssen.
  • Mobile Endgeräte unterliegen andere Interaktionsprinzipien
    Bei der Bedienung per „Touch“ gibt es weder Mouseover noch Hover-Effekte. Auch die Realisierung von (Mega-)Dropdowns führt immer wieder zu Problemen bei uns im Usability-Lab. Navigationselemente müssen noch deutlicher als klickbare Flächen erkennbar sein als auf dem Desktop. Der Finger ist nun mal kein Mauszeiger.
  • Der Erfolg ist (größtenteils) abhängig vom Navigationsdesign
    Wie können Navigationsmechanismen vom Desktop auf mobile Endgeräte übertragen werden? Wie wird die Hauptnavigation abgebildet, wie die Unterkategorien bei deutlich weniger Platz? Welche Alternativen/Lösungen gibt es für (Mega-)Dropdowns? Anbei zwei sehr gute Artikel die sich ausschließlich mit dieser Thematik befassen: „Webseiten-Navigationen in responsive Webdesigns analysiert“ und „Luke Wroblewski on Designingfor Mobile First (nur das Navigation Elements-Video ist kostenlos verfügbar!)
  • Zusatzaufwand
    Seine Website responsive zu gestalten, bedeutet einen zeitlichen als auch finanziellen Mehraufwand, der sich durch alle Stadien des Entwicklungsprozesses zieht. Es bedarf vermehrtem Wireframing, Prototyping als auch User Testing mit verschiedenen Endgeräten, um auch wirklich sicherzustellen, dass alle Versionen den Bedürfnissen der Nutzer entsprechen und ein konsistente, plattformübergreifende User Experience entsteht.

zudem:

  • Wo sind die Guidelines?
    Selbst Usability-Papst Jakob Nielsen hat nach eigener Aussagen noch nicht genügend Erfahrungen im Umgang mit „transmedia usability“ gesammelt, um eine umfangreiche Liste an Guidelines herauszugeben. Bislang sind es nur 4 (Visual continuity, feature continuity, data continuityundcontent continuity…naja). Das soll schon was heißen!
    Allgemeine Heuristiken ala Nielsen &Molich werden weiterhin Bestand haben; sich adaptieren lassen. Bei gerätespezifischen Guidelines und Normen wird es schon interessanter: Ist die DIN EN ISO 9241-151 Empfehlungen zur Gestaltung von Benutzungsschnittstellen für das World Wide Web dann noch die „Richtige“? Dies wird die Zeit sowie zahlreiche Usability-Tests mit tatsächlichen Anwendern zeigen.

eCommerce-Potential!

Mal ganz abgesehen von der plattformübergreifenden, responsiven Gestaltung von Websitelayouts finde ich die sich nun ergebenen Möglichkeiten für Websites im Allgemeinen sehr interessant. Besonders auch für Online-Shops: Burberry macht es vor, wie man sein Schaufenster optimal an die Displaygröße des Betrachters anpasst (hier sprechen wir jedoch lediglich von einem „flexiblen“ Layout). Schauen Sie mal rein und spielen Sie ein wenig mit Ihrer Browserfenstergröße!

burberry responsive1

Startseite des Burberry Online-Shops bei 1920px-Displaybreite

burberry responsive2

Produktübersichtsseite des Burberry Online-Shops bei 1920px

Leider haben wir in eigenen Studien auch noch nicht ausreichend Daten sammeln können, um z. B. valide Aussagen darüber treffen zu können, ob …

  • es bei solchen Darstellung nicht eher zur Reizüberflutung kommt (zurück zur guten alten „Übersichtlichkeit“)?
  • so etwas für jedes Alter und jede Zielgruppe wünschenswert ist?
  • sich ganz andere Conversion Rates erreichen lassen?

Zumindest im Modebereich würde ich jedoch darauf wetten, dass wir hiervon in Zukunft mehr zu sehen bekommen.

Zuguterletzt: eine kritischer Gedanke

Fern ab des ganzen Hypes sollten wir uns jedoch nichts vormachen: In den USA machen Online-Einkäufe via mobilem Endgerät aktuell gerade einmal 2% aus. Selbstverständlich steigt dieser Anteil in Zukunft; wird aber auch nach Einschätzung von Jakob Nielsen nicht den guten alten Desktop ersetzen. Siehe hierzu seinen sehr lesenswerten Artikel zu „Transmedia User Experience“.

Ferner stelle ich mir an dieser Stelle die Frage, ob die plattformübergreifende Darstellung von Website überhaupt des Rätsels Lösung ist. Denn: der Nutzungskontext beim Surfen via Desktop-PC, Tablet und Smartphone ist doch zu großen Teilen immer ein anderer. Meine Amazon-App unterwegs verwende ich ganz anders als die (Mobile) Website, ganz zu schweigen von der Tablett-App auf dem Sofa.

Weiterführende Links:

Portraitfoto: Martin Beschnitt

Martin Beschnitt

Geschäftsführender Gesellschafter

eresult GmbH

Bisher veröffentlichte Beiträge: 145

8 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.