Das Usability Lab in Zeiten von Mobile Devices

2.814 Aufrufe

Veröffentlicht am

Ein unverzichtbares Instrument der Usability-orientierten Entwicklung von Benutzeroberflächen ist das Usability-Lab, oder, platt formuliert, die Beobachtung der Anwender beim Umgang mit einer Anwendung unter kontrollierten Labor-Bedingungen. Typischerweise findet das in speziellen Studios statt, die neben der Kameraaufzeichnung auch die direkte Beobachtung der Probanden durch das Entwicklungsteam und idealerweise auch Vertreter des Auftraggebers "hinter dem Spiegel" zulässt.

Für PC-Anwendungen und Websites ist das inzwischenn eine Standardleistung, die problemlos eingekauft und kurzfristig gebucht werden kann. Eine Vielzahl von Hard- und Softwaretools unterstützt die Beobachtung und Auswertung der Labor-Ergebnisse. Beim Test von Anwendungen auf mobilen Endgeräten treten jedoch ganz neue Herausforderungen auf. Das beginnt mit der geringen Bildschirmgröße und endet nicht mit der mangelnden Verfügbarkeit von Aufzeichnungssoftware auf den Geräten.

Im Rahmen dieses Vortrags berichtete Pixelpark auf dem World Usability Day 2010 in Berlin von den Erfahrungen aus den ersten Projekten auf mobilen Endgeräten (hier primär iPhone) und stellt das daraus abgeleitete Vorgehensmodell und Tools vor.

Veröffentlicht in: Technologie
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.814
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Das Usability Lab in Zeiten von Mobile Devices

  1. 1. Das Usability Lab in Zeiten vonMobile Devices<br />Mit Prototypen im UCD Prozess leichter zum Ziel, ein Erfahrungsbericht von Pixelpark<br />Berlin, 11.11.2010 – Jens-Christian Jensen, Director Beratung & Konzeption<br />1<br />
  2. 2. Warum eigentlich ein Usability Lab?<br />
  3. 3. Wir arbeiten Nutzerzentriert<br />
  4. 4. User-Centered-Design<br />
  5. 5. Ziel jedes Projekts ist es, eine Lösung zu bauen, die der Anwender braucht und versteht.<br />Zudem müssen wir Kunden überzeugen, dass unsere Lösung dazu in der Lage ist.<br />© p i x e l p a r k<br />5<br />
  6. 6. Durch das iterative Vorgehen desUser Centered Design Prozesserhalten wir genau solche Lösungen.<br />
  7. 7. Der User Centered Prozess bei Pixelpark<br />1<br />Ermittlung des NutzungskontextsTiefeninterviews, Umfragen, Fokusgruppen<br />2<br />Definition der AnforderungenPersonas, Mentales Modell<br />3<br />Lösungserstellung (Konzept/Design)Cardsorting,Papier/Klickprototyp<br />Text<br />4<br />EvaluationUsability Quicktest<br />© p i x e l p a r k<br />7<br />
  8. 8. Der User Centered Prozess bei Pixelpark<br />1<br />Ermittlung des NutzungskontextsTiefeninterviews, Umfragen, Fokusgruppen<br />2<br />Definition der AnforderungenPersonas, Mentales Modell<br />3<br />Lösungserstellung (Konzept/Design)Cardsorting,Papier/Klickprototyp<br />Text<br />4<br />EvaluationUsability Quicktest<br />© p i x e l p a r k<br />8<br />
  9. 9. Prototypen ermöglichen das steteTesten der Lösung und eineeffiziente Kundenkommunikation.<br />
  10. 10. Iterative Prototypen während des UCD Prozess<br />Durchlauf 2<br /><ul><li>Der bestehende Prototyp wird abhängig vom Feedback iteriert
  11. 11. Die wichtigsten Seiten werden durch erste Layouts ersetzt
  12. 12. Der Umfang des Prototypen wird durch neue Wireframes erweitert</li></ul>Durchlauf n<br /><ul><li>Wireframes und Layouts werden abhängig vom Feedback iteriert
  13. 13. Weitere Wireframes werden durch Layouts ersetzt
  14. 14. Der Umfang des Prototypen wird durch Wireframes weiter vergrößert</li></ul>Durchlauf 1<br /><ul><li>Der Prototyp besteht aus Wireframes, welche die Seiten darstellen, die zur Erreichung der KPIs notwendig sind</li></ul>© p i x e l p a r k<br />10<br />
  15. 15. Der finale Prototyp beschreibt die Lösung durch Layouts und Wireframes.<br />
  16. 16. Der User Centered Prozess bei Pixelpark<br />1<br />Ermittlung des NutzungskontextsTiefeninterviews, Umfragen, Fokusgruppen<br />2<br />Definition der AnforderungenPersonas, Mentales Modell<br />3<br />Lösungserstellung (Konzept/Design)Cardsorting,Papier/Klickprototyp<br />Text<br />4<br />EvaluationUsability Quicktest<br />© p i x e l p a r k<br />12<br />
  17. 17. Der Tag im Studio – Das Treffen der drei Experten<br />  <br />Der Kunde<br />Die Nutzerin<br />Der Konzepter<br />Spiegel<br />Durchführung Test<br />Paralleler Workshop zur Maßnahmenentwicklung<br />© p i x e l p a r k<br />13<br />
  18. 18. Der Tag im Studio.<br />
  19. 19. Der Tag im Studio ist ein Workshop, der Kunde, Anwender und Agentur zusammenführt<br />
  20. 20. Werkzeuge<br />
  21. 21. Grundsätzlich sind die Anforderungen an einen Usability Test für Mobile Devices identisch mit den Herkömmlichen.<br />
  22. 22. Was brauchen wir für einen Test?<br />© p i x e l p a r k<br />18<br />
  23. 23. Was brauchen wir für einen Test?<br />© p i x e l p a r k<br />19<br />
  24. 24. Wir nutzen Axure für die Erstellung von Prototypen<br />
  25. 25. Wie kann ein Axure Prototyp auf dem iPhone getestet werden?<br />
  26. 26. Setup für das Testen einer mobilen Website<br /><ul><li>Der Nutzer testet die Applikation mit einem iPhone oder vergleichbaren Gerät
  27. 27. Das iPhone verbindet sich per WLAN auf einen Webserver, der hinter der Spiegelscheibe aufgebaut wurde
  28. 28. Auf dem Webserver wurde ein Axure Prototyp gespielt
  29. 29. Der Prototyp wurde zuvor mit einem Batchtool bearbeitet, so dass das Rendering für das iPhone optimiert wurde (z.B. für Viewportund Darstellung von Telefonnummern)</li></ul>© p i x e l p a r k<br />22<br />
  30. 30. Livedemo<br />© p i x e l p a r k<br />23<br />
  31. 31. Rendering einer mobilen Website auf dem iPhone <br />© p i x e l p a r k<br />24<br />
  32. 32. App Prototypen mit dem App „Full Screen“ testen<br />Quelle:<br />http://itunes.apple.com/de/app/full-screen-web-browser/id303154925?mt=8<br />© p i x e l p a r k<br />25<br />
  33. 33. Das Yahoo Stencil Kit – Mobile iPhone<br />© p i x e l p a r k<br />26<br />Quelle: http://developer.yahoo.com/ypatterns/about/stencils/<br />
  34. 34. Was brauchen wir für einen Test?<br />© p i x e l p a r k<br />27<br />
  35. 35. Setup für das Testen einer mobilen Website<br /><ul><li>Wir nutzen eine Kamera, die den Probanden über die Schulter hinweg filmt
  36. 36. Eine Halterung fixiert das iPhone</li></ul>© p i x e l p a r k<br />28<br />
  37. 37. Alternativen<br />Quelle:<br />http://www.90percentofeverything.com/2010/05/07/quick-tip-make-your-own-iphone-usability-testing-sled-for-5/<br />Bild:Nick Bowmast<br />© p i x e l p a r k<br />29<br />
  38. 38. Alternative: DisplayOut<br />Quelle:<br />http://apt.thebigboss.org/onepackage.php?bundleid=com.booleanmagic.displayout&db=<br />© p i x e l p a r k<br />30<br />
  39. 39. Alternative: iDemo und VNC<br />Quelle:<br />http://www.capstrat.com/insights/blog/recording-usability-tests-iphone/<br />Bild:Evan Carroll<br />© p i x e l p a r k<br />31<br />
  40. 40. Vielen Dank.<br />
  41. 41. Impressum<br />Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum der Pixelpark AG und unterliegen den geltenden Urhebergesetzen. Die ganze oder teilweise Vervielfältigung sowie jede Weitergabe an Dritte ist nicht gestattet.<br />Jens-Christian JensenDirector Beratung & KonzeptionPixelpark AGBergmannstraße 72D-10961 Berlin<br />+49 30 50 58 - 18 37jens.jensen@pixelpark.com<br />www.pixelpark.com<br />© p i x e l p a r k<br />33<br />
  42. 42. Bildnachweise<br />Die in der Präsentation enthaltenen Bilder liegen z.T. Teil unter der Creative Commons Lizenz.<br />Folie 2: schoschie, „WTF“, Attribution-ShareAlike 2.0 Generichttp://www.flickr.com/photos/schoschie/2527918562/<br />Folie 16: redjar., „The ultimate Swiss Army Knife for sale in Interlaken “, CC BY-SA 2.0http://www.flickr.com/photos/redjar/113974357/<br />Quelle aller Creative Commons Lizenz Bilder: flickr.com<br />© p i x e l p a r k<br />34<br />

×