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