View
219
Download
0
Category
Preview:
Citation preview
Human Computer Interaction Gestaltung und Implementierung effizienter Benutzungsschnittstellen
V-02 Elemente des Screen Designs
Prof. Dr. Detlef Krömker Johann Wolfgang Goethe-Universität
Prof. Dr. Detlef Krömker 2 Vorlesung B-HCI – V1 Begrüßung und Einführung
Übersicht ‣ Grundregeln zur Gestaltung
‣ Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen
‣ Harmonien – Proportionen
‣ Gestaltprinzipien
‣ Organisation und visuelle Struktur – Raster – Layout
‣ Elemente der Farblehre und Farbskalen
‣ Elemente der Typographie und des Satzes
Prof. Dr. Detlef Krömker 3 Vorlesung B-HCI – V1 Begrüßung und Einführung
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 da findet man auch Online Kurse zur Typographie und zum Gestalten
Je weniger einer braucht, desto mehr nähert man sich den Göttern, die gar nichts brauchen. (Sokrates)
Prof. Dr. Detlef Krömker 4 Vorlesung B-HCI – V1 Begrüßung und Einführung
Optische Achsen beachten!
‣ Optische Achsen sind zum Beispiel Satzkanten oder die Ränder von Bildern, Fensterränder oder Bildschirmränder
‣ Je mehr optische Achsen auf einem Blatt verteilt sind, desto problematischer ist ein Entwurf, umso schwieriger ist gute Typografie .
‣ Besonders heikel wird es, wenn die Achsen noch verschiedene Winkel haben
Prof. Dr. Detlef Krömker 5 Vorlesung B-HCI – V1 Begrüßung und Einführung
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.
Prof. Dr. Detlef Krömker 6 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 7 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 8 Vorlesung B-HCI – V1 Begrüßung und Einführung
Eleganz und Einfachheit – Häufige Fehler
‣ Überfrachtung des Designs (Clutter)
‣ Gegenseitiges Stören visueller Elemente
‣ Komplexe visuelle Strukturen
‣ Zu hoher Detailgrad der graphischen Elemente
Prof. Dr. Detlef Krömker 9 Vorlesung B-HCI – V1 Begrüßung und Einführung
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)
Prof. Dr. Detlef Krömker 10 Vorlesung B-HCI – V1 Begrüßung und Einführung
Übersicht ‣ Grundregeln zur Gestaltung
‣ Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen
‣ Harmonien – Proportionen
‣ Gestaltprinzipien
‣ Organisation und visuelle Struktur – Raster – Layout
‣ Elemente der Farblehre und Farbskalen
‣ Elemente der Typographie und des Satzes
Prof. Dr. Detlef Krömker 11 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 12 Vorlesung B-HCI – V1 Begrüßung und Einführung
Visuelle Variablen (Grundelemente der Gestaltung) nach Bertin, 1982
Position (x und y) Textur
Fläche, Größe Neigung, Orientierung
Helligkeit Form, Gestalt
Farbe
Prof. Dr. Detlef Krömker 13 Vorlesung B-HCI – V1 Begrüßung und Einführung
Visuelle Variablen – Mögliche Ergänzungen
Länge Volumen
Farbton Sättigung
Winkel Verbindung
Enthaltung
Prof. Dr. Detlef Krömker 14 Vorlesung B-HCI – V1 Begrüßung und Einführung
Visuelle Variablen – Weitere Ergänzungen
Bewegung Veränderung Blinken
Prof. Dr. Detlef Krömker 15 Vorlesung B-HCI – V1 Begrüßung und Einführung
Eigenschaften Visueller Variablen (nach Bertin) ‣ 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ömker 16 Vorlesung B-HCI – V1 Begrüßung und Einführung
Visuelle Variablen
Bertin 1982
Prof. Dr. Detlef Krömker 17 Vorlesung B-HCI – V1 Begrüßung und Einführung
Quantitativ Ordinal Nominal
Geringe Effekt.
Hohe Effektivität Position
Länge
Winkel
Neigung
Fläche
Volumen
Helligkeit
Sättigung
Farbton
Textur
Verbindung
Enthaltung
Form
Position
Helligkeit
Sättigung
Farbton
Textur
Verbindung
Enthaltung
Länge
Winkel
Neigung
Fläche
Volumen
Form
Position
Helligkeit
Sättigung
Farbton
Textur
Verbindung
Enthaltung
Länge
Winkel
Neigung
Fläche
Volumen
Form
Nach Mackinlay 1986 mit Adaptionen
Prof. Dr. Detlef Krömker 18 Vorlesung B-HCI – V1 Begrüßung und Einführung
Übersicht ‣ Grundregeln zur Gestaltung
‣ Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen
‣ Harmonien – Proportionen
‣ Gestaltprinzipien
‣ Organisation und visuelle Struktur – Raster – Layout
‣ Elemente der Farblehre und Farbskalen
‣ Elemente der Typographie und des Satzes
Prof. Dr. Detlef Krömker 19 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
(oft überschätzt)
Vitruvian-Mensch von Leonardo da Vinci
Prof. Dr. Detlef Krömker 20 Vorlesung B-HCI – V1 Begrüßung und Einführung
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:
Prof. Dr. Detlef Krömker 21 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 22 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 23 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 24 Vorlesung B-HCI – V1 Begrüßung und Einführung
Übersicht ‣ Grundregeln zur Gestaltung
‣ Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen
‣ Harmonien – Proportionen
‣ Gestaltprinzipien
‣ Organisation und visuelle Struktur – Raster – Layout
‣ Elemente der Farblehre und Farbskalen
‣ Elemente der Typographie und des Satzes
Prof. Dr. Detlef Krömker 25 Vorlesung B-HCI – V1 Begrüßung und Einführung
Gestalt-Prinzipien
Thurston 1986
Prof. Dr. Detlef Krömker 26 Vorlesung B-HCI – V1 Begrüßung und Einführung
Gestalt-Prinzipien ‣ Andere Bezeichnung
‣ Gestalt-Gesetze ‣ Aber: keine Gesetze im strengen Sinn, keine absolute Gültigkeit, kein
“Beweis”
‣ Thema ‣ Beschreiben 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, ...
Prof. Dr. Detlef Krömker 27 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 28 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 29 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 30 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 31 Vorlesung B-HCI – V1 Begrüßung und Einführung
Prinzip der Ähnlichkeit
Gleiches (oder fast gleiches) wird als zusammengehörig empfunden
Farbe (Helligkeit hier) gruppiert stärker als Form
Prof. Dr. Detlef Krömker 32 Vorlesung B-HCI – V1 Begrüßung und Einführung
Prinzip der stetigen Fortsetzung (Continuity) Es werden eher einfache, regelmäßigere, glatte oder
kontinuierliche Formen wahrgenommen – im Gegensatz zu solchen mit abrupten Änderungen
Prof. Dr. Detlef Krömker 33 Vorlesung B-HCI – V1 Begrüßung und Einführung
Anwendung des Prinzips der stetigen Fortsetzung
z.B. in Blockdiagrammen: Verbindungen zwischen Diagrammelementen werden einfacher erkannt, wenn die Linien kontinuierlich und glatt sind
Prof. Dr. Detlef Krömker 34 Vorlesung B-HCI – V1 Begrüßung und Einführung
Prinzip der Konvexität
Konvexe Konturen werden bevorzugt geschlossen
und bevorzugt wahrgenommen
Prof. Dr. Detlef Krömker 35 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 36 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 37 Vorlesung B-HCI – V1 Begrüßung und Einführung
Anwendung: Knoten-Kanten-Diagramme
Prof. Dr. Detlef Krömker 38 Vorlesung B-HCI – V1 Begrüßung und Einführung
Prinzip der Symmetrie (Symmetry)
Prof. Dr. Detlef Krömker 39 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 40 Vorlesung B-HCI – V1 Begrüßung und Einführung
Prinzip des Gemeinsamen Schicksals
Objekte, die sich gemeinsam bewegen, werden als zusammengehörig erkannt
Prof. Dr. Detlef Krömker 41 Vorlesung B-HCI – V1 Begrüßung und Einführung
Prinzip der Relativen Größe (Relative Size)
Kleinere visuelle Komponenten werden eher als Objekte wahrgenommen Beispiel: schwarzer Propeller vor weißem Grund
Beachte: generell werden horizontale oder vertikale Strukturen gegenüber diagonalen häufiger als Objekte erkannt
Prof. Dr. Detlef Krömker 42 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 43 Vorlesung B-HCI – V1 Begrüßung und Einführung
Figur-Grund-Trennung
Kanizsa Triangle Turston 1986
Prof. Dr. Detlef Krömker 44 Vorlesung B-HCI – V1 Begrüßung und Einführung
Übersicht ‣ Grundregeln zur Gestaltung
‣ Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen
‣ Harmonien – Proportionen
‣ Gestaltprinzipien
‣ Organisation und visuelle Struktur – Raster – Layout
‣ Elemente der Farblehre und Farbskalen
‣ Elemente der Typographie und des Satzes
Prof. Dr. Detlef Krömker 45 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 46 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 47 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 48 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 49 Vorlesung B-HCI – V1 Begrüßung und Einführung
Gestaltungsraster
3-spaltiges Raster Raster mit 5 Spalten und Bildbereichen
Prof. Dr. Detlef Krömker 50 Vorlesung B-HCI – V1 Begrüßung und Einführung
Übersicht ‣ Grundregeln zur Gestaltung
‣ Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen
‣ Harmonien – Proportionen
‣ Gestaltprinzipien
‣ Organisation und visuelle Struktur – Raster – Layout
‣ Elemente der Farblehre und Farbskalen
‣ Elemente der Typographie und des Satzes
Prof. Dr. Detlef Krömker 51 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 52 Vorlesung B-HCI – V1 Begrüßung und Einführung
‣ Farbwahrnehmung Physiologie und Psychologie ‣ Farbordnung Kunst ... Harmonien ... Wirkungen subjektiv ‣ „Farbrechnen“ im Computer, ... in CG: Farbe als „Tripel“ (3D-Vektor) ‣ Farberzeugung Lichtquellen, Körperfarben, Durchlichtfarben ‣ Farbmischung Ideal: Additiv, Subtraktiv (Multiplikativ) und Real ‣ Farbmessung Reproduktion (objektiv, reproduzierbar, kalibriert
nicht vom Individuum abhängig, Spektrum Tripel) ‣ Farbübertragung in Kommunikationssystemen, z.B. Fernsehen, ... ‣ Farbauswahl User Interface
Farbe ist ein sehr vielschichtiges Problem
Verschiedene Aufgaben und Ziele verlangen unterschiedliche Farbsysteme, Farbräume und Repräsentationen: Eine Auswahl
Prof. Dr. Detlef Krömker 53 Vorlesung B-HCI – V1 Begrüßung und Einführung
Details zur Farblehre
z.B. im Veranstaltungsarchiv GDV http://www.gdv.informatik.uni-frankfurt.de/index.php?m=2&sm=3
GDV 07: Vorlesungen Elemente der Bildwahrnehmung und Farbrepräsentationen
Bitte schauen Sie diese Materialien einmal durch … es trägt zum tieferen Verständnis bei!
Prof. Dr. Detlef Krömker 54 Vorlesung B-HCI – V1 Begrüßung und Einführung
Einsatzgebiete für Farbe im HCI
‣ 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ömker 55 Vorlesung B-HCI – V1 Begrüßung und Einführung
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?
Prof. Dr. Detlef Krömker 56 Vorlesung B-HCI – V1 Begrüßung und Einführung
Quantitative Daten Beachte: Immer nur einen Teil der Buntton-Skala benutzen
Die zwei unteren Verfahren erlauben den Einsatz von Farbtabellen (Color-Look-Up-Table)
Prof. Dr. Detlef Krömker 57 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Ein Hinweis: Der Color Brewer (Cindy Brewer) liefert in vielen Anwendungsfällen recht gute Ergebnisse (… wenn man es nicht doch selbst machen will) aber nur, wenn man ihn richtig benutzt!
http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer_intro.html
Prof. Dr. Detlef Krömker 58 Vorlesung B-HCI – V1 Begrüßung und Einführung
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!
Prof. Dr. Detlef Krömker 59 Vorlesung B-HCI – V1 Begrüßung und Einführung
Farbskalen
Aufgabe: Bringen Sie die Farbe in eine Ordnung! Farbordnungssystem
Basis oft die Qualitäten: Helligkeit – Farbton – Farbsättigung, z.B. HLS
Prof. Dr. Detlef Krömker 60 Vorlesung B-HCI – V1 Begrüßung und Einführung
Farbskalen
Gray scale Single sequence part spectral scale
Full spectral scale Single sequence single hue scale
Double-ended multiple hue scale
Prof. Dr. Detlef Krömker 61 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 62 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 63 Vorlesung B-HCI – V1 Begrüßung und Einführung
Einige Regeln für den Einsatz von Farbskalen
‣ Uniforme Skalen können durch Verwendung von CIELUV (CIELAB) gewonnen werden.
‣ Achtung: auf Gamma-Korrektur achten!
‣ Achtung: Manchmal sollen spezielle Eigenschaften durch nichtuniforme Skalen hervorgehoben werden!
Prof. Dr. Detlef Krömker 64 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 65 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 66 Vorlesung B-HCI – V1 Begrüßung und Einführung
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 oft nichts von ihrer Farbfehlsichtigkeit
Prof. Dr. Detlef Krömker 67 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 68 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 69 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 70 Vorlesung B-HCI – V1 Begrüßung und Einführung
Übersicht ‣ Grundregeln zur Gestaltung
‣ Graphische Semiologie (Graphical Semiotics) -- Visuelle Variablen
‣ Harmonien – Proportionen
‣ Gestaltprinzipien
‣ Organisation und visuelle Struktur – Raster – Layout
‣ Elemente der Farblehre und Farbskalen
‣ Elemente der Typographie und des Satzes
Prof. Dr. Detlef Krömker 71 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Vertiefung in Typografie ‣ Theorie und sehr viel Praxis: in Vorlesung allein nicht vermittelbar! ‣ Begabung
Prof. Dr. Detlef Krömker 72 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
‣ Hauptkennzeichen 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ömker 73 Vorlesung B-HCI – V1 Begrüßung und Einführung
Schriftfamilien nach DIN 16518 (Auswahl) Gruppe Bemerkung Zeichensätze Beispiel Franz. Barock-Antiqua
Entwickelt um 1540, insb. Claude Garamond
z.B. Garamond, Bembo, Goudy, Palatino
Barock-Antiqua Blütezeit ca. 1750 z.B. Baskerville, Tiffany, Times-Antiqua
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
Prof. Dr. Detlef Krömker 74 Vorlesung B-HCI – V1 Begrüßung und Einführung
Zeichensatz Bemerkung Beispiel Andale Microsoft's freie Version der klassischen
Monotype (Gleichmäßige Zeichenbreite)
Arial P. Sunders, R. Nicholas/Microsoft 1990. Frei verfügbarer Ersatz für Helvetica a e f g AM
Lucida Sans K. Holmes 1985. Eine der ersten für Computereinsatz optimierten Schriften a e f g AM
Tahoma Microsoft, 1995. Frei verfügbar. a e f g AM
Verdana M. Carter / Microsoft, 1994. Frei verfügbar a e f g AM
Schriften für Computereinsatz
Prof. Dr. Detlef Krömker 75 Vorlesung B-HCI – V1 Begrüßung und Einführung
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ömker 76 Vorlesung B-HCI – V1 Begrüßung und Einführung
Beispiel: Frutiger
Prof. Dr. Detlef Krömker 77 Vorlesung B-HCI – V1 Begrüßung und Einführung
Bemaßung und Schriftsatz
http://www.rz.uni-karlsruhe.de/~szm/kurse/techn-grundl
Prof. Dr. Detlef Krömker 78 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
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ömker 79 Vorlesung B-HCI – V1 Begrüßung und Einführung
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, 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-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 ele-mentaren Stufe, wer-den die 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-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 verdeut-licht.
Prof. Dr. Detlef Krömker 80 Vorlesung B-HCI – V1 Begrüßung und Einführung
Schriftsatz ‣ Linksbündiger Flattersatz
Linksbündige Ausrichtung mit gleichmäßigen Wortabständen
‣ Blocksatz Sowohl links- wie rechtsbündige Ausrichtung durch Streckung der
Wortabstände, ggf. auch (Buchstabenabstä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
Prof. Dr. Detlef Krömker 81 Vorlesung B-HCI – V1 Begrüßung und Einführung
Schriftsatz Vorteile Nachteile
Flattersatz wirkt leicht und modern gut für kurze Zeilen kommt ohne viele Worttrennungen aus für Computer leicht zu verarbeiten
lange Zeilen schwerer lesbar typischerweise unschöne Zackenbildung am rechten Rand nicht für längere Druckwerke geeignet
Blocksatz saubere Ränder, sieht aus 'wie gedruckt'
gut für längere Zeilen
funktioniert nur mit gutem Trennalgorithmus
nicht für kurze Zeilen geeignet
Prof. Dr. Detlef Krömker 82 Vorlesung B-HCI – V1 Begrüßung und Einführung
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
Prof. Dr. Detlef Krömker 83 Vorlesung B-HCI – V1 Begrüßung und Einführung
Zusammenfassung
‣ Fast nur die klassischen Regeln besprochen und nur das Allerwichtigste.
‣ Vertiefung erfolgt in der Übung – Input dort!
(Endlich ;-) )Schluss
und vielen Dank für Ihre Aufmerksamkeit
Recommended