Basics Interface Design SS 07 // Dokumentation von Thomas A. Sonsalla

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.

Zeitungsanalyse

Als Tageszeitung wurde der Tagesspiegel gewählt. In einer schematischen Darstellung wurden die einzelnen Elemente der Titelseite in die kleinsten Einheiten zerlegt, angefangen von der Sortierung der Meldungen nach Rubrik bis hin zur Aufteilung einer Meldung nach Titel, zweiter Überschrift, Textspalten, Autor.

Screen 1024x768

Bei der Lösung der Aufgabe wurde auf einen Touchscreen als Interaktionselement ein Eingabemedium zurückgegriffen. Wichtig beim Aufbau der Zeitung für dise Art von Bildschirm waren eine spielerische, intuitive Bedienung.

Der Aufbau

Im Header befinden sich sämtliche Metadaten der Zeitung sowie Informationen über Wetter und Börse. Der Aufbau findet auch Verwendung in der kleinen Version und verbindet beide Lösungen miteinander.

Die verschiedenen Rubriken der Tageszeitung werden repräsentiert durch unterschiedlich eingefärbte Umlaufbahnen. Auf diesen Umlaufbahnen befinden die Nachrichten, die sich in der jeweiligen Rubrik auf der Titelseite befinden, in Form von Buttons. Eine kleine Flagge mit einer verkürzten Überschrift gibt einen kleinen Überblick über den Inhalt der Nachricht.

Durch Berührung des Buttons wird eine kleine Vorschau angezeigt. Möchte man die Nachricht lesen, zieht man den Button in die Mitte auf den Umriss. Die Nachricht öffnet sich aus dem Button in einem neuen Fenster, der Hintergrund wird dabei verdunkelt, um die Lesbarkeit zu erhöhen. Gescrollt wird nicht durch Herunterziehen des Scrollbalkens, sondern durch Hochschieben der Nachricht selbst. Im unteren Bereich des Fensters befinden sich unter Umständen weitere Nachrichten-Buttons, die sich ebenfalls mit dem gleichen Thema befassen.

Um die Nachricht wieder zu entfernen, reicht es aus, sie aus der Mitte zu schieben und loszulassen, sie ordnet sich automatisch wieder an ihrer ursprünglichen Position ein.

__Weitere Überlegungen __ Abgesehen von der Lösung der Titelseite ist es hier auch möglich, sich durch die gesamte Zeitung zu bewegen. Dies geschieht über das graue Feld rechts, neben dem die Seite der folgenden Seite steht. Durch Herüberziehen auf die linke Seite verschwinden die Nachrichten der aktuellen Seite und es erscheinen die Nachrichten, die sich auf der folgenden Seite befinden.

Ebenso ist es angedacht, dass die Position der Buttons von dem Zeitpunkt ihrer Veröffentlichung abhängig ist. Je aktueller die Nachricht, desto weiter rechts befindet sie sich. Im Laufe des Tages wandert die Nachricht nach links, bis sie zum Beginn des nächsten Tages verschwindet. Hierzu wäre es aber noch möglich, ein Archiv anzulegen, um auf ältere Nachrichten Zugriff zu haben.

In PDF-Form im Materialordner zu finden

Screen 240x320

Analog zur Lösung der großen Bildschirmversion wird auch bei der mobilen Variante ein Touchscreen verwendet. Die Bedienung erfolgt in diesem Fall aber bevorzugter Weise über einen Stylus.

Der Aufbau

Im Header befinden sich die Metadaten, Wetter- und Börse-Icons, die aktiv sind, so dass man durch Berührung mehr Informationen erhält.

Die einzelnen Nachrichten befinden sich auch hier in Form von farbigen Buttons auf Umlaufbahnen. Im Gegensatz zur großen Variante ist die grafische Umsetzung schlichter geraten, um die Lesbarkeit nicht zu verringern, auf die bei der Lösung der kleinen Bildschirmvariante besonders geachtet werden muss.

Im unteren Bereich wird eine Vorschau eingeblendet, die entweder automatisch alle 5 Sekunden von Nachricht zu Nachricht wandert, oder durch Berühren des entsprechenden Buttons einen kleinen Einleitungstext für die Nachricht anzeigt.

Bei Interesse kann nun die Nachricht hochgezogen und gelesen werden. In diesem Fall fungiert der Scrollbalken auf bekannte Art und Weise und gibt durch seine Größe auch die Länge der Nachricht an. Im oberen Bereich befinden sich hier weiterführende Links in Form von Buttons. Durch Berühren dieser erscheint, über die aktuelle Nachricht gelegt, die Vorschau für diese Nachricht.

Weitere Überlegungen

Auch in diesem Fall ist es möglich, durch die gesamte Zeitung zu manövrieren. Dies erfolgt durch Drücken des Buttons im unteren rechten Bereich, auf dem sich die Seitenzahl der folgenden Seite befindet, wodurch man zur nächsten Seite und deren Nachrichten gelangt. Auch ist die Anordnung der Nachrichten hier abhängig vom Zeitpunkt ihrer Veröffentlichung.

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.

VCR Ed-v.-Rec

Ausgehend von der Recherche in den eigenen vier Wänden, bei der recht schnell offensichtlich wurde, wieviele Geräte durch Drehen, Hervorziehen, Zurückschieben und Drücken von Schalterelementen und /oder Knöpfen bedient werden. Besonders ins Auge gefallen ist die Bedienung eines Kaffeezubereiters einer namhaften Firma, das geschlossene System und der Gedanke, mit möglichst wenig Bedienelementen durch Nutzen von Modi-Wechsel und möglichst eindeutiger Bedienung einen Videorekorder zu programmieren, beflügelten dann die Entwicklung des „Ed-v.-Rec“.

Bedienung

Das Bedienprinzip dieses Videorekorders (VCR) orientiert sich leicht an eben diesen typischen Bodum-Kaffeezubereiter (und eine gewisse Eiscremeverpackung).

Der VCR besteht aus zwei Elementen, die zusammen ein geschlossenes System ergeben. Das eine Element ist der Zylinder, auf einem Fuß stehend und mit verschiedenen Skalen besetzt. Das andere Element ist der Bedienstab, über den, wie der Name sagt, sämtliche Bedienung abläuft.

In der Ausgangsposition steht der Zylinder auf dem Fuß, der Bedienstab befindet sich an oberster Position. Durch die Größe des Zylinders von ca. 15 cm ist es möglich, den Rekorder in der Hand zu halten oder hinzustellen.

Ein roter Anzeiger auf dem Zylinder zeigt die aktuelle Position des Bedienstabes an, welcher sich im Inneren befindet und über den bei der Programmierung die Skalen eingestellt werden.

Programmierung

Die Programmierung erfolgt durch Herunterdrücken bzw. Hochziehen des Stabes bis zur Arretierung auf einer Skalenebene. Durch Drehen des Stabes um die eigene Achse wird die Skala eingestellt. Die Zeit oder das Programm, welche/s sich im Anzeiger befindet, ist momentan aktiviert. Über diesen Weg wird der VCR nun von oben nach unten „durchprogrammiert“, angefangen mit dem Sender über den Monat, Tag, Beginn und Ende der Aufnahme.

Timer

Nach erfolgter Programmierung wird der Bedienstab unten eingerastet und die Timer-Funktion springt ein. Der rote Anzeiger übernimmt nun die Funktion eines Countdowns, indem er in einer Geschwindigkeit relativ zur Wartezeit bis zur Aufnahme zur obersten Position des Zylinders fährt.

Aufnahme

Während der Aufnahme wird der Bedienstab aus dem Zylinder geschoben. Parallel dazu füllt sich eine Anzeig im oberen, stets sichtbaren Bereich des Stabes, der Aufschluss über die Länger der Aufnahme gibt.

Abspielen

Nach erfolgter Aufnahme wird der Zylinder um 180° gedreht. Im Fuß des Zylinders öffnet sich ein Loch, durch das der Bedienstab automatisch beim Abstellen des Zylinders geschoben wird. So behält der Stab, wieder oben hervorschauend, seine Funktion als Bedienelement.

Der VCR befindet sich nun im Abspielmodus und auch bereits in der Funktion „Play“. Durch Drehen des Stabes kann sowohl vor- als auch zurückgespult werden. Zum Stoppen kann der Stab leicht herausgezogen werden.

Löschen

Um die Aufnahme wieder zu löschen, reicht es aus, den Stab vollständig aus dem Zylinder zu entfernen.

In PDF-Form im Materialordner zu finden.

(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.

KlangBild CityMap

Als akustische Begebenheit wurde nach längerer Überlegung keine Geräuschkulisse, sondern „Gorillaz - El Manana“ bzw. die ersten 91 Sekunden daraus. Die Visualisierung ist in diesem Fall kein abstraktes Klangbild, viel mehr sollte das Gefühl vermittelt werden, dass Musik eine Reise darstellen kann, mit unterschiedlichen Stationen, Landschaften und Kulissen. Neben dem eigenen Interesse an der Verbindung von Hörbaren mit Sichtbaren diente auch Michel Gondrys Clip „Star Guitar“ als Inspirationsquelle für die Bearbeitung dieser Aufgabe.

Bilderklärung

Prinzipiell handelt es sich bei der Visualisierung um eine Straßenkarte, die abhängig von der Musik erstellt wurde. Die Darstellung ist in Grundrissaxonometrie entstanden, um zusätzlich eine weiter Achse nutzen zu können.

Die Straße selbst ist die Zeitspur, sämtliche Anordnungen, die sich an den Seiten der Straße befinden, stehen für ein bestimmtes Instrument. Die Entfernung zur Straße gibt die Tonhöhe an, die Größe zeigt die Präsenz innerhalb der Arrangements an. Jedes Instrument hat zusätzlich eine eigene Farbe.

Die Straßenführung ist abhängig vom Songtext. Ein gerader Anfangsbuchstabe einer Verszeile bedingt ein Rechtsabbiegen, ein ungerader Buchstabe ein Abbiegen nach links. Dieser Regel folgend ist die Anordnung der Karte entstanden.

In PDF-Form und mit Musik als ZIP-Datei im Materialordner zu finden.

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 Dinge 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.

Cloe Encounters

Ohne jemals wirklich Kontakt zu außerirdischen Lebensformen aufgenommen zu haben, entwickelten viele Menschen bereits viele Vorstellungen davon, wie Bewohner fremder Planeten aussehen könnten, wie sie sich verhalten, wie sie leben.

Damit beschäftigt sich die Lösung dieser Aufgabe. Es ist weniger eine direkte wissenschaftliche Darstellung des Menschen oder des Planeten Erde als viel mehr eine Art Spiegel menschlicher Denkweise.

Aufbau Es handelt sich bei dieser Plakette um ein Dokument, welches mittels eines Touchscreens eine Interaktion zulässt und wünscht. Es soll über diverse Merkmale den optischen Unterschied zwischen Mensch und diverse Aliens unserer Vorstellung aufzeigen. Daraus schlussfolgernd wird die Reaktion des Menschen auf diese Unterschiede dargestellt.

Zu sehen ist die Milchstraße, auf der diverse Sterne markiert sind. Ein Stern davon ist unser Sonnensystem. Im unteren Bereich befindet sich ein Vergleichsfeld. Auf der linken Seite, und immer mit unserem Sonnensystem verbunden, befindet sich der Mensch, einmal in graphischer Form, einmal in schematischer Darstellung, bei der nur auf wichtige Merkmale Rücksicht genommen wird, wie Gliedmaßen, Körperaufbau, Gesichtsmerkmale und Hände.

Durch Berühren eines anderen Punktes in der Galaxie wird dem ein Alien gegenübergestellt. Linien zwischen den menschlichen Merkmalen, unterschieden in weiß und blau, wobei weiß für simple Vergleiche dient wie Größe und Proportion und blau für komplexere wie Position der Augen, Nase, Hände.

Der untere Bereich dient nun zur Bestimmung des Wesen Mensch. Aufgrund der gezeigten Merkmale werden unterschiedliche Grundreaktionen gezeigt, die auftauchen können oder eben nicht. Das Aussehen gewisser Aliens ruft Angst oder Aggression hervor, wohingegen manche Vertretet außerdischen Lebens eine freundliche Reaktion des Menschen hervorrufen können.

Sinn und Zweck hinter dieser Lösung besteht darin, dass der Mensch durch seine Vorstellungen viel weniger außerirdisches Leben bestimmt, als viel mehr sich selbst darstellt, wovor er Angst hat, was er mag. Diese Plakette soll im Endeffekt den Außerirdischen genau dieses Wissen vermitteln.