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

Präsentation zum Thema: "Gestaltung grafischer Benutzerschnittstellen – Software-Ergonomie Seminarvortrag Olexandr Rudenko Matr.-Nr.: 836382 10. Januar 2012."—  Präsentation transkript:

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

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

3 Motivation Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 3

4 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

5 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

6 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

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

8 Normen Basiskriterien der Gebrauchstauglichkeit: Gebrauchstauglichkeit nach ISO 9241-11: „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

9 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

10 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

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

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

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

14 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

15 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

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 16

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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

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

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

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

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

36 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

37 Gestaltung grafischer Benutzerschnittstellen - Software-ErgonomieOlexandr Rudenko 37

38 Danke für Ihre Aufmerksamkeit Fragen?

39 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

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

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

42 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

43 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

44 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

45 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