Web-Usability

1. usability
bloß nicht nachdenken müssen

2. usability // martin hahn // 2010
Definition Usability
Ist ein Produkt einfach zu benutzen,
hat es eine hohe Usability.
Benutzerfreundlichkeit
besser: Gebrauchstauglichkeit

3. usability // martin hahn // 2010
Übersichtlich? Eindeutig? Klar?

4. usability // martin hahn // 2010
Wieviele Links?

5. usability // martin hahn // 2010
Was bekomme ich geboten? Wo bin ich gelandet?
Was haben die zu bieten? Warum soll ich bleiben?

6. usability // martin hahn // 2010
DIN EN ISO 9241-11
Anforderungen an die Gebrauchstauglichkeit
Richtlinien der Interaktion zwischen Mensch und Computer
“Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Nutzer
in einem bestimmten Nutzungskontext genutzt werden kann, um
bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.”

7. usability // martin hahn // 2010
Effektivität, Effizienz und Zufriedenheit
Effektivität
Dem User gelingt die Zielerreichung wie geplant.
Effizienz
Zielerreichung möglichst schnell und
mit möglichst wenig Aufwand.
Zufriedenheit
Erledigung der Aufgabe bereitet Freude.

8. usability // martin hahn // 2010
Effektiv effizient?
Jobs
Beschäftigungsmöglichkeiten
Job-o-Rama

9. Am Anfang war ...
ein plan

10. usability // martin hahn // 2010

11. usability // martin hahn // 2010
Kenne deine Zielgruppe!

12. usability // martin hahn // 2010
Benutzerbedürfnisse
Bedürfnisse, Interesse und Verhalten der User in den
Mittelpunkt des Entwicklungsprozesses
„Konzentriere dich auf den Benutzer,
der Rest kommt von allein.” (Google)

13. usability // martin hahn // 2010
Definition der Anforderungen
Wer sind die Anwender?
Erfahrungsgrade der Anwender
Funktionalität – Was soll das System können?
In welcher Umgebung wird das System benutzt?
Technologien – Welche technischen Anforderungen
werden verlangt? Gibt es technischen Grenzen?

14. usability // martin hahn // 2010
Surfweisheiten*
Wir lesen keine Seiten, wir überfliegen sie.
Wir treffen keine optimale Wahl.
Wir befassen uns nicht damit, wie etwas funktioniert,
sondern wursteln uns durch.
Wir sind ungeduldig und nicht tolerant.
Wir schätzen Qualität und Glaubwürdigkeit.
Wir sind eigenützig.
*
nach Steve Krug

15. usability // martin hahn // 2010
Inhalte
Relevante Inhalte sind das erste und nicht selten
das Einzige, worauf User achten!
Inhalte müssen nicht nur gut sein. Sie müssen auch
adäquat präsentiert und gezielt positioniert werden.

16. informations
architektur
wo geht´s hier wieder raus?

17. usability // martin hahn // 2010
informationsarchitektur
Führt den User durch die Site und ans Ziel.
Sollte nachvollziehbar und transparent sein.
Prägt den Eindruck.
Schafft Vertrauen.

18. usability // martin hahn // 2010
Ein paar
Regeln Grundsätze
7 ± 2 Prinzip
2-Sekunden-Regel
3-Klick-Regel
Banner-Blindheit

19. usability // martin hahn // 2010
Konventionen der Webnavigation
Navigationselemente werden auf allen Unterseiten
in gleicher Weise verwendet.
Hauptnavigation / Metanavigation
Navigation am oberen oder linken Seitenrand.
Links müssen immer als solche erkennbar sein.
Zurück-Button muss funktionieren.
Besuchte Links kennzeichnen.
Footer als Zusatznavigation.

20. usability // martin hahn // 2010
Navigation
Wo bin ich?
Wohin kann ich gehen?
Wie kann ich dorthin kommen?
Wie kann ich dahin zurück gehen,
wo ich herkomme?

21. usability // martin hahn // 2010
Metanavigation
Sitemap
Startseite
Kontakt
Impressum
Hilfe-, Suchfunktion
Orientierungslinks

22. usability // martin hahn // 2010
Alternative Navigationsmittel
Tag-Cloud
Sitemap
Stepping / Paging
Seiteninterne Links

23. usability // martin hahn // 2010
Breadcrumbs
Zeigen die aktuelle Position relativ zur Gesamtstruktur.
Nur ein Klick zu höheren Ebenen.
Einfach und unmissverständlich zu bedienen.
Braucht wenig Platz.

24. usability // martin hahn // 2010
Reiter / Tabs
Bekannte Metapher
Klare Hierachie

25. usability // martin hahn // 2010
Navigationswording
Home
FAQ
Sitemap
Guided Tour
Login / Logout
Newsletter
Download
Über / About us
Warenkorb
Verständlichkeit vor Kreativität

26. usability // martin hahn // 2010
Suche
Eine der wichtigsten Schnittstellen zwischen
Besucher und Webseite.
Muss sinnvolle Ergebnisse liefern.
Ab ca. 200 Unterseiten notwendig.

27. usability // martin hahn // 2010
Formulare
Keine unnötigen Felder.
Pflichtfelder kennzeichnen.
Eindeutige Feldbezeichnungen.
Eindeutige Fehlerhinweise.
Korrekt ausgefüllte Felder merken.

28. usability // martin hahn // 2010
Kontakt
Ausreichend Kontaktmöglichkeiten bieten.
Physikalische Adresse
E-Mail / Kontaktformular
User muss jederzeit mit dem Unternehmen oder
einzelnen Personen in Kontakt treten können.

29. User
Interface
Design
form follows function?

30. usability // martin hahn // 2010
“Ein Ding [...] soll seinem Zweck vollendet dienen –
das heißt, seine Funktion praktisch erfüllen.”
(Gropius)

31. usability // martin hahn // 2010
Pagedesign Konventionen
Zurück zur Startseite-Link Seitensuche

32. usability // martin hahn // 2010
Pagedesign Konventionen
Interne Links Werbung / Banner

33. usability // martin hahn // 2010
Konvention vs. Innovation
Konventionen sind hilfreich für den User
Start- und Unterseiten können sich unterscheiden.
Konventionen sind nicht zwangsläufig langweilig!
Innovationen nur dann, wenn die Idee besser ist!

34. usability // martin hahn // 2010

35. usability // martin hahn // 2010
Grids are good

36. usability // martin hahn // 2010
Farben
Ästhetische und psychologische Wirkung
Informationsleitfunktion
Ausreichender Kontrast zwischen Text
und Hintergrund
Farbenwirkung und -kontraste beachten!

37. usability // martin hahn // 2010
Icons als Kommunikationshilfe
Ein Icon sagt mehr als tausend Worte.
Erleichtern die Informationsaufnahme.
Bieten Orientierung.
Müssen erlernt bekannt sein!

38. usability // martin hahn // 2010

39. usability // martin hahn // 2010
Produkte sind nicht ästhetisch neutral!

40. usability // martin hahn // 2010
Webseiten sind nicht ästhetisch neutral!

41. usability // martin hahn // 2010
Webseitenästhetik
„Keine zweite Chance für den ersten Eindruck.”
Der User fühlt sich angesprochen oder eben nicht.
Gefallen oder Nicht-Gefallen passieren unbewusst.
Der User fällt sein Urteil in Sekundenbruchteilen.
“Schöne” adäquate Ästhetik unterstützt die Ziele
der Webseite und erhöht das Vertrauen des Users!

42. usability // martin hahn // 2010
Webseiten vermittlen immer eine Ästhetik!

43. usability // martin hahn // 2010

44. readability
texte im internet liest sowieso keiner…

45. usability // martin hahn // 2010
Wir lesen keine Webseiten,
wie überfliegen sie!
Lesen am Monitor ist anstrengend und um
ca. 25% langsamer als auf Papier.
Der User braucht optische Anhaltspunkte zur Orientierung.
Text scannbar machen.
Umfangreiche Konsequenzen für die Gestaltung!

46. usability // martin hahn // 2010
Die Folgen…

47. usability // martin hahn // 2010
Headline / Claim
Einführung in die Seite.
Aussagekräftig, klar, verständlich!

48. usability // martin hahn // 2010
Abstract / Teaser
Blickfang
Erste Inhaltszusammenfassung.
Lockmittel, um den User zum Weiterlesen zu animieren.

49. usability // martin hahn // 2010
Überschriften Seitentitel
Artikel mit Überschriften und
Zwischenüberschriften strukturieren.
Besser einfache, aussagekräftige als
interessant klingende Überschriften.

50. usability // martin hahn // 2010
Texte Sprache – Content Usability
Inhalt kürzen, Inhalt kürzen, Inhalt kürzen.
Nutzlose Wörter weglassen.
Objektive, einfache Sprache verwenden.
Schlüsselwörter benutzen.
Keine Rechtschreib- Grammatikfehler

51. usability // martin hahn // 2010
Content
Usability

52. usability // martin hahn // 2010
Bilder sagen mehr…
als tausend Worte, ersetzen aber keine
inhaltlichen Details!
Sorgen für Aufmerksamkeit.
Ergänzen und erweitern die inhaltliche Aussage.
Der Inhalt bleibt mit Bildern besser in Erinnerung.

53. usability // martin hahn // 2010
Weißraum
Hilft die Seite zu strukturieren.
Bietet dem User Orientierung.
Zeigt inhaltliche Zusammenhänge auf.

54. usability // martin hahn // 2010
Textauszeichnungen
Arten: Größe, Art, Farbe, Schnitt, Versalien, Kapitälchen
Lesbarkeit erhöhen
Seite strukturieren
Inhaltliches herausstellen

55. usability // martin hahn // 2010

56. usability // martin hahn // 2010
Listen / Tabellen
Schnelle Informationsaufnahme
Übersichtlich
“Auf den Punkt gebracht.”

57. usability // martin hahn // 2010
Gut lesbarer Text , Teil I
Nicht mehr als 8 - 10 Wörter pro Zeile.
Linksbündig
Serifenlose Schriften wie Arial, Verdana und Tahoma
für Fließtext.
Zeilenabstände nicht zu eng.
Schriftgröße ≥ 10 Punkt

58. usability // martin hahn // 2010
Gut lesbarer Text, Teil II
Klarer Text/Hintergrund-Kontrast.
Unterstreichungen NUR für Links.
Auszeichnungen nutzen.
Selten Großschreibung benutzen.
Text in Absätze gliedern.

59. usability // martin hahn // 2010
Gut lesbarer Text

60. usability // martin hahn // 2010
Pageflow
Readability

61. usability // martin hahn // 2010
Pageflow Readability

62. usability // martin hahn // 2010
Die umgekehrte Pyramide
Typischer Aufbau von Artikeln.
Überschrift wichtigste Informationen
Wichtige
Informationen
Details

63. usability // martin hahn // 2010
Glaubwürdigkeit
Glaubwürdigkeit ist ein Erfolgsfaktor einer Webseite.
Texte auf dem Bildschirm sind weniger glaubwürdig,
und schwerer zu verstehen sind als Texte auf Papier.
Glaubwürdige Webseiten:
Hohe wahrgenommene Vertrauenswürdigkeit
Hohe wahrgenommene Fach- oder Sachkenntnis

64. usability // martin hahn // 2010
Glaubwürdigkeit steigern
Zeigen, dass ein reales Unternehmen oder
Person für den Auftritt verantwortlich ist.
Einfache Interaktion zwischen Unternehmen
und dem User.
Professionelles Aussehen und leicht
nachvollziehende Navigation.
KEINE Vermischung von Inhalt und Werbung.
Testimonials.

65. usability // martin hahn // 2010
Aktualität
Hohe Erwartungshaltung der User:
Inhalte gültig und aktuell!
Aktualität ist eng mit Glaubwürdigkeit und
Vertrauen verbunden.

66. einfach für alle
zugängliche webseiten

67. usability // martin hahn // 2010
Barrierefreie Webseiten
Webseiten so gestalten, dass sie JEDER lesen kann!
BITV WCAG
Logische Struktur der HTML-Seiten
Kontrastreiche Gestaltung
Grafiken mit Alternativ-Text
Text-Alternativen für Multimedia-Angebote
Tastatursteuerung
Skalierbarkeit von Schriften

68. usability // martin hahn // 2010
Gebrauchstaugliche HTML-Seiten
Suchmaschinenoptimiert
Endgeräteunabhängig
Korrekte Seitenhierachie
HTML für Informationen, CSS für das Layout und
JavaScript / AJAX für die Verbesserung der Usability.

69. usability // martin hahn // 2010
Gebrauchstaugliche HTML-Seiten
Alternative Stylesheets (Print, mobile Geräte)
Sinnvoller Seitentitel
Sprechende URLs
Keine Frames und Pop-Ups
Individuelle Fehlerseite

70. usability // martin hahn // 2010

71. usability // martin hahn // 2010
Technische Voraussetzungen der User

72. nutzen
Wenn ein User sich auf einer Website nicht zurechtfindet
und er sie nicht steuern kann, verlässt er sie.
Die nächste Website ist nur einen Mausklick entfernt.
Dass er jemals wiederkommt, ist unwahrscheinlich.

73. usability // martin hahn // 2010
Warum Usability?
Usability ist ein Differenzierungsmerkmal.
Usability ist harte Arbeit.
Die Investition lohnt sich: Return on Investment.

74. usability // martin hahn // 2010
Das bringt Usability
Mehr Umsatz
Mehr Anfragen
Mehr Besucher
Höhere Kundenzufriedenheit
Stärkere Kundenbindung

75. diskussion
gute seiten, schlechte seiten

76. usability // martin hahn // 2010

77. usability // martin hahn // 2010

78. usability // martin hahn // 2010

79. usability // martin hahn // 2010

80. usability // martin hahn // 2010

81. usability // martin hahn // 2010

82. usability // martin hahn // 2010
Usability – Best Case ;-)