Usability - Dos and Donts            Kai Laborenz, Sunbeam GmbH, 8.12.2006
Warum Usability?
 Website wird einfacher und schneller bedienbar Inhalte oder Produkte werden besser gefunden und  gekauft zufriedene Be...
Bloß nicht nachdenken!*            * Copyright Steve Krug
 Websurfen besteht aus einer Vielzahl von  Entscheidungen Jede Entscheidung kostet Zeit und Anstrengung  „Was nützt es m...
Der Nutzer ist ein Raubtier...auf der Fährte nach (Informations)beute
Das Konzept „Information Foraging“ Alle Inhalte müssen in drei Klicks von der  Startseite erreichbar sein...  Ein Mythos!...
Usability ist...webgerecht schreiben
Schreiben für das Web Sich kurz fassen! Kein Marketing-Kauderwelsch oder Fach-Chinesisch Kurze Abschnitte  mit Zwischen...
Auf der Jagdnach Bang & Olufsen
?     ??        Start: www.bang-olufsen.de                            ?
„Benutzer sind faul und dumm“*                 * Copyright Jacob Nielsen
Benutzer sind... ...hochgradig zielorientiert ...egoistisch ...nicht an Ihnen interessiert (sondern daran, was Sie  für...
Wie User Webseiten betrachten Sie lesen nicht - sie „scannen“ Sie treffen die erste halbwegs sinnvolle Wahl Sie „wurste...
Sie scrollen nicht gernHomepage (erster Besuch)           23%Homepage (zweiter Besuch)          16%Homepage (Besuch 4 +)  ...
Fette Beute!
„Fakten, Fakten, Fakten -und immer an die User denken!“*                 *Helmut Markwort (oder so ähnlich)
Eigenlob stinkt! Dem User ist egal, wie viele Preise Sie gewonnen haben! Stellen Sie keine  unnötigen  technischen  Anfo...
 Dem User ist egal, wie Sie ihre Produkte nennen!                      ?         ?                            ?          ...
Leichte Beute?
Optionen nicht vernünftig            abgegrenzt und kaum            unterscheidbar SlangUnscharfeAuswahl
Wenig hilfreich:alphabetische Sortierungfür regionale Daten
Zu viele, doppelte und unklare Optionen
Seien Sie leichte Beute!
Kleine Hilfen erhalten die FreundschaftiStockphoto.com: Suche verfeinern Besondere Tools „Intelligente“  Suche Schnell...
There‘s no page like homepage
Eingang & erster EindruckVersuchung und VerführungAnleitungPlatz zum WiederfindenKonkret: Was braucht die Homepage?Si...
Web 3.0
Web 2.0
Usability und das Web 2.0- Neue Bedienkonzepte (Surfen ohne Seitenwechsel,  Tagclouds) sind ungewohnt (und nicht immer be...
kein AJAX               AJAX       Spiegel Online 7.0                                  neu            kein AJAX      AJAX ...
Tagclouds sparen Platz sehen interessant aus passen gut zu  unscharfer  KategorisierungSpiegel online:Welcher Artikel i...
Testen, Testen, Testen!
Testen schadet nieSchlechter als gar nicht Testen geht nicht!3-5 Personen reichen für den AnfangNicht nur fragen - beob...
Professionell Testen: Eye-Tracking Echte Nutzer erledigen Aufgaben im Usability-Lab Augenbewegungen der User werden durc...
Auswertung mit Morae Heatmaps, Blickverläufe, Scanpath-Videos, Areas of  Interest, Benutzervideo Mausklicks, Zeiträume ...
Eye-Tracking-TestBeispiel: ForschungsVerbund Sonnenenergie Werden die drei Kästen wahrgenommen? Wie wirkt sich ein Bild ...
 5 Personen, 3 Aufgaben, Befragung danach „Du möchtest dich über erneuerbare Energien aus  Sonne und Erde informieren. D...
Usability-Test selbstgemacht Einfache Tests im  laufenden Betrieb Detailoptimierung Schwachstellen finden Varianten te...
Gesamt: 120 Klicks   Gesamt: 190 Klicks!                     *Hochgerechnet
www.Crazyegg.com Online-Service zählt Klicks auf einzelne Seiten Darstellung  als Liste oder  Heatmap Kosten: gratis  ...
Kai Laborenz Geschäftsführer der Sunbeam GmbH  Berliner Agentur für Kommunikation    (Barrierefreie) Webentwicklung    ...
Vielen Dank für die  Aufmerksamkeit!
Usability - Do's and Don'ts
Usability - Do's and Don'ts
Usability - Do's and Don'ts
Usability - Do's and Don'ts
Usability - Do's and Don'ts
Nächste SlideShare
Wird geladen in …5
×

Usability - Do's and Don'ts

3.931 Aufrufe

Veröffentlicht am

Vortrag zum Multimediatreff Dezember 2006 in Koeln von Kai Laborenz (Sunbeam GmbH)

Veröffentlicht in: Design, Technologie
3 Kommentare
7 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
3.931
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
70
Aktionen
Geteilt
0
Downloads
0
Kommentare
3
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Usability - Do's and Don'ts

  1. 1. Usability - Dos and Donts Kai Laborenz, Sunbeam GmbH, 8.12.2006
  2. 2. Warum Usability?
  3. 3.  Website wird einfacher und schneller bedienbar Inhalte oder Produkte werden besser gefunden und gekauft zufriedene Besucher = wiederkehrende Besucher & WerbeträgerKonkret: Vorteile durch Usability Verbesserung interner Abläufe, weniger Support  Zeitersparnis mehr Verkäufe - mehr Informationsabrufe Kompetenzgewinn
  4. 4. Bloß nicht nachdenken!* * Copyright Steve Krug
  5. 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. 6. Der Nutzer ist ein Raubtier...auf der Fährte nach (Informations)beute
  7. 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. 8. Usability ist...webgerecht schreiben
  9. 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)
  10. 10. Auf der Jagdnach Bang & Olufsen
  11. 11. ? ?? Start: www.bang-olufsen.de ?
  12. 12. „Benutzer sind faul und dumm“* * Copyright Jacob Nielsen
  13. 13. 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!“)
  14. 14. 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!
  15. 15. Sie scrollen nicht gernHomepage (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“
  16. 16. Fette Beute!
  17. 17. „Fakten, Fakten, Fakten -und immer an die User denken!“* *Helmut Markwort (oder so ähnlich)
  18. 18. Eigenlob stinkt! Dem User ist egal, wie viele Preise Sie gewonnen haben! Stellen Sie keine unnötigen technischen Anforderungen!
  19. 19.  Dem User ist egal, wie Sie ihre Produkte nennen! ? ? ? ? ? ?
  20. 20. Leichte Beute?
  21. 21. Optionen nicht vernünftig abgegrenzt und kaum unterscheidbar SlangUnscharfeAuswahl
  22. 22. Wenig hilfreich:alphabetische Sortierungfür regionale Daten
  23. 23. Zu viele, doppelte und unklare Optionen
  24. 24. Seien Sie leichte Beute!
  25. 25. Kleine Hilfen erhalten die FreundschaftiStockphoto.com: Suche verfeinern Besondere Tools „Intelligente“ Suche Schnelle Vorschau
  26. 26. There‘s no page like homepage
  27. 27. Eingang & erster EindruckVersuchung und VerführungAnleitungPlatz zum WiederfindenKonkret: Was braucht die Homepage?Sitename und -zweckAngebote und FunktionenSucheNeue InhalteKlare Ordnung - StartpunktShort-Cuts (Abkürzungen für beliebte Inhalte)
  28. 28. Web 3.0
  29. 29. Web 2.0
  30. 30. 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
  31. 31. kein AJAX AJAX Spiegel Online 7.0 neu kein AJAX AJAX neuer
  32. 32. Tagclouds sparen Platz sehen interessant aus passen gut zu unscharfer KategorisierungSpiegel online:Welcher Artikel istder viertbeliebteste?
  33. 33. Testen, Testen, Testen!
  34. 34. 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
  35. 35. Professionell Testen: Eye-Tracking Echte Nutzer erledigen Aufgaben im Usability-Lab Augenbewegungen der User werden durch Kameras erfasst und ausgewertet
  36. 36. Auswertung mit Morae Heatmaps, Blickverläufe, Scanpath-Videos, Areas of Interest, Benutzervideo Mausklicks, Zeiträume Bezug über www.scoreberlin.de/morae/
  37. 37. Eye-Tracking-TestBeispiel: ForschungsVerbund Sonnenenergie Werden die drei Kästen wahrgenommen? Wie wirkt sich ein Bild aus?
  38. 38.  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
  39. 39. Usability-Test selbstgemacht Einfache Tests im laufenden Betrieb Detailoptimierung Schwachstellen finden Varianten testenBeispiel: www.enob.info Optimierung der Startseitenboxen
  40. 40. Gesamt: 120 Klicks Gesamt: 190 Klicks! *Hochgerechnet
  41. 41. www.Crazyegg.com Online-Service zählt Klicks auf einzelne Seiten Darstellung als Liste oder Heatmap Kosten: gratis bis 99$/Monat crazyegg.com
  42. 42. 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
  43. 43. Vielen Dank für die Aufmerksamkeit!

×