usability-testing von responsive webdesign 18 usability-testing von responsive webdesign martin...

Download Usability-Testing von Responsive Webdesign 18 Usability-Testing von Responsive Webdesign Martin Beschnitt

Post on 12-Jun-2020

7 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Usability-Testing von Responsive Webdesign

    1. eResult Agenturtag – 14.02.2013

    © eResult GmbH – Ihr User Experience-Partner

    (www.eresult.de)‏

  • Seite

    ...immer mehr unterschiedliche Endgeräte / Displaygrößen

    2 Usability-Testing von Responsive Webdesign

  • Seite

    The Boston Globe

    New Adventures In Web Design Conference ‘12

    http://www.bostonglobe.com/ http://2012.newadventuresconf.com/

  • Seite

    Feldtest vs. Laborsituation: welche Erhebungsmöglichkeit ist

    die Beste?

    4 Usability-Testing von Responsive Webdesign

  • Seite

    Feldtest vs. Laborsituation

    5 Usability-Testing von Responsive Webdesign

  • Seite

    Feldtest vs. Laborsituation

    6 Usability-Testing von Responsive Webdesign

  • Seite

    Feldtest vs. Laborsituation

    7 Usability-Testing von Responsive Webdesign

  • Seite

    Unser Favorit mit maximalem Erkenntnisgewinn: die Dokumentenkamera

    ● Freiraum bei der Nutzung + Beobachtung und Videodokumentation

    jederzeit möglich

    ● Negierung der Laborsituation: nicht nur Schreibtisch, sondern auch

    Couch (Tablet) oder Stehtisch (Smartphone)

    Feldtest vs. Laborsituation

    8 Usability-Testing von Responsive Webdesign

  • Seite

    Auf welchen Devices sollten Sie am besten testen?

    9 Usability-Testing von Responsive Webdesign

  • Seite

    ● Bei nativen Apps: auf jedem Endgerät

    ● Bei Responsive Webdesign ist zu beachten:

    – Über welche Endgeräte werden die meisten Zugriffe erfolgen?

    – In welchen Situationen werden welche Endgeräte genutzt?

     Grundsätzliche Empfehlung: Desktop, Smartphone und Tablet

     Falls relevant: Smart-TV ist ein Muss aufgrund der Interaktions-/

    Eingabemöglichkeiten

    Welches Device?

    10 Usability-Testing von Responsive Webdesign

  • Seite

    Welche Anzahl an Probanden (pro Endgerät) ist optimal?

    11 Usability-Testing von Responsive Webdesign

  • Seite

     Desktop und Smartphone: dieselbe Anzahl

     Tablet: weniger Probanden

    ● Warum?

    – Smartphone identifiziert Usability-Probleme durch Touchscreen-Interaktion

    – Landscape bei Tablets ähnelt der Desktop-Ansicht

    ● Daumenregel: 5-8 pro Cluster (Heterogenität)

    ● Sonderfall:

    Falls Desktop-Version bereits gut bedienbar ist

     Fokussierung auf mobile Endgeräte mit kleineren

    Bildschirmauflösungen und Touch-Bedienung

    Stichprobengröße?

    12 Usability-Testing von Responsive Webdesign

  • Seite

    Autarke vs. kombinierte Tests: kann man alle Auflösungen

    hintereinander testen?

    13 Usability-Testing von Responsive Webdesign

  • Seite

    Zu beachten:

    ● Wie häufig findet eine geräteübergreifende Nutzung statt?

    ● Sind die Nutzungsanlässe und –szenarien dieselben?

    ● Übergreifendes Ziel: Schaffung eines einheitlichen Nutzungserlebnis

    über alle Endgeräte / Auflösungen hinweg

    Unsere Empfehlung:

    ● max. 60-75min.

    ● Fokus auf ein Endgerät mit spezifischen Use Cases

    ● Letztes Testdrittel: ein zentraler Use Case auf einem

    weiteren Endgerät ermöglicht bewertenden Vergleich!

    Autarke vs. kombinierte Tests

    14 Usability-Testing von Responsive Webdesign

  • Seite

    Welche Themen / Bereiche sollten unbedingt evaluiert werden?

    15 Usability-Testing von Responsive Webdesign

  • Seite

    Bedingt durch Branche & Geschäftsmodell, aber...

    1. Erfolg ist abhängig vom Navigationsdesign!

    Hauptnavigation, Suchfunktion & Content-Navigation (und deren

    Veränderung von Desktop über Tablet bis zum Smartphone)

     Luke Wroblewski on Designing for Mobile First (20min. Video,

    kostenlos)

    2. Umgang mit langen Content-Seiten auf kleinen Displays

    (Lesbarkeit & Scrolling)

    3. ‚Touchability’: DER MAUSZEIGER IST KEIN FINGER!

    Themen / Bereiche

    16 Usability-Testing von Responsive Webdesign

    http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO http://vplayer.oreilly.com/?chapter=http://atom.oreilly.com/atom/oreilly/videos/840706&video_product=urn:x-domain:oreilly.com:product:0636920020783.VIDEO

  • Seite

    Sie haben das Wort! Fragen, Anregungen, Kommentare, ...

    17 Usability-Testing von Responsive Webdesign

  • Seite

    Kontaktdaten

    18 Usability-Testing von Responsive Webdesign

    Martin Beschnitt

    Managing Director & Senior UX-Consultant

     040 36166-7981

     martin.beschnitt@eresult.de

    Standort Hamburg

    Ludwig-Erhard-Straße 18

    20459 Hamburg

     040 36166-7980

    Themenblog: www.usabilityblog.de

    Büro Göttingen

    Planckstr. 23

    37073 Göttingen

     0551 49569-331

     0551 49569-330

    Website: www.eresult.de

    Standort Frankfurt

    Uhlandstraße 58

    60314 Frankfurt a. Main

     069 133965-41

  • Seite

    BACKUP

    19 Usability-Testing von Responsive Webdesign

  • Seite

    Von Responsive Webdesign zu Mobile first

    ● Optimierung auf den Zugriff über Smartphones aber vor allem über

    Tablets

    ● Mobiler Kanal wird zum alles entscheidenden Kommunikations- und

    Vertriebsfaktor

    ● Werbemittel werden immer mehr ‚responsive‘

    ● Wiederaufleben des E-Mail-Marketings:

    Fokus auf Conversions durch mobile Mailapplikationen  Ausrichtung

    aller mit E-Mail-Kampagnen verknüpften Call to actions, Landingpages

    und Funnels auf die ‚on-the-go-experience‘

    Trend 2013

    20 Usability-Testing von Responsive Webdesign

  • Seite

    Ist die plattformübergreifende Darstellung überhaupt des Rätsels Lösung?

    ● Nur 2% der Online-Einkäufe

    über mobile Endgeräte (USA,

    2011)

    ● „Der gute, alte Desktop wird

    niemals komplett ersetzt“

    (Jakob Nielsen, 2012)

    ● Der Nutzungskontext

    (Desktop, Tablet,

    Smartphone , ...) ist stets

    ein anderer...

    Ein kritischer Gedanke...

    21 Usability-Testing von Responsive Webdesign

  • Seite

    Weiterführende Links

    ● Responsive Web Design komfortabel testen: Sammlung von Test-

    Werkzeuge, die bei der Optimierung von Websites auf unterschiedliche

    Auflösungen helfen.

    ● Responsive Web Design, mostcompleteguide: Sehr umfangreicher

    Artikel

    ● Responsive Web Design: Missing the Point: kontroverser Artikel

    rund um den Hypes des Responsive Design.

    ● Responsive Web Design: 50 Beispiele and Best Practices

    Literatur

    22 Usability-Testing von Responsive Webdesign

    http://t3n.de/news/responsive-web-design-komfortabel-380139/ http://www.webdesignshock.com/responsive-web-design http://www.webdesignshock.com/responsive-web-design http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ http://designmodo.com/responsive-design-examples/ http://designmodo.com/responsive-design-examples/