Human Computer Interaction. Übersicht. Einführung. Einführung. Visuelle Variablen. Harmonie Proportionen. Gestaltprinzipien

Transkript

1 Human Computer Interaction Gestaltung und Implementierung effizienter Benutzungsschnittstellen V-02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Johann Wolfgang Goethe-Universität Übersicht Einführung Visuelle Variablen Harmonie Proportionen Gestaltprinzipien 2 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Einführung Weitaus größeren Einfluss auf die Akzeptanz von Software und Benutzungsschnittstellen hat die Gestaltung der Erfahrung, die ein Anwender erfährt Informationslayout Screenlayout Storytelling Moden 3 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 1

2 Grundregeln zur Gestaltung Weniger ist oft mehr! Gute Lesbarkeit ist oberstes Gebot Bescheidenheit im Einsatz der Mittel Beschränkung auf wenige Ideen Zu viele Effekte nehmen sich gegenseitig die Wirkung Nach: 4 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Optische Achsen Optische Achsen sind zum Beispiel Satzkanten oder die Ränder von Bildern Je mehr optische Achsen auf einem Blatt verteilt sind, desto schwieriger ist gute Typografie. Besonders heikel wird es, wenn die Achsen noch verschiedene Winkel haben 5 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Optische Mitte Wann sitzt ein Objekt (Punkt, Text) genau in der Mitte? Es handelt sich hierbei also um eine optische Täuschung. Rechtes Beispiel (beinahe zuviel) nach oben geschoben. Sitzt also weit über der Mitte! Aber trotzdem befindet er sich scheinbar in der Mitte des Blattes. Man nennt dieses Phänomen optische Mitte. Sie befindet sich immer etwas über der tatsächlichen (geometrischen) Mitte. Deshalb ist der untere Rand bei Büchern fast immer größer als der obere. 6 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 2

3 Eleganz und Einfachheit Eleganz Ziel des Entwurfsprozesses eligere (lat.): (sorgfältig) auswählen Einfachheit Zentrales Element zur Erreichung von Eleganz Erhöht Verständlichkeit Wiedererkennbarkeit Einfachen Zugang Usability 7 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Eleganz und Einfachheit Prozess zur Erreichung von Eleganz und Einfachheit Vereinheitlichung Zusammenführung der Gestaltungselemente zu einem einheitlichen Ganzen Verfeinerung Zielgerichtete Anpassung an Erfordernisse (Ziel, Betrachter, Kontext) Eignung Überprüfung der Fitness des Entwurfs nach jedem Entwurfszyklus Typische Fehler Überfrachtung des Designs (Clutter) Gegenseitiges Stören visueller Elemente Komplexe visuelle Strukturen Zu hoher Detailgrad der graphischen Elemente 8 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Skalierung, Kontrast und Proportion Information consists of differences that make a difference. (Edward Tufte, 1990) Skalierung Relative Größe bzw. Faktor eines Gestaltungselements in Relation zu allen anderen Elementen Kontrast Erkennbare Unterschiede zwischen den Gestaltungselementen in den visuellen Dimensionen Position, Größe, Farbe, Textur, Form, Orientierung, Bewegung Grundlage für Unterscheidbarkeit, Betonung, Interessenssteuerung, etc. Element zur Erreichung Klarheit im Design durch bewussten Einsatz zur Unterscheidung von Elementen Proportion Balance und Harmonie der Verhältnisse zwischen Gestaltungselementen Kein absolutes Maß! 9 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 3

4 Graphische Semiologie (Graphical Semiotics) Graphische Semiologie Wissenschaft der graphischen Zeichen und Symbole Basiert auf tausende Jahre alten Traditionen Wissenschaften mit Bezug zu dieser Thematik Theologie, Philosophie, Anthropologie, Psychologie,..., Kartographie,..., Visualisierung Grundlegende Arbeiten von Jacques Bertin The Semiology of Graphics, 1982 Grundlage der modernen Visualisierung 10 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Visuelle Variablen (Grundelemente der Gestaltung) 8 Visuelle Variablen nach Bertin, 1982 Position (x und y) Fläche, Größe Helligkeit Textur Neigung, Orientierung Form, Gestalt Farbe 11 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Visuelle Variablen Zusätzliche visuelle Variablen Länge Volumen Farbton Sättigung Winkel Verbindung Enthaltung 12 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 4

5 Visuelle Variablen Bewegung Veränderung Blinken 13 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Eigenschaften Visueller Variablen Selektiv Spontane Gruppierung beim menschlichen Betrachter Besonders nützlich zur Visualisierung nominaler Daten Weitere Unterscheidung: Assoziativ vs. Nicht assoziativ Assoziativ: alle Variablen haben bei Benutzung dieser Variablen weiterhin die gleiche Sichtbarkeit Ordinal Spontane Anwendung einer Ordnung beim menschlichen Betrachter Besonders nützlich zur Visualisierung ordinaler Daten Proportional Spontane Anwendung einer Ordnung beim menschlichen Betrachter Direkte Assoziation eines Wertes Besonders nützlich zur Visualisierung ordinaler und quantitativer Daten 14 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Visuelle Variablen Bertin B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 5

6 Hohe Effektivität Geringe Effekt. Quantitativ Ordinal Nominal Position Position Position Länge Helligkeit Farbton Winkel Sättigung Textur Neigung Farbton Verbindung Fläche Textur Enthaltung Volumen Verbindung Helligkeit Helligkeit Enthaltung Sättigung Sättigung Länge Form Farbton Winkel Länge Textur Neigung Winkel Verbindung Fläche Neigung Enthaltung Volumen Fläche Form Form Volumen Nach Mackinlay 1986 mit Adaptionen 16 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Harmonie - Proportionen Harmonie Effekt des Erreichens eines einheitlichen und gefälligen Gesamteindrucks Als harmonisch empfundene Verhältnisse 1:2 2:3 3:4 Quadrat (1:1) Goldener Schnitt Vitruvian-Mensch von Leonardo da Vinci 17 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Goldener Schnitt Zwei Strecken stehen im Verhältnis des Goldenen Schnittes, wenn sich die größere zur kleineren verhält wie die Summe aus beiden zur größeren Verhältnis wird mit dem griechischen Buchstaben Φ (Phi) bezeichnet Sei a die längere und b die kürzere Strecke, so gilt: 18 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 6

7 Viele geometrische Konstruktionsmethoden 1. Errichte auf der Strecke AB im Punkt B eine Senkrechte der halben Länge von AB mit dem Endpunkt C. 2. Der Kreis um C mit dem Radius BC schneidet die Verbindung AC im Punkt D. 3. Der Kreis um A mit dem Radius AD teilt die Strecke AB im Verhältnis des Goldenen Schnittes Viele weitere, siehe z.b. Wikipedia 19 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Goldener Schnitt Geschichte des goldenen Schnitts Erste Erwähnung: Hippasos von Metapont (um 450 v. Chr.) Analytische Auseinandersetzung: Euklid ( v. Chr.) Anwendung Cheops-Pyramide Vorderfront des Panthenon Dom von Florenz, Notre Dame Alte Rathaus in Leipzig, ein Renaissancebau aus den Jahren 1556/57. Panthenon Tempel, Athen 20 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Goldener Schnitt Moderne Anwendung Le Corbusier ( ): Modulor Auf der Mathematik und den menschlichen Körperverhältnissen aufgebautes Maßsystem auf Grundlage des goldenen Schnitts 21 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 7

8 Organisation und visuelle Struktur Organisation und visuelle Struktur Wichtiges Element, um dem Anwender einen strukturierten Zugang zu ermöglichen Erste Form der Information, die wahrgenommen wird Leitet die Interaktion Gestaltprinzipien als Leitfaden zur Schaffung von Struktur Gruppierung Hierarchisierung Schaffung von Beziehungen Balance 22 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Gestalt-Prinzipien Thurston B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Gestalt-Prinzipien Andere Bezeichnung Gestalt-Gesetze Aber: keine formalen Gesetze, keine absolute Gültigkeit, kein Beweis Thema Verschiedene Phänomene der höheren Wahrnehmung (im Gegensatz zum frühen Sehen) Organisatorische Prinzipien als grundlegende Prozesse der menschlichen visuellen Wahrnehmung Holistische Natur der menschlichen Wahrnehmung Das Ganze unterscheidet sich von der Summe seiner Teile. Grundlage Frankfurter Schule der Gestalt-Psychologie (seit 1912) Max Wertheimer, Kurt Koffka, Wolfgang Kohler, B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 8

9 Gestalt-Prinzipien "Laws of Oranization in Perceptual Forms" (Wertheimer 1923) Prinzip der Nähe (Proximity) Prinzip der Ähnlichkeit (Similarity) Prinzip der stetigen Fortsetzung (Continuity) Prinzip der Konvexität (Geschlossenheit, Closure) Prinzip des Gemeinsamen Schicksals (Common Fate) Prinzip der Prägnanz 25 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Gültigkeit der Gestalt-Prinzipien Die damaligen Erklärungen entsprechen nicht dem heutigen Wissensstand Prinzipien selbst sind jedoch nach wie vor gültig und Grundlage wichtiger Gestaltungsregeln 26 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Prinzip der Nähe (Proximity) Näheres wird als zusammenhörig empfunden Eines der wirksamsten Prinzipien Einfachste und mächtigste Möglichkeit eine enge Beziehung zwischen Entitäten auszudrücken 27 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 9

10 Prinzip der Nähe (Proximity) Spätere Erweiterung und Generalisierung: Prinzip der räumlichen Konzentration (Principle of Spatial Concentration, Slocum 83) 28 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Prinzip der Ähnlichkeit Gleiches (oder fast gleiches) wird als zusammengehörig empfunden Farbe (Helligkeit hier) gruppiert stärker als Form 29 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Prinzip der stetigen Fortsetzung (Continuity) Es werden eher einfache, regelmäßigere, glatte oder kontinuierliche Formen wahrgenommen im Gegensatz zu solchen mit abrupten Änderungen 30 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 10

11 Anwendung des Prinzips der stetigen Fortsetzung Anwendung des Prinzips der stetigen Fortsetzung in Blockdiagrammen Verbindungen zwischen Diagrammelementen werden einfacher erkannt, wenn die Linien kontinuierlich und glatt sind 31 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Prinzip der Konvexität Konvexe Konturen werden bevorzugt geschlossen und bevorzugt wahrgenommen 32 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Anwendung des Prinzips der Geschlossenheit Venn Diagram: Elemente können zu A und C gehören, aber nicht zu A, B, und C Alle Elemente, die die sowohl zu B als auch zu C gehören, sind auch Elemente von D 33 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 11

12 Prinzip der Verbundenheit (Connectedness) Prinzip der Verbundenheit (Connectedness) Ergänzung von Palmer und Rock, 1994 Verbundenheit ist stärker als Nähe, Farbe, Größe, Form 34 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Anwendung: Knoten-Kanten-Diagramme 35 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker wm1 Prinzip der Symmetrie (Symmetry) 36 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 12

13 Folie 36 wm1 Meines Wissens gibt es kein Prinzip der Symmmetrie. Dies ist dann das Prägnanz-Prinzip! Wolfgang Mueller;

14 Prägnanzprinzip Prägnanzprinzip (engl. Simplicity, Prägnanz) Nicht direkt von Wertheimer als Prinzip genannt, aber in Verbindung mit der Prinzip der guten Gestalt erwähnt "Of several geometrically possible organizations that one will actually occur which posesses the best, simplest, and most stable shape." (Koffka 1935) 37 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Prinzip des Gemeinsamen Schicksals Objekte, die sich gemeinsam bewegen, werden als zusammengehörig erkannt 38 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Prinzip der Relativen Größe (Relative Size) Kleinere visuelle Komponenten werden eher als Objekte wahrgenommen Beispiel: Propeller vor weißem Grund Beachte: generell werden horizontale oder vertikale Strukturen gegenüber diagonalen häufiger als Objekte erkannt 39 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 13

15 Figur-Grund-Trennung Visuelles System unterscheidet Vordergrund (Objekte, Figuren) und Hintergrund bereits in den frühen Stufen der Wahrnehmung (Rubin 1915) Grundlage für die Objektidentifikation Rubin 1921 Viele Einzelelemente (geschlossene Konturen, Symmetrie, weiße Fläche als Hintergrund,...) tragen dazu bei Klare geometrische Strukturen sind nicht erforderlich Escher 40 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Figur-Grund-Trennung Turston 1986 Kanizsa Triangle 41 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Organisation und visuelle Struktur Techniken zur Kommunuikation visueller Struktur und Organisation Symmetrie zur Erreichung von Balance Ausrichtung für visuelle Beziehungen Schaffung von Strukturen für das menschliche Auge durch Ausrichtung Negative Space: Schaffung von Kontrast durch Verwendung von Leerflächen 42 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 14

16 Organisation und visuelle Struktur Häufige Fehler Keine oder inhaltlich falsche Strukturen Falscher Einsatz von Symmetrie Unklare innere Strukturen (z.b. bzgl. Hierarchien) Fehlende oder mangelhafte Ausrichtung graphischer Elemente Information Overload 43 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Gestaltungsraster Grundlage der meisten typografischen Entwürfe Kein universelles Raster, sondern angepasst an Medium Größe der Darstellungsfläche Gestaltungselemente, die verwendet werden sollen Zielgruppe und kommunikatives Ziel Satzspiegel mit Rändern im Verhältnis 2:3:4:5 Klassische Konstruktion für einen Satzspiegel 44 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Gestaltungsraster 3-spaltiges Raster Raster mit 5 Spalten und Bildbereichen 45 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 15

17 Was ist Farbe? Farbe ist ein durch das Auge vermittelter Sinneseindruck, also eine Gesichtsempfindung. Die Farbe ist diejenige Gesichtsempfindung eines dem Auge strukturlos erscheinende Teils des Gesichtsfeldes, durch die sich dieser Teil bei einäugiger Beobachtung mit unbewegtem Auge von einem gleichzeitig gesehenen, ebenfalls strukturlosen angrenzenden Bezirk allein unterscheiden kann. (DIN 5033 Farbmessung, Teil 1, 1979) 46 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Farbe: Wahrnehmung basierend auf der sensorischen Reaktion auf elektromagnetische Strahlung Farbe und sichtbares Licht Visible Light X-Ray UV IR microwave radio λ [ m] λ [ nm] B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Alle darstellbare Farben als Punkte eines Einheitswürfels Primärfarben Rot, Grün und Blau Das auf den RGB-Modell positiven Halbachsen Eigenschaften: Schwarz im Ursprung (0,0,0) Weiß im Punkt (1,1,1) Grauwerte, darstellbar durch gleichgroße Anteile von R, G und B, liegen auf der Hauptdiagonalen des Einheitswürfels 48 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 16

18 H=Hue, L=Lightness, S=Saturation HLS Model 49 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Das HLS-System (H=Hue (Farbton), L=Lightness (Helligkeit), S=Saturation (Sättigung). Die Farbanordnung entspricht der senkrechten Projektion des RGB- Würfels HLS-Modell von Weiß nach Schwarz entlang der Hauptdiagonalen (siehe Applet). Das entstehende regelmäßige Sechseck wird meist durch einen Kreis ersetzt, so daß der Farbton (H) als Winkel zwischen und anzugeben ist. Das H'L'S'-System entsteht durch Verschieben von Grün in Richtung Blau. Dadurch liegen Rot, Gelb und Blau gleich weit voneinander entfernt, was der Farbempfindung besser entspricht. Detlef Krömker 50 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Die Helligkeit (L) wird als Wert zwischen 0 und 1 angegeben, wobei 0 Schwarz und 1 Weiß entspricht. Die Sättigung (S) wird als Abstand einer Farbe vom Mittelpunkt des Farbkreises angegeben. Sie beträgt 0 für achromatische HLS-ModellFarben und kann als höchsten Wert 1 für die gesättigten Farben auf dem Rand des Farbkreises annehmen. Bei Farben mit der Helligkeit 0.5 ist die volle Sättigung 1 möglich. Mit zunehmender oder abnehmender Helligkeit nimmt die maximal mögliche Sättigung ab. Je nachdem, ob die Sättigung absolut oder relativ zur maximal bei einer bestimmten Helligkeit erreichbaren Sättigung angegeben wird, verwendet man deshalb das Doppelkegelmodell oder das Zylindermodell. Detlef Krömker 51 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 17

19 CIE XYZ Color System (1931) X Korrespondiert grob dem Rot-Grün-Anteil Keine Helligkeit Y Korrespondiert exakt der empfundenen Helligkeit Z Korrespondiert grob dem Blau-Gelb-Anteil Keine Helligkeit 52 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker CIE Chromaticity Diagram C Hue (based on dominant wave length) B A Saturation/Purity AB S = AC White point 53 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker CIE Chromaticity Diagram E D Opponent Color AD AE = AB AC A B C White Point Tristimulus Value 54 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 18

20 Farbordnungssysteme Grundlage: Farbkreis (Hering): Viele verschiedene Systeme: Ostwald (1931), Munsell (1929), OSA (1974), NCS (1970), Chroma Cosmos 5000 (1979) 55 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Einsatzgebiete für Farbe Farbe kann für folgende Aufgaben eingesetzt werden Lenken der Aufmerksamkeit Gruppierung von Merkmalen durch Visualisierung qualitativer Aspekte Visualisierung ordinaler Daten Visualisierung quantitativer Daten 56 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Ordinale Daten Je nach Aufgabe: Suchen und Identifizieren: Wahl wie bei nominalen Daten Übersicht oder Vergleichen: Abbildung auf Farbskalen wie bei quantitativen Daten Beispiel: modifizierter Farbkreis Problem: Werden diese Größen dann auch als quantitative Größen interpretiert? 57 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 19

21 Quantitative Daten Beachte: Immer nur einen Teil der Buntton-Skala Benutzen Die zwei unteren Verfahren erlauben den Einsatz von Farbtabellen (Color-Look-Up-Table) 58 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Farbskalen Typen von Farbskalen Grauwertskalen: Variation der Helligkeit Farbskalen: Variation der Farbart (Sättigung und Farbton) Aspekte von Farbskalen Abbildung auf RGB i.d.r. nicht effizient und wenig effektiv Abbildung auf HSV, HLS, o.ä. möglich Spezielle Farbskalen i.d.r. effizienter 59 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Grauwertskalen ν i Y i = Y ( ) 3 nach Stevens Man 0 + Y verwende empfindungsmäßign Y0 mitν gleichabständige Stufen, etwa nach folgender n Formel: Berücksichtigt man ν die nötige Gammakorrektur (für Farbmonitore 2,3... 2,8), so erhält γ man: i Yi = Y + n ( Y ) 0 n Y 0 Kuriosum: Diese Zwei Effekte korrigieren sich fast selbst! 60 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 20

22 Aufgabe: Bringen Sie die Farbe in eine Ordnung! Farbskalen 61 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Farbskalen Gray scale Full spectral scale Single sequence part spectral scale Single sequence single hue scale Double-ended multiple hue scale 62 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Einige Regeln für den Einsatz von Farbskalen Wenn eine wahrnehmungsmäßig geordnete Sequenz benötigt wird, bevorzuge man eine Grauwertskala, Rot-Grün Skala Gelb-Blau Skala Sättigungsskala 63 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 21

23 Einige Regeln für den Einsatz von Farbskalen Verschiedene Skalen sind für verschiedene Detailgrade unterschiedlich gut geeignet: Großer Detailreichtum Luminanzskalen Geringerer Detailreichtum Farton- oder Sättigungsskalen 64 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Einige Regeln für den Einsatz von Farbskalen Uniforme Skalen können durch Verwendung von CIELUV (CIELAB) gewonnen werden. Achtung: Manchmal sollen spezielle Eigenschaften durch nichtuniforme Skalen hervorgehoben werden! 65 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Einige Regeln für den Einsatz von Farbskalen Für ein Ablesen von Datenwerten sollte man Farbskalen benutzen, die durch viele Farbarten charakterisiert ist Minimiert Fehler durch Farbkontrast Oft ist eine Spiralskala, z.b. im CIELUV-Farbraum sehr gut Alle Farben unterscheiden sich auch in der Helligkeit 66 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 22

24 Einige Regeln für den Einsatz von Farbskalen Durch Wahrnehmungseffekte erscheinen kontinuierliche Skalen oft diskret Um Formen und Strukturen in Wertefeldern wahrnehmbar darzustellen, ist die Betrachtung der Daten als Höhenfeld und ein Standard-Shading der CG oft effizienter als Farbskalen 67 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Farbfehlsichtigkeit Farbe wird nicht von allen Personen gleich wahrgenommen Farbfehlsichtigkeit Abnormale Farbwahrnehmung Ca. 8% der männlichen und ca. 0.4% der weiblichen Bevölkerung Häufig nur für kleine Sehwinkel (< 2 0 ) Betroffene Personen wissen häufig nichts von ihrer Farbfehlsichtigkeit 68 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Anomaler Trichromatismus Dichromatismus Monochromatismus Farbfehlsichtigkeit Protanomalie (Rot) ca. 1% Deuteranomalie (Grün) 5-6% Tritanomalie (Blau-Gelb) 0,004% Tests: Ishihara-Test Farnsworth Munsell 100 Hue Test 69 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 23

25 Farbfehlsichtigkeit Anomalien Wahrgenommener Farbraum kann mit immer noch mit 3 Primärvalenzen beschrieben werden Protanomalie Schwäche in der Rot-Grün Wahrnehmung (Schwäche im Rot-Bereich) ca 1% der Bevölkerung Deuteranomalie Schwäche in der Rot-Grün Wahrnehmung (Schwäche im Grün-Bereich) 5-6% der Bevölkerung 70 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Allgemeine Regeln zur Visualisierung mit Farbe Verwende Farbe mit Zurückhaltung: Weniger ist mehr! Verwende Farbe zur Gruppierung und zur Unterstützung beim Suchen Betone das Interessante und vermeide das Störende Verwende gewohnte Farbkodierungen: Nutze Metaphern des Anwendungsgebietes Gestalte für Nutzer mit Farbanomalien Say it again! Farbe für redundante Kodierungen Verwende einen angemessenen Level-of-Detail! 71 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Allgemeine Regeln zur Visualisierung mit Farbe Verwende blau für großflächige Bereiche, keine dünnen Linien Verwende rot und grün im Zentrum der Blickfeldes Randbereiche der Retina sind nicht sensitiv für diese Farben Verwende schwarz, weiß und gelb in der Peripherie Verwende Farben für benachbarte Regionen, die sich in Farbton und Helligkeit unterscheiden; Vermeide die Verwendung verschiedener Blautöne für benachbarte Regionen Verwende möglichst nicht mehrere hoch gesättigte Farben, insbesondere mit großen spektralen Unterschieden, zusammen Vermeidung von Nachbildern Berücksichtige mögliche Farbverschiebungseffekte benachbarter Farbflächen 72 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 24

26 Color can Soothe or strike the eye Color Add accents to an uninteresting display Facilitate subtle discriminations in complex displays Emphasize the logical organization of information Draw attention to warnings Evoke string emotional reactions of joy, excitement, fear, or anger 73 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Guidelines Use color conservatively Limit the number and amount of colors Recognize the power of color to speed or slow tasks Color coding should support the task Color coding should appear with minimal user effort Color coding should be under user control Design for monochrome first Consider the needs of color-deficient users Color can help in formatting Be consistent in color coding Be alert to common expectations about color codes Be alert to problems with color pairings Use color changes to indicate status changes Use color in graphic displays for greater information density 74 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Typographie Typografie Als Kunst oder Kunsthandwerk verstandene Gestaltung einer Textseite, eines Plakats oder eines gesamten Dokuments mittels Schrift, Bildern, Linien, Flächen (Weißräume) und Farben Handwerk mit langer Tradition: Anfänge des Buchdrucks im Mittelalter Mikrotypografie Schriftgestaltung Makrotypografie Layout einer gesamten Seite oder Publikation. Typografie und Computer Übernahme vieler der traditionell gewachsenen Regeln Neuinterpretation, aber auch Verletzung einiger Regeln Studium der Typografie Theorie und sehr viel Praxis: in Vorlesung allein nicht vermittelbar! Begabung 75 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 25

27 Schriften Schriftart, Schrift (Typeface) In der Typografie die grafische Gestaltung eines Zeichensatzes. Schriften werden unterteilt in Schriftgruppen (Klassen, Familien, Kategorien) DIN legt verschiedene Schriftgruppen fest Aspekte von Schriftfamilien Proportional vs. nicht proportional Mit Serifen vs. serifenlos Serifen: kleine horizontale Endlinien an Buchstaben, an denen sich das Auge orientieren kann Serifenbehaftete Schriften eignen sich für gedruckten Fließtext Schriften ohne Serifen auf Entfernung besser erkennbar Nutzung für Plakate 76 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Gruppe Franz. Barock-Antiqua Schriftfamilien nach DIN (Auswahl) Barock-Antiqua Bemerkung Entwickelt um 1540, insb. Claude Garamond Blütezeit ca Zeichensätze z.b. Garamond, Bembo, Goudy, Palatino z.b. Baskerville, Tiffany, Times-Antiqua Beispiel Klassizistische Antiqua Ca. 1800, Bodoni und Didot Bodoni-Antiqua, Didot, Madison-Antiqua, Torino, Serifenlose Linear- Antiqua Erste Hälfte 19. Jahrhundert; alte Bezeichnung: Grotesk Avant Garde, Franklin Gothic, Frutiger, Futura, Helvetica, Lucida, Rotis Sans, Univers 77 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Zeichensatz Bemerkung Beispiel Andale Arial Microsoft's freie Version der klassischen Monotype (Gleichmäßige Zeichenbreite) Schriften für Computereinsatz P. Sunders, R. Nicholas/Microsoft Frei verfügbarer Ersatz für Helvetica a e f g AM Lucida Sans Tahoma Verdana K. Holmes entworfen. Eine der ersten für Computereinsatz optimierten Schriften Microsoft, Frei verfügbar. M. Carter / Microsoft, Frei verfügbar a e f g AM a e f g AM a e f g AM 78 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 26

28 Schriftstärke und Schriftschnitt Schriftstärke (Font Weight) Gewicht bzw. Größe der Zeichen Schriftschnitte (Font Style) Normal (book, medium): normaler Text Fett (bold): Auszeichnungen Kursiv (italic): Hervorhebungen, Bildlegenden, Zitate extra schmal (condensed) Extra breit (extended) 79 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Beispiel: Frutiger 80 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Bemaßung und Schriftsatz 81 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 27

29 Regeln für Schrifteinsatz Mehr als zwei verschiedene Schriften erzeugen Unruhe Ähnliche Schriften nicht mischen Besser eine Serifenschrift mit einer serifenlosen mischen Auch der inhaltliche Aufbau kann so nicht mehr sinnvoll und logisch dargestellt werden Innerhalb einer Schriftfamilie darf gefahrenlos gemischt werden Die Visualisierung von Daten beinhaltet die Erzeugung von Bildern und Bildsequenzen, welche die Eigenschaften dieser Daten veranschaulichen. Hierzu werden die Eigenschaften dieser Datenmengen auf visuelle Attribute abgebildet. Diese Abbildungen können dabei von elementarer Form sein, wie etwa bei der Abbildung von Datenwerten auf Farb- und Texturattribute, oder äußerst komplexer Form, wie bei der Visualisierung von komplexen natürlichen Prozessen durch dreidimensionale Darstellungen verbunden mit Animationen. Ziel ist es in jedem Fall, die in den Daten verborgenen Zusammenhänge darzustellen. 82 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Regeln für Schrifteinsatz Zeilen über die ganze Papierbreite Erschweren Gestaltung Text in mehrere mehrere schmalere Satzblöcke (Spalten) aufteilen. Die Visualisierung von Daten beinhaltet die Erzeugung von Bildern und Bildsequenzen, welche die Eigenschaften dieser Daten veran-schaulichen. Hierzu werden die Eigenschaften dieser Datenmen-gen auf visuelle Attribu-te abgebildet. Diese Abbildungen können dabei von elementarer Form sein, wie etwa bei der Abbildung von Datenwerten auf Farb- und Texturattribute, oder äußerst komplexer Form, wie bei der Visualisie-rung von komplexen natürlichen Prozessen durch dreidimensionale Darstellungen verbun-den mit Animationen. Ziel ist es in jedem Fall, die in den Daten verbor-genen Zusammenhänge darzustellen. Bertin unterscheidet drei verschiedene Stufen der Information, die in einem Bild ver-mittelt oder dargestellt werden können ([Bertin 82]). Auf der ersten Stufe, der elementaren Stufe, wer-den die vorliegenden grundlegenden Informationen in direkter Form abgebildet. Das heißt, zu jeder Infor-mation existiert im Bild eine entsprechende Repräsentation in Form einer spezifi-schen Ausprägung von visuellen Attributen. Die zweite Stufe, die mittlere Stufe, dient bereits zur Abstraktion von den elementaren Informationen. Auf dieser Stufe werden das Wesentliche und die Ergebnisse der Untersuchung verdeutlicht. 83 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Schriftsatz Linksbündiger Flattersatz Linksbündige Ausrichtung mit gleichmäßigen Wortabständen Blocksatz Sowohl links- wie rechtsbündige Ausrichtung durch Streckung der Wortabstände Mittelachsensatz (zentrierter Satz) Möglichst vermeiden Insbesondere Mischen von symmetrischem und asymmetrischem Satz vermeiden Rechtsbündiger Flattersatz Rechtsbündige Ausrichtung mit gleichmäßigen Wortabständen Besonders bei längeren Texten findet das Auge die Zeilenanfänge schlechter wieder als beim linksbündigen Satz 84 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 28

30 Vorteile Nachteile Flattersatz Schriftsatz Blocksatz wirkt leicht und modern gut für kurze Zeilen kommt ohne viele Worttrennungen aus für Computer leicht zu verarbeiten saubere Ränder, sieht aus 'wie gedruckt' gut für längere Zeilen lange Zeilen schwerer lesbar typischerweise unschöne Zackenbildung am rechten Rand nicht für längere Druckwerke geeignet funktioniert nur mit gutem Trennalgorithmus nicht für kurze Zeilen geeignet 85 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Hausaufgabe Lesen Sie Kapitel 10 von Shneiderman/Plaisant: Designing the User Interface! 86 B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker Weiterführende Literatur Kevin Mullet, Darrell Sano: Designing Visual Interfaces Communication Oriented Techniques, SunSoft Press, 1995, ISBN Donald A. Norman. The Psychology of Everyday Things. New York: Basic Books, ISBN B-HCI V 02 Elemente des Screen Designs Prof. Dr. Detlef Krömker 29

31 ENDE 30