2. usability // martin hahn // 2010
Definition Usability
Ist ein Produkt einfach zu benutzen,
hat es eine hohe Usability.
Benutzerfreundlichkeit
besser: Gebrauchstauglichkeit
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
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.
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.
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.
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.
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!
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!
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!
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!
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.
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.
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.
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
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