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

IAIV SoSe 2011 Björn Richter

In dem Kurs »Informationsarchitektur und -Visualisierung« unter der Leitung von »Prof. Danijela Djokic« im Studiengang »Interfacedesign« an der »FH Potsdam« stand die Informationsvisualisierung im Mittelpunkt, welche wir anhand von 4 praktischen Aufgaben explorativ anwendeten und jeweils im Kurs präsentierten und diskutierten.

http://interface.fh-potsdam.de

___________________________________

Aufgabe 1 » Emil Ruder (Referat)

fullReferat1.jpgfullReferat1.jpg

Aufgabe Als Warm-Up bekamen wir zuerst die Aufgabe, einen Kurzvortrag über eine im Designkontext bedeutende Persönlichkeit auszuarbeiten und zu präsentieren.

Lösung Emil Ruder war Mitte des 20. Jh. ein sehr bedeutender Typografielehrer und Mitbegründer der sog. „Schweizer Typografie“. Die in seinem typografischen Meisterwerk „Typografie“ publizierten Gesetzmäßigkeiten finden auch heute noch weltweit Anwendung. Näheres siehe PDF im Materialordner.

___________________________________

Aufgabe 2 » Matrix

fullMatrix2.pngfullMatrix2.png

Aufgabe A Die zweite Übung bestand darin, eine Matrix bestehend aus 10 x 10 Feldern und spalten- und zeilenweise jeweis 10 Formkategorien (Punkt, Linie, Fläche, Struktur etc.) zu füllen und anschließend zu digitalisieren.

Aufgabe B Im zweiten Schritt sollten wir eine Zeile, Spalte oder ein einzelnes Feld in unserer Umgebung suchen und fotografieren. Ich entschied mich für die Spalte/Zeile „Struktur“. Die Objekte stammen aus meiner Wohnung und deren Umgebung.

fullMatrix3.jpgfullMatrix3.jpg

Den Sinn dieser Übung verstand ich darin, mein Spektrum an Formen für künftige Gestaltungsaufgaben zu erweitern.

___________________________________

Aufgabe 3 » Textvisualisierung

fullText1.pngfullText1.png

Aufgabe Nach den ersten beiden Übungen begannen wir nun mit der Informationsvisualisierung. Wir sollten zunächst einen beliebigen Textabschnitt bezüglich unseres Referates untersuchen. Kriterien waren z.B. das Vorkommen bestimmter Buchstaben, Wörter, Wortarten, Metrik usw. Eine Interaktion sollte ebenfalls angedacht werden.

Lösung Der „Language Identifier 1.0“ analysiert und visualisiert das Vorkommen bestimmter Buchstaben in einem Text, mit verschiedenen Ansichtsoptionen, und schlussfolgert daraus die Sprache, in der der Text verfasst ist. Je heller und gesättigter ein Quadrat ist, desto öfter kommt der entsprechende Buchstabe im Text vor.

fullText2.pngfullText2.png
fullText3.pngfullText3.png
fullText4.pngfullText4.png
fullText5.pngfullText5.png
fullText6.pngfullText6.png
fullText7.pngfullText7.png
fullText8.pngfullText8.png
fullText9.pngfullText9.png

___________________________________

Aufgabe 4 » Gesprächsvisualisierung

gespraech.pnggespraech.png

Aufgabe Wir sollten ein selbstgewähltes Gespräch (Monolog, Dialog) analysieren und visualisieren.

Lösung Ich entschied mich für einen Dialog aus dem Film „Die Nackte Kanone“. Bei dem Gespräch zwischen dem Informanten und dem Ermittler konzentrierte ich mich neben den Redeanteilen vor allem auf den Tonfall und den emotionalen Verlauf des Gespräches. Den Tonfall kennzeichnete ich durch verschiedene Farben und die Redezeit durch die unterschiedliche Länge der Balken.

http://bjoern.pisces.uberspace.de/iaiv/gespraechsvisualisierung.swf

___________________________________

Aufgabe 5 » Familientammbaum

fullStammbaum7.pngfullStammbaum7.png

Aufgabe Wir sollten eine Darstellungsmöglichkeit finden, um unseren (oder einen anderen) Familienstammbaum bis hin zur 4. Generation zu visualisieren. Eine Interaktion sollte ebenfalls angedacht werden.

Lösung Der mittlere Hauptteil der interaktiven Infografik zeigt die Beziehungen/Verzweigungen meiner direkten Vorfahren. Männliche und weibliche Personen habe ich anhand der Piktogramme unterschieden. Mit den Farben grün und grau habe ich die lebenden und bereits verstorbenen Vorfahren unterschieden. Die Geschwister meiner Vorfahren sind jeweils blasser dargestellt. Darüber hinaus werden eheliche Bindungen durch die orangen Linien dargestellt. Das Balkendiagramm gibt einen Überblick über den Lebenszeitraum.

Interaktion Im Navigationsbereich oben hat man die Möglichkeit, bestimmte Vorfahren-Gruppen ein- und auszublenden und sich statt der Namen die Berufe anzeigen zu lassen.

Klickt man auf eines der Piktogramme, so erfährt man nähere Informationen zur jeweiligen Person.

fullStammbaum2.pngfullStammbaum2.png
fullStammbaum4.pngfullStammbaum4.png
fullStammbaum8.pngfullStammbaum8.png
fullStammbaum9.pngfullStammbaum9.png

___________________________________

Aufgabe 6 » Navigation

Navi_v1.pngNavi_v1.png

http://bjoern.pisces.uberspace.de/iaiv

Aufgabe Es sollte eine Navigation entwickelt werden, die ein unkompliziertes Sichten aller Einzelprojekte ermöglicht.

Lösung Ich entschied mich für ein Akkordion-Menü. Jeder Menüpunkt beinhaltet Thumbnails für jeden Screen. Die Bildleiste läst sich durch einfaches Drüberfahren mit der Maus nach rechts und links scrollen. Beim Klicken auf ein Bild wird dieses vergrößert. Beim erneuten Klicken auf das vergrößerte Bild wird dieses wieder verkleinert. Zum Vor- und Zurückblättern klickt man einfach auf die angeschnittenen, transparenten Bilder rechts und links daneben.

Umsetzung Die Umsetzung als HTML-Seite erschien mir hierfür am praktikabelsten. Den Imageslider im Akkordion-Menü setzte ich mit Flash ActionScript um. Den Rest habe ich mit HTML, CSS und dem JavaScript-Framework jQuery realisiert. Die Schrift ist mit der CSS-3-Eigenschaft „@font-face“ eingebunden und funktioniert leider nicht im Internet Explorer.

Navi_v2.pngNavi_v2.png
Navi_v5.pngNavi_v5.png
Navi_v3.pngNavi_v3.png
Navi_v4.pngNavi_v4.png

Fazit

Der Kurs war sehr praktischer Natur und überaus arbeitsaufwendig und produktiv. Die Erfahrungen, die ich in diesem Kurs erworben habe, resultieren vor allem aus den Anregungen und dem hilfreichen Feedback der Professorin und teilweise aus dem Kurs.

Zudem konnte ich meine Präsentations-Skills trainieren, meine Flash-Kenntnisse auffrischen und mich in jQuery einarbeiten.

Unterm Strich bin ich sehr zufrieden.

Einen kleinen Kritikpunkt am Kurs habe ich dennoch: Ich hätte mir anfangs etwas mehr theoretischen Input zum Thema gewünscht. Welche Arten von Infografiken/Diagrammen gibt es (2D, 3D, konzentrisch, Netze etc.) und wo liegen die Vor- und Nachteile und typischen Anwendungsfelder.

Zu dem, was ich mir unter Informations-Architektur vorstelle (z.B. Navigationsstrukturen, Gliederung und Darbietung von Funktionen, Programmhierarchien, Menüs etc.) gab es leider fast gar keinen theoretischen Input. (Es hätte wahrscheinlich den Zeitrahmen gesprängt.) Deshalb finde ich die Kursbezeichnung „Informationsarchitektur und -Visualisierung“ persönlich etwas irreführend.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: DD

Entstehungszeitraum

Sommersemester 2011