Software-Ergonomie Tag4

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