HCI-10 GUI-Gestaltung

Transkript

1 HCI-10 GUI-Gestaltung Ø Grundregeln für graphische Benutzerschnittstellen BHT Berlin Ilse Schmiedecke 2014

2 Die umfassende Sammlung konstruktiver Regeln Herausgegeben vom der US- Gesundheitsbehörde "Health and Human Services (HSS)" Erarbeitet zusammen mit der Univ. Maryland, Ben Shneiderman E-Book zur Webseite dort frei herunterladbar. 18 Praxis-Kapitel: Design Process and Evaluation Optimizing the User Experience Accessibility The Home Page Page Layout Navigation Scrolling and Paging Headings, Titles and Lables etc. (c) schmiedecke 13 HCI-1-Einführung 2

3 Grundregeln der GUI-Gestaltung Gleichförmigkeit und Plattformanpassung Minimalistisches Design Klare Struktur Verständliche Interaktion Effiziente Informationscodierung Offener Text schmiedecke 16 MCK 3

4 Gleichförmigkeit der Gestaltung REGEL 1: GLEICHFÖRMIGKEIT Einheitliche "Kultur" der Oberflächen Gliederung, Raster und Positionierung Farbschema Größe und Gestaltung der Bedienelemente Größe und Gestaltung der Icons Bedeutung der Bedienelemente und Icons eigentlich selbstverständlich schmiedecke 14 MCK 4

5 Gleichförmigkeit Umsetzung gleiche Interaktion hat gleiche Bedeutung in verschiedenen Programmen und Programmteilen einheitliche Feedbackgestaltung, etwa Selektion: Highlighting Aktivierung: Farbwechsel Bewegen: Start und Ziel visualisieren, (nicht) animiert In GUI-Anwendungen einheitliche Menüs, Popups, Slide-ins, Tabbars... einheitliche Icons / Funktionstasten einheitliche Maushandhabung (z.b. Einfach- oder Doppelklick) einheitliche Tastenkürzel (à äußere Konsistenz) einheitliche Gesten und Bewegungen schmiedecke 14 HCI 5

6 Plattformangemessenheit Jede Plattform hat ihre "Kultur" erwartete Innovationen einbeziehen (z.b. Touch) Besonders ausgeprägt bei mobilen Geräten teils notwendig wegen der Geräteeigenschaften besonderer Benutzungskontext zusätzliche Intraktionsmöglichkeiten (Gyro, Kamera...) "Web" gilt als plattformübergreifend ist aber auf mobilen Geräten oft suboptimal schmiedecke 16 MCK 6

7 Minimalistisches Design REGEL 2: MINIMALITISCHES DESIGN Je einfacher ein GUI, desto einladender zugänglicher verstehbarer unmittelbarer brauchbarer wirkt es auf den Benutzer schmiedecke 14 HCI 7

8 Minimalistisches Design Minimalismus ist eine Kunstform: "Minimalismus ist das Streben nach der Essenz der Dinge, nicht nach dem Aussehen" (M. Vignelli) schmiedecke 14 wohnideen.minimalisti.com/architektur/minimalismus-in-weis-moderne-archutektur.html MCK 8

9 Minimalismus.... im Webdesign schmiedecke 14 MCK 9

10 Minimalismus im Grafikdesign geringe Anzahl an Gestaltungselementen wenige, ausgewählte Schriften Großzügiger Einsatz von Weißraum Wenig Farben, Farbgebung meist Weiß, Schwarz oder Grautöne, mit einer Signalfarbe als Eye-Catcher" Anordnung der Elemente nach dem Rasterprinzip Weitgehender Verzicht auf Fotos Verzicht auf Effekte wie Dreidimensionalität oder Farbverläufe schmiedecke 14 MCK 10

11 Minimalismus in der Interaktion Optische Gliederung in logische / benennbare Bereiche Verzicht auf reine Dekoration Reduktion der unmittelbaren Interaktion auf das Wesentliche Auslagerung von erweiterten und Sonderfunktionen Multifunktionale Bedienelemente (Caption, Borderaktionen) Kontextabhängige Interaktion Nur das Machbare ist sichtbar Vermeidung von Alternativen nur eine Interaktionsalternative ist unmittelbar sichtbar / erkennbar Reduktion des Textanteils Symbolsprache, wo möglich Text abrufbar schmiedecke 14 MCK 11

12 Je einfacher, desto benutzerfreundlicher? Alternative GUIs für ein PC-Fax schmiedecke 14 MCK 12

13 Flat Design vs. Skeuomorphismus Skeuomorphismus: Imitation realer Objekte (à Metaphern) Minimalismus: Vollständiger Verzicht auf Dekoration Grafik und Diskussion : schmiedecke 14 MCK 13

14 Einfachheit - Minimalistisches Design Gegenbeispiel: Microsoft Bob Versuch, den Desktop benutzerfreundlicher zu gestalten Fehler zu viel Deko Ablenkung statt Führung schlechte Affordanz Bedienelemente nicht von Deko zu unterscheiden schmiedecke 14 HCI 14

15 Struktur REGEL 3: KLARE STRUKTUR Strukturkriterien Offensichtlichkeit erkennbare Logik Chunking Strukturierungsmittel Whitespace Schichtung Kontrast, Größe, Proportion (sog. visuelle Grundparameter) Raster schmiedecke 14 MCK 15

16 Struktur... schmiedecke 14 MCK 16

17 Unterstützung der Strukturwahrnehmung Interpretation setzt erkennbare Struktur voraus Techniken der visuellen Strukturierung Whitespace, Whitespace, Whitespace Trennlinien, Hintergrundfarbe Symmetrie Ausrichtung (an einer Linie oder einem Gitter) Optischer Ausgleich (scheinbar kleinere Formen vergrößern) schmiedecke 14 HCI 17

18 Unterstützung des logischen Verständnisses Erkennbare logische Einheiten Chunking Überschriften Priorisierung durch Schichtung Anlehnung an die Struktur der Fachdomäne Fachliche Symbolik Layout entsprechend realer Schnittstelle Visualisierung realer Abfolgen Übernahme der fachlichen Topologie schmiedecke 14 MCK 18

19 Chunking durch visuelle Grundparameter Grundparameter: Größe, Kontrast, Proportion stärkster unmittelbarer Eindruck gezielt sinntragend oder unterstützend einsetzen Einsatzziele: Unterscheidung / Wichtigket Visuelle Schichtung Fokus Interesse (u. evtl. Emotionen) wecken Benutzerblick führen Überprüfen mit "Blinzeltest" (oder Brille abnehmen J) schmiedecke 14 HCI 19

20 Schichtung durch visuelle Grundparameter Techniken: Schichten bilden: Gruppen mit max 7 Elementen bilden (Chunking) Gruppen nach Wichtigkeit, Fokus, etc. einstufen Visuelle Grundparameter nutzen, um die Einstufung zu visualisieren à Es entstehen Wahrnehmungsschichten Unterscheidung schärfen z.b. durch weitere Gemeinsamkeit in Gruppen oder gruppenübergreifend (Farbspektrum) ggf. Merkmale hervorheben (z.b. Rechteck Quadrat) Vorder- und Hintergrund abstimmen Platzierung Farbgebung Rahmen, Linien schmiedecke 14 HCI 20

21 Schichtung durch visuelle Grundparameter Schichten: 1. Kopfzeile Inhalt (Fußzeile) 2. Text Grafik 3. Überschrift Punkteliste 4. Normal Hervorgehoben schmiedecke 14 HCI 21

22 Fluchtlinien und Gitter Strukturelle Klarheit: Zahl der Fluchtlinien klein halten Aber Balance ist noch wichtiger! schmiedecke 14 MCK 22

23 Verständlichkeit REGEL 4: VERSTÄNDLICHE INTERAKTION Sichtbarkeit des Systemzustands Affordanz der Bedienelemente linear-logische Abfolge der Interaktionen verständliches Feedback schmiedecke 14 MCK 23

24 Sichtbarkeit des Systemzustands Viele Computerspiele beziehen ihren Reiz daraus, dass der Spieler die richtige Aktion in einer Situation rät. ein Handbuch mit Erläuterungen wäre kontraproduktiv ;) Anwender wollen nicht spielen und nicht raten! Sichtbarkeit: der Systemzustand und die verfügbaren Operationen sind sichtbar (oder systematisch auffindbar) nicht verfügbare Operationen sind unsichtbar der Navigationszustand ist sichtbar schmiedecke 14 HCI 24

25 Affordanz Affordanz: allein durch die Formsprache wird klar, welches Bedienelement wie zu benutzen ist. Übung: Gestalten Sie ein affordantes Steuerelement für Hebebühnen: Bewegung in allen 3 Dimensionen! schmiedecke 14 MCK 25

26 Informationscodierung REGEL 5: EFFIZIENTE INFORMATIONSDARSTELLUNG Ein Bild sagt mehr als 1000 Worte! Aber welche "Bilder" sind wie gut geeignet? schmiedecke 14 HCI 26

27 Codierungsformen für visuelle Darstellungen * Wie viel Information kann jeweils unterscheidbar codiert werden? schmiedecke 13 HCI 27 Quelle: M.Herczeg, Modul MCK der VFH *) Anzahl der absolut, d.h. ohne Vergleich, unterscheidbaren Stufen.

28 Die wichtigsten Codierungsformen Texte: mächtigste Codierungsform mit der Fähigkeit nahezu jede Information zu repräsentieren Farbe: sehr wirksame Codierungsform, vor allem zur Hervorhebung bestimmter Informationskategorien Anordnung: Codierungsform auf der Basis der Gestaltgesetze zur Gruppierung und Isolation von Informationselementen Graphik: Codierungsform, vor allem zur Visualisierung komplexer oder umfangreicher Informationsmengen schmiedecke 13 HCI 28

29 Farbe als Informationscodierung Einsatzmöglichkeiten: Visualisieren von Systemzuständen Hervorheben zusammen gehöriger Inhalte Markieren von Bildschirmobjekten Herstellen von Informationsbeziehungen Trennen von Informationskategorien Aufgliedern gleichartiger Informationen Gliedern langer Dialogabläufe Achtung Falle: Farbe hat auch andere Verwendungen, wie Dekoration, Strukturierung, Aufmerksamkeitslenkung schmiedecke 13 HCI 29

30 Farbbedeutungen Natürliche Farbbedeutungen und Konventionen (Empfehlungen [DoD 1981]): Rot: Alarm blinkend, falls sofortige Reaktion erforderlich Gelb: Vorsicht Grenzsituation; Vorsicht ist geboten Grün: in Ordnung volle Funktionsfähigkeit, Zustand ist zufriedenstellend Weiß: unbestimmt nicht definierbarer Zustand Übergangszustand Darstellung von Alternativen Blau: Hilfsfarbe Informationsgehalt uneinheitlich, eher vermeiden! schmiedecke 13 HCI 30

31 Einsatz von Grafik Datenreduktion bei qualitativen Informationen Informationsdichte Erfassbarkeit sichere Interpretation Abschätzen Vergleichen Erkennen von Anomalien günstig zur Darstellung zeitlicher oder räumlicher Verläufe Erleichterung beim Erkennen von Zyklen und Tendenzen Erleichterung beim Erkennen räumlicher und funktionaler Beziehungen schmiedecke 13 HCI 31

32 Einsatz von Grafik Effizienz durch nicht-analytische Erfassung Manipulationsmöglichkeiten durch Skalierung! schmiedecke 13 HCI 32

33 Beispiel Tachometer: Winkel und Farbe schmiedecke 13 HCI 33

34 Kombination von Codierungen Welche Codierungsformen? Wie wirkungsvoll? Gestaltgesetze? Suggestion? Quelle: dtv-atlas zur Weltgeschichte, Band 2 schmiedecke 13 HCI 34

35 Offener Text REGEL 6: OFFENER TEXT Text hat 2 Funktionen Beschriftung Öffnung durch Kürze soll mit einer Blickspanne erfasst und erkannt werden Textblock muss zeilenweise gelesen und gedeutet werden Öffnung durch Gliederung, Hervorhebung, Kürzung Vollständige Anzeige evtl. erst auf Anforderung (mehr...) schmiedecke 14 HCI 35

36 Text Was wird betrachtet, was übersprungen? schmiedecke 14 HCI 36

37 Text schmiedecke 14 MCK 37

38 Soviel zu den allgemeinen Gestaltungsrichtlinien J Für mobile Geräte gibt es noch Extra-Regeln... schmiedecke 14 MCK 38