Basics Interface Design // Kursdokumentation von Jochen Fuchs

In einer Zeitung findet man (besonders auf der ersten Seite) eine eng gefügte Struktur aus semantisch zusammenhängenden Einheiten. Über die Jahrhunderte hinweg hat sich ein für Zeitungen spezifisches Format für Informationsvisualisierungen ergeben. Die Informations-Einheiten stehen in bestimmten räumlichen Gruppierungen, die es uns ermöglichen, die Inhalte einer Seite zu erschließen. Wir haben gelernt, die Informationsdichte auf einer Zeitungsseite so zu interpretieren, dass wir die kontextuellen Felder erkennen und voneinander abgrenzen können. Obwohl uns das Lesen und Verstehen von Informationen auf Zeitungsseiten als hoch intuitiv erscheint, so ist es doch eine erlernte Fähigkeit. In diesem Thema soll untersucht werden, wie räumlich und zeitlich basierte Formate ein neues/ anderes Lesen von Zeitungsinhalten ermöglichen können.

Aufgabe

Teil 1: Der Informationsraum einer Tageszeitung soll untersucht werden. Dazu soll die Vorderseite eines Tageszeitung in ihre kleinsten sinnvollen Informationseinheiten zerlegt werden. Weiterhin sollen alle „Hyperlinks“ auf der Vorderseite verfolgt werden - also Verweise auf Inhalte, die erst im hinteren Teil der Zeitung auftauchen. Es sollen sowohl die Hinweise als auch die Artikel selbst gezeigt werden. Teil 2: Die Informationseinheiten sollen für den Bildschirm neu aufbereitet und strukturiert werden. Dann sollen sie Bildschirmgerecht in zwei Auflösungen dargestellt werden. Einmal für eine übliche Bildschirmauflösung von 1024x768 Pixeln und einmal für mobile Geräte mit einer Auflösung von 240x320 Pixeln.

Da das gesamte Informationsvolumen einer Zeitungsvoderseite in dne oben beschriebenen Auflösungen nicht darstellbar ist, kann mit dynamischen Elementen wie Scrolling, Mouseover, Skalierung etc. gearbeitet werden. Lesbarkeit und Klarheit der Darstellung sind die wichtigen Kriterien bei der Bearbeitung der Aufgabe

Zur Bearbeitung der Aufgabe habe ich die Bildzeitung gewählt.

Analyse

1024x786

Bei der Umsetzung der „großen“ Bildschirmvariante habe ich versucht die klassische „Bildoptik“ umzusetzen, was gleichzeitig auch die größte Herausvorderung war.

Die klassischen Zeitungselemente befinden sich nachwievor im Header. Der Hauptartikel befindet sich in der Mitte, alle anderen Artikel sind um diesen angeordnet und schieben sich auf Klick in den Vordergrund.

Nachfolgend die Flashdatei:

240x320

Um die Optik der Bildzeitung zu behalten habe ich in der kleinen Variante den „Eyecatcher“ als Startbildschirm gewählt. Bei erneutem Klick kommt man auf die Hauptseite die direkt mit dem ersten Artikel eröffnet wird.

Die weiteren Themen sind hierbei in kleinen Leisten am unteren Ende des Bildes dargestellt.

Nachfolgend die Flashdatei:

Die Schwierigkeit, einen Videorekorder zu programmieren, ist schon fast sprichwörtlich. Es gibt eine Reihe von Gründen dafür, dass diese Alltagshandlung für viele so problematisch ist. Eine der Hauptursachen ist sicherlich in den schlechten Interfaces zu finden, die sen Benutzern angeboten werden. Interessanterweise wird die Bedienbarkeit von elektronischen Geräten nur selten als ein Kauf-/Verkaufskriterium angesehen. Die Marketingabteilungen der großen elektronischen Konsumgüterhersteller bewerten die Anzahl der Funktionen höher ein als die Bedienbarkeit des Geräts.(Feature-Driven). Selbst wenn eine unkomplizierte Bedienbarkeit versprochen wird, sind die Geräte nur selten wirklich einfach zu bedienen.

Einerseits hat es technische und finanzielle Gründe, dass benutzerfreundliche Entwürfe nicht umgesetzt werden können. Andererseits liegt es aber auch an den Vorstellungen der Entwickler (und der Designer!), dass nicht wirklich über Benutzbarkeit nachgedacht wird. Viel zu schnell gibt man sich damit zufrieden, dem Benutzer eine Reihe von Knöpfen und ein dickes Bedienungshandbuch zur Verfügung zu stellen. Aufgabe

Teil 1: Fotorecherche zu Bedien- und Steuerungselementen in der Küche und in der Wohnung allgemein. Teil 2: VCR konzipieren Es soll neu über die Bedienung von Videorekordern nachgedacht werden. Die Aufgabe soll so gelöst werden, dass das Interface den jeweiligen Zustand des Rekorders deutlich und möglichst „dinghaft“ kommuniziert. Displays dürfen nicht verwendet werden. Ansonsten gibt es keine technischen Einschränkungen. Bei der Bearbeitung der Aufgabe kann und soll man sich von der Recherche aus Teil 1 inspirieren lassen.

Folgende Funktionen sollen abgebildet werden: Start, Stopp, Vorspulen, Zurückspulen, Aufnahme, Zeitpunkt Aufnahmestart, Zeitpunkt Aufnahmeende, Programmwahl für Aufnahme.

Das Konzept

Die Grundidee von „Recways“ ist die Aufnahme von Filmmaterial im Vergleich zur Aufnahme von Passagieren in Zügen.

Das unbespielte Aufnahemedium ist der „Leerzug“. Die verschiedenfarbigen „Gleise“ repräsentieren verschiedene Kanäle.

Bei sofortiger Aufnahme wird der „Zug“ einfach auf das Gleis gesetzt und die Aufnahme beginnt. Ende der Aufnahme bestimmt ein Schieberegler direkt an dem Gleis (Bild 5).

Die programmierte Aufnahme wird durch stellen der „Weichen“ direkt auf dem „Zug“ und durch das platzieren auf den Wartegleisen geregelt (Bild 2+3).

Die fertig aufgenommen Filme haben nun zur wiedererkennung die Farbe des Kanals aufgenommen, halten dann im „Endbahnhof“ und können auf dem „Abspielgeis“ wiedergegeben werden. Gelöscht werden die Züge durch 10 sekündiges drücken des Einstellrades (Bild 7)

VCR

(Narratives in Time and Space)

Die Beziehung zwischen Klängen und Bildern ist notwendigerweise willkürlich. Es gibt kein festes Bezugssystem, das einem ermöglichen würde, ein Klangerlebnis einer räumlichen Struktur zuzuordnen. (Die einzige Ausnahme hierbei wären wohl Synästheten). Dennoch ist die Zuordnung von Klängen zu Bildern eine der zentralen Kulturleistungen der Menschheit. Denn nur so konnten Laute aufgezeichnet und Schriften entwickelt werden.

Die Beziehung beschränkt sich aber nicht nur auf die Sprache. Auch in der Musik ist die Frage nach der Notation von zentraler Bedeutung. Weiterhin gibt es auch besondere Buchstabensysteme, wie z.B. das Morse-Alphabet, bei dem die Zuordnung von akustischen und graphischen Zeichen sehr eng ist. Darüber hinaus hat die Beziehung zwischen Klang und Bild auch immer die bildende Kunst beschäftigt. Aufgabe

Es soll eine akustische Begebenheit in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Einzige Einschränkung: es soll keine Bildschirm-orientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Entwurfsphase

Mein Klangbild basiert auf dem Solopart des Liedes „Master of Puppets“ von „Metallica“ (3:33 - 4:56).

Die Visualisierung ist in Form eines Kreises und wird zeitlich wie eine Uhr gelesen, also oben ( 12:00 Uhr) befindet sich der Anfang und das Ende.

Nachvollziehbar sind die Gitarrenstimmen (Begleitgitarre im Hintergrund, Sologitarre 2stimmig, Sologitarre 1stimmig) sowohl in Tonhöhe als auch in Geschwindigkeit, ebenso wie das Schlagzeug (Basedrum, High Hat, Snare, Crash, Toms)

Das Solo besteht aus 36 Takten, ein Takt ist hier als ein „Tortenstück“ dargestellt, siehe rechts in dem Entwurfsbild. Das Grundraster besteht aus 48 Kreisen, wobei jeder Kreis nach außen einen halbton höher repräsentiert. Dieses Grundraster ist in der finalen Version nur noch leicht tranzparent zu erkennen.

Das Schlagzeug wird mit Ausnahme der Basedrum durch die äußeren verschiedenfarbigen Striche repräsentiert.

Finale Version

Ein Interface hat immer die Aufgabe, abstrakte Vorgänge, verständlich und bedienbar zu machen. Dazu müssen die Funktionsmechanismen eines Computers klar kommuniziert werden und oftmals auch Analogien aus der Alltagswelt gefunden werden, die dabei helfen, die Funktionen zu kommunizieren. So hat sich in den letzten Jahren die „Schreibtischmetapher“ etabliert, die das Dateisystem eines Computers für die Nutzer leichter verständlich macht.

Es bleibt aber immer die Frage, wie man Dinger kommuniziert, zu denen die Nutzer nur wenige oder gar keine Bezüge haben. Versteht ein Inuit, was sich hinter einer „Schreibtischmetapher“ verbirgt? Was können Referenzen sein, die tatsächlich universell verstanden werden? Ist es möglich, ein Interface zu entwickeln, das alle notwendigen Referenzen in sich beinhaltet? Aufgabe

1972 wurde die Raumsonder Pioneer 10 gestartet. An der Raumsonde wurde eine Plakette befestigt, die außerirdischen Intelligenzen eine Vorstellung von den Menschen und dem Planeten Erde geben soll.

Im Rahmen dieser Aufgabe soll diese Plakette neu gestaltet werden. Die Frage ist also, wie man einer außerirdischen Intelligenz verständlich machen kann, wer wir sind und wie der Planet Erde beschaffen ist. Die inhaltliche Ausarbeitung der Plakette ist euch überlassen. Ihr müsst euch nicht an den Inhalten der existierenden Plakette orientieren.

Im Sinne der Aufgabe kann davon ausgegangen werden, dass eine außerirdische Intelligenz sehen und hören kann - allerdings eventuell in anderen Frequenzbereichen als wir.

Umsetzung

Bei dieser Aufgabe habe ich mich auf die Genetik spezialisiert, bzw. die Mendelschen Gesetze.

Leider musste ich hier einige Verallgemeinerungen in kauf nehmen, wie z.B. dass jedes Elternpaar ein Sohn und eine Tochter bekommt und das jeder nachkomme auch weitere zeugt. Jedoch stört das nicht das Verständnis für die Regeln der Genetik.

Im linken oberen Bereich sieht man 3 Familienstammbäume und die Vermischung der jeweiligen Vererbungsmerkmale (hier auf der Brust dargestellt).

Die größeren Figuren stellen die 3 Mendelschen Gesetze dar. 1. Die Uniformitätsregel 2. Die Spaltungsregel 3. Die Unabhängigkeitsregel

Hier von links nach rechts in der Reihenfolge 1/3/2