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:

8 Kommentare zu „User Experience von Responsive Webdesigns

  1. Pingback: 10 Lesetipps der Woche für Shopbetreiber » shopbetreiber-blog.de

  2. Hildegard Fuchs

    Ein großer Nachteil des responsive Webdesign ist, daß bei umfangreichen Seiten auf den mobilen Geräten meist zu lange Ladezeiten notwendig werden. Oft genügt dem mobilen Besucher ein kurzer Abriß der Information; Bilder und Animationen blähen das Datenvolumen auf und erhöhen damit die Wartezeit unnötig.

  3. Pingback: » LdW20: Facebook Ads, Usability von Responsive Design, Content Strategie » Rascasse GmbH – Beratung und Agentur für Digitale Innovationen

  4. Pingback: Monatsrückblick – Top Themen im Mai: Responsive Webdesign, Stärken und Schwächen von Usability-Tests im Lab, innovative Navigationskonzepte zur Inspiration | Usabilityblog.de

  5. Klaus

    Leider unterscheidet der Artikel nicht zwischen Responsive Design und flexiblem Layout. Das Beispiel Burberry ist z.B. mitnichten ein Responsive Design – es ist nur flexibel. Siehe hierzu auch diverse Artikel und das sehr empfehlenswert Buch „Responsive Web Design“ von Ethan Marcotte. Hier ein Beispiel für eine Seite, die wirklich responsive ist: http://bostonglobe.com. @ Hildegard: das Problem mit den Bildern lässt sich ganz gut per JS abfangen. Wichtig ist, dass für mobile Geräte (= geringe Auflösung) als Default entwickelt wird (Mobile first).

  6. Pingback: User Experience von Responsive Webdesigns | Usabilityblog.de | UXWeb.info

  7. Pingback: Rückblick – Top-Themen im Dezember und im Jahre 2012 | Usabilityblog.de

  8. Pingback: Wireframes für responsive Websites – Praxistipps für Konzepter | Usabilityblog.de

Schreibe einen Kommentar

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