after work talk über usability-optimierung von webseiten
TRANSCRIPT
![Page 1: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/1.jpg)
Nur einem muss es gefallen: Dem Nutzer
22.03.2012 CLS After Work Talk, Basel
!Usability Optimierung von Websites!
Markus Hug, M.Sc. | [email protected] mmi-basel.ch
@markushug
![Page 2: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/2.jpg)
Inhalt
- Was ist Usability? - Wie optimiert man die Usability einer Website?
- Beispiel: Usability Testing
- Links
- about / contact
![Page 3: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/3.jpg)
Was ist Usability?
3
![Page 4: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/4.jpg)
Gebrauchstauglichkeit - effektiv - effizient - zufriedenstellend
Benutzerfreundlichkeit?
Usability nach Wikipedia bzw. ISO
4 picture: http://blog.procontext.com/2006/08/die-neue-din-en-iso-9241-110.html
![Page 5: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/5.jpg)
Usability vs. User Experience
5 picture: http://blog.procontext.com/2010/03/usability-und-user-experience-unterscheiden.html
![Page 6: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/6.jpg)
Wie optimiert man die Usability einer Website?
6
![Page 7: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/7.jpg)
Best Practice?
7
![Page 8: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/8.jpg)
- Aufgabenangemessenheit - Selbstbeschreibungsfähigkeit - Lernförderlichkeit - Steuerbarkeit - Erwartungskonformität - Individualisierbarkeit - Fehlertoleranz
ISO hat auch dafür eine Antwort
8
![Page 9: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/9.jpg)
Designen für den „Durchschnitt“ ist falsch
9 picture: http://myvisualvocabulary.blogspot.com/2009/03/c-cartoons.html
![Page 10: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/10.jpg)
Individuelle Unterschiede
10 picture: http://www.interaction-design.org/encyclopedia/mental_models_glossary.html
![Page 11: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/11.jpg)
Usability Testing
11
![Page 12: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/12.jpg)
Die andere Seite
12 picture: http://www.cadfanatic.com/2009/08/solidworks-usability-testing/
![Page 13: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/13.jpg)
Usability Labor
13 pictures: Quelle: Rubin (1994): Usability-Labor bei IBM | http://www.mmi-basel.ch/de/dienstleistungen/dienstleistungen
![Page 14: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/14.jpg)
Beispiel-Ablauf eines Usability Testings
14
![Page 15: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/15.jpg)
Usability Testing ist nur eine Variante von vielen
15 picture: http://www.usabilitynet.org/tools/methods.htm
![Page 16: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/16.jpg)
- Usability-Tests liefern meist einen «dicken» Bericht mit langen Fehlerlisten
- So erhält man einen guten Überblick der existierenden Interaktionsprobleme
- Wie «schlimm» die einzelnen Fehler sind, und welche unbedingt behoben werden sollten, kann durch die Tests oft nicht ermittelt werden. Hier entsteht erneut ein Interpretationsspielraum
- Der Usability-Test liefert nur das «was ist falsch?», nicht das «wie soll man es beheben?»
Output eines Usability Testings
16
![Page 17: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/17.jpg)
Usability Test: Beispiel
17
![Page 18: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/18.jpg)
Eyetracking: Registrieren der Blickbewegung in Scan-Paths (Gaze-Plot)
18
![Page 19: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/19.jpg)
Eyetracking: Registrieren der Blickbewegung in Hotspots
19
![Page 20: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/20.jpg)
Vorteile - Gute Kontrolle der Störvariablen - Ermöglicht das Erfassen von tiefergehenden Faktoren:
- Keyboard Monitoring - Videotaping zur späteren Analyse - Eye-Tracking
Nachteile - Labore schüchtern Benutzer öfters ein - Labore sind selten mobil, so dass man nicht in die Umgebung des
Endbenutzers hinein kann - Manchmal sind tiefergehende Faktoren weniger lehrreich - Labore sind teuer
Vor- und Nachteile eines Usability Testings
20
![Page 21: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/21.jpg)
Besten Dank für die Aufmerksamkeit
21 picture: http://www.stevebromley.com/blog/2009/12/03/game-usability-advancing-the-player-experience-book-review/
![Page 22: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/22.jpg)
- Making a better world through better design�http://www.interaction-design.org/
- iPad Usability Report der Nielsen Norman Group�http://www.nngroup.com/reports/mobile/ipad/
- Jakob Nielsen: „Why You Only Need to Test with 5 Users“�http://www.useit.com/alertbox/20000319.html
Links
22
![Page 23: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/23.jpg)
Markus Hug promoviert an der Fakultät für Psychologie der Universität Basel im Forschungsschwerpunkt Mensch-Maschine-Interaktion. Er beschäftigt sich mit der Optimierung von Websites, im Speziellen mit der Informations-Architektur. Seit 2011 arbeitet er zudem bei der Neuen Zürcher Zeitung im NZZ Lab, wo er die Themen User Experience und Usability besetzt. mmi-basel.ch/hug mmi-basel.ch/de/forschung/projekte
about
23
![Page 24: After Work Talk über Usability-Optimierung von Webseiten](https://reader033.vdocuments.us/reader033/viewer/2022060111/5562277fd8b42af6668b4e4c/html5/thumbnails/24.jpg)
Markus Hug, M.Sc.
Fakultät für Psychologie Abteilung für Allgemeine Psychologie und Methodologie
Missionsstrasse 62a
4055 Basel
[email protected] mmi-basel.ch
@markushug