Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Informationsarchitektur und -visualisierung

Informationsarchitektur und -visualisierung

Kursdokumentation Informationsarchitektur und -visualisierung SoSe 2011

1. Referat

walk_from_bracket.gifwalk_from_bracket.gif

Als Referatsthema wählte ich John Horton Conways Projekt »Game of Life«. Es handelt sich um ein Spiel auf einem zweidimensionalen zellulären Automaten, das Regeln aufstellt, unter welchen Umständen die Zellen des Automaten geboren werden, überleben bzw. sterben. Dabei komplexe Objekte, die Lebensformen ähneln. Das Projekt markiert die Anfänge des generativen Designs.

Präsentation

Lebenslauf John Horton Conway

2. Matrix

Aufgabe war es, eine 10x10 Matrix aus folgenden visuellen Variablen zu erzeugen:

01 Punkt 02 Linie 03 Kurve 04 Umriss 05 Kontrast 06 Progression 07 Schraffur 08 Struktur 09 Unordnung 10 Prägnanz

page40.pngpage40.png

Ich benutzte für die Spalten die jeweilige Variable als gestalterisches Element, für die Zeilen setzte ich sie als inhaltliche Aussage um.

page41.pngpage41.png

Eine weitere Teilaufgabe bestand darin, die Matrix zu digitalisieren. Dabei bemühte ich mich um gestalterische Homogenität.

Screen Shot 2012-06-13 at 20.25.24.pngScreen Shot 2012-06-13 at 20.25.24.png

Für die Teilaufgabe Fotomatrix wählte ich die Zeile »Prägnanz« und fotografierte Dinge aus meinem Haushalt.

3. Text

Aufgabe war es, ein Diagramm zu erstellen, das meinen Umgang mit Text visualisiert.

page59.pngpage59.png

In meinem ersten Entwurf beschloss ich, die Wörter eines Textes nach ihren beginnenden Teilwörtern alphabetisch zu ordnen und sie zu Unterbäumen eines Gesamtbaumes zu vereinigen, die sich am ersten Buchstaben verzweigen, in dem sie sich unterscheiden.

Präsentation

ansatz2_animated_400.gifansatz2_animated_400.gif

Im zweiten Versuch abstrahierte ich weiter. Ich ging wieder von der Grundstruktur des Kreises aus, diesmal hat der Baum Tiefe 1, jeder Pfad steht für einen Buchstaben, beginnend mit dem ersten Buchstaben auf 12 Uhr und dann im Uhrzeigersinn weiterlaufend. Jeder Strahl ist dann in 26 Punkte unterteilt, ein Wort stellt ein Polygon aus den Buchstabenpunkten und dem Baumursprung dar. Jedes Wort erhält dadurch eine charakteristische Struktur, Übereinstimmungen in Teilwörtern können durch Drehen der Wörter, um Deckungsgleichheiten zu finden, erforscht werden.

4. Dialog

Es sollte ein Gesprächsverlauf unter Hervorhebung wichtiger Punkte visualisiert. Dabei war auf Tonfall, Mimik, Gestik etc. zu achten. Mir fiel dazu ein kurzer Dialog aus Louis De Funès' »Hasch mich, ich bin der Mörder« (im französischen Original »Jo«) ein. Er hat eine hohe Geschwindigkeit und gilt als archetypischer De-Funès-Dialog.

Antoine Brisebard (de Funès) kontrastiert mit seiner Expressivität und sich bei jedem Satz ändernden Emotion den Inspektor (Bernard Blier), der seinerseits keinerlei Regungen zeigt.

Inspektor: Ich habe einen Verdacht. Brisebard: Wen? Inspektor: Sie. Brisebard: Mich?? Inspektor: Ja. Brisebard: Nein!! Inspektor: Doch. Brisebard: Ooooah!!!

page71.pngpage71.png

Meine erste Skizze befand sich noch auf einer sehr niedrigen Abstraktionsebene. Ich verwarf die Idee, da sie die Aufgabenstellung nicht erfüllt hätte.

page73.pngpage73.png

Ich versuchte, die unterschiedlichen Emotionalitätsebenen durch Wellen unterschiedlicher Amplitude auszudrücken. Dazu benutzte ich Processing. Die Darstellungsform erwies sich jedoch als wenig aussagekräftig.

page78.pngpage78.png

In einem neuen Entwurf konzentrierte ich mich auf die Dialogstruktur und darauf, wie sie interaktiv beeinflusst werden könnte. Ich entwarf eine Informationsarchitektur, mit der es möglich war,

  • die Reihenfolge der Sätze eines Parts zu ändern
  • die Reihenfolge der Sätze beider Parts zu ändern
  • einzelne Sätze auszulassen
  • einen Part komplett auszulassen
  • ganze Dialogteile zu verschieben
  • die Sätze in zufälliger Reihenfolge abzuspielen.

5. Stammbaum

Hier war ein Familienstammbaum zu erstellen, der mindestens 4 Generationen umfasst und nach neu entwickelten Informationsarchitekturen erstellt ist.

Als Datengrundlage wählte ich das House of Windsor.

page82.pngpage82.png

In einem ersten Ansatz stellte ich die Vorfahren (und den Bruder) von Prinz Harry (roter Punkt) auf Basis ihrer Geburtsjahre als schwarze Punkte auf einer Zeitachse dar. Dann zog ich konzentrische Kreisbänder mit dem Geburtsjahr des Kindes als Mittelpunkt und denen der Eltern als Innen- und Außenradius, um Eltern-Kind-Beziehungen darzustellen. Einem Paar konnten so auf einen Blick alle Nachfahren zugeordnet werden. Der Ansatz erwies sich als insgesamt zu unübersichtlich, auch überbetonte er durch die dominanten Kreisbänder die Relevanz der Information, welchen Altersunterschied ein Paar hat.

page83.pngpage83.png

Der neue Ansatz enthält deutlich mehr Information:

Ein Menschenleben ist durch einen Kreisbandausschnitt dargestellt (Außenradius Geburt; Innenradius Tod, bei lebenden Personen null).

Die Eltern-Kind-Beziehung ist durch ineinanderragende Kreisausschnitte dargestellt.

Eine Paarbeziehung ist durch die grüne Grenzlinie zwischen zwei Menschen gekennzeichnet. Rote Punkte stellen Scheidungen dar.

Man kann sehr gut verfolgen, wer gleichzeitig gelebt hat bzw. lebt, welcher Elternteil sein eigenes Kind überlebt hat usw.

Mittelpunkt ist das aktuelle Datum.

page84.pngpage84.png

In dieser Darstellungsweise ließe sich auch eine Hochzeit als Zusammenführung zweier Familienstammbäume darstellen. Mittelpunkt ist das Hochzeitsdatum.

6. Navigation

Am Ende sollten alle Aufgaben für die Endpräsentation in einer Navigation zusammengefasst werden.

Da meine Idee visuell hauptsächlich auf Transitions basiert, habe ich sie in Javascript umgesetzt.

Navigation (optimiert für Firefox)

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: DD

Entstehungszeitraum

Sommersemester 2011