weitere Infos: http://marcelzimmermann.wordpress.com
Folien der Vorlesung "Ergonomie für Informatiker" an der FH Oldenburg Wilhelmshaven (2003 bis 2007). Es wurden Grundlagen der Software-Ergonomie vermittelt.
Tag 4:
- Formulardesign
- Barrierefreiheit & BITV
- Dialogstile
- Usability-Forschung und Evaluation
3. Folie: 3
Die acht goldenen Regeln des Schnittstellendesigns
1. Streben Sie nach Konsistenz
2. Ermöglichen Sie regelmäßigen Benutzern die Verwendung von
Shortcuts
3. Bieten Sie informatives Feedback
4. Entwerfen Sie in sich geschlossene Dialoge
5. Bieten Sie Fehlervermeidung und einfaches umgehen mit Fehlern
6. Erlauben Sie leichte Umkehr von Aktionen
7. Unterstützen Sie das interne Kontrollbedürfnis
8. Reduzieren Sie die Belastung für das Kurzzeitgedächtnis
Quelle:B. Shneiderman
4. Folie: 4
Design-Richtlinie für Eingabefelder
Aussagekräftiger Titel
Verständliche Instruktionen
Logische Gruppierungen und Sequenzierung der Felder
Visuell ansprechende Layout-Form
Vertraute Feldbezeichnungen
Sichtbarer Platz und Grenzen für Dateneingabefelder
Bequeme Cursor-Bewegung
Quelle:B. Shneiderman
5. Folie: 5
Design-Richtlinie für Eingabefelder II
Fehlerkorrektur für einzelne Zeichen und ganze Felder
Fehlervermeidung wo möglich
Fehlermeldung für inakzeptable Werte
Markierung der optionalen Felder
Erklärende Meldungen für Felder
Vollständigkeitssignal für die Unterstützung der Anwenderkontrolle
Quelle:B. Shneiderman
6. Folie: 6
Die Organisation des Displays
Konsistenz des Datendisplays
Effiziente Informationsanpassung durch den Anwender
Minimale Gedächtnisbelastung der Anwender
Kompatibilität von Datendisplay und Dateneingabe
Flexible Kotrolle des Datendisplay durch Anwender
Quelle:B. Shneiderman
11. Folie: 11
Navigation: Impressum
Logo / Bildleiste
Persönlich Themen
Suchen
Netzwerk
ImpressumFußleiste
Termine
Aus den Bereichen
Aktuell
Neuer Artikel Titel
Teaser Teaser Teaser Teaser Teaser
Teaser Teaser Teaser Teaser
Neuer Artikel Titel
Teaser Teaser Teaser Teaser
Neue Veranstaltung Titel
Teaser Teaser Teaser Teaser
Tag-Cloud
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, ed
diam nonummy ibh euismod
tincidunt ut laoreet dolore
Willkommen
Hier steht ein kurzer Text. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit,
ed diam nonummy
nibh euismod tincidunt
Social Links
Home
Blog-News
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, ed
diam nonummy ibh euismod
tincidunt ut laoreet dolore
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, ed
diam nonummy ibh euismod
tincidunt ut laoreet dolore
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, ed
diam nonummy ibh euismod
tincidunt ut laoreet dolore
18. Folie: 18
Barrieren wodurch vermeiden?
Screen-Reader, Screen-Magnifier
Seite im SW-Design planen
Klare Navigation verwenden
Einsatz blinkender Elementen vermeiden
Tastaturbedienung ermöglichen
Schnelle Ladezeiten anstreben
Websichere Farben verwenden
Alternative Ausgaben anbieten
Barrierefreies Webdesign I:
Barrieren für wen?
Sehbehinderte und Blinde
Farbblinde
Menschen mit Konzentrationsschwäche
Maus Benutzung nicht möglich
User mit niedrigen Übertragungsraten
Laptop Benutzer, die unterwegs sind,
langsame Modems und schlechte
Grafikauflösung
User die mit Palmtop oder einem
Handy surfen - sehr hohe
Übertragungskosten, kleine Displays
19. Folie: 19
Barrierefreies Webdesign V:
Farben:
Schwarz und Weiss
Weiss und Rot
Weiss und Schwarz
Blau und Weiss
Gelb und Blau
Orange und Grün
Gelb und Weiss
Rot und Blau
Orange und Gelb
Blau und Orange
unbedingt testen: Schwarz/weiss Darstellung (!!!)
: Gut lesbar
: Schlecht lesbar
20. Folie: 20
Formel für die Helligkeit von Farben
Die Farbhelligkeit wird durch die beiden folgenden Formeln bestimmt:
((Rot-Wert x 299) + (Grün-Wert x 587) + (Blau-Wert x 114)) / 1000
Der Unterschied zwischen der Helligkeit des Hintergrundes und des
Vordergrundes sollte größer sein als 125.
Anmerkung: Diese Berechnungsmethode ist von einer Formel
abgeleitet, mit der RGB- in YIQ-Werte umgerechnet werden. Dieser
Helligkeitswert bedeutet die 'empfundene Helligkeit' für eine Farbe.
Das YIQ-Farbmodell wird vom amerikanischen Fernsehen
verwendet. Es entspricht der amerikanischen Fernsehnorm NTSC
(National Television System Commitee). Der Wert für Y enthält die
Helligkeitsinformation, I und Q enthalten die Farbinformation.
Quelle:http://farbe-computer.de/kapitel27.html,
http://www.webforall.info/html/deutsch/col_analy.php
22. Folie: 22
Barrieren wodurch vermeiden?
Screen-Reader, Screen-Magnifier
Seite im SW-Design planen
Klare Navigation verwenden
Einsatz blinkender Elementen vermeiden
Tastaturbedienung ermöglichen
Schnelle Ladezeiten anstreben
Websichere Farben verwenden
Alternative Ausgaben anbieten
Barrierefreies Webdesign I:
Barrieren für wen?
Sehbehinderte und Blinde
Farbblinde
Menschen mit Konzentrationsschwäche
Maus Benutzung nicht möglich
User mit niedrigen Übertragungsraten
Laptop Benutzer, die unterwegs sind,
langsame Modems und schlechte
Grafikauflösung
User die mit Palmtop oder einem
Handy surfen - sehr hohe
Übertragungskosten, kleine Displays
23. Folie: 23
Barrierefreies Webdesign V:
Farben:
Schwarz und Weiss
Weiss und Rot
Weiss und Schwarz
Blau und Weiss
Gelb und Blau
Orange und Grün
Gelb und Weiss
Rot und Blau
Orange und Gelb
Blau und Orange
unbedingt testen: Schwarz/weiss Darstellung (!!!)
: Gut lesbar
: Schlecht lesbar
26. Folie: 26
BITV - Rechtsverordnung zum
Bundesgleichstellungsgesetz
§ 1 Sachlicher Geltungsbereich
Die Verordnung gilt für:
Internetauftritte und -angebote,
Intranetauftritte und -angebote, die öffentlich zugänglich sind, und
mittels Informationstechnik realisierte graphische
Programmoberflächen, die öffentlich zugänglich sind.
der Behörden der Bundesverwaltung.
27. Folie: 27
BITV - Rechtsverordnung zum
Bundesgleichstellungsgesetz II
„Die Voraussetzungen orientieren sich an den derzeitigen technischen
Möglichkeiten. Die technischen Inhalte wurden grundsätzlich den
Zugänglichkeitsrichtlinien für Web-Inhalte in der Version 1.0 ("Web
Content Accessibility Guidelines 1.0") des World Wide Web
Consortiums ("W3C") vom 5. Mai 1999 entnommen.“
28. Folie: 28
BITV - Rechtsverordnung zum
Bundesgleichstellungsgesetz III
Zu Nr. 11.3 der Anlage 1
Grundsätzlich zielt die Verordnung darauf, Sonderlösungen für
behinderte Menschen oder für einzelne Gruppen behinderter
Menschen zu vermeiden. Die Erstellung eines Internetangebots, das
für alle Benutzergruppen gleichermaßen uneingeschränkt nutzbar ist,
hat Vorrang insbesondere vor einer "Nur-Text-Lösung" als
Alternative zum eigentlichen Internetangebot, da eine solche
Darstellung in erster Linie nur für bestimmte Benutzergruppen von
behindernten Menschen, etwa für Benutzer von Braille-Zeilen oder
Screen-Readern, Barrierefreiheit erreicht.
29. Folie: 29
BITV – Anforderungen
Anforderung 1
Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen,
die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen.
Anforderung 2
Texte und Graphiken müssen auch dann verständlich sein, wenn sie ohne Farbe betrachtet
werden.
Anforderung 3
Markup-Sprachen (insbesondere HTML) und Stylesheets sind entsprechend ihrer
Spezifikationen und formalen Definitionen zu verwenden.
Anforderung 4
Sprachliche Besonderheiten wie Wechsel der Sprache oder Abkürzungen sind erkennbar
zu machen.
Anforderung 5
Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu
beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.
30. Folie: 30
BITV – Anforderungen
Anforderung 6
Internetangebote müssen auch dann nutzbar sein, wenn der verwendete Benutzeragent
neuere Technologien nicht unterstützt oder diese deaktiviert sind.
Anforderung 7
Zeitgesteuerte Änderungen des Inhalts müssen durch die Nutzerin/den Nutzer
kontrollierbar sein.
Anforderung 8
Die direkte Zugänglichkeit der in Internetangeboten eingebetteten Benutzerschnittstellen ist
sicherzustellen.
Anforderung 9
Internetangebote sind so zu gestalten, dass Funktionen unabhängig vom Eingabegerät
oder Ausgabegerät nutzbar sind.
Anforderung 10
Die Verwendbarkeit von nicht mehr dem jeweils aktuellen Stand der Technik
entsprechenden assistiven Technologien und Browsern ist sicherzustellen, so weit der
hiermit verbundene Aufwand nicht unverhältnismäßig ist.
31. Folie: 31
BITV – Anforderungen
Anforderung 11
Die zur Erstellung des Internetangebots verwendeten Technologien sollen öffentlich
zugänglich und vollständig dokumentiert sein, wie z.B. die vom World Wide Web
Consortium entwickelten Technologien.
Anforderung 12
Der Nutzerin/dem Nutzer sind Informationen zum Kontext und zur Orientierung
bereitzustellen.
Anforderung 13
Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten.
Anforderung 14
Das allgemeine Verständnis der angebotenen Inhalte ist durch angemessene Maßnahmen
zu fördern.
46. Folie: 46
Definition Dialog und Benutzer (nach ISO 9241):
Dialog
• Eine Interaktion zwischen einem Benutzer und einem Dialogsystem,
um ein bestimmtes Ziel zu erreichen.
Benutzer
• Ein Mensch, der mit dem Dialogsystem arbeitet.
47. Folie: 47
Die verschiedenen Interaktionsstile
1. Direkte Manipulation
2. Menüauswahl
3. Eingabefeld
4. Befehlssprache
5. Natürliche Sprache
Quelle: Sniderman
50. Folie: 50
Direkte Manipulation III
Vorteile
Aufgaben werden visuell
präsentiert
Lernen ist einfach
Fehler können vermieden
werden
Ermutigt den Anwender, neue
Sachen auszuprobieren
Subjektive Befriedigung
Nachteile
Möglicherweise
schwer zu
programmieren
Verlangt einen Bildschirm
und u.U. besondere
Eingabegeräte (Joystick)
Hohe Leistung der
Hardware notwendig
51. Folie: 51
Menüauswahl II
Vorteile
Lernzeit wird verkürzt
Weniger Anschläge auf der
Tastatur
Strukturierte
Entscheidungsfindung
Ermöglicht es, Dialoge zu
managen
Unterstützung bei Fehlern
möglich
Nachteile
Viele und tief
geschachtelte Menüs
Für Power User lästig
Viel Platz auf dem
Bildschirm notwendig
Hohe Leistung der
Hardware
53. Folie: 53
Befehlssprache II
Vorteile
Sehr flexibel
Vom Power User bevorzugt
Fördert die Initiative des Anwenders
Erlaubt das Definieren von Makros
Nachteile
Fehlerbehandlung
schwierig
Erfordert geschulten Anwender
Stellt hohe Ansprüche an das
Gedächtnis des Anwenders
55. Folie: 55
Eingabefeld II
Vorteile
Vereinfacht die Datenerfassung
Geringer Aufwand zum Anlernen
Hilfestellung möglich
Nachteile
Hoher Platzbedarf
auf dem Bildschirm
57. Folie: 57
Natürliche Sprache II
Vorteil
Der Anwender braucht nicht länger
die Syntax einer Computersprache
zu lernen
Nachteile
Verständnisprobleme
zwischen Mensch und
Computer
Verlangt nach Dialog bei Klärung
schwieriger Sachverhalte
66. Folie: 66
Warum Usability?
Beim eBusiness wird Usability vor allem unter ökonomischen
Aspekten betrachtet
Im Kontext des eGovernment ist Usability vor allem von
gesellschaftlicher Bedeutung
Die rechtliche Dimension erhält Usability insbesondere im Hinblick auf
die in dem neuen Gleichstellungsgesetz geforderte "Accessibility". Die
BITV Richtlinie ist deren zentraler Bestandteil
67. Folie: 67
Determinanten der Evaluation
Die Stufe des Designs (Anfang, Mitte, Ende)
Die Neuartigkeit des Projektes (klar strukturiert vs. explorativ)
Die Anzahl der erwartenden Anwender
Der Anspruch des Interface
Die Produktionskosten und für Tests ausgewiesene Gelder
Die verfügbare Zeit
Die Erfahrung des Design- und Evaluationsteams
68. Folie: 68
Was ist Usability?
Benutzungsfreundlichkeit, Benutzbarkeit
Die Veränderungen in den Bezeichnungen sind Ausdruck der
Bestrebungen die subjektiv-individuelle Sicht von
Benutzerfreundlichkeit um funktionale Aspekte im Begriff
Gebrauchsfreundlichkeit bzw.Usability zu erweitern, die dann auch
Eingang in eine entsprechende Norm, der ISO 9241, gefunden haben.
Danach ist die Usability eines Produktes das Ausmaß, in dem
es von einem bestimmten Benutzer verwendet werden kann,
um bestimmte Ziele in einem bestimmten Kontext effektiv,
effizient und zufriedenstellend zu erreichen.
Quelle: Ergo-Online
69. Folie: 69
Schematischer Aufbau eines Evaluations-Modells:
Messbare Usability-Attribute
werden definiert
Numerische Werte für die
angestrebte Usability werden
festgesetzt
Das Produkt wird hinsichtlich
der angestrebten Werte
getestet
Kein weiteres Redesign
nötig
Aufgetretene Probleme
werden analysiert
Einfluss möglicher
Designlösung wird analysiert
Benutzerrückmeldung wird
beim Redesign berücksichtigt
Werden die Werte
erreicht?
71. Folie: 71
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische
Evaluation
Cognitive
Walktrough
Usability Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
72. Folie: 72
Expertenorientierte Methoden: Heuristische Evaluation
I
Vorgehensweise
Ein Team von Usability-Experten untersucht, gestützt auf Heuristiken,
unabhängig voneinander die Usability einer Website oder Anwendung.
Dabei bewerten die Experten verschiedene Aspekte der
technologischen und inhaltlich-strukturellen Umsetzung.
Jeder der Experten erstellt einen Bericht.
Die Ergebnisse werden in einer abschließenden Team-Sitzung
besprochen und zusammengeführt.
73. Folie: 73
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische
Evaluation
Cognitive
Walktrough
Usability Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
74. Folie: 74
Expertenorientierte Methoden: Cognitive Walktrough
Vorgehen
Experten simulieren eine Alltagssituation
Es werden typische Situationen getestet
Es wird explorativ vorgegangen
Üblich sind auch öffentliche Durchgänge in Gruppen
Cognitive Walkthrough (CW)
Bei dieser Methode inspiziert der Experte den durch das Webangebot vorgegebenen "optimalen" Pfad zur
Problemlösung (z.B. die Durchführung einer Bestellung). Dabei fragt sich der Experte, ob ein hypothetischer
Nutzer diesen Pfad tatsächlich gegangen wäre. Der Best Match zwischen mentalen Fähigkeiten und den
Anforderungen, die das Web-Interface an den Nutzer stellt, stehen im Vordergrund.
http://www.usability-competence.de/
75. Folie: 75
Kategorien
Für die Evaluation eines Web-Angebots von besonderer Bedeutung sind:
Navigation und Orientierung
Interaktion und Informationsaustausch
Aktualität und Qualität
Informations- und Textdesign
Auffindbarkeit und Zugänglichkeit
76. Folie: 76
Beispiel
Explorativ: TV Show
Fragestellungen:
– Was würden User hier tun?
– Welche Probleme sind zu erwarten?
– Welche Konventionen werden evtl. nicht erfüllt?
Suchen Sie sich ein Schickes Hotel!
– Wie wird der Artikel wahrgenommen?
– Wie ist die Struktur? Ist diese hier notwendig?
77. Folie: 77
FBWI-Homepage
Story:
Ein Nutzer möchte Wirtschaftsingenieurwesen Studieren und sich auf
den Webseiten Informieren
Er schaut sich die verschiedenen Bereiche an. Wird er in seinem
Beschluss gestärkt?
Er fragt sich nach alternativen Studienmöglichkeiten und möchte
"stöbern"
78. Folie: 78
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische
Evaluation
Cognitive
Walktrough
Usability Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
79. Folie: 79
Expertenorientierte Methoden: Heuristische Evaluation
II
Ranking der gefundenen Probleme (Severity Rating)
Die severity (das Ausmaß) eines Usability-Problems setzt sich aus der
Kombination folgender Faktoren zusammen:
1 = Kosmetisches Problem (nur beheben, wenn genügend Zeit ist)
2 = Kleines Usability-Problem (geringe Priorität)
3 = Großes Usability-Problem (hohe Priorität)
4 = Usability-Katastrophe (muss vor dem Release behoben werden)
frequency
impact
persistence
80. Folie: 80
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische
Evaluation
Cognitive
Walktrough
Usability Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
82. Folie: 82
Expertenorientierte Methoden: Guidelines und
Checklisten
Guidelines
grundsätzlich keine Unterschiede zu Heuristiken
große Guidelines können teils mehr als 1.000 Regeln umfassen
> Nachteil gegenüber den abstrakteren Heuristiken
unzählige private, aber auch renommierte Guidelines erhältlich (z.B.
von IBM, Yale, Apple)
firmen- oder organisationsintern werden oftmals sog. Styleguides auf
Basis von Heuristiken und Guidelines aufgestellt
83. Folie: 83
Expertenorientierte Methoden: Guidelines und
Checklisten
Checklisten
überprüfen eine oder mehrere Websites „quick and dirty" auf
Usability-Probleme
aufgrund einfacher Fragestellungen besonders für unerfahrene
WebDesigner geeignet
Nachteil der starren Fragestruktur
Checklisten können keine abschließende Usability-Analyse liefern,
sondern nur Ausgangspunkt sein, Bewußtsein wecken
Beispiel: Keevil-Index-200 Fragen
84. Folie: 84
Expertenorientierte Methoden: Guidelines und
Checklisten
Fragekategorien des Web-Usability Index
Navigation und Orientierung
Interaktion und Informationsaustausch
Akualität und Qualität
Informations- und Textdesign
Auffindbarkeit und Zugänglichkeit
85. Folie: 85
Akzeptanztests!!
Kriterien für die Benutzerschnittstelle:
Die Zeit, die Anwender brauchen, spezifische Funktionen zu erlernen
Geschwindigkeit der Aufgaben-Performance
Fehlerrate der Anwender
Erinnerungsvermögen der Anwender für Befehle
Subjektive Zufriedenheit der Anwender
Der neue Trend: Direkte Manipulation auf Webseiten
Beispiel von Map24 / applet
Eingabefelder werden in erster Linie auf Webseiten benutzt
Beispiel von MTV
Eingabefelder werden in erster Linie auf Webseiten benutzt
Beispiel von MTV
Eingabefelder werden in erster Linie auf Webseiten benutzt
Beispiel von MTV
Beispiel Deutschland.de: vorher gab es eine Textversion, jetzt wird die grafische Version „Barrierefrei“ gemacht. Hierdurch wird gleichzeitig die intergrative Bedeutung forciert.