Don`t make me think ! A Common Sense Approach to Web Usability
description
Transcript of Don`t make me think ! A Common Sense Approach to Web Usability
![Page 1: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/1.jpg)
Don`t make me think!A Common Sense Approach
to Web Usability
Universität zu KölnWS 12/13
User Interfaces und ihre Evaluierung24.01.2013
Qi Li
![Page 2: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/2.jpg)
Die Kernaussage des Buchs
![Page 3: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/3.jpg)
Frage:
"What's the most important thing I should do if I want to make sure my Web site is easy to use?"
![Page 4: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/4.jpg)
Antwort:
It is not "Nothing important should ever be more than two clicks away," or "Speak the user's language," or even "Be consistent." It's...
"Don't make me think!"
![Page 5: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/5.jpg)
Was sind die häufigen Fragen, wenn User eine Webseite besucht.
• Where am I?• Where should I begin?• Where did they put____?• What are the most important things on this
page?• Why did they call it that?
![Page 6: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/6.jpg)
Beispiel 1: Computer Online shop
![Page 7: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/7.jpg)
Beispiel 2: Computer Online shop
![Page 8: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/8.jpg)
Wie wir das Web wirklich nutzen
![Page 9: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/9.jpg)
Drei Fakten von Webseite design
1. We don’t read pages. We scan them.2. We don’t make optimal choices. We satisfice.3. We don’t figure out how things work. We
muddle through.
![Page 10: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/10.jpg)
Designing Pages for scanning, not reading
• Eine klare visuelle Hierarchie herstellen• Die Seite in klaren und definierten Bereich
unterteilen• Die Linken offensichtlich klickbar machen• Die Störung und Noise von Seite reduzieren
![Page 11: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/11.jpg)
Lassen Sie nutzlose Wörter weg
Happy Talk must die!!! Instructions must die!!!
![Page 12: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/12.jpg)
Navigation designen
![Page 13: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/13.jpg)
Prozess von User in Webseite
1. Etwas finden2. Suchen oder Browsen.3. Wenn browsen4. Wenn nicht gefunden, weggehen.
![Page 14: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/14.jpg)
![Page 15: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/15.jpg)
Warum ist Navigation wichtig?
• Durch die Navigation haben wir etwas auf der Seite zu halten.
• Und wir wissen wo wir sind.• Die ist der Führer für uns.
![Page 16: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/16.jpg)
Was ist für eine gute Navigation benötig?
• Logo• Sections• Utilities• Local navigation• Search• Back to Homepage• Usw…
![Page 17: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/17.jpg)
Beispiel 1: Amazon.com
![Page 18: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/18.jpg)
Wie kann man eine gute Navigation testen?
• Welche Webseite ist es? (Site ID oder Logo)• Auf welcher Seite bin ich? (Name der Seite)• Was sind die haupt Section von dieser Seite?
(Section)• Was sind meine Optionen auf diesem Level?
(Local Navigation)• Wie kann ich „suchen“?
![Page 19: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/19.jpg)
Beispiel 2: Amazon.com
![Page 20: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/20.jpg)
Usability-Tests
![Page 21: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/21.jpg)
Several True things about testing
• Wenn Sie eine wunderbare Webseite machen möchte, müssen Sie Usability testen.
• Ein User zu testen ist 100% besser als niemand zu testen.• Früh ein User die Projekte zu testen ist besser als am
Ende 50 Personen zu testen.• Die Wichtigkeit der Rekrutierung von repräsentativen
Nutzern wird überschätzt.• Der Punkt des Testens ist nicht um etwas zu beweisen
oder zu widerlegen.• Testen ist ein iterativer Prozess.
![Page 22: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/22.jpg)
Wie viel User sollten Sie testen?
Gruppe 1 • User: 8 Personen• Testen: 1 Mal• Insgesamt Probleme: 5
Gruppe 2• User: 3 Personen• Testen: 2 Mal• Insgesamt Probleme: 9
![Page 23: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/23.jpg)
Wo kann ich testen? Was braucht man für ein Testen?
• Ein Zimmer• Ein Schreibtisch• Zwei Stuhl• Ein PC oder Mac• Ein Videokamera
![Page 24: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/24.jpg)
Testen und Beachten
Testbegleiter• Ruhig• Geduldig
Begleitete Testperson• Every One
![Page 25: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/25.jpg)
Vorteil von Krugs Prinzipien
• Wenige Zeit• Wenig Aufwand• Einfach zu testen• Usw.…
![Page 26: Don`t make me think ! A Common Sense Approach to Web Usability](https://reader035.fdocuments.us/reader035/viewer/2022081603/56815a4b550346895dc77c8e/html5/thumbnails/26.jpg)