View
4
Download
0
Category
Preview:
Citation preview
Visual Layout
Structure and Montage
Wissenschaftliches Seminar
Dimensionen des Interface Designs
Professor Phillip Heidkamp
Sommersemester 2005
Köln International School of Design
Lars Baumann
Stefanie Hentschel
Peter Stollenwerk
2
Einleitung 3
1. Montage 1.1 Vertikale Montage 4
1.2 Horizontale Montage 5
1.3 Visuelle Geste 6
2. Struktur 2.1 Formate 7
2.2 Raster 7
2.3 Topologien 9
3. Wahrnehmung 3.1 Gesichtsfeld 11
3.2 Prozess der Wahrnehmung 11
3.3 Orientierung 12
4. Personalisierung 4.1 Explizite Personalisierung 14
4.2 Implizite Individualisierung 15
Anhang Literaturverzeichnis 16
Webrecherche 16
Abbildungsverzeichnis 16
Inhalt
3
Im Folgenden werden eine Auswahl an gängigen Ge-staltungsmitteln und Methoden zur Strukturierung von Interfaces vorgestellt. Diese können auf verschie-denste Weise kombiniert werden. Ihre Verwendung jedoch sollte von Fall zu Fall sinnvoll abgewogen und entschieden werden.
Einleitung
4
Begriffserklärung
Technischer AspektZusammenmontieren einzelner Bestandteile zu einem konstruierten Gegenstand
Visueller Aspekt Zusammenfügen einzelner visueller Elemente zu einem neuen Gesamtbild
Montage nach Sergej EisensteinVertikale und horizontale Montage
1.1 Vertikale Montage Vertikale Montage bedeutet das zeitgleiche Arrangement von Elementen.
Figur-Grund-Beziehung
Grafische Elemente, die in Relation zu ihrer Lage zur Grundfläche organisiert werden. Die Gestaltung der Figur-Grund-Beziehung zielt darauf ab, die Wahrneh-mung der Figuren zu fördern, einen bestimmten Layoutcharakter zu vermitteln und die Interaktion mit dem Interface zu organisieren.
Formale Figur-Grund-Beziehung
Eine formale Montage erfolgt frei von einer inhaltlichen Bedeutung und ist daher für eine grundsätzliche Ent-wurfsrichtlinie nützlich. Z.B. zentriert, spannungsreich, harmonisch, gestreut, rhythmisch, abbildend.
Semantische Figur-Grund-Beziehung
Sie bezieht sich in erster Linie auf die Bedeutung, die sich aus der Montage ergibt. Z.B. hierarchisch, linear, gewichtend, logisch, betonend, räumlich.
1. Montage
Abb.1
Nach Sergeij Eisenstein:
Wie bei einer Partitur eines
Musikstückes werden die
Gestaltungselemente wie Noten
horizontal wie vertikal geglie-
dert, wobei vertikal für
das Verhältnis zueinander und
horizontal für die zeitliche Abfol-
ge der Elemente steht.
Abb.2
Beispiel für eine rythmische
Anordnung der Elemente.
Abb.3
Beispiel für eine hierarchische
Anordnung der Elemente.
Nach der westlichen Leserich-
tung von links nach rechts und
oben nach unten erhalten die
oberen Elemente eine höhere
Bedeutung.
5
Figur-Figur-Beziehung
Möglichkeit im Interface wechselnde Beziehungen und Ordnungen darzustellen, die ganz allein auf die aktuelle Situation hin abgestimmt ist.
Wechselnde Beziehung
Die Elemente stehen untereinander in wechselnden Be-ziehungen. Z.B. Raum, Zuordnung, Präsenz, Kodierung.
Verdichten und Betonen
Überlagerung/ Skalierung verschiedener Ebenen. Einteilung in aktive und inaktive Elemente, deren Hierar-chie durch Kodierung modifizierbar ist. Z.B. Einheit und Differenzierung, hinten und vorne, aktiv und inaktiv, groß und klein.
1.2 Horizontale MontageHorizontale Montage ist das Arrangement von Elementen in einer zeitlichen Abfolge.
Figur-Grund-Zeit-Beziehung
Das Zusammenfügen von Bildern oder Zeitsequenzen in einer zeitlichen Abfolge. So können Teile des Layouts einer dynamischen Bewegung oder Veränderung folgen, während andere lediglich in statischer Form eingebun-den sind.
Harter SchnittAbrupter Wechsel der Bilder, der Position, der Größen.
Weicher SchnittFließende Bewegung, weiche Überblendung, schrittwei-se Transformation/ Morphing, Hineindrehen/ Rotieren, aufblendend.
1. Montage
Abb.4
Beispiel für farbliche
Kodierung, wodurch
die Zugehörigkeit
verschiedener Elemente
verdeutlicht werden kann.
Abb.5
Aktive Elemente werden
vergrößert dargestellt.
Abb.6
Beispiel für eine weiche
Überblendung.
6
1.3 Visuelle Geste
DenotationGegenständliche Beschreibung
KonnotationAssoziative Beschreibung
Semiotische Aspekte
Syntaktische EbeneFormale Beziehungen der Layoutbestandteile
Pragmatische EbeneDirekte Handlungen, die sich aus der Auseinandersetzung ergeben
Semantische EbeneEindruck des Layouts
1. Montage
7
2.1 Formate
BildschirmformateZ.B. 640x480, 800x600, 1024x768, PDA, Mobiltelefone, Displays.
Formattypologie
Ein Fenster, ein InhaltInhalt muss gescrollt werden
Ein Fenster, mehrere InhalteVerknüpfung verschiedener Inhalte in einem Fenster
Mehrere Fenster, mehrere InhalteInhalte auf mehrere Fenster aufgeteilt, zeitgleiche Dar-stellung der Fenster
2.2 Raster
Als Raster bezeichnet man die gleichmäßige bzw. gezielte, an Bedingungen geknüpfte, Unterteilung einer Fläche, eines Volumens oder einer Menge. Es kann zur Auswahl, Orientierung, Sortierung oder Ver-teilung dienen oder einfach bei der möglichst optimalen Ausnutzung von Räumen behilflich sein.
Vermaßung
Relative VermaßungAngabe in Prozenten oder relativen Einheiten
Absolute VermaßungGrößen und Positionen stehen im Verhältnis zur Fenster-größe, Schriftart und -größe. Ziel ist es, eine einheitliche Layoutdarstellung auf verschiedenen Systemen zu erreichen.
2. Struktur
Abb.7
Beispiel für mehrere
Fenster mit mehreren
Inhalten.
www.rempe.de
Abb.8
Beispiel für relative
Vermaßung.
www.google.de
8
Proportionen
Goldener SchnittBestimmtes Verhältnis zwischen zwei Teilstrecken, bei dem sich die kleinere Teilstrecke genauso verhält, wie die große Teilstrecke zur Gesamtstrecke. bc:ab=ab:ac= 0,618
Fibonacci-ZahlenFolge von Zahlen, bei der jede Zahl die Summe der vorangehenden Zahl ist. Sie ist häufig in der Natur zu finden und stehen in Verbindung mit dem Goldenen Schnitt (bei größeren Zahlen Verhältnis fast identisch). Le Corbusier entwickelte den Modulor, Kombination von Schlüsselwerten des menschlichen Körpers und den Fibonacci-Zahlen. 1 1 2 3 5 8 13 21...
8-TeilerDie Aufteilung der Webseite in Elemente. die jeweils ein Vielfaches von acht ergeben. (Acht ist immer gemeinsa-mer Teiler jeder Bildschirmauflösung)
Dritte-RegelBasiert auf einem Rastersystem, bei dem ein Medium horizontal und vertikal jeweils in drei Teile geteilt wird, wodurch neun Rechtecke und vier Schnittpunkte entste-hen. Eine Positionierung auf diesen Schnittpunkten wirkt ästhetisch und interessant. Im Vergleich: Das Verhältnis Dritte-Regel 1:0,666 mit Goldener Schnitt 1:0,618.
AusrichtungElemente werden so platziert, dass der Rand von Zeilen oder Spalten in einer Linie oder der Text sich an einer Mittelachse orientiert. Es entsteht ein einheitlicher Ein-druck, der zur Ästhetik und Stabilität beiträgt.
2. Struktur
Abb.9
Beispiel für das Vor-
kommen der Fibonacci-
reihe in der Natur. Hier
8 zu 13 Wirbel eines
Zapfens.
Abb.10
Ali gewinnt mit der
Dritte-Regel!
9
Innovative Raster
Lineares RasterDas lineare Raster hat eine konstant bleibende Schaltflä-che, die Navigation. Ein Wechsel findet allein durch den Austausch der ange-wählten Information statt.
Raster auf mehreren EbenenDer Grundaufbau bleibt bestehen, die Information im linken (Navigation) und dem rechten Teil (Information) werden je nach Interaktion ausgetauscht. Durch die Farbgebung können die einzelnen Ebenen jeweils aus-einander gehalten werden.
Fluide Raster Rasterparzellen müssen nicht immer statisch sein, sondern können zu dynamischen und verschiebbaren Objekten werden. Wiederkehrende Elemente oder farbli-che Kodierung erhöhen die Wiedererkennbarkeit.
2.3 TopologieTopologie (von griech.: topos = Ort, Platz und logos = Lehre, Wissen, Wort) ist die Lehre von allgemeinen räumlichen Beziehungen und Eigenschaften des Rau-mes. Flächenmäßige Gliederung der Bestandteile eines digitalen Layouts. Elemente werden nach einem ein-heitlichen System festgelegt, das für ein konsistentes Erscheinungsbild und eine schnelle Orientierung sorgt.
Standardtopologien
HorizontalAuf einer Ebene finden sich viele Auswahlmöglichkeiten, die einerseits eine aufwändige Organisation der Naviga-tionselemente, aber auch eine direkte Auswahlmöglich-keit bieten.
VertikalAuf einer Ebene liegen wenige Auswahlmöglichkeiten, dafür muss häufig vom Benutzer selektiert werden um ans Ziel zu gelangen.
Die AußensichtDurch inhaltliche oder stilistische Vorgaben kann eine gleiche Erscheinung auf verschiedenen Medien bezweckt werden.
Die InnensichtDie Erscheinung ändert sich bei Folgeseiten, beinhaltet aber immer Elemente der Startseite, um die Wiederer-kennung zu gewährleisten.
2. Struktur
Abb.11
Beispiel für ein Raster
auf mehreren Ebenen.
www.leica.de
Abb.12
Schema der
horizontalen Topologie.
Cyan = Navigation
Yellow = Inhalt
Magenta = Logo
Abb.13
Schema der vertikalen
Topologie.
10
Unkonventionelle TopologieDer Sinn und Zweck der Layoutbestandteile ergibt sich aus dem Kontext. Elemente können Position und Funk-tion wechseln. Eine automatische Generierung oder standardisierte Pflege ist kaum möglich.
Trennung von Inhalt und FormInhalte werden in einer Datenbank gespeichert und erst durch die Verknüpfung mit der Formatvorlage ent-steht das digitale Dokument. Inhalte können dynamisch und unabhängig von der späteren Verwendung bearbei-tet und auf verschiedene Medien übertragen werden.
2. Struktur
Abb.14
Beispiel für eine unkon-
ventionelle Topologie.
Ein Inhalte verteilt sich
auf mehrere Fenster.
Bei Änderung des
Inhalts arrangieren sich
die Fenster neu.
www.nl-design.net/
browserday/
11
3.1 GesichtsfeldDurch flimmernde Bildschirme und dynamische Be-standteile muss das Auge häufiger fokussieren. Das Auge nimmt horizontal einen Bereich von 180-200 Grad wahr und vertikal 130 Grad (3:2).16 Grad kann auf einen Blick scharf erfasst werden (Abstand von 50 cm - > 15x2,5 cm). Bei einer Interaktivität lässt sich der Mensch durch seine Interessen leiten.
3.2 Prozess der WahrnehmungVerständliche und klare Ausdrucksformen beschleuni-gen, undurchsichtige erschweren den Wahrnehmungs-prozess.
1. Sensorische Empfindung Lichtaufnahme -> Umwandlung in neuronale Aktivität im Gehirn
2. Perzeption Wahrgenommenes wird einem vorläufigen Bild zugeordnet
3. Klassifikation Bild mit bekannten Mustern verglichen und verstanden
4. Eindruck z.B. sympathisch oder unsympathisch
5. Aktion
3. Wahrnehmung
Abb.15
Gesichtsfeld
Abb.16
Prozess der
Wahrnehmung
12
AufmerksamkeitAnsprache mentaler Grundmuster, z.B. Intensität, Aus-nahme, Neuartigkeit, Irritation, Instinkt.
Magic 7 7 (+/-2) unabhängige Informationseinheiten können im Kurzzeitgedächtnis gespeichert werden. Z.B. Chunking, Rubriken-Gliederung, Navigation, Strukturierung nach Einheiten, Text-, Farbkodierung
SoundTon und Bild stehen in Verbindung, da sie im Gehirn als Erinnerung und Erfahrung gespeichert sind. Töne kön-nen den Informationsgehalt vervollständigen und können einer besseren Differenzierung dienen.
ÖkonomieprinzipDas Prinzip, eine einfache Lösung einer komplexen Lö-sung vorzuziehen, da unnötige Elemente die Leistungs-fähigkeit beeinträchtigen.
Signal-Ablenkungs-VerhältnisVerhältnis von relevanter zu irrelevanter Information. Unnötige Datenelemente sollten vermieden werden, um möglichst wenig Ablenkung zu erzeugen.
3.3 Orientierung
Mentales Modell
Heranziehen von realen Strukturen für eine bessere Ori-entierung über Inhalt, Struktur und Funktionsweisen.
Verlaufsstruktur
Tiefe StrukturEine vertikale Ausrichtung bietet auf einer Ebene wenige Auswahlmöglichkeiten, fordert jedoch mehrere Rich-tungsentscheidungen.
Breite StrukturEine horizontale Ausrichtung bietet auf einer Ebene meh-rere Auswahlmöglichkeiten. Das Ziel wird über wenige Ebenen erreicht.
Siehe hierzu auch Topologien, Standarttopologie auf Seite 9
3. Wahrnehmung
Abb.17
Beispiel des Ökonomie-
prinzips.
www.google.de
13
Blickverlauf 1. Mitte
2. linke obere Ecke
3. rechte obere Ecke
Gutenberg-DiagrammAnordnung bei Layout und Komposition wenn Elemente homogen und gleichmäßig verteilt oder textintensiv sind. Weg der Augen: Primär optischer Bereich oben links, Endbereich unten rechts, starker Brachbereich oben rechts, schwacher Brachbereich unten links. Landesbe-zogene Unterschiede durch die Leserichtung.
PräferenzHeadlines werden Bild vorgezogen (bei News)
RelevanzDas Wichtigste/Aktuellste steht oben
Akzente „Scannen“ des Layouts, was typografische oder grafische Anknüpfungspunkte erfordert.
3. Wahrnehmung
Abb.18
Der Blickverlauf beim
Betrachten einer
Website.
3.
2.
1.
14
Durch eigene Einstellungen kann der Nutzer das Layout beeinflussen. Z.B. durch Systemeinstellungen, Monito-rauflösung, Browsereinstellung.
4.1 Explizite Personalisierung
Eine Möglichkeit das Layout nach eigenen Vorlieben zu verändern.
Layout Eingreifen in das Erscheinungsbild eines Layouts in einem vordefinierten Rahmen.Z.B. Farbe, Arrangement, Hintergrundbild, Textgröße/-farbe.
InhaltIndividuelle Selektion von Informationen und deren Abstimmung auf persönliche Interessen. Es wird eine Optimierung der Informationen erreicht.Z.B. Schlagzeilen, lokales Wetter, Kinoprogramm.
4. Personalisierung
15
4.2 Implizite Individualisierung
Veränderungen von Inhalt und Layout, die nicht unbe-dingt bewusst vom Anwender beeinflusst werden. Ziel ist eine möglichst genaue Übereinstimmung (Match) zwischen dem Angebot einer digitalen Anwendung und den Interessen der Nutzer herzustellen.
Rule-based FilteringFilterung von bestimmten Benutzergruppen. Z.B. Sprachversionen
Content-based Filtering Interesse des Anwenders wird nach Inhalten gefiltert, was eine Angebotsoptimierung bewirken kann. Z.B. Produkte gleicher Kategorien.
Collaborative FilteringAbgleichen von Interessen und Verhalten einzelner An-wender mit anderen. (Vorausberechnung) Z.B. www.amazon.de
Stylesheets Trennung von Form und Inhalt. Inhalt in Datenbanken gespeichert.
Siehe Topologie-Struktur, Inhalt und Organisation auf Seite 9
4. Personalisierung
Abb.19
Trennung von Form
und Inhalt. Stylesheets
bestimmen die visuelle
Aufbereitung des mit
Html ausgezeichneten
Inhalts.
www.csszengarden.com
16
Literaturverzeichnis
Skopec, David: Layout digitalReinbek bei Hamburg 2004
Elam, Kimberly:Geometry of Design - Studies in Proportion and CompositionPrinceton 2001
Lidwell, William; Holden, Kritina; Butler, Jill: Design – Die 100 Prinzipien für erfolgreiche GestaltungMünchen 2004
Diezmann, Tanja; Gremmler, Tobias: grids for the dynamic imageCrans-près-Céligny 2003
Götz, Veruschka: Raster für das WebdesignHamburg 2002
Webrecherche
www.wissen.deStand: Mai 2005
www.wikipedia.deStand: Mai 2005
Anhang
Abbildungsverzeichnis
Abb.1 Sergeij Eisenstein,Notation zum Film „Alexander Newski“
Abb.2 - Abb.6, Abb.12, Abb.13, Abb.16 und Abb.18 Skopec, David: Layout digital
Abb.7www.rempe.de Stand: Mai 2005
Abb.8, Abb.17www.google.deStand: Mai 2005
Abb.9 Elam, Kimberly:Geometry of Design - Studies in Proportion and Composition
Abb.10, Abb.15Lidwell, William; Holden, Kritina; Butler, Jill: Design – Die 100 Prinzipien für erfolgreiche Gestaltung
Abb.11www.leica.deStand: Mai 2005
Abb.14www.nl-design.net/browserday/Stand: Mai 2005
Abb.19www.csszengarden.comStand: Mai 2005
Recommended