online-helden: wie räume ich meine website auf?
DESCRIPTION
Welche Wege nimmt der Nutzer? Hier eine kleine Anleitung zu User Tests für NGOs.TRANSCRIPT
![Page 1: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/1.jpg)
Wie räume ich meine Website auf?Online-Helden Campus 2014
![Page 2: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/2.jpg)
Wer bist Du?
Hast Du Eure Website mitentwickelt?
Was erwartest Du von diesem Workshop?
Hallo!
![Page 3: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/3.jpg)
Was Usability ist.
Was eine nutzerfreundliche Website ausmacht.
Wie Du heraus findest, ob Eure Website nutzerfreundlich ist.
Was Du in den nächsten 45 Minuten lernst:
![Page 4: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/4.jpg)
Erreicht der Nutzer sein Ziel?
Usability
Mit wie viel Aufwand ist dieses zu erreichen?
Wie zufrieden ist der Nutzer mit dem Nutzungserlebnis?
= Gebrauchstauglichkeit
![Page 5: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/5.jpg)
“Don´t make me think!”
Was eine nutzerfreundliche Website ausmacht:
Nutzer
![Page 6: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/6.jpg)
6
Do´s
» jeder hat Erfahrungen & Erwartungen wo Dinge auf einer Website lokalisiert sind, wie sie funktionieren & wie sie aussehen
Konventionen ausnutzen
![Page 7: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/7.jpg)
7
Do´s
» je wichtiger etwas ist, desto prominenter
» Dinge, die logisch/inhaltlich zusammen gehören, gehören auch visuell zusammen
» Gruppierungen zeigen, was gehört zu was
Effektive visuelle Hierarchien bauen
![Page 8: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/8.jpg)
8
Do´s
» dem Nutzer zeigen: was es wo für ihn gibt >> so kann er schnell entscheiden, was für ihn wichtig ist
» Beispiel:
Seiten in klar definierte Bereiche unterteilen
![Page 9: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/9.jpg)
9
Do´s
» z. B. die gleiche Farbe für Links verwenden, die klickbar sind – und diese Farbe nicht auch für Überschriften benutzen
» außerdem Position & Form beachten: Navigationen, Button, Tabs
» Beispiel:
Offensichtlich machen, was klickbar ist
![Page 10: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/10.jpg)
10
Do´s
» visuelles “Schreien” vermeiden: weniger Fettdruck, Ausrufungszeichen & große Schrift
» Inhalte organisieren: stell dir ein unaufgeräumtes Kinderzimmer vor: das rote Auto findest Du nicht
» Kram wegwerfen: Ist diese Info für den Nutzer wichtig? (Oder nur mich oder den Vorstand?)
» Beispiel:
Ablenkungen eliminieren
![Page 11: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/11.jpg)
11
Do´s
» Überschriften benutzen
» einzelne Abschnitte/Paragrafen kurz halten
» Listen mit Aufzählungszeichen verwenden
» wichtige Dinge hervorheben
» Beispiel:
Inhalte leicht erfassbar machen
![Page 12: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/12.jpg)
Usability-Tests selbstgemacht!
Ziel: Usability-Fehler auf der eigenen Website aufdecken
1 Tag Zeit, 1 Raum, 1 PC, 1 Testszenario
3-5 Teilnehmer
![Page 13: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/13.jpg)
13
Literatur-Tipps
Platz 1: Autor: Krug, Steve; Titel: Don‘t Make Me Think!
Details z.B. hier: http://www.amazon.de/Dont-Make-Me-Think-Usability/dp/0321965515/ref=dp_ob_title_bk
--> liest sich sehr gut, da leicht verständlich und unterhaltsam geschrieben; enthält die wichtigsten Regeln für "usable websites" wie wir sie auch vorgestellt hatten
Platz 2: Autoren: Nielsen, Jakob & Loranger, Hoa; Titel: Web Usability
Details z.B. hier: http://www.amazon.de/Web-Usability-Deutsche-Ausgabe-Grafik/dp/3827324483
--> das umfangreichste Standardwerk zu Web Usability; als Nachschlagewerk zu verstehen zum punktuellen Lesen; liest sich ebenfalls sehr gut
Platz 3: Autor: unser Kollege Tobias Jordans; Weblog: http://uxzentrisch.de/discount-usability-testing/
--> Tobias hatte Usability Tests mit Nutzern lange Zeit vernachlässigt, dann aber erkannt (nach 1x ausprobieren) wie viel Mehrwert so ein Test bietet. Sein Artikel enthält auch einen weiteren guten Literaturtipp: Steve Krug (s. oben) hat ein Buch zu "User Tests einfach selbstgemacht" geschrieben: Rocket Surgery Made Easy!
Platz 4: Autor: Jakob Nielsen u.a.; Newsletter: http://www.nngroup.com/articles/subscribe/
--> kostenloser Newsletter-Service mit jew. einem aktuellen Artikel zu Web Usability von der Nielsen Norman Group, der bekanntesten Usability-Agentur, gegründet von Jakob Nielsen; Jakob Nielsen ist der bekannteste und einer der erfahrensten Usability-Experten auf dieser Erde
--> Bsp. für einen guten Artikel (Thema: Lautes Denken während User Tests, wie im Workshop gezeigt: http://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/
Wenn Du mehr wissen willst.
![Page 14: Online-Helden: Wie räume ich meine Website auf?](https://reader037.vdocuments.pub/reader037/viewer/2022103111/54c320914a7959fa6b8b466e/html5/thumbnails/14.jpg)
Danke! !
Markus & Sarah © 2014 | gut.org gAG