Upload
marcel-zimmermann
View
678
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
Folie: 1
Dipl. Päd. Marcel Zimmermann
- Ergonomie für Informatiker –Vorlesung
Dipl. Päd. Marcel Zimmermann
:: Tag 4 ::
Folie: 2
:: Formulardesign
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
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
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
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
Folie: 7
Analyse der Aktionshäufigkeit I ::
Quelle:B. Shneiderman
Folie: 8
Analyse der Aktionshäufigkeit II ::
Quelle:B. Shneiderman
Folie: 9
Aktionshäufigkeit
REDESIGN1. VERSION
Quelle:B. Shneiderman
Folie: 10
Steuerelemente:
Die verschiedenen Steuerelemente
Radiobuttons Checkboxen Selectboxen (single) Selectboxen (mutliple) Pulldown Steuerbutton Hyperlinks
Folie: 11
Navigation: Impressum
Logo / Bildleiste
Persönlich Themen
Suchen
Netzwerk
ImpressumFußleiste
Termine
Aus den Bereichen
Aktuell
Neuer Artikel TitelTeaser Teaser Teaser Teaser Teaser Teaser Teaser Teaser Teaser
Neuer Artikel TitelTeaser Teaser Teaser Teaser
Neue Veranstaltung TitelTeaser Teaser Teaser Teaser
Tag-CloudLorem 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
Folie: 12
Folie: 13
Beispiel VERA:
Folie: 14
Folie: 15
Folie: 16
Folie: 17
:: Barrierefreiheit & BITV
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
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
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
Folie: 21
Sourcecode
<img src="../images/ecards/motiv/sm_e_de_4_tour.jpg" border=0 alt="Gelb und grün dehnt sich ein Sonnenblumenfeld in Richtung Horizont. Quer durch das Feld verlaufen Telegrafenmasten vor dem blauen Himmel.">
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
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
Folie: 24
Folie: 25
Barrierefreies Design
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.
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.“
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.
Folie: 29
BITV – Anforderungen
Anforderung 1Fü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.
Folie: 30
BITV – Anforderungen
Anforderung 6Internetangebote 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.
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.
Folie: 32
Folie: 33
Folie: 34
Folie: 35
Folie: 36
Folie: 37
Folie: 38
Folie: 39
Folie: 40
Folie: 41
Folie: 42
Folie: 43
Folie: 44
Sourcecode
<img src="../images/ecards/motiv/sm_e_de_4_tour.jpg" border=0 alt="Gelb und grün dehnt sich ein Sonnenblumenfeld in Richtung Horizont. Quer durch das Feld verlaufen Telegrafenmasten vor dem blauen Himmel.">
Folie: 45
:: Die fünf Dialogstile
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.
Folie: 47
Die verschiedenen Interaktionsstile
1. Direkte Manipulation
2. Menüauswahl
3. Eingabefeld
4. Befehlssprache
5. Natürliche Sprache
Quelle: Sniderman
Folie: 48
Direkte Manipulation I
Folie: 49
Direkte Manipulation II
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
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
Folie: 52
Befehlssprache I
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
Folie: 54
Eingabefeld I
Folie: 55
Eingabefeld II
Vorteile
Vereinfacht die Datenerfassung
Geringer Aufwand zum Anlernen
Hilfestellung möglich
Nachteile
Hoher Platzbedarf auf dem Bildschirm
Folie: 56
Natürliche Sprache I
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
Folie: 58
:: Usability-Forschung und Evaluation
Folie: 59
Das Usabilitylabor I
Folie: 60
Das Usabilitylabor II
Folie: 61
Folie: 62
Folie: 63
Folie: 64
Usability im Sonderangebot
Folie: 65
Dimensionen von Usability
Ökonomisch
Gesellschaftlich
Rechtlich
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
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
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
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?
Folie: 70
Nutzerzentriertes Vorgehen
Folie: 71
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische Evaluation
Cognitive Walktrough
Usability ProblemeServerty-Rating
Fragebögen
Entwickeln der Testmaterialien
Testinhalte
Durchführung der Nutzertests
RohdatenAuswerten und
Zusammenführen der Ergebnisse
Pflichtenheft fürRedesign
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.
Folie: 73
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische Evaluation
Cognitive Walktrough
Usability ProblemeServerty-Rating
Fragebögen
Entwickeln der Testmaterialien
Testinhalte
Durchführung der Nutzertests
RohdatenAuswerten und
Zusammenführen der Ergebnisse
Pflichtenheft fürRedesign
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/
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
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?
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"
Folie: 78
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische Evaluation
Cognitive Walktrough
Usability ProblemeServerty-Rating
Fragebögen
Entwickeln der Testmaterialien
Testinhalte
Durchführung der Nutzertests
RohdatenAuswerten und
Zusammenführen der Ergebnisse
Pflichtenheft fürRedesign
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
Folie: 80
Kombiniertes und Mehrstufiges Modell:
Website
Heuristische Evaluation
Cognitive Walktrough
Usability ProblemeServerty-Rating
Fragebögen
Entwickeln der Testmaterialien
Testinhalte
Durchführung der Nutzertests
RohdatenAuswerten und
Zusammenführen der Ergebnisse
Pflichtenheft fürRedesign
Folie: 81
Fragebögen
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
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
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
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
Folie: 86
Leistungsmotivation:
Emotionale Reaktionen
Attribution Erfolg Misserfolg
Fähigkeit Kompetenz Vertrauen Stolz
InkompetenzResignationNiedergeschlagenheit
Anstrengung ErleichterungZufriedenheitEntspannung
SchuldSchamFurcht
Aktivitäten anderer Personen
Dankbarkeit VerärgerungWut
Glück Überraschung Schuld
Quelle: Zimbardo