Informationsarchitektur und -visualisierung // WS 06/07 Tillmann Dierichs
Im Kurs Informationsarchitektur und -visualisierung wurden Grundlagen zur Analyse von Informationsaufnahmeprozessen und Strukturierung komplexer Informationszusammenhänge unter verschiedenen Gesichtspunkten vermittelt.
In der ersten Aufgabe sollte ein Referat und eine Dokumentation zu einem selbst gewähltem Thema aus dem Bereich der Informationsarchitektur/ Informationsvisualisierung erarbeitet werden.
Ich habe mich für das Thema "Wahrnehmung" entschieden und die Bereiche der selektiven Wahrnehmung und Wahrnehmungstäuschungen in einem 15 minütigen Referat näher Beleuchtet.
[ http://incom.org/code/IP_media/IP_557/IP_upload/A01_Doku_Wahrnehmung.pdf](http://incom.org/code/IP_media/IP_557/IP_upload/A01_Doku_Wahrnehmung.pdf) [Dokumentation](http://incom.org/code/IP_media/IP_557/IP_upload/A01_Doku_Wahrnehmung.pdf)
http://incom.org/code/IP_media/IP_557/IP_upload/A01_Praesi_Wahrnehmung.pdf Präsentation
Das Ziel der zweiten Aufgabe war es, entweder den Umgang mit Text zu visualisieren, oder den Inhalt eines Textes so zu kodieren, dass dieser später auch wieder decodiert werden konnte. Zudem sollte der zu visualisierende Text auch lesbar und nachvollziehbar sein.
Meine Textvisualisierung besteht aus vertikal angeordneten Balken. Jeder Balken steht für einen Buchstaben, dabei gibt die Breite der Balken Auskunft um welchen Buchstaben es sich handelt. Der kürzeste Block wäre hier ein "A", der längste das "Z". Die Höhe zeigt, wie oft der jeweilige Buchstabe mit gesamten Text vorkommt. Auf diese Weise kann vom Betrachter schnell erfasst werden, welche Buchstaben im Text am Häufigsten vorkommen und kann dadurch unter anderem auch Rückschlüsse auf den Inhalt des Textes ziehen.
Wichtig war für mich, dass die Anmutung des kodierten Textes einem klassischen Schriftbild (Flattersatz, Grauwerte etc.) ähnelt, jedoch trotzdem völlig anders gelesen wird.
http://incom.org/code/IP_media/IP_557/IP_upload/A02_Textvisualisierung.gif Textvisualisierung
Es sollten in einer 10 mal 10 Felder großen Matrix die visuellen Variablen Punkt, Linie, Kurve, Umriss, Kontrast, Progression, Schraffur, Struktur, Unordnung und Prägnanz in den Spalten und Zeilen miteinander kombiniert werden. Dabei sollte nur mit Grundformen gearbeitet werden.
Ausgehend von 20 Wortpaaren (schnell - langsam, groß - klein usw.) sollten Icons in einer 16x16 Pixel-Matrix entwickelt werden, die diese Funktionen ausdrücken.
Zur statischen Variante sollte anschließend zu jedem Icon eine animierte Version entstehen. Die Begriffspaare wurden hierbei in einem gemeinsamen Icon dargestellt.
http://incom.org/code/IP_media/IP_557/IP_upload/A04_Icons_statisch.gif Icons (statisch)
http://www.lunic.de/fhp/icons/ Icons (animiert)
Ziel dieser Aufgabe war es, eine visuelle Abbildung einer beliebigen Suchergebnisliste (z.B Google) zu entwickeln. Die Darstellung sollte verständlich, logisch und lesbar sein. Dabei sollte die Relevanz und Zuordnung der Suchergebnisse zu sehen sein, so wie eine textliche Ebene abgerufen werden können.
Meine Suchmaschine mit dem Namen "MindSearch°°" soll dem User bei Gedankengängen zu verschiedenen Themen unterstützen und inspirieren.
Der Nutzer kann zunächst nach nur einem Suchbegriff suchen und bekommt die Ergebnisse in Form von Kreisen und Punkten innerhalb eines Ergebnisskreises (vergleichbar mit einer Ergebnisliste bei Google) angezeigt. In den nachfolgenden Darstellungen werden nur die ersten zehn aktuellsten Treffer angezeigt, die jedoch im permanent verfügbaren Menü am unteren Bildschirmrand geändert werden können. Über die kleinen "+" und "-" Icons über dem Kreis mit den Suchergebnissen kann jedoch auch die Zahl der angezeigten Suchergebnisse schnell variiert werden.
Die Suchergebnisse werden wie bereits beschrieben in Form von Kreisen angezeigt, die sich im Uhrzeigersinn um das Zentrum des Suchbegriffs anordnen. Je weiter sich das Suchergebnis im Zentrum befindet, desto aktueller und relevanter ist er. Die dicke der Kreise gibt den Umfang des Ergebnisses an - je dicker, desto mehr Inhalt. Die Größe des in grau gehaltenen Suchkreises gibt die Gesamtmenge der gefundenen Ergebnisse im Web an. Je größer, desto mehr Suchtreffer insgesamt. Die genaue Zahl der Suchtreffer steht in grau jeweils über jedem Suchkreis.
Die Punkte symbolisieren die aktuellsten Suchtreffer zu Bildern, die jedoch auch deaktiviert werden können. Ebenfalls können auch zusätzlich aktuelle Treffer zum Thema "News" angezeigt werden.
Der User kann nun entweder nach weiteren Begriffen suchen oder im Menü festlegen ob und wie viele weitere Begriffe, die dem zuvor gesuchten Thema am nächsten kommen, ebenfalls angezeigt werden. Die Suchbereiche ordnen sich dann zufällig um den zuerst gesuchten Begriff an.
Klickt der Nutzer mit der rechten Maustaste auf ein Suchergebnis, werden ihm die im Suchergebnis bzw. auf der nachfolgenden Website am häufigsten vorkommenden Begriffe angezeigt. Klickt der User auf eines dieser Begriffe öffnet sich ein neuer Suchkreis und zeigt wieder zu diesem Begiff alle Ergebnisse an.
Fährt der Nutzer der Suchmaschine ganz normal mit der Maus über die Suchergebnisse, bekommt er direkt eine kleine Vorschau der Website mit den ersten Textzeilen angezeigt. So können einfach und schnell alle Suchergebnisse "abgefahren" werden um zu sehen ob eine interessante Website dabei ist.
Klickt der User nun mit der linken Maustaste auf ein Suchergebnis, bekommt er ein vergrößertes Fenster angezeigt, in dem alle Inhalte der Website angezeigt werden. Von hier aus kann die Website durch den Klick auf den Link direkt besucht werden und es können weitere Einstellungen zu dem Suchergebnis erfolgen wie z.B. das anlegen eines Lesezeichens. Die gespeicherten Lesezeichen können später im Hauptmenü wieder unter dem Punkt "Lesezeichen" besucht werden.
Die Suchbereiche, die je nach Suchbegriff eine andere Farbe haben, können auch mit der Maus frei verschoben werden. (Per Drag & Drop an den farbigen Bereichen die mit dem gesuchten Begriff versehen sind.) Verschiebt der User die Bereiche, bis der graue Kreis den eines anderen berührt, verschieben sich automatisch die Suchergebnisse in Richtung eines anderen Ergebnisskreises je nach dem, in wie weit das Ergebnis mit dem Suchbegriff eines anderen zusammenhängt.
Zieht der Nutzer die Suchbereiche wieder auseinander, ordnen sich die Suchergebnisse wieder nach Wichtigkeit.
Durch diese Art der Suche können neue Zusammenhänge gefunden werden. Der User kann nach Verwandten Begriffen suchen, durch diese wieder auf neue Themen stoßen und hat dabei immer einen genauen Überblick über die Relevanz von Suchergebnissen.
Suchergebnisliste
Eine Weltkarte zu einem beliebigen Themengebiet sollte erstellt werden. Die Karte sollte visuell an das Thema angepasst sein und die Informationen verständlich, logisch und lesbar transportieren.
Entstanden ist eine Weltkarte die in erster Linie dazu dient, zu bestimmten Suchbegriffen entsprechende Fotos zu finden und diese an den jeweiligen Orten auf der Erde geografisch genau anzuzeigen. Der Nutzer soll also auf diese Weise die Möglichkeit haben, per Fotos einen genauen Eindruck z.B. seines zukünftigen Reiseziels zu erhalten.
Nach dem Start der Software sieht der Nutzer eine Weltkarte, die aus unendlich vielen einzelnen Fotos besteht. Jedes Foto zeigt dabei ein Motiv von der jeweiligen Umgebung, an der es platziert ist.
Der Nutzer hat nun die Möglichkeit mit der Maus die Karte abzufahren und so nähere Informationen und größere Ansichten der Bilder zu erhalten. Wenn ein Bild interessant erscheint, kann es angeklickt werden und es erscheint eine Großansicht des Fotos.
In dieser Ansicht können Bilder, die sich in der Nähe des Aufgenommen Fotos befinden durch Mausbewegungen in die jeweiligen Richtungen ebenfalls betrachtet werden.
Es besteht außerdem die Möglichkeit, die Auflösung - also die Dichte der angezeigten Bilder zu erhöhen und an Ausschnitte aus der Karte heran zu zoomen.
Möchte der Nutzer zu ganz bestimmten Suchbegriffen entsprechende Bilder angezeigt bekommen, so kann er die Suchfunktion nutzen.
Anschließend werden Ihm alle Suchergebnisse in Form von kleinen weißen Quadraten angezeigt, die auch wieder durch anklicken angesehen werden können.
Im Menü auf der rechten Seite kann der Nutzer jederzeit sehen, wo er sich geografisch auf der Karte befindet und in welchen Länder der Erde es zu der Suchanfrage ebenfalls passende Treffer gab.
Weltkarte
In der letzten Aufgabe sollten die vorangegangenen Aufgaben und Ergebnisse selektiert und zusammengefasst werden. Dazu sollte eine einfache und themenbezogene Navigation erstellt werden, die durch die Arbeiten und Bereich führen sollte. Dabei sollte dem Benutzer ein dynamischer Eingriff in die Navigation ermöglicht werden, zugleich jedoch auch logisch und verständlich sein.
Meine Navigation lehnt sich gedanklich an die Aufgaben 3 und 5 an. Die Grundidee war es, eine Navigation in einem festen Raster zu entwerfen, in dem alle entstandenen Arbeiten angesehen werden können. Der Betrachter sollte auf die verschiedenen Themenbereiche neugierig gemacht werden und immer tiefer in die einzelnen Bereiche "eintauchen" wenn sie von Interesse sind.
Der Hauptbereich der Präsentation stellt zugleich auch die Navigation dar. Hier sind alle Menüpunkte in gleicher Größe im immer gleichen Raster aufgelistet.
Fährt der Benutzer mit der Maus über einen Menüpunkt so bekommt er per Roll-Over, neben der dazugehörigen Aufgabenstellung, einen weiteren Einblick auf die nachfolgenden Seiten. Er sieht durch die hellgrau hervorgehobenen Bereiche (wie auch auf der ersten Ebene) wie viele weitere Inhaltsseiten vorhanden sind und bekommt so einen schnellen Eindruck, wie Umfangreich die nachfolgende Ebene ist.
Gelangt der Betrachter auf die nächste Seite bzw. "Ebene" wird auch hier wieder ein Einblick auf die nächsten Seiten ermöglicht.
Im oberen Bereich der Dokumentation steht zusätzlich eine Hilfsnavigation zur Verfügung, über die ebenfalls navigiert werden kann und die eine optimale Übersicht gewährleistet. Auf Farben in der Navigation wurde absichtlich weitestgehend verzichtet.
Da es sich bei meiner Dokumentation um ein statisches PDF handelt, wurden nur einige Menüelemente beispielhaft dargestellt. Eine gekürzte Version befindet sich im Materialordner.
