1
Hier wird Wissen Wirklichkeit
Human Computer InteractionGestaltung und Implementierung effizienter Benutzungsschnittstellen
V-02 Elemente des Screen Designs
Prof. Dr. Detlef KrömkerJohann Wolfgang Goethe-Universität
Prof. Dr. Detlef KrömkerInstitut für Informatik
2 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Übersicht
‣ Einführung
‣ Visuelle Variablen
‣ Harmonie – Proportionen
‣ Gestaltprinzipien
Prof. Dr. Detlef KrömkerInstitut für Informatik
3 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
2
Prof. Dr. Detlef KrömkerInstitut für Informatik
4 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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: http://www.typolis.de
Prof. Dr. Detlef KrömkerInstitut für Informatik
5 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
6 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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.
3
Prof. Dr. Detlef KrömkerInstitut für Informatik
7 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
8 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
9 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Skalierung, Kontrast und Proportion
‣ 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ß!
Information consists of differences that make a difference. (Edward Tufte, 1990)
4
Prof. Dr. Detlef KrömkerInstitut für Informatik
10 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
11 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Visuelle Variablen (Grundelemente der Gestaltung)8 Visuelle Variablen nach Bertin, 1982
Position (x und y) Textur
Fläche, Größe Neigung, Orientierung
Helligkeit Form, Gestalt
Farbe
Prof. Dr. Detlef KrömkerInstitut für Informatik
12 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Visuelle VariablenZusätzliche visuelle Variablen
Länge Volumen
Farbton Sättigung
Winkel Verbindung
Enthaltung
5
Prof. Dr. Detlef KrömkerInstitut für Informatik
13 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Visuelle Variablen
Bewegung VeränderungBlinken
Prof. Dr. Detlef KrömkerInstitut für Informatik
14 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
15 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Visuelle Variablen
Bertin 1982
6
Prof. Dr. Detlef KrömkerInstitut für Informatik
16 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Quantitativ Ordinal Nominal
Geringe Effekt.
Hohe EffektivitätPosition
LängeWinkel
NeigungFläche
Volumen
HelligkeitSättigung
FarbtonTextur
VerbindungEnthaltung
Form
Position
HelligkeitSättigung
FarbtonTextur
Verbindung
EnthaltungLänge
WinkelNeigung
FlächeVolumen
Form
Position
Helligkeit
Sättigung
FarbtonTextur
VerbindungEnthaltung
LängeWinkel
NeigungFläche
Volumen
Form
Nach Mackinlay 1986 mit Adaptionen
Prof. Dr. Detlef KrömkerInstitut für Informatik
17 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Harmonie - Proportionen
‣ HarmonieEffekt des Erreichens eines
einheitlichen und gefälligenGesamteindrucks
‣ Als harmonisch empfundene Verhältnisse‣ 1:2‣ 2:3‣ 3:4 ‣ Quadrat (1:1)‣ Goldener Schnitt
Vitruvian-Mensch von Leonardo da Vinci
Prof. Dr. Detlef KrömkerInstitut für Informatik
18 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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:
7
Prof. Dr. Detlef KrömkerInstitut für Informatik
19 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
20 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Goldener Schnitt ‣ Geschichte des goldenen Schnitts
‣ Erste Erwähnung: Hippasos von Metapont (um 450 v. Chr.)
‣ Analytische Auseinandersetzung: Euklid (325 - 270 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
Prof. Dr. Detlef KrömkerInstitut für Informatik
21 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Goldener Schnitt
Moderne Anwendung
‣ Le Corbusier (1887 – 1965): Modulor
‣ Auf der Mathematik und den menschlichen Körperverhältnissen aufgebautes Maßsystem auf Grundlage des goldenen Schnitts
8
Prof. Dr. Detlef KrömkerInstitut für Informatik
22 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
23 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Gestalt-Prinzipien
Thurston 1986
Prof. Dr. Detlef KrömkerInstitut für Informatik
24 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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, ...
9
Prof. Dr. Detlef KrömkerInstitut für Informatik
25 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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‣ …
Prof. Dr. Detlef KrömkerInstitut für Informatik
26 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
27 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
10
Prof. Dr. Detlef KrömkerInstitut für Informatik
28 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Prinzip der Nähe (Proximity)
Spätere Erweiterung und Generalisierung: Prinzip der räumlichen Konzentration (Principle of Spatial Concentration, Slocum 83)
Prof. Dr. Detlef KrömkerInstitut für Informatik
29 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Prinzip der Ähnlichkeit
Gleiches (oder fast gleiches) wird als zusammengehörig empfunden
Farbe (Helligkeit hier) gruppiert stärker als Form
Prof. Dr. Detlef KrömkerInstitut für Informatik
30 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Prinzip der stetigen Fortsetzung (Continuity)
Es werden eher einfache, regelmäßigere, glatte oder kontinuierliche Formen wahrgenommen – im Gegensatz zu solchen mit abrupten Änderungen
11
Prof. Dr. Detlef KrömkerInstitut für Informatik
31 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
32 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Prinzip der Konvexität
Konvexe Konturen werden bevorzugt geschlossen
und bevorzugt wahrgenommen
Prof. Dr. Detlef KrömkerInstitut für Informatik
33 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
12
Prof. Dr. Detlef KrömkerInstitut für Informatik
34 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
35 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Anwendung: Knoten-Kanten-Diagramme
Prof. Dr. Detlef KrömkerInstitut für Informatik
36 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Prinzip der Symmetrie (Symmetry)
wm1
Folie 36
wm1 Meines Wissens gibt es kein Prinzip der Symmmetrie. Dies ist dann das Prägnanz-Prinzip!Wolfgang Mueller; 21.12.2004
13
Prof. Dr. Detlef KrömkerInstitut für Informatik
37 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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)
Prof. Dr. Detlef KrömkerInstitut für Informatik
38 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Prinzip des Gemeinsamen Schicksals
Objekte, die sich gemeinsam bewegen, werden als zusammengehörig erkannt
Prof. Dr. Detlef KrömkerInstitut für Informatik
39 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Prinzip der Relativen Größe (Relative Size)
Kleinere visuelle Komponenten werden eher als Objekte wahrgenommenBeispiel: Propeller vor weißem Grund
Beachte: generell werden horizontale oder vertikale Strukturen gegenüber diagonalen häufiger als Objekte erkannt
14
Prof. Dr. Detlef KrömkerInstitut für Informatik
40 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
‣ Viele Einzelelemente (geschlossene Konturen, Symmetrie, weiße Fläche als Hintergrund, ...) tragen dazu bei
‣ Klare geometrische Strukturen sind nicht erforderlich
Rubin 1921
Escher
Prof. Dr. Detlef KrömkerInstitut für Informatik
41 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Figur-Grund-Trennung
Kanizsa TriangleTurston 1986
Prof. Dr. Detlef KrömkerInstitut für Informatik
42 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
15
Prof. Dr. Detlef KrömkerInstitut für Informatik
43 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
44 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
45 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Gestaltungsraster
3-spaltiges Raster Raster mit 5 Spalten und Bildbereichen
16
Prof. Dr. Detlef KrömkerInstitut für Informatik
46 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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)
Prof. Dr. Detlef KrömkerInstitut für Informatik
47 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Farbe und sichtbares Licht
10 12− 10 10− 10 8− 10 4−10 6− 10210 2− 100
UV IR radioX-Ray microwave
Visible Light
700400 500 600
λ [ ]nm
λ [ ]m
Farbe: Wahrnehmung basierend auf der sensorischen Reaktion auf elektromagnetische Strahlung
Prof. Dr. Detlef KrömkerInstitut für Informatik
48 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Das RGB-Modell
Alle darstellbare Farben als Punkte eines Einheitswürfels
Primärfarben Rot, Grün und Blauauf den 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 Hauptdiagonalendes Einheitswürfels
17
Prof. Dr. Detlef KrömkerInstitut für Informatik
49 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
HLS Model
‣ H=Hue, L=Lightness, S=Saturation
Prof. Dr. Detlef KrömkerInstitut für Informatik
50 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
HLS-Modell
Das HLS-System (H=Hue (Farbton), L=Lightness (Helligkeit), S=Saturation (Sättigung).Die Farbanordnung entspricht der senkrechten Projektion des RGB-Würfels 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.
©D
etle
f Krö
mke
r
Prof. Dr. Detlef KrömkerInstitut für Informatik
51 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
HLS-Modell
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 Farben und kann als höchsten Wert 1 für die gesättigten Farben auf dem Rand des Farbkreises annehmen. Bei Farben mit derHelligkeit 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 relativzur maximal bei einer bestimmten Helligkeit erreichbaren Sättigung angegeben wird, verwendet man deshalb das Doppelkegelmodell oder das Zylindermodell.
©D
etle
f Krö
mke
r
18
Prof. Dr. Detlef KrömkerInstitut für Informatik
52 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
53 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
CIE Chromaticity Diagram Hue (based on dominant wave length)
White point
Saturation/Purity
SABAC
=A
B
C
Prof. Dr. Detlef KrömkerInstitut für Informatik
54 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
CIE Chromaticity Diagram Opponent Color
Tristimulus Value
ADAE
ABAC
=
A
White Point
A
BC
D
E
19
Prof. Dr. Detlef KrömkerInstitut für Informatik
55 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Farbordnungssysteme
‣ Grundlage: Farbkreis (Hering):
‣ Viele verschiedene Systeme: Ostwald (1931), Munsell (1929), OSA (1974), NCS (1970), Chroma Cosmos5000 (1979)
Prof. Dr. Detlef KrömkerInstitut für Informatik
56 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
57 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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?
20
Prof. Dr. Detlef KrömkerInstitut für Informatik
58 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Quantitative Daten
Beachte: Immer nur einen Teil der Buntton-Skala Benutzen
Die zwei unteren Verfahren erlauben den Einsatz vonFarbtabellen (Color-Look-Up-Table)
Prof. Dr. Detlef KrömkerInstitut für Informatik
59 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
60 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Grauwertskalen
‣ Man verwende empfindungsmäßig gleichabständige Stufen, etwa nach folgender Formel:
‣ Berücksichtigt man die nötige Gammakorrektur (für Farbmonitore 2,3 ... 2,8), so erhält man:
‣ Kuriosum: Diese Zwei Effekte korrigieren sich fast selbst!
( ) Stevens nach 300 ≈−⋅⎟⎠⎞
⎜⎝⎛+= ν
ν
mitYYniYY ni
( )00 YYniYY ni −⋅⎟⎠⎞
⎜⎝⎛+=
γν
21
Prof. Dr. Detlef KrömkerInstitut für Informatik
61 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Farbskalen
Aufgabe: Bringen Sie die Farbe in eine Ordnung!
Prof. Dr. Detlef KrömkerInstitut für Informatik
62 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
FarbskalenGray scale Single sequencepart spectral scale
Full spectral scale Single sequencesingle hue scale
Double-endedmultiple hue scale
Prof. Dr. Detlef KrömkerInstitut für Informatik
63 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
22
Prof. Dr. Detlef KrömkerInstitut für Informatik
64 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
65 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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!
Prof. Dr. Detlef KrömkerInstitut für Informatik
66 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
23
Prof. Dr. Detlef KrömkerInstitut für Informatik
67 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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-Shadingder CG oft effizienter als Farbskalen
Prof. Dr. Detlef KrömkerInstitut für Informatik
68 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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 (< 20)‣ Betroffene Personen wissen häufig nichts von ihrer Farbfehlsichtigkeit
Prof. Dr. Detlef KrömkerInstitut für Informatik
69 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Farbfehlsichtigkeit
‣ Tests: Ishihara-Test‣ Farnsworth Munsell 100 Hue Test‣
Anomaler Trichromatismus Dichromatismus Monochromatismus
Protanomalie(Rot)
ca. 1%
Deuteranomalie(Grün)5-6%
Tritanomalie(Blau-Gelb)
0,004%
24
Prof. Dr. Detlef KrömkerInstitut für Informatik
70 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
Prof. Dr. Detlef KrömkerInstitut für Informatik
71 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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!
Prof. Dr. Detlef KrömkerInstitut für Informatik
72 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
25
Prof. Dr. Detlef KrömkerInstitut für Informatik
73 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Color
‣ Color can‣ Soothe or strike the eye‣ 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
Prof. Dr. Detlef KrömkerInstitut für Informatik
74 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Color
‣ 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
Prof. Dr. Detlef KrömkerInstitut für Informatik
75 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
26
Prof. Dr. Detlef KrömkerInstitut für Informatik
76 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Schriften ‣ Schriftart, Schrift (Typeface)
‣ In der Typografie die grafische Gestaltung eines Zeichensatzes.‣ Schriften werden unterteilt in Schriftgruppen (Klassen, Familien, Kategorien)‣ DIN 16518 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
Prof. Dr. Detlef KrömkerInstitut für Informatik
77 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Schriftfamilien nach DIN 16518 (Auswahl)
Avant Garde, Franklin Gothic, Frutiger, Futura, Helvetica, Lucida, Rotis Sans, Univers
Erste Hälfte 19. Jahrhundert; alte Bezeichnung: Grotesk
Serifenlose Linear-Antiqua
Bodoni-Antiqua, Didot, Madison-Antiqua, Torino,
Ca. 1800, Bodoni und Didot
Klassizistische Antiqua
z.B. Baskerville, Tiffany, Times-Antiqua
Blütezeit ca. 1750Barock-Antiqua
z.B. Garamond, Bembo, Goudy, Palatino
Entwickelt um 1540, insb. Claude Garamond
Franz. Barock-Antiqua
BeispielZeichensätzeBemerkungGruppe
Prof. Dr. Detlef KrömkerInstitut für Informatik
78 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Schriften für Computereinsatz
a e f g AMMicrosoft, 1995. Frei verfügbar.Tahoma
a e f g AMM. Carter / Microsoft, 1994. Frei verfügbarVerdana
a e f g AMK. Holmes 1985. entworfen. Eine der ersten für Computereinsatz optimiertenSchriften
Lucida Sans
a e f g AMP. Sunders, R. Nicholas/Microsoft 1990. Frei verfügbarer Ersatz für Helvetica
Arial
Microsoft's freie Version der klassischen Monotype (Gleichmäßige Zeichenbreite)
Andale
BeispielBemerkungZeichensatz
27
Prof. Dr. Detlef KrömkerInstitut für Informatik
79 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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)
Prof. Dr. Detlef KrömkerInstitut für Informatik
80 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Beispiel: Frutiger
Prof. Dr. Detlef KrömkerInstitut für Informatik
81 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Bemaßung und Schriftsatz
http://www.rz.uni-karlsruhe.de/~szm/kurse/techn-grundl
28
Prof. Dr. Detlef KrömkerInstitut für Informatik
82 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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.
Prof. Dr. Detlef KrömkerInstitut für Informatik
83 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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 vonBildern und Bildsequenzen, wel-che die Eigenschaften dieser Daten veran-schaulichen. Hierzu werden die Eigenschaf-ten 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-genenZusammenhä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 ele-mentaren Stufe, wer-dendie vorliegenden grundlegenden Infor-mationen in direkter Form abgebildet. Das heißt, zu jeder Infor-mation existiert im Bild eine entsprechende Repräsentation in Form einer spezifi-schenAusprä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 verdeut-licht.
Prof. Dr. Detlef KrömkerInstitut für Informatik
84 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
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
29
Prof. Dr. Detlef KrömkerInstitut für Informatik
85 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Schriftsatz
funktioniert nur mit gutem Trennalgorithmusnicht für kurze Zeilen geeignet
saubere Ränder, sieht aus 'wie gedruckt'gut für längere Zeilen
Blocksatz
lange Zeilen schwerer lesbartypischerweise unschöne Zackenbildung am rechten Randnicht für längere Druckwerke geeignet
wirkt leicht und moderngut für kurze Zeilenkommt ohne viele Worttrennungen ausfür Computer leicht zu verarbeiten
Flattersatz
NachteileVorteile
Prof. Dr. Detlef KrömkerInstitut für Informatik
86 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Hausaufgabe
‣ Lesen Sie Kapitel 10 von „Shneiderman/Plaisant: Designing the User Interface“!
Prof. Dr. Detlef KrömkerInstitut für Informatik
87 Hier wird Wissen WirklichkeitB-HCI – V 02 Elemente des Screen Designs
Weiterführende Literatur
‣ Kevin Mullet, Darrell Sano: Designing Visual Interfaces –Communication Oriented Techniques, SunSoft Press, 1995, ISBN 0-13-303389-9
‣ Donald A. Norman. The Psychology of Everyday Things. New York: Basic Books, 1988. ISBN 0-465-06709-3
30
Hier wird Wissen Wirklichkeit
ENDE