SlideShare a Scribd company logo
1 of 86
Download to read offline
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
REDESIGN
1. 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 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
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 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.
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.
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 Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
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 Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
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 Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
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 Probleme
Serverty-Rating
Fragebögen
Entwickeln der
Testmaterialien
Testinhalte
Durchführung der
Nutzertests
Rohdaten
Auswerten und
Zusammenführen
der Ergebnisse
Pflichtenheft für
Redesign
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
Inkompetenz
Resignation
Niedergeschlagenheit
Anstrengung Erleichterung
Zufriedenheit
Entspannung
Schuld
Scham
Furcht
Aktivitäten anderer
Personen
Dankbarkeit Verärgerung
Wut
Glück Überraschung Schuld
Quelle: Zimbardo

More Related Content

Similar to Software-Ergonomie Tag4

Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009Jutta Korn
 
Multiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche PostMultiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche Postvbuchenau
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies WebdesignuxHH
 
Web Globalization balanced by User Experience (Mensch und Computer 2008)
Web Globalization balanced by User Experience (Mensch und Computer 2008)Web Globalization balanced by User Experience (Mensch und Computer 2008)
Web Globalization balanced by User Experience (Mensch und Computer 2008)Rainer Gibbert
 
Informationssystem
InformationssystemInformationssystem
Informationssystemcarolus47
 
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Ponton-Lab GmbH
 
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...TANNER AG
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies WebdesignLuka Peters
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsGünther Haslbeck
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogeResult_GmbH
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DNUG e.V.
 
Die wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von WebanwendungenDie wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von WebanwendungenYUHIRO
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 

Similar to Software-Ergonomie Tag4 (20)

Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009
 
Multiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche PostMultiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche Post
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Web Globalization balanced by User Experience (Mensch und Computer 2008)
Web Globalization balanced by User Experience (Mensch und Computer 2008)Web Globalization balanced by User Experience (Mensch und Computer 2008)
Web Globalization balanced by User Experience (Mensch und Computer 2008)
 
Informationssystem
InformationssystemInformationssystem
Informationssystem
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
 
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
 
Enterprise BPM
Enterprise BPMEnterprise BPM
Enterprise BPM
 
Die wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von WebanwendungenDie wichtigsten Technologien für die Entwicklung von Webanwendungen
Die wichtigsten Technologien für die Entwicklung von Webanwendungen
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 

More from Marcel Zimmermann

Zeitgemäßes Prototyping - Design ist nicht bunt machen
Zeitgemäßes Prototyping - Design ist nicht bunt machenZeitgemäßes Prototyping - Design ist nicht bunt machen
Zeitgemäßes Prototyping - Design ist nicht bunt machenMarcel Zimmermann
 
Responsive Design - Vorgehen und Fallstricke
Responsive Design - Vorgehen und FallstrickeResponsive Design - Vorgehen und Fallstricke
Responsive Design - Vorgehen und FallstrickeMarcel Zimmermann
 
Eine neue Informationsarchitektur für die MTV Networks Germany Presseseiten
Eine neue Informationsarchitektur für die MTV Networks Germany PresseseitenEine neue Informationsarchitektur für die MTV Networks Germany Presseseiten
Eine neue Informationsarchitektur für die MTV Networks Germany PresseseitenMarcel Zimmermann
 

More from Marcel Zimmermann (6)

Zeitgemäßes Prototyping - Design ist nicht bunt machen
Zeitgemäßes Prototyping - Design ist nicht bunt machenZeitgemäßes Prototyping - Design ist nicht bunt machen
Zeitgemäßes Prototyping - Design ist nicht bunt machen
 
Responsive Design - Vorgehen und Fallstricke
Responsive Design - Vorgehen und FallstrickeResponsive Design - Vorgehen und Fallstricke
Responsive Design - Vorgehen und Fallstricke
 
Softwareergonomie Tag2
Softwareergonomie Tag2Softwareergonomie Tag2
Softwareergonomie Tag2
 
Softwareergonomie Tag1
Softwareergonomie Tag1Softwareergonomie Tag1
Softwareergonomie Tag1
 
Eine neue Informationsarchitektur für die MTV Networks Germany Presseseiten
Eine neue Informationsarchitektur für die MTV Networks Germany PresseseitenEine neue Informationsarchitektur für die MTV Networks Germany Presseseiten
Eine neue Informationsarchitektur für die MTV Networks Germany Presseseiten
 
Ergonomie Tag2
Ergonomie Tag2Ergonomie Tag2
Ergonomie Tag2
 

Software-Ergonomie Tag4

  • 1. Folie: 1 Dipl. Päd. Marcel Zimmermann - Ergonomie für Informatiker – Vorlesung Dipl. Päd. Marcel Zimmermann :: Tag 4 ::
  • 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
  • 7. Folie: 7 Analyse der Aktionshäufigkeit I :: Quelle:B. Shneiderman
  • 8. Folie: 8 Analyse der Aktionshäufigkeit II :: Quelle:B. Shneiderman
  • 10. Folie: 10 Steuerelemente: Die verschiedenen Steuerelemente  Radiobuttons  Checkboxen  Selectboxen (single)  Selectboxen (mutliple)  Pulldown  Steuerbutton  Hyperlinks
  • 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
  • 21. 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.">
  • 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.
  • 44. 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.">
  • 45. Folie: 45 :: Die fünf Dialogstile
  • 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
  • 64. Folie: 64 Usability im Sonderangebot
  • 65. Folie: 65 Dimensionen von Usability Ökonomisch Gesellschaftlich Rechtlich
  • 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
  • 86. Folie: 86 Leistungsmotivation: Emotionale Reaktionen Attribution Erfolg Misserfolg Fähigkeit Kompetenz Vertrauen Stolz Inkompetenz Resignation Niedergeschlagenheit Anstrengung Erleichterung Zufriedenheit Entspannung Schuld Scham Furcht Aktivitäten anderer Personen Dankbarkeit Verärgerung Wut Glück Überraschung Schuld Quelle: Zimbardo

Editor's Notes

  1. Der neue Trend: Direkte Manipulation auf Webseiten Beispiel von Map24 / applet
  2. Eingabefelder werden in erster Linie auf Webseiten benutzt Beispiel von MTV Eingabefelder werden in erster Linie auf Webseiten benutzt Beispiel von MTV
  3. Eingabefelder werden in erster Linie auf Webseiten benutzt Beispiel von MTV
  4. Beispiel Deutschland.de: vorher gab es eine Textversion, jetzt wird die grafische Version „Barrierefrei“ gemacht. Hierdurch wird gleichzeitig die intergrative Bedeutung forciert.