Gestaltung grafischer Benutzerschnittstellen – Software-Ergonomie Seminarvortrag Olexandr Rudenko Matr.-Nr.: Januar 2012

Inhalt I. Motivation II. Software-Ergonomie III. Normen und Kriterien IV. Anwendung in der Praxis V. Fazit Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 2

Motivation Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 3

Motivation Wie vermeidet man solche Fehler? Was muss man bei der Gestaltung grafischer Benutzeroberfläche beachten? Was ist Software-Ergonomie? Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 4

Software-Ergonomie Definition: Wissenschaft über Anpassung der Software an die Schwächen und Stärken des Menschen Beschäftigt sich mit Analyse und Bewertung gebrauchstauglichen Benutzerschnittstellen Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 5

Software-Ergonomie Ziele: Verbesserung der Arbeitsbedingungen des Benutzers Anpassung an die Arbeitsweise des Benutzers Anpassung an die Fähigkeiten des Benutzers Es müssen äußere technische, räumliche und zeitliche Umstände beachtet werden. Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 6

Normen Kriterien zur: Analyse Bewertung Ausarbeitung … von Computersystemen. Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 7

Normen Basiskriterien der Gebrauchstauglichkeit: Gebrauchstauglichkeit nach ISO : „Das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 8

Normen Basiskriterien der Gebrauchstauglichkeit: Effektivität: „Die Genauigkeit und Vollständigkeit mit der Benutzer ein bestimmtes Ziel erreicht.“ Effizienz: „Der im Verhältnis zur Genauigkeit und Vollständigkeit eigesetzte Aufwand, mit dem Benutzer ein bestimmtes Ziel erreicht.“ Zufriedenstellung: „Freiheit von Beeinträchtigungen und positive Einstellungen gegenüber der Nutzung des Produkts.“ Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 9

Kriterien nach IFIP-Model 3 Schnittstellen: 1. Werkzeug 2. Dialog 3. Ein- / Ausgabe 3 Kriterien Gruppen: 1. Funktionale Kriterien 2. Dialog Kriterien 3. Ein- und Ausgabekriterien Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 10 International Federation for Information Processing

Funktionale Kriterien Verfügbarkeit Zuverlässigkeit Wiederverwendbarkeit Kombinierbarkeit Erweiterbarkeit Komplexität Transparenz Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 11

Dialog Kriterien (ISO ) Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Erwartungskonformität Lernförderlichkeit Steuerbarkeit Fehlertoleranz Individualisierbarkeit Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 12

Ein- und Ausgabekriterien Wahrnehmbarkeit Lesbarkeit Unterscheidbarkeit Übersichtlichkeit Orientierungsförderlichkeit Lenkbarkeit der Aufmerksamkeit Handbarkeit Zuträglichkeit Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 13

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Unterscheidbarkeit Übersichtlichkeit Zuträglichkeit Schrift: Einheitliche Schriftart, Schriftgröße und Farbe Wenig Textdekorationen (kursiv, fett, unterstrichen) Unterscheidbarkeit: Arial: l (L) und I (i); Times New Roman: 1 (eins) und l (L) Möglichst Systemeinstellungen verwenden Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 14

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Übersichtlichkeit Zuträglichkeit Selbstbeschrei- bungsfähigkeit Erwartungs- konformität Lernförderlichkeit Beschriftung: präzise kurz eindeutig einheitlich Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 15

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Übersichtlichkeit Zuträglichkeit Selbstbeschrei- bungsfähigkeit Erwartungs- konformität Lernförderlichkeit Beschriftung: Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 16

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Übersichtlichkeit Zuträglichkeit Selbstbeschrei- bungsfähigkeit Erwartungs- konformität Lernförderlichkeit Beschriftung: Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 17

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Unterscheidbarkeit Zuträglichkeit Orientierungs- förderlichkeit Lenkbarkeit der Aufmerksamkeit Farben: Informationsträger Verdeutlichen Bedeutung der Informationen Zeigen Status von Objekten oder Vorgängen Unterscheidungsmerkmal Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 18

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Unterscheidbarkeit Zuträglichkeit Orientierungs- förderlichkeit Lenkbarkeit der Aufmerksamkeit Farbwahrnehmung: Primärfarben eines Normalsehenden und einer Person mit Rot/Grün-Schwäche Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 19

Anwendung in der Praxis Wahrnehmbarkeit Unterscheidbarkeit Übersichtlichkeit Zuträglichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Erwartungs- konformität Icons und Piktogramme: platzsparender müssen unmissverständlich sein Assoziation zwischen Icon und Begriff nicht skalieren Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 20

Anwendung in der Praxis Wahrnehmbarkeit Unterscheidbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Erwartungs- konformität Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Toolbars: Schneller Zugang Wichtigsten Funktionen Am meisten verwendeten Funktionen Individuelle Gestaltung Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 21

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Erwartungs- konformität Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Menüs: Haupt- und Kontextmenü, globaler und lokaler Kontext Nicht mehr als drei Verschachtelungen Ellipsen (…) Tastaturkürzel Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 22

Anwendung in der Praxis Wahrnehmbarkeit Lesbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Erwartungs- konformität Steuerbarkeit Aufgaben- angemessenheit Ribbons: Kombination Menu, Toolbar und Tab Benötigt viel Platz, hat aber fixe Größe Zurzeit nur unter Windows verfügbar Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 23

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Dialog: Nicht modaler Dialog: Informationen Modaler Dialog: Benutzerbestätigung Geringe Übersichtlichkeit bei großer Anzahl geöffneter nicht modaler Dialoge Bei nicht modalen Dialogen, Maximieren unterbinden Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 24

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Wahrnehmung: Einfachheit Ähnlichkeit Fortgesetzt durchgehende Linie Nähe Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 25

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Dialog – Wahrnehmung: Linear ausgerichtete Steuerelemente können schneller überflogen werden Optische Strukturlinien Gruppen werden als ein Ganzes betrachtet Geringere Belastung für die Augen Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 26

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Dialog – Proportionen und Größen: Breite Dialoge sind angenehmer als schmale Breite-Höhe-Verhältnis: 1:1 2:1 3:2 Scrollen vermeiden Größen- und Positionsänderung von Steuerelementen beachten Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 27

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Dialog – Lesereihenfolge: Natürliche Lesereihenfolge beachten Informative Inhalte oben Benutzereigabe unten Zuerst informieren, dann zur Eingabe auffordern Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 28

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Dialog – Ausrichtung: Mehrspaltige Ansicht vermeiden (max. 2-3) Ausrichtung der Steuerelemente einheitlich halten Überschriften und Eingabefelder linksbündig, Beschriftungen rechtsbündig Alles linksbündig Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 29

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Dialog – Gruppierung: Gruppierung nach inhaltlichen Aspekten Nicht mehr als 5 Gruppen pro Dialog Trennung durch größere Abstände oder horizontale Linien ist eleganter als Gruppenkästen Tabulatornummerierung nach Lesereihenfolge Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 30

Anwendung in der Praxis Wahrnehmbarkeit Übersichtlichkeit Orientierungs- förderlichkeit Lernförderlichkeit Selbstbeschrei- bungsfähigkeit Steuerbarkeit Aufgaben- angemessenheit Individualisier- barkeit Lenkbarkeit der Aufmerksamkeit Dialog – Fluchtlinien und Abstände: Einheitliche Abstände zwischen Steuerelementen Überflüssige Fluchtlinien vermeiden Abstände verdeutlichen die Beziehung zwischen den Steuerelementen Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 31

Anwendung in der Praxis Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 32

Anwendung in der Praxis Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 33

Anwendung in der Praxis Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 34

Anwendung in der Praxis Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 35

Fazit Vorteile von ergonomischer Software: Geringere physische Belastungen für den Benutzer Weniger Bedienungsfehler Schnellere und bessere Aufgabenerfüllung Geringere Schulungskosten Höhere Attraktivität und Marktchancen der Software Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 36

Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 37

Danke für Ihre Aufmerksamkeit Fragen?

Quellen Herzog, Michael (2009): Software-Ergonomie – Theorien, Modelle und Kriterien für gebrauchstaugliche interaktive Computersysteme, 3. Auflage, Oldenburg Verlag München Erning, Stefan (2007): RealTime GUI Style Guides, INFORM GmbH Microsoft (2007): Windows Vista User Experience Guidelines E.B. Goldstein (1997): Wahrnehmungspsychologie: Eine Einführung, Spektrum Akademischer Verlag GmbH Wikipedia: Software-Ergonomie Wikipedia: Usability engineering Wikipedia: Grafische Benutzeroberfläche, Wikipedia: Icon (Computer) ergo-online: Software-Ergonomie und Benutzungsfreundlichkeit ergo-online: Was ist Software-Ergonomie? ergo-online: Fluchtlinien und Abstände Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 39

IFIP-Model Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 40

Gesetzliche Vorgaben Arbeitsschutzgesetz (ArbSchG) Bildschirmarbeitsverordnung (BildscharbV) Barrierefreie Informationstechnik-Verordnung (BITV) Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 41

Gestaltungsgesetze nach Goldstein Gesetz der Einfachheit Gesetz der Ähnlichkeit Gesetz der fortgesetzt durchgehenden Linie Gesetz der Nähe Gesetz des gemeinsamen Schicksals Gesetz der Vertrautheit Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 42

Benutzerschnittstellen Kommandozeilen (engl. Command Line Interface; Abk.: CLI) Zeichenorientierte Benutzerschnittstellen (engl. Text User Interface; Abk.: TUI) Grafische Benutzerschnittstellen (engl. Graphical User Interface; Abk.: GUI) Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 43

Benutzerschnittstellen Sprachbasierte Benutzerschnittstellen (engl. Voice User Interfaces; Abk.: VUI) Anfassbare Benutzerschnittstellen (engl. Tangible User Interface; Abk.: TUI) Natürliche Benutzerschnittstellen (engl. Natural User Interface; Abk.: NUI) Wahrnehmungsgesteuerte Benutzerschnittstellen (engl. Perceptual User Interface; Abk.: PUI) Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 44

Softwareergonomische Erkenntnisse GesetzeNormenEmpfehlungenStyleguidesTools QuelleGesetzestexte und Verordnungen Öffentliche Dokumente Bücher und Berichte firmeninterne Dokumente Software Produkte Verfügbarkeitöffentlichfrei käuflichmeist öffentlichMeist proprietäröffentlich oder proprietär DurchsetzungGesetzgeberVertragAbspracheMana-gementTechnik Spezifitätsehr allgemeinallgemeinallgemein bis anwendungs- spezifisch produktions- spezifisch technologie- spezifisch Anpassungpraktisch nicht möglich generell möglichim Einzelfall möglich aufwändig oder nicht möglich Abweichungim Gesetz festgelegte Ausnahme- regelungen formale Ausnahme- regelungen informelle Absprache mit Antrag und Review keine VorteileMindest- standards zum allgemeinen Arbeitsschutz Allgemeine Standardisierung Flexibel und aktuell Klarheit und verbesserte Qualität; einheitliche Produkte einheitliche Produkte und Zeitgewinn Nachteileunspe-zifischunspezifisch und oft veraltet interpretations- bedürftig unflexibel Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 45