In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
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
©Björn Richter
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.
©Björn Richter
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.
©Björn Richter
Den Sinn dieser Übung verstand ich darin, mein Spektrum an Formen für künftige Gestaltungsaufgaben zu erweitern.
©Björn Richter
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.
©Björn Richter
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
©Björn Richter
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.
©Björn Richter
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.
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
Björn Richter
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
DD
Entstehungszeitraum
Sommersemester 2011