Information Architecture and Visualization | Dokumentation Karen Hentschel

Innerhalb des Kurses wurden Grundlagen zur Analyse von Informationsaufnahmeprozessen und zur Strukturierung komplexer Informationszusammenhänge unter didaktischen, logischen und ergonomischen Gesichtspunkten vermittelt.

Die folgende Dokumentation zeigt meine Ansätze und Versuche in den sieben Kursaufgaben zum Thema unter verschiedenen Gesichtspunkten.

In der ersten Aufgabe sollten wir ein Referat zu einer bekannten Persönlichkeit unserer Wahl aus dem kreativen Bereich halten. Zu diesem Referat sollte außerdem zusätzlich Handout erstellt werden. Meine Wahl fiel dabei auf John Maeda.

In dieser Aufgabe sollte eine Matrix mit 10 x 10 Feldern erstellt werden, in denen ausgewählte Begrifflichkeiten visualisiert und anschließend miteinander kombiniert werden sollten.

Im zweiten Teil der Aufgabe, sollten einige dieser Begrifflichkeiten und Kombinationen durch Fotos ersetzt und dadurch abstrahiert oder verstärkt werden.

Hierbei sollten wir einen ausgewählten Text visualisieren. Die Grundlage meiner Visualisierung bildeten Zitate aus meinem Referat über John Maeda.

In meiner Visualisierung werden die Zusammenhänge zwischen den Buchstaben anhand der Häufigkeit ihres Auftretens im Text, sowie der Häufigkeit der Kombination mit anderen Buchstaben untersucht und dargestellt. Die Grafik baut sich ausgehend von dem Buchstaben, der am meisten auftritt auf und verändert sich mit jedem neuen Buchstaben proportional zur neuen Häufigkeit von Buchstabenfolgen.

Zuerst wird der User aufgefordert einen Text einzugeben. Dies kann er im entsprechenden Textfeld am unteren Ende der Grafik. Umlaute werden automatisch in Vokale umgewandelt. Linker Hand befindet sich zusätzlich eine Legende, damit der User die Farben der Grafik den entsprechenden Buchstaben zuordnen kann. Des Weiteren kann er mittels der darauf folgenden Button alle Elemente sowie das Raster ein- bzw. ausblenden. (Abb. 1)

Mit Eingabe des Ersten Buchstabens baut sich die Textvisualisierung vom Mittelpunkt aus auf. (Abb. 2) Alle Buchstaben werden nun auf ihre Häufigkeit im Text untersucht. Danach werden die Ihnen am Häufigsten folgenden Buchstaben ermittelt. Dies geschieht so lange, bis der meist folgende Buchstabe entweder am Ende eines Wortes steht, somit keinen Folgebuchstaben hat, oder schon vergeben ist. Dieses Abfolge wird solange nachgegangen, bis alle Buchstaben in der Grafik untergebracht sind. Sollten zwei Buchstaben gleich oft auftreten, hat der dem Alphabetsanfang nähere den Vorrang.

In Abb. 3 hat der User »Der« eingegeben. Da keiner der Buchstaben häufiger als der andere auftritt, werden sie anhand ihrer Stellung im Alphabet untersucht. Dadurch ergibt sich, dass D vor E und das wiederum vor R abgebildet wird.

Im Satz »Der einzige Weg fuer« (Abb. 4 ) tauchen 1 x D, 5 x E, 1 x F, 2 x G, 2 x I, 1 x N, 2 x R, 1 x U, 1 x W, 1 x Z auf. Da das E der im Text am häufigsten benutze Buchstabe ist, beginnt die Visualisierung von ihm aus. Das E kommt in diesen Worten am häufigsten in der Folge mit R vor. Danach wird untersucht, von welchem Buchtaben R am häufigsten gefolgt wird. Da R am meisten am Ende eines Wortes, also alleine steht, endet diese Spiralkette und eine neue beginnt.

In Abb. 5 wird das Konzept nochmals anhand eines längeren Textes verdeutlicht. Wie bereits erwähnt, kann der User sich unterstützend das der Visualisierung zu Grunde liegende Raster einblenden. (Abb. 5 ) Dies hilft Ihm ihm die Abfolge des Aufbaus nachzuvollziehen.

Durch das aktivieren der Buchstaben über die Legende kann der User sich zusätzlich die Positionierung einzelner Buchstaben in der Grafik aufzeigen lassen. (Abb. 7, Abb. 8)

In der vierten Aufgabe sollten wir unseren Weg zur FH visualisieren. Ich habe dafür die Farbwerte in meiner Umgebung in Abhängigkeit zu meiner Blickweite vom jeweiligen Punkt aus untersucht und dargestellt. (Abb.1)

Meine Position wird durch die dunkel umrandeten Quadrate dargestellt. Die sie umgebenden, helleren Kästchen stehen für das, was ich rechts und links von mir sehe. Sie stellen also dar, wie weit ich schauen kann. Je nachdem wir lange ich an einem Ort verweile, kann ich die Farben vor Ort detaillierter wahrnehmen und es entsteht ein feineres Raster. (in der Übersicht sind die Kästchen dann farbintensiver und/oder dunkler) Wenn ich mich zum Beispiel im Regio bewege, nehme ich mein Umfeld, bis auf das direkte, nur noch in ganz schwammigen Farben war, während ich beim Warten auf dem Bahnhof sehr viel differenzierter wahrnehmen kann.

Oberhalb der Grafik findet der User Namen der Anfangs - und Endpunkte der Reise sowie Start- und Endzeit und die zurückgelegte Strecke in m. Zusätzlich findet er rechts neben der Grafik eine Legende. Des Weiteren kann er sich unterhalb der Grafik einen genaueren Überblick über einzelne Details der Strecke wie Länge, Zeit und Stops verschaffen.

Beim Überfahren der Segmente mit der Maus werden diese vergrößert. (Abb.2) Durch anklicken erhält man die nächst größere Auflösung des Segmentes. Dadurch kann man sich bis zu einer Pixel genauen Darstellung in die Einzelnen Segmente zoomen. (Abb.3)

In dieser Aufgabe sollten wir einen selbsgewählten Dialog ohne Text visualisieren. Als Grundlage dafür diente mir eine Streitszene aus Martin Scorseses Film »casino« zwischen den beiden Hauptakteuren Ace und Nicky in der Wüste von L.A. .

Ich habe dabei das Verhalten und gewisse Faktoren des Gespräches untersucht und in der Visualisierung hervorgehoben. Dadurch bekommt der User unter anderem Informationen über die Gesprächsanteile der Gesprächspartner und deren Länge sowie die Anzahl der verwendeten Worte. Außerdem über deren Lautstärke, die Art der hervorgebrachten Information (Frage, Aussage, Ausruf), die Gestikulation (Handbewegungen), ob die Gesprächspartner einander anschauen oder dem Anderen ins Wort fallen und wie oft innerhalb des Ausschnittes geflucht wird. All diese Informationen kann er sich mit Hilfe der Legende in der rechten Spalte ein und ausblenden.

Beim Starten der Visualisierung startet auch der Dialog. Er baut sich Kreisförmig auf. Dies gibt dem User die Möglichkeit den Dialog komplett zu überschauen und eine Aussage über seine Gesamtlänge zu treffen.

Im Außenrand des Kreises kann der User die Zeit ablesen und innerhalb des Dialoges zeitlich navigieren. Der User kann den Dialog auch mit Hilfe des »Anhalten« Buttons in der rechten Spalte anhalten. (Abb. 1)

Nach dem Abspielen des Dialoges hält dieser an. Der User hat aber jederzeit die Möglichkeiten ihn über den »Abpsielen« Buton erneut zu starten. (Abb. 2)

Oberhalb der Legende erhält der User eine separierte, verkleinerte Ansicht der Diagrammteile der beiden Protagonisten. Durch deren Aktivierung kann er sich die Beiden Gespächspartner innerhalb der Grafik unabhängig voneinander anzeigen lassen. (Abb. 3)

Der User hat des Weiteren über die Legende die Möglichkeit sich das der Visualisierung zu Grunde liegende Raster einzublenden. Dadurch kann er genauer einsehen, wann und in welcher Größe z.B. die Grundlautstärke über- bzw. unterschritten wurde oder wann die Hände der Gesprächspartner sich in welche Richtung bewegen. (Abb. 4)

Um sich die Visualisierung genauer zu betrachten kann der User mit Hilfe des »Zoom in« Buttons in die Grafik zu kommen. (Abb. 5)

Die sechste Aufgabe bestand in dem Erstellen von 16 x 16 Pixel großen Icons zu vorgegebenen Wortpaaren.

ein - aus - standby schnell - langsam groß - klein kurz - lang addieren - subtrahieren laut - leise oben - unten weich - hart rauh - glatt dunkel - hell links - rechts positiv - negativ aktiv - passiv elastisch - starr schwebend - lastend heiss - eisig leer - voll ausgeglichen - spannungsvoll nah - fern anschwellend - abschwellend

Im zweiten Teil der Aufgabe sollte ein Teil diese Icons dann zusätzlich animiert werden. Die animierten Icons sind durch das Öffnen der folgenden Grafik ersichtlich.

Die letze Aufgabe bestand darin, die sechs Teilaufgaben des Kurses interaktiv mit einem nachvollziehbaren Navigationskonzept zu präsentieren.

Das Navigieren durch die Dokumentation erfolgt durch das Bewegen der blauen Kugel auf dem Startscreen zum gewünschten Sektor. Die Aufgaben sind dabei chronologisch zu ihrer Abfolge im Kurs mittels bezeichnenden Grafiken im Uhrzeigersinn um den Titel angeordnet. Die Kreisstücke um die Kugel sowie die Lücken in den Kreisen der nächsten Ebenen visualisieren Ihnen welche Wege Sie innerhalb der Grafik vom jeweiligen Punkt aus gehen können. Je nach Ebene ergeben sich dabei weitere Unterebenen, die durch die Kreise am Rand der Aufgaben visualisiert sind. Auch diese erreicht man innerhalb der Ebene durch das Bewegen der blauen Kugel.

Durch das zurückziehen der Kugel in den nächst tieferen Ring, wechseln sie in die nächst tiefere Ebene.

Zu den Hintergrundinformationen der Projekte gelangen Sie durch das Bewegen der blauen Kugel in den innersten Kreis.