Das Dokument behandelt die Bedeutung von Usability für Websites und deren Einfluss auf Nutzerzufriedenheit, Verkaufszahlen und interne Abläufe. Es beschreibt Grundprinzipien wie klare, scanbare Inhalte, einfache Navigation und die Reduzierung technischer Anforderungen für Nutzer. Zusätzlich werden Methoden zur Überprüfung der Usability, wie Eye-Tracking und Benutzerbeobachtungen, sowie die Herausforderungen und Entwicklungen im Web 2.0 und 3.0 angesprochen.

1. Usability - Do's and Dont's
Kai Laborenz, Sunbeam GmbH, 8.12.2006

2. Warum Usability?

3.  Website wird einfacher und schneller bedienbar
 Inhalte oder Produkte werden besser gefunden und
gekauft
 zufriedene Besucher = wiederkehrende Besucher &
Werbeträger
Konkret: Vorteile durch Usability
 Verbesserung interner Abläufe, weniger
Support  Zeitersparnis
 mehr Verkäufe - mehr Informationsabrufe
 Kompetenzgewinn

4. Bloß nicht nachdenken!*
* Copyright Steve Krug

5.  Websurfen besteht aus einer Vielzahl von
Entscheidungen
 Jede Entscheidung kostet Zeit und Anstrengung
„Was nützt es mir?“  „Was kostet es mich?“
 Zu hohe Kosten führen zu Frustration und zum
Verlassen der Site (das kostet sehr wenig!
Einfache Entscheidungen +
Hoher (wahrgenommener) Nutzen für den Besucher

6. Der Nutzer ist ein Raubtier...
auf der Fährte nach (Informations)beute

7. Das Konzept „Information Foraging“
 Alle Inhalte müssen in drei Klicks von der
Startseite erreichbar sein...
Ein Mythos!
 Die Besucher folgen der Informationsfährte
wie ein Raubtier der Beute
 Die Fährte muss immer wärmer werden!
 Die Beute muss lecker und nahrhaft wirken!
 Die Jagd muss möglichst leicht erscheinen!

8. Usability ist...
webgerecht schreiben

9. Schreiben für das Web
 Sich kurz fassen!
 Kein Marketing-Kauderwelsch oder Fach-Chinesisch
 Kurze Abschnitte
mit Zwischenüberschriften
 Das Wichtigste zuerst
 Hervorheben
 Layout auflockern mit Listen, Kästen, Bildern, Links
(aber nicht zu vielen)

11. Auf der Jagd
nach Bang & Olufsen

12. ? ?
?
Start: www.bang-olufsen.de
?

14. „Benutzer sind faul und dumm“*
* Copyright Jacob Nielsen

15. Benutzer sind...
 ...hochgradig zielorientiert
 ...egoistisch
 ...nicht an Ihnen interessiert (sondern daran, was Sie
für sie tun können)
 ...in Eile
 ...leicht zu frustrieren
 ...auf Aktivität aus („Die wollen nur klicken!“)

16. Wie User Webseiten betrachten
 Sie lesen nicht - sie „scannen“
 Sie treffen die erste halbwegs sinnvolle Wahl
 Sie „wursteln sich durch“
Konkret: „Scanbare“ Seiten gestalten
 Klare Bereiche (Was ist was?)
 Eindeutige visuelle Hierarchie (Was ist wichtig?)
 Was ist klickbar?
 Kurz und prägnant formulieren
 Was nicht nützt - stört!

17. Sie scrollen nicht gern
Homepage (erster Besuch) 23%
Homepage (zweiter Besuch) 16%
Homepage (Besuch 4 +) 14%
Andere Seiten 42%
(Nielsen; bei 1024x768 Pixeln)
Konkret:
 Das Wichtigste oberhalb der Scrollgrenze
 Bei längeren Seiten: keinen „falschen Abschluss“

19. Fette Beute!

20. „Fakten, Fakten, Fakten -
und immer an die User denken!“*
*Helmut Markwort (oder so ähnlich)

21. Eigenlob stinkt!
 Dem User ist egal, wie viele Preise Sie gewonnen haben!
 Stellen Sie keine
unnötigen
technischen
Anforderungen!

22.  Dem User ist egal, wie Sie ihre Produkte nennen!
? ?
? ? ? ?

23. Leichte Beute?

24. Optionen nicht vernünftig
abgegrenzt und kaum
unterscheidbar
Slang
Unscharfe
Auswahl

25. Wenig hilfreich:
alphabetische Sortierung
für regionale Daten

26. Zu viele, doppelte und unklare Optionen

27. Seien Sie leichte Beute!

28. Kleine Hilfen erhalten die Freundschaft
iStockphoto.com:
 Suche verfeinern
 Besondere Tools
 „Intelligente“
Suche
 Schnelle Vorschau

29. There‘s no page like homepage

30. Eingang & erster Eindruck
Versuchung und Verführung
Anleitung
Platz zum Wiederfinden
Konkret: Was braucht die Homepage?
Sitename und -zweck
Angebote und Funktionen
Suche
Neue Inhalte
Klare Ordnung - Startpunkt
Short-Cuts (Abkürzungen für beliebte Inhalte)

31. Web 3.0

32. Web 2.0

33. Usability und das Web 2.0
-
 Neue Bedienkonzepte (Surfen ohne Seitenwechsel,
Tagclouds) sind ungewohnt (und nicht immer besser)
 Funktion des „Back“-Buttons und Lesezeichen setzen!
 user-generated content - Qualitätskontrolle wird
schwieriger
+
 Schnellere Reaktion auf Benutzereingabe (AJAX)
 permanent beta - Orientierung an Benutzerwünschen
 Einfachheit als Ziel

34. kein AJAX AJAX Spiegel Online 7.0
neu
kein AJAX AJAX
neuer

35. Tagclouds
 sparen Platz
 sehen interessant aus
 passen gut zu
unscharfer
Kategorisierung
Spiegel online:
Welcher Artikel ist
der viertbeliebteste?

36. Testen, Testen, Testen!

37. Testen schadet nie
Schlechter als gar nicht Testen geht nicht!
3-5 Personen reichen für den Anfang
Nicht nur fragen - beobachten!
Mehrfach testen
Was testen?
5 W‘s
Typische Aufgaben

38. Professionell Testen: Eye-Tracking
 Echte Nutzer erledigen Aufgaben im Usability-Lab
 Augenbewegungen der User werden durch Kameras
erfasst und ausgewertet

39. Auswertung mit Morae
 Heatmaps, Blickverläufe, Scanpath-Videos, Areas of
Interest, Benutzervideo
 Mausklicks, Zeiträume
 Bezug über www.scoreberlin.de/morae/

40. Eye-Tracking-Test
Beispiel: ForschungsVerbund Sonnenenergie
 Werden die drei Kästen wahrgenommen?
 Wie wirkt sich ein Bild aus?

41.  5 Personen, 3 Aufgaben, Befragung danach
 „Du möchtest dich über erneuerbare Energien aus
Sonne und Erde informieren. Dazu suchst du über
eine Suchmaschine nach diesen Suchbegriffen und
stößt auf verschiedene Seiten. Bitte sieh dir die Seite
solange an, wie sie dir gezeigt wird.“
 5 Sekunden Tracking

43. Usability-Test selbstgemacht
 Einfache Tests im
laufenden Betrieb
 Detailoptimierung
 Schwachstellen finden
 Varianten testen
Beispiel: www.enob.info
 Optimierung der
Startseitenboxen

44. Gesamt: 120 Klicks Gesamt: 190 Klicks!
*Hochgerechnet

45. www.Crazyegg.com
 Online-Service
 zählt Klicks auf einzelne Seiten
 Darstellung
als Liste oder
Heatmap
 Kosten: gratis
bis 99$/Monat
 crazyegg.com

47. Kai Laborenz
 Geschäftsführer der Sunbeam GmbH
Berliner Agentur für Kommunikation
 (Barrierefreie) Webentwicklung
 Usabilityberatung und Tests
 Design, modernes HTML & CSS, Softwareentwicklung
 Spezialität: TYPO3 (Content-Managementsystem)
 Ausserdem klassische PR, Ausstellungen und Printdesign
 laborenz@sunbeam-berlin.de
 www.laborenz.de/lab-o-log

48. Vielen Dank für die
Aufmerksamkeit!