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

Vermittelt werden Grundlagen zur Analyse von Informationsaufnahmeprozessen und Strukturierung komplexer Informationszusammenhänge unter didaktischen, logischen und ergonomischen Gesichtspunkten. Visualisierungsmethoden und Navigationsmodelle in narrativen, interaktiven und sequentiellen Kontexten werden in Kurzprojekten mit Hilfe von u.a. wahrnehmungstheoretischen, semiotischen und gestalterischen Grundlagen experimentell untersucht und erarbeitet.

Innerhalb des Seminars wurden insgesamt sechs Aufgaben beabeitet, die abschlie?end in einer digitale Dokumentation (ªsquares´) festgehalten wurden. Dies ist eine kleine Übersicht der entstandenen Arbeiten.

Fragen, Kommentaren, Anregungen sind stets willkommen.

_6293_aufgabe011.jpg_6293_aufgabe011.jpg

»Von statischen Datensammlungen her kennen wir das Bedürfnis der Informationsvisualisierung, die hinter den Zahlen und Fakten liegenden Verbindungen sinnlich erfahrbar zu machen. Bei der Echtzeitvisualisierung von Daten kommt eine Dimension hinzu: Es werden die Veränderungen im Datenbestand über die Zeit hinweg dargestellt. Echtzeit bedeutet in diesem Fall daher, aktuell stattfindende Prozesse für den Betrachter sichtbar zu machen - dies in der Regel unabhängig von der Architektur und der Art der Information. ...«

Das Kurzreferat ist in seiner vollen Länge unter Materialien als PDF (schriftlich oder als Präsentation) abgelegt.

_6293_aufgabe03.jpg_6293_aufgabe03.jpg

Für die Aufgabe zum Thema »Textvisualisierung und Textcodierung« entstand eine grafische Umsetzung eines Textes, die als Grundlage den Binärcode verwendet. Der Binärcode ist die allgemeine Bezeichnung für einen Code, mit dem Nachrichten durch Sequenzen von zwei verschiedenen Symbolen - in der Regel 1 und 0 oder wahr/falsch - dargestellt werden können. Vor allem bei der digitalen Verarbeitung von Informationen spielen Binärcodes eine große Rolle.

Der zu visualisierende Text wurde zunächst unter Verwendung des Binärcodes in Zahlenketten umgewandelt. Aus jeden Buchstaben ergaben sich so acht Zahlen. Die dabei entstandene Zahlenfolge wurde anschließend unter Verwendung zweier einfacher Symbole grafisch umgesetzt.

In der erweiterten Fassung wurden zusätzlich sich wiederholende Zeichenketten durch ein logisches System von verschiedenen, aneinander aufbauenden Symbolen ersetzt, wodurch die Darstellung, bzw. die Menge der Symbole im Verhältnis zum Text und des bisherigen Entwurfes stark reduziert werden konnte.

Die einzelnen Symbole wurden übrigens in allen Darstellungen manuell gesetzt.

Zusätzlich entstand ebenfalls ein kreisförmiger Entwurf zur Visualisierung der Textmenge.

A02, »Textvisualisierung/Textcodierung«, Impressionen

Die Textcodierung und -visualisierung in der einfachen Fassung, vergrößerte AnsichtDie Textcodierung und -visualisierung in der einfachen Fassung, vergrößerte Ansicht
Die Textcodierung und -visualisierung in der einfachen FassungDie Textcodierung und -visualisierung in der einfachen Fassung
Die Textcodierung und -visualisierung in der erweiterten Fassung, vergrößerte AnsichtDie Textcodierung und -visualisierung in der erweiterten Fassung, vergrößerte Ansicht
Die Textcodierung und -visualisierung in der erweiterten FassungDie Textcodierung und -visualisierung in der erweiterten Fassung
Die Visualisierung der TextmengeDie Visualisierung der Textmenge

_6293_aufgabe02.jpg_6293_aufgabe02.jpg

Die Aufgabenstellung forderte die Erarbeitung einer 10 x 10 Einheiten grossen Matrix, die die visuellen Variablen der Spalten und Zeilen miteinenader kombiniert. Die visuellen Variablen sind Punkt, Linie, Kurve, Umriss, Kontrast, Progression, Schraffur, Struktur, Unordnung und Prägnanz. Die Aufgabe wurde im zweiten Teil erweitern, in dem die Darstellungsart in ihrer Abstraktion verstärken bzw. abschwächt wurde. Als Abstraktionsgrad wurden Fotografien verwendet.

Die vollständige Matrix, sowie ihre fotografische Abstraktion ist unter Materialien als PDF abgelegt.

_6293_aufgabe04.jpg_6293_aufgabe04.jpg

Auf der Suche nach einer Neuinterpretation der bekannten Formen des Familienstammbaumes wurde im Seminar ein diagrammähnlicher Entwurf erarbeitet, der gegenüber traditionellen Darstellungen dynamisch nach Eingaben des Anwenders in Echtzeit generiert wird.

Die als eine Art interaktives Programm konzipierte Darstellung erlaubt es neben der einfachen Visualisierung zusätzlich unterschiedliche Sachverhalte, wie beispielsweise das Alter und Verbindungen, bzw. Verwandtschaftsgrade zwischen den einzelnen Familienmitgliedern zu erkennen. So ist es beispielsweise möglich den Stammbaum auf Daten einer bestimmten Jahresspanne einzuschränken und die Darstellung an einem bestimmten Familienmitglied und Jahr auszurichten, von dem in Echtzeit relevante Daten angezeigt werden.

A04, »Familienstammbaum«, Impressionen

Der Stammbaum, ausgerichtet an Thomas Mann im Jahr 1950.Der Stammbaum, ausgerichtet an Thomas Mann im Jahr 1950.
Der Stammbaum, ausgerichtet an Thomas Mann im Jahr 1890.Der Stammbaum, ausgerichtet an Thomas Mann im Jahr 1890.
Der Stammbaum, ausgerichtet an Elisabeth Mann Borgese im Jahr 1950.Der Stammbaum, ausgerichtet an Elisabeth Mann Borgese im Jahr 1950.

_6293_aufgabe05.jpg_6293_aufgabe05.jpg

Die fünfte Aufgabe, die innerhalb des Seminars bearbeitet wurde, beschäftigte sich mit der Größe Zeit. Ziel der Aufgabe war eine Kalender- oder Zeitanzeige zu erstellen, die nicht nach den herkömmlichen Prinzipien funktioniert. Die Datums- oder Zeitanzeige sollte aber dennoch nach dem Erlernen des Codes ablesbar sein.

Die Uhr zeigt in einzelnen Kreissegmenten die aktuelle Uhrzeit an, das Datum (Tag und Monat) und beat, die Internetzeit von swatch. Zusätzlich kann der Fortschritt der aktuellen Jahreszeit abgelesen werden, die durch kleine Illustrationen visualisiert worden sind. Die einzelnen Kreissegmente bewegen sich zwar im oder gegen den Uhrzeigersinn, der inhaltliche Zusammenhang erklärt sich aber nicht nur in der Farbe sondern ergibt sich auch durch die Leserichtung der Anzeige. Das unterschiedliche Verhalten der Segmente erleichtert das Ablesen. Die Form der Uhr wurde hier bewusst an eine analoge Uhr angelehnt, da sie im Gegensatz zu digitalen Anzeigen nicht gelesen werden muss, sondern auf einen Blick erfasst wird.

Das Ergebnis ist eine grafisch und insbesondere im Konzept weitergeführte Arbeit aus dem Kurs http://www.incom.org/code/projekte/projekt_anzeigen.php?4,13,17,0,0,34 »Digitale Medien, SMAPPs«.

Eine programmierte Version der Uhr steht als Flash-Datei unter Materialien zur freien Verfügung. Achtung: Flash 8 wird benötigt. Ohne Flash 8 kommt es zu Fehlern in der Darstellung.

A05, »Zeit«, Impressionen

07/11, 14:06,4007/11, 14:06,40
25/03, 17:23,2025/03, 17:23,20
07/11, 14:06,4007/11, 14:06,40
07/02, 15:25,0607/02, 15:25,06
Gesamtansicht der Uhr und aller Jahreszeiten.Gesamtansicht der Uhr und aller Jahreszeiten.
Alternative Gestaltung.Alternative Gestaltung.

_6293_aufgabe06.jpg_6293_aufgabe06.jpg

Die digitale Dokumentation »squares« des Seminars »Informationsarchitektur- und visualisierung« ist als eine Präsentation angelegt, die den Benutzer auf eine interaktive und dezent unterhaltsame Art und Weise durch die bisherigen Ergebnisse führt.

Die Navigation selbst basiert auf einer gleichmäßigen Gittermatrix, welche sich in ihrem Aufbau nahtlos allen einzelnen Aufgaben anpasst. Die zum Teil farbig gekennzeichneten Quadrate, die sich stets zufällig auf der Matrix anordnen, bilden dabei die Grundlage und stellen Verknüpfungen her, die entweder gewünschte Informationen vertiefen oder zu einem anderen Aufgabenergebnis führen. Die hohe Flexibilität der Struktur, die durch besondere Kennzeichnung für den Benutzer leicht nachzuvollziehen ist, erlaubt jenem dabei den Ablauf selbst zu beeinflussen und zu neuen Erfahrungen zu erlangen.

A06, »squares«, Impressionen

Navigation (Startseite).Navigation (Startseite).
Beispiel einer detailierten Information als Verknüpfung mit einem square.Beispiel einer detailierten Information als Verknüpfung mit einem square.
Beispiel einer Navigation innerhalb A04Beispiel einer Navigation innerhalb A04
Beispiel einer Navigation innerhalb A05, mit hervorgehobenen Details, die optional zum besseren Verständnis jeder Aufgabe abgerufen werden können.Beispiel einer Navigation innerhalb A05, mit hervorgehobenen Details, die optional zum besseren Verständnis jeder Aufgabe abgerufen werden können.
Erklärung ausgewählter Details jeder Aufgabenlösung, hier A05Erklärung ausgewählter Details jeder Aufgabenlösung, hier A05
Vielen Dank.Vielen Dank.

_6293_aufgabe0a.jpg_6293_aufgabe0a.jpg

»Systemisches Design - Intelligente Oberflächen für Information und Interaktion«

Broschiert, 272 Seiten, Rowohlt Tb., 16,90 € ISBN: 3499600781

Ein kleiner Auszug aus dem Buch kann unter Materialien eingesehen werden.

Das Multimediale ist es nicht allein, wodurch sich die neuen Medien auszeichnen. Intelligente Oberlfächen machen komplexe Informationsstrukturen sichtbar, ermöglichen ein vernetztes Denken und erlauben differenziertere Manipulationen, wie dies vorher nur schwer vorstellbar war. Damit ein solches Interface mit unserem Gehirn reibungslos interagieren kann, müssen sich Konzeptioner und Designer verstärkt damit befassen, wie wir WAHRNEHMEN, DENKEN, HANDELN – das Thema der drei zentralen, lehrbuchartigen Kapitel.

Dabei ist eine anschauliche Darstellung wichtig, worauf das INTRO aufmerksam macht. Aus den besonderen Herausforderungen und technologischen Möglichkeiten ergeben sich neue Herangehensweisen und Gestaltungsprinzipien, die im FAZIT zusammengefasst werden.

Es zeigt sich, dass Design nicht mehr nur aus originären Entwürfen entsteht, sondern dass ein visuelles System aufgebaut werden muss. Mit seinen definierten Elementen und Regeln können Informationen transparent und handhabbar gemacht werden.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuer_in

foto: DD

Entstehungszeitraum

SoSe 05 – WiSe 05 / 06