Diese Dokumentation beschäftigt sich mit den Aufgaben, die im Laufe des Sommersemesters 2007 im Kurs „Informationsarchitektur und -visualisierung“, geleitet von Prof. Danijela Djokic, entstanden sind.

Im Laufe des Kurses wurde anhand von 7 Aufgaben die Information vermittelt, Informationen und Zusammenhänge unterschiedlicher komplexer Stufen visuell wie strukturell zu vermitteln. Dabei entstanden sind Lösungen zu Aufgaben, die von einer Textvisualisierung über Erstellung von Icons bis hin zum Aufbau einer Navigation der Endpräsentation. Im Folgenden wird jede Aufgabe und deren Lösung näher beleuchtet.

Copyright

©Thomas Sonsalla

Untersucht werden Strukturen von Informationsarchitektur im digitalen Medium. (Beispiel: Sitemap, Matrix, Hyperbolic Tree, Thesaurus...) oder Grundlagen zur Informationsvisualisierung. (Semiotik, Wahrnehmungstheorie, Ergonomie, Farblehre, Piktogramme...).

Gliedern Sie Ihre Untersuchungen in Recherche, Dokumentation, Analyse und Präsentation als 15-Minute-Report vor dem Semester. Jeder Student erarbeitet ein IA oder IVBeispiel.

Kriterien: 01 Thema, Beschreibung, Funktion 02 Bewertung 03 Quellenangaben

Semiotik

Hergeleitet aus dem Altgriechischen techne semiotike, was mit „Lehre von (Kenn-)Zeichen übersetzt werden kann, beschäftigt sich die Semiotik um die Bedeutung und Deutung von Zeichen. Dabei wird sowohl nach Zeichenart (Index, Icon, Symbol) unterschieden als auch nach Deutungskriterien (Syntax, Semantik, Pragmatik).

Das Referat gibt, angefangen von einem kurzen historischen Überblick, eine kurze Zusammenfassung zu den diversen Teilbereichen und jeweils Bildbeispiele zur Erklärung.

Die Bewertung des Themas setzt sich mit der Frage nach “Universellen Zeichen„ auseinander.

Die Referate können hier heruntergeladen werden:

http://incom.org/code/IP_media/IP_618/IP_upload/Sonsalla_A01_Referat_Semiotik.pdf Download Bildschirmversion

http://incom.org/code/IP_media/IP_618/IP_upload/Sonsalla_A01_Referat_Semiotik_Druckversion.pdf Download Druckversion

Copyright

©Thomas Sonsalla

Erstellen Sie Diagramme welche:

02.1

entweder Ihren Umgang mit Text visualisieren: - Sie können, als Beispiel, die Anzahl aller im Text vorkommender Buchstaben in Form einer Datengrafik visualisieren

oder

02.2

den Inhalt Ihres Textes darstellen: - Sie können eine Informationsarchitektur erstellen, die in ihrer inhaltlichen Aussage einen Bezug zu Ihrem Thema darstellt.

Cirlce Lines

Als Visualisierungsgrundsatz diente ein Satz aus dem vorangegangenen Referat zum Thema Semiotik.

Dabei wurde jedoch nicht der Inhalt in Form einer Informationsarchitektur dargestellt, sondern eine Visualisierung erstellt.

Der Aufbau

Auf einer Koordinatenleiste befinden sich 26 Markierungen, eine für jeden Buchstaben des Alphabets. Sonder- und Satzzeichen sowie Umlaute werden hierbei ignoriert.

Beginnt man mit dem Eingeben eines Wortes, so bilden sich von Buchstabe zu Buchstabe Kreisbögen, immer abwechselnd ober- und unterhalb der Leiste. Zusätzlich verstärkt sich die Linienstärke alle zwei Verbindungen geringfügig. Der Anfang des Wortes wird markiert, so dass zusätzlich zur Linienstärke eine weitere Orientierung entsteht, den Text zu verfolgen und die Grafik zu entschlüsseln.

Jedem Wort wird eine Farbe zugeteilt. Die Farbwahl ist zwar in den Beispielen rein willkürlich gewählt, allerdings ist es angedacht, für kürzere Wörter stärkere Farbtöne zu wählen, damit sie innerhalb eines Satzes untergehen.

Copyright

©Thomas Sonsalla

03.1

Erstellen Sie eine 10 x 10 grosse Matrix. Kombinieren Sie die visuellen Variablen der Spalten und Zeilen.

Visuelle Variablen:

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

03.2

Erweitern Sie die Aufgabe in dem Sie die Darstellungsart in ihrer Abstraktion verstärken/abschwächen.

Abstraktionsgrad:

Fotografie Erstellen Sie ein Freehand, Illustrator oder Photoshop Dokument.

In der Galerie sind die verschiedenen Stufen der Matrix einsehbar. Viele Formen wurden direkt von der Bleistiftskizze in die digitalisierte Version übernommen. Einige Formen wurden allerdings neu bearbeitet, sei es durch die Tatsache, dass das Ergebnis zuerst nicht zufriedenstellend war oder die digitalisierte Version nicht so funktioniert hat wie die Skizze es zuerst erhoffen liess.

Abschließend entstand eine Fotomatrix, bei der alle Variablen der Matrix an einem Objekt dokumentiert worden sind.

Copyright

©Thomas Sonsalla

04.1

Umsetzung einer Funktion (statisch) im Raster in Form eines Icons. Die unten aufgeführten Wortpaare dienen als Grundlage.

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

04.2

Umsetzung der Funktionen (bewegt) im Raster in einem animativen/interaktiven Kontext.

Grundelemente sind Pixel.

Die Icons waren in einer Größe von 16x16 Pixeln zu erstellen und zusätzlich in einer Größe von 160x160 Pixeln. Die großen Varianten sind später in der Endaufgabe zu betrachten.

Die statischen Icons sind in der Galerie zu finden. Die animierten Icons sind unter folgendem Link zu finden:

http://http://interface.fh-potsdam.de/users/programme_entwerfen_ws06/Thomas%20Sonsalla/IAIV_SS07/Icons/Sonsalla_Icons-ani.html Animierte Icons

Copyright

©Thomas Sonsalla

Erstellen Sie eine Weltkarte und füllen Sie diese mit Daten aus einem beliebigen Themengebiet. Stellen Sie dieses verständlich, logisch und lesbar dar. Versuchen Sie dann die Karte visuell an ihre Inhalte anzupassen. Ein dynamischer Eingriff soll möglich sein.

Das gewählte Themengebiet für die Informationsvisualisierung war der Tod.

Allgegenwärtig und unabdingbar war es das Ziel, Todesraten sowie Sterblichkeitsverteilungen bezüglich verschiedener Krankheiten auf der Weltkarte so zu visualisieren, dass sie informativ sind und verständlich zu lesen.

Hierzu wurde die Weltkarte in ein Raster aufgeteilt, so dass alle Länder durch eine unterschiedliche Anzahl von Quadraten, oder auch Pixeln, dargestellt wird. Abgesehen von formalästhetischen Gründen ist diese Darstellung hilfreich bei der Visualisierung der Sterblichkeiten.

Als interaktives Element ist es zum einen möglich, ein Jahr auszuwählen, aus denen die statistischen Werte genommen werden. Anschließend kann man sich entweder die Gesamttodesrate anzeigen lassen oder gezielt die Verteilung diverser Todesarten. Zu sehen ist neben einem Farbcode für die Einordnung in einen Prozentsatz auch die Anzahl an sichtbaren Pixeln, die mit höherer Prozentzahl zunimmt.

Zusätzlich ist es möglich, einzelne Prozentzahlen zu filtern oder die Länder einzeln durch Rollover zu betrachten.

Copyright

©Thomas Sonsalla

06.1 Führen Sie eine Recherche über Strahlungsarten, ihre Zusammensetzung, Form, Vorkommen... durch.

Wo tritt Strahlung auf: - Sateliten - Radio - Handy - Microwellen - Fernseher - etc.

Untersuchen Sie Visualisierungsmethoden: - Wellenformen (Outlines) - Nebel - Elektroteilchen

06.2 Wählen Sie eine Strahlungsart und ihre Visualisierung und übertragen Sie diese auf eine vorgegebene Bilddatei.

Neben elektromagnetischer Strahlung wird von elektrischen Geräten auch Infrarot-Strahlung, genauer Thermalstrahlung emittiert. Wärme ist, im Gegensatz zu vielen anderen Strahlungsarten, nicht nur messbar, sondern auch fühlbar. Darauf aufbauend entstand diese Applikation.

Der Aufbau

Gemessen werden soll die Auswirkung der Inbetriebnahme elektrischer Geräte auf die Raumtemperatur.

Auf dem Foto zu sehen sind diverse technische Geräte. Anhand der Regler kann man diese zum einen aktivieren als auch bestimmen, über welchen Zeitraum die Wärmeentwicklung gemessen werden soll, wie lange und in welchem Zeitraum ein Gerät aktiv ist. Daraus entsteht eine Graphik, über die sich die Temperaturentwicklung in Abhängigkeit zu den Geräten nachvollziehen lässt.

Bei der visuellen Darstellung wurde auf ein vereinfachtes Modell der Wärmeentstehung zurückgegriffen. Luftmoleküle, die zu Schwingungen angeregt worden sind, steigen nach oben, Wärme entsteht. Im Laufe der Zeit lässt die Schwingung aber wieder nach, die Luft kühlt ab. Aufgrunddessen sammeln sich im Bereich nah an der Wärmequelle mehr Strahlungskreise als weiter davon entfernt.

Copyright

©Thomas Sonsalla

Selektieren Sie Ihre Arbeiten nach ästhetischen, lesbaren und funktionalen Aspekten. Konzipieren und gestalten Sie eine sinnvolle, einfache und themenbezogene Navigation durch Ihre bisher erarbeiteten Ergebnisse.

Die Navigation soll für einen Betrachter verständlich und nachvollziehbar sein. Der Benutzer könnte die Möglichkeit erhalten, den Ablauf selbst zu beeinflussen und dadurch neue Erfahrungen zu erlangen.

Achten Sie bei der Erstellung Ihrer Navigation auf Parameter wie die Lesbarkeit der Schrift, bedingt durch Schriftart und Schriftgrösse. Hierbei sollten Sie auch darauf achten, eine bildschirmadäquate Schrift zu nutzen. Verwenden Sie Farben nur zur Auszeichnung. Beachten Sie die Positionierung der Navigation. Sie sollte immer verfügbar sein, aber nicht zu prägnant gestaltet werden. Legen Sie, falls nötig, Hierarchien fest (Hauptmenüpunkte, Untermenüpunkte, usw.).

Die Navigation durch die im Kurs entstandenen Aufgabe befindet sich im linken Bereich. Jede Aufgabe wird in der Navigation durch einen Ordner repräsentiert. Die visuelle Gestaltung greift dabei die „Desktop-Metapher“ auf, die Ordner besitzen ein Deckblatt mit einem Icon, welches sich auf die Aufgabe bezieht, die sich dahinter verbirgt. Ebenso sieht man jederzeit die Anzahl der Seiten, die sich durch das Anklicken des entsprechenden Ordners auffächern. Die einzelnen Seiten ordnen sich radial um den Ordner an.

Die Screens der Aufgaben begleitend gibt ein Text darüber Aufschluss, was zu sehen ist. Teilweise kann durch Drücken eines Info-Buttons noch zusätzliche Information aktiviert werden.

Zu finden ist die .swf-Datei hier:

http://incom.org/code/IP_media/IP_618/IP_upload/Sonsalla_Endpraesentation_IAIV07.swf IAIV_SS07 Endpräsentation Thomas A. Sonsalla