Informationsarchitektur und -visualisierung | WS 09/10

IA / IV 01: Matrix

Als Einstieg in die Welt der Informationsarchitektur und -visualisierung bekamen wir die Aufgabe eine 10 x 10 Felder umfassende Matrix mit einfachen grafischen Symbolen zu füllen, die anhand von 10 verschiedenen Parametern gestaltet werden sollten. Die Parameter lauteten: Punkt, Linie, Kurve, Umriss, Kontrast, Progression, Schraffur, Struktur, Unordnung, Prägnanz.

Nachdem man zunächst eine Skizze angefertigt hatte wurde der entgültige Entwurf digital in Illustrator umgesetzt.

Im letzten Schritt wählte ich mir eine Zeile aus der Matrix und suchte in meinem Regal nach Reminiszenzen an diese 10 Grafiken in der Zeile. Für diesen Vorgang nahm ich die Zeile Schraffur.

IA / IV 02: Referat

Als Vorbereitung auf die nächste Aufgabe sollten wir uns nun eine bekannte Persönlichkeit aussuchen, die in irgendeiner Weise dem Thema Informationsarchitektur und -visualisierung nahe steht oder in jedem Fall gestalterisch tätig ist. Zu dieser Person sollten wir Recherchen anstellen um am Schluss ein Referat über sie zu halten. Ich bearbeitete in diesem Kontext den Grafiker Herbert W. Kapitzki. Kapitzki beschäftigte sich ausführlich mit der programmierten Gestaltung, mittels der aufgrund von mathematischen und geometrischen Operationen zu neuen Formen findet. Dabei hält er sich an ganz bestimmte Gesetze und Regeln. Zu seinen bekanntesten Arbeiten zählen die Gestaltung des deutschen Pavillons auf der Expo Montréal 1967 und seine langjährige Tätigkeit im Landesgewerbeamt Baden - Württemberg.

Ausführliche Informationen zu Herbert W. Kapitzki sind im Materialordner im PDF Handout_Kapitzki_HDettmann.pdf zu finden.

IA / IV 03: Textvisualisierung

Als Grundlage für diese Aufgabe diente uns das zuvor gehaltene Referat. In meinem Fall der Stichpunktzettel für meinen Vortrag. Die Herausforderung bestand darin, einen Text visuell umzusetzen und zwar so dass er nachher auch noch lesbar ist. Man musste also eine Art visuellen Code für die Zeichen entwickeln. Ich entwickelte dazu eine Idee, den Text und seine Zeichen nicht direkt visuell neu zu interpretieren, sondern mich vor allem auf die Verteilung der Prioritäten auf die einzelnen Wörter und Textabschnitte zu konzentrieren. Genauer bedeutet das, dass ich meinen Stichpunktzettel dahingehend untersuchte, welche Wörter wie ausgezeichnet sind, also ob sie kursiv oder fett geschrieben sind oder ob es Zahlen sind. Dazu entwickelte ich eine einfache Visualisierung für den Text und trennte die Auszeichnungen farblich voneinander. Zusätzlich koppelte ich die ganze Visualisierung mit dem Parameter Zeit und ordnete das ganze auf einer Zeitleiste an.

Nach einer ersten groben Skizze machte ich mich daran das ganze digital umzusetzen und dabei die Darstellung noch weiter zu entwickeln. Um ein schnelleres Verständnis für die Visualisierung zu fördern fügte ich noch einige Parameter wie Zeilen und Sätze hinzu, die ich ebenfalls abstrakt darstellte aber so eine gewisse Ordnung innerhalb der Wörter erreichte. Die Länge des gesprochenen Wortes berücksichtigte ich ebenfalls und streckte daher die Rechtecke, die die einzelnen Wörter symbolisierten, auf einer Sekundenskala. Somit konnte ich nun auch darstellen wie lange es braucht dieses Wort laut zu sprechen.

Mit dieser Visualisierung ließen sich nun verschiedene Informationen zu meinem Text auslesen: Textlänge, Wort -, Satz - und Zeilenanzahl, Länge des gesprochenen Wortes oder Satzes, Auszeichnung und damit einhergehend die Priorität des Wortes im Text. Um diese Informationen nun sinnvoll einsetzen zu können überlegte ich mir wie man das Ganze in einem Interface umsetzen könnte und entwickelte hierzu einen Entwurf und einen Prototyp. Dieses Interface ist eine Software - Oberfläche für den heimischen PC. Die Software ist eine erweiterte Aufnahme - Umgebung mit der ich einen Text einsprechen und danach analysieren kann. Zusätzlich zu den gesprochenen Aufnahmen wird der Text als Datei in das Programm geladen und diese Datei auf Auszeichnungen untersucht. Die gebündelten Informationen aus der Aufnahme und der Textdatei fließen nun in die Visualisierung ein. Der Beutzer kann nun mittels der Software sehen, wo man vielleicht Teile im Text kürzen oder gar weglassen könnte oder die Formulierung ändern könnte um Zeit zu sparen. Diese Art der Textanalyse kann vor allem bei der Vorbereitung auf eine Rede oder Präsentation von großem Nutzen sein.

IA / IV 04: Prozessvisualisierung

Da die grafische Aufarbeitung von Daten oder Informationen in diesem Kurs ein sehr zentrales Thema ist ging es in der folgenden Aufgabe wieder um eine Visualisierung, jedoch mit höherem Abstraktionsgrad. Es sollte ein Prozess visualisiert werden also ein Handlungsablauf mit einem Start und einem Ende. Nachdem ich mich zunächst einmal rein theoretisch dem Thema Prozessvisualisierung näherte, um überhaupt zu wissen um was es sich dabei handelt, entschied ich mich dazu die Erstellung einer Ebay - Auktion zu visualisieren. Auch hier fertigte ich zunächst eine Skizze an um die wesentlichen Merkmale der Darstellung zu umreißen. Diese Merkmale waren zum einen die unterschiedlichen Operationen, die dargestellt werden mussten, und zum anderen der zeitliche Ablauf selbiger.

Um nun auch hier wieder von der Skizze zu einem ersten Entwurf zu kommen setzte ich meine erste Idee digital um und entwickelte sie weiter. Dabei überarbeitete ich die bisher entwickelten Symbole für die Operationen oder entwckelte sie gänzlich neu. Zudem unterteilte ich den Ablauf in dem ich die einzelnen Seiten berücksichtigte, die man durchläuft um die Auktion online zu stellen. Diese Seiten stellte ich in Form von gelben Flächen dar, mit der der Prozessstrang hinterlegt ist und ihn so in Abschnitte gliedert.

Weil der erste Entwurf der Prozessvisualisierung noch nicht so recht den Nagel auf den Kopf traf machte ich mich noch einmal daran und überarbeitete ihn. Dabei reduzierte ich die grafischen Elemente auf die Wichtigsten und ließ einige Dinge ganz weg. Die Flächen reduzierte ich auf Rahmen und der blaue Strang, der die verschiedenen Operationen miteinander verband, nahm ich komplett raus. Das Prinzip der Darstellung blieb jedoch erhalten und wurde nicht verändert. Im Anschluss an diese Arbeit entwickelte ich aus dem nun finalen Entwurf noch eine interaktive Umsetzung, die Materialordner zu finden ist.

IA / IV 05: Generative Grafik

Für die Webseite des Fachbereichs Design der Fachhochschule Potsdam sollte eine generative Grafik für den Header entwickelt werden. Die Herausforderung bestand darin, dass die Grafik nur ein Größe von 720 x 20 px haben durfte. Man musste also für eine sehr kleine Fläche eine möglichst prägnante Grafik entwickeln, die mit einfachsten grafischen Mitteln auskommt. Als Grundlage für meinen Entwurf nahm ich mir die 5 Menüleisten, die den Nutzer durch die Seite führen und unterteilte die Headerfläche in 5 Zeilen. Ich übertrug die Buttons der einzelnen Menüleisten ebenfalls als farbige Rechtecke auf die jeweiligen Zeilen in meiner Headergrafik. Dahinter stand die Idee, dass sich die Grafik je nach Verhalten des Users verändert und die Wege durch die Website anhand der angeklickten Buttons visualisiert werden. Je öfter ein Button angeklickt wird umso mehr wird er eingefärbt und tritt hervor.

Ich fertigte nun verschiedenste Varianten bezüglich der grafischen Darstellung und vor allem der Farbe an.

Schlussendlich kam ich zu diesem letzten Entwurf.

IA / IV 06: Navigation

Die finale Herausforderung war es nun eine spannende Navigation durch die im Kurs entstandenen Arbeiten zu entwickeln. Für die Konzeption verschaffte ich mir ersteinmal einen Überblick über alle Arbeiten und Medien, die dargestellt werden mussten. Daraus entwickelte ich die Navigation, die auf einer Matrix beruht. Jede Spalte beinhaltet ein Projekt, das farblich und mit einem Icon kodiert ist. In den einzelnen Feldern der Spalten sind Texte, Bilder und gegebenenfalls Prototypen des jeweiligen Projekts untergebracht. Man kann sich ausschließlich mit den Pfeiltasten durch die Projekte bewegen und das linear oder nonlinear. Hat man eine Spalte ausgewählt, so wird diese größer und gibt ihren Inhalt frei. Alle übrigen Spalten bleiben minimiert.

Der PDF - Prototyp ist im Materialordner unter Präsentation_Navigation.pdf zu finden.

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Informationsarchitektur und -visualisierung | WS 09/10 | Hermann Dettmann

IA / IV 01: Matrix

IA / IV 02: Referat

IA / IV 03: Textvisualisierung

IA / IV 04: Prozessvisualisierung

IA / IV 05: Generative Grafik

IA / IV 06: Navigation

Ein Projekt von

Fachgruppe

Art des Projekts

Betreuung

Entstehungszeitraum

zusätzliches Material