Basics Interfacedesign WS 2010/2011

DIGITAL BOOK: »Faserland«

Ziel dieses Projekts war die Umsetzung des Buches »Faserland« von Christian Kracht als eBook-Applikation. Die beiden Kernelemente dieses Projekts waren einerseits Screen-Typographie, also die Lesbarkeit des Textes am Bildschirm, andererseits die Implementierung einer sinnvollen Navigation, die es dem Benutzer ermöglichen sollte, sich möglichst einfach innerhalb des Textes zu bewegen. Die Umsetzung dieser Applikation erfolgte in zwei Formaten: zunächst eine kleine Version in 480x320 Pixeln für das mobile Lesen, z.B. auf dem iPhone oder einem anderen Smartphone, die zweite Version in 1024x768 Pixeln für das Lesen am Computer oder auf einem Tablet wie dem iPad.

Von zentraler Bedeutung für dieses Projekt war die typographische Gestaltung der Applikation, um die Lesbarkeit auch auf einem kleinen Bildschirm zu gewährleisten. Es galt also zunächst, eine passende Schriftfamilie auszuwählen und den Text unter Berücksichtigung typographischer Parameter wie Spationierung und Zeilendurchschuss neu zu setzen. Ich entschied mich dabei für die Hoefler Text, eine von Jonathan Hoefler speziell für die Bildschirm-Typographie entwickelte Antiqua-Schrift, die auch bei kleiner Schriftgröße noch gut lesbar ist, ohne Abstriche bei der Ästhetik zu machen.

Außerdem sollte ein schlüssiges Navigationskonzept entwickelt werden, dass den Benutzer leicht verständlich und auf angenehme Art und Weise durch den Text führt. Bei der Bearbeitung dieses Aufgabenteils versuchte ich, ein Konzept zu entwickeln, das über bloße Navigation hinausgeht und dem Leser zusätzliche Informationen über den Text bereitstellt. Es galt also, eine visuelle Sprache zu finden, die diese beiden Teilaspekte miteinander verbinden konnte und sowohl einfaches und angenehmes Navigieren als auch Zugriff auf eine textuelle Meta-Ebene ermöglichen sollte.

Aufbau der Applikation

1) Normales Lesen

Direkt nach dem Start der eBook-Applikation befindet sich der Benutzer im normalen Lesemodus. Am oberen Rand des Displays wird das aktuell geöffnete Kapitel angezeigt, mit den beiden Pfeil-Icons links und rechts kann der Benutzer schnell zwischen den verschiedenen Kapiteln navigieren. Die genaue Position innerhalb des Kapitels wird bei jedem Wechsel gespeichert, damit der Benutzer jederzeit den Überblick behält.

2) Link-Modus

Der Link-Modus wird aktiviert, wenn der Benutzer eines der farblich hervorgehobenen Wörter berührt. Die Begriffe sind nach vier Themenkomplexen gegliedert, die sich auch farblich unterscheiden:

Orte (pink)
Personen (türkis)
Gegenstände (gelb)
Emotionen / Gemütszustände (orange)

Hat der Leser nun eines der markierten Wörter angewählt, so wird am oberen Displayrand der entsprechende Themenkomplex mit seiner dazugehörigen Farbe angezeigt. Innerhalb des Textes wird die ganze Passage, die sich mit dem Thema beschäftigt, farblich markiert, der Rest des Textes wird ausgeblendet. Mit den beiden Pfeil-Icons wird nun nicht mehr zwischen Kapiteln navigiert, sondern zwischen Textstellen, die sich mit dem gleichen Thema befassen, in diesem Fall also zwischen Stellen, in denen der Erzähler über München spricht. Mit dem Herz-Icon kann eine Stelle mit einem Lesezeichen versehen werden, über den durchgestrichenen Kreis wird der Link-Modus deaktiviert, und der Benutzer kann normal weiterlesen.

Wenn der Leser im aktivierten Link-Modus einen weiteren Begriff anwählt, so wird wieder die dazugehörige Textpassage markiert. Ein dezenter Farbverlauf am Rand der Anzeige des Themenkomplexes zeigt dem Benutzer, dass er den aktuell aktiven Themenbereich ändern kann, indem er mit dem Finger in die entsprechende Richtung wischt.

3) Übersichts-Anzeige

Zieht der Benutzer die Lasche am unteren Displayrand nach oben, so wird die Übersichtsanzeige als Overlay aktiviert. Ein hellgrauer Balken in der Mitte dieser Anzeige repräsentiert den gesamten Text des Buches, die einzelnen Kapitel werden in schwarzer Schraffur dargestellt. Auf der rechten Seite wird für jedes Kapitel die entsprechende Leseposition angezeigt. Auf der linken Seite des Balkens zeigen farbige Markierungen Stellen im Text, in denen es um das vom Benutzer im Lesemodus selektierte Thema geht, also zum Beispiel um einen bestimmten Charakter oder eine Stadt. Damit habe ich versucht, Zusammenhänge zwischen den einzelnen Textelementen sichtbar zu machen, den Text also durch eine visuelle Komponente anzureichern. So kann der Leser nicht nur verschiedene Textstellen mit dem selben Thema vergleichen, sondern kann über die Anordnung der farbigen Markierungen auch Rückschlüsse auf die Handlung, die Rolle verschiedener Charaktere etc. ziehen.

4) Tablet-Version

Die Tablet-Version unterscheidet sich nur in Details von der kleineren Variante. Hier erscheinen die Buttons zum Speichern einer Textstelle und zum Verlassen des Link-Modus nicht in der Titelzeile, sondern unmittelbar neben dem Text. Die Übersichtsanzeige ist hier nicht als Overlay realisiert, sondern kann dank der höheren Bildschirmauflösung am rechten Rand angezeigt werden. Von der Funktionalität her ist sie jedoch gleich.

REMOTE CONTROL: »Logistika«

Kooperation mit Patrick Oswald

Im zweiten Projekt sollte eine Fernbedienung als Applikation für das iPhone umgesetzt werden. Dabei sollte besonderes Augenmerk auf die Einhaltung der offiziellen User Interface Guidelines von Apple gerichtet werden.

Da die Aufgabe sehr offen gestellt war, ging es zunächst darum, ein passendes Anwendungsszenario zu suchen. Uns war relativ schnell klar, dass eine konventionelle Fernbedienung a la Fernseher oder Stereoanlage nicht in Frage käme. Deshalb entschieden wir uns schließlich für das Thema Logistik. Hierfür entwickelten wir zunächst ein Szenario, um die Bearbeitung der Aufgabe durch konkrete Problemstellungen vereinfachen zu können.

Awesome Bikes ist ein mittelständischer Betrieb, der Fahrräder in höchster Qualität herstellt. Dabei ist er auf die zeitnahe Lieferung einer großen Zahl von Bauteilen anderer Firmen angewiesen. Unser Ziel war nun, diesen Prozess zu vereinfachen, Fehlerquellen zu minimieren und somit insgesamt die betriebliche Effizienz zu steigern und Kosten zu senken. Dafür entwickelten wir zunächst zwei Flowcharts, die den gesamten Warenfluss im Unternehmen visualisieren sollten: Eine Version ohne und eine Version mit unserer Applikation, also den jetzigen Zustand und unser Ziel.

Als nächstes versuchten wir, mit Hilfe eines Papierprototypen den konkreten Aufbau der Applikation zu entwerfen. Im Verlauf verschiedener Iterationen entstand folgende Struktur:

1 - Übersicht

Dieser Bildschirm erscheint unmittelbar, nachdem der Benutzer die Applikation startet. Hier wird zunächst eine Übersicht über alle in nächster Zeit knapp werdenden Bauteile angezeigt, sortiert nach Dringlichkeit.

2 - Aktive Bestellungen

Dieser Bildschirm - erreichbar über die Menüleiste am unteren Rand des Displays - zeigt eine Übersicht bereits laufender Bestellungen mit ihrem jeweiligen Status (Bereits eingetroffen, unterwegs, beim Zulieferer in der Verpackung und so weiter). Über den Plus-Button oben rechts kann außerdem eine neue Bestellung aufgegeben werden.

3 - Neue Bestellung

Über diesen Bildschirm kann der Benutzer eine neue Bestellung für ein im vorherigen Bildschirm ausgewähltes Bauteil aufgeben. Er erhält ausserdem einige Informationen über das entsprechende Bauteil, den gegenwärtigen Lagerstand sowie den Zeitpunk, an dem das Bauteil spätestens geliefert werden muss. Die zu bestellende Anzahl (in Verpackungseinheiten) kann über die Plus- und Minus-Buttons eingestellt werden.

4 - Versand

Dieser Bildschirm wird automatisch aufgerufen, sobald der Benutzer die aufzugebende Bestellung bestätigt. Hier erhält er wichtige Informationen über die Bestellung und kann im nächsten Schritt die zu verwendende Verpackung auswählen.

5 - Versand Übersicht

Dieser Bildschirm - ebenfalls über die Menüleiste zu erreichen - zeigt offene Bestellungen an, für die noch keine Verpackung ausgewählt wurde. Diese Liste muss abgearbeitet werden, bevor die Bestellungen von den entsprechenden Zulieferern ausgeführt werden können.

6 - Barcode-Scanner

Dieser Bildschirm erscheint, wenn der Benutzer in der Versandübersicht eine Bestellung auswählt, für die noch keine Verpackung ausgewählt wurde. Hier hat der Benutzer die Möglichkeit, Transportkisten mit Hilfe ihrer aufgedruckten Barcodes mit der Bestellung zu verknüpfen. Diese werden anschließend an den Zulieferer verschickt. Werden nun die Kisten rückgeliefert, sind sie dank der Barcodes bereits in einer Datenbank erfasst und können so an den Ort innerhalb des Produktionsgebäudes gebracht werden, wo sie benötigt werden. Auch das Einlagern überschüssiger Teile wird so vereinfacht.

Darüber hinaus enthält der Barcode-Scanner eine Fehlerkorrektur, die den Benutzer warnt, falls er den Barcode einer Transportkiste einscannt, die nicht zu der entsprechenden Bestellung passt (weil sie zum Beispiel zu klein ist).

7 - Kalender

Der Kalender zeigt schließlich eine Übersicht aller in nächster Zeit zu erwartenden Vorgänge mit verschiedenen Farbcodierungen. Rote Punkte bedeuten zum Beispiel, dass an diesem Tag ein Bauteil die erforderliche Mindestanzahl im Lager unterschreiten wird, grüne Punkte zeigen, dass an diesem Tag der Eingang einer Lieferung zu erwarten ist.

Wählt der Benutzer im Kalender einen Tag aus, öffnet sich dieser Bildschirm, der vorhandene Ereignisse mit ihrem entsprechenden Status anzeigt und dem Benutzer gegebenenfalls die Möglichkeit gibt, zu intervenieren.

Fazit

Die Umsetzung dieser Aufgabe war für uns äußerst lehrreich. Besonders interessant war dabei die durch die offene Aufgabenstellung gegebene Möglichkeit, ein komplett eigenes Szenario zu entwickeln und anschließend im Rahmen dieses Szenarios gestalterisch zu operieren. Durch unser methodisch-iteratives Vorgehen und die strikte Trennung der einzelnen Arbeitsschritte war es uns möglich, die doch recht umfangreiche Umsetzung effizient und ohne größere Probleme durchzuführen. Dabei legten wir auch großen Wert auf disziplinierte und ständige Kommunikation, um Missverständnisse zu vermeiden. Disziplin spielte schließlich auch bei der konkreten Umsetzung mit Photoshop eine große Rolle, um in einer ständig komplexer werdenden Dateistruktur die Übersicht zu bewahren.

DESIGN TO MAKE IT SUCK: »One Hour Photo«

In der Zeit des digitalen Archivs werden Festplatten zu Altären der ausgelagerten Erinnerung, ähnlich den Fotoalben, die unsere Eltern in der analogen Ära verwendeten, um ihr Leben zu dokumentieren. Momente mögen vergänglich sein, in ihrer digitalisierten und dokumentierten Form sind sie es jedoch nicht. Das zentrale Stichwort ist Redundanz. Digitale Bilder existieren nicht an einem Ort, sondern an vielen. Ihr Leben beginnt auf dem Flashspeicher in der Digitalkamera. Von dort verteilen sie sich auf die Festplatten der Computer, wo sie sortiert, archiviert und bearbeitet werden. Danach werden sie vielleicht auf DVDs gebrannt, auf USB-Sticks kopiert oder bei Facebook, flickr und Twitter hochgeladen. Damit ist ihre Verteilung noch nicht zu Ende, denn in den Augen ihrer Schöpfer sind sie »wertvolle« Daten, die an möglichst vielen Orten gespeichert werden müssen, um ihr Überleben zu sichern. Backups müssen erstellt werden. Darüber hinaus muss dieser Vorgang aufgrund der begrenzten Lebensdauer digitaler Speichermedien alle paar Jahre wiederholt werden. Das digitale Foto dehnt sich aus ins Unendliche. Foto und Fotograf sind miteinander verbunden, bis ein Teil dieses Verhältnisses obsolet wird, was in den meisten Fällen der Fotograf sein wird. Verbindet man nun diese zeitlich infinite Ausdehnung mit der Masse an Bildern, die jeden Tag, jede Stunde, jede Minute neu entstehen, so drängt sich die Erkenntnis auf, dass dringend etwas unternommen werden muss, wenn wir nicht in einer endlos wachsenden Flut immer bedeutungsloser werdenden Bilder ertrinken wollen. Mit »One Hour Photo« habe ich versucht, diesem beängstigenden Prozess etwas entgegenzusetzen. Es war deshalb mein Ziel, mit Hilfe eines gewissermaßen magischen Gegenstandes an das Reflexionsvermögen meiner Mitmenschen zu appellieren und sie dazu zu bringen, über die Implikationen ihres Handelns nachzudenken, bevor sie den Auslöser ihrer Kamera drücken. Es ging also darum, einen Gegenstand mit einem gewissen »medientheoretischen« Potential zu konstruieren.

The creative act lasts but a brief moment, a lightning instant of give-and-take, just long enough for you to level the camera and to trap the fleeting prey in your little box. (Henri Cartier-Bresson)

Für Cartier-Bresson ist der Fotograf also ein Jäger, der in seinem Apparat den flüchtigen Moment einfangen will wie in einem Schmetterlingsnetz. Ähnliche Ziele dürften Touristen, Verliebte, Partygänger verfolgen, wenn sie ihre Kamera überall mit sich herumtragen, um wirklich jedes Detail, jeden flüchtigen Eindruck festzuhalten und das Erlebte somit jederzeit abrufbar und reproduzierbar zu machen. Dieser Ansicht liegt jedoch ein fundamentaler Irrtum zu Grunde, denn die Karte ist nicht das Territorium und die Fotografie ist kein »eingefangener« Moment. Aus diesem Irrtum entsteht ein gewisser Entfremdungseffekt, den jeder kennt, der sich beim Betrachten der eigenen Fotos immer wieder fragen muss, was in aller Welt einen dazu bewogen haben mag, in genau diesem Moment den Auslöser zu drücken. Diese Bilder sind im wahrsten Sinne des Wortes bedeutungslos, sie mögen etwas abbilden, aber sie zeigen: nichts.

»One Hour Photo« ist eine Apparatur, die, gesteuert von einer Zeitschaltung, einmal pro Stunde ein (digitales) Foto macht. Nach einer weiteren Stunde löst sie erneut aus, und das vorhergehende Bild wird gelöscht. Über einen großen Knopf auf der Oberseite des Apparates kann das aktuell gespeicherte Bild auf einem sich an der Rückseite befindenden Bildschirm angezeigt werden.

Das Nachdenken über die Verwendung eines solchen Apparates, der sich durch seine operationale Einschränkung fundamental von gängigen Kameras unterscheidet, ergab für mich einige äußerst interessante Szenarien. Würde der Benutzer versuchen, sich zu jeder vollen Stunde in eine Situation zu bringen, die es wert war, fotografiert zu werden? Wären die Bilder weiterhin konventionell, oder würden sich die Fotografen durch die Negation der archivarischen Verwendbarkeit eher befreit fühlen und Bilder schießen, die sie sonst nicht machen würden? Würde der Fotograf seine Mitmenschen zum Posieren auffordern, obwohl das Fehlen eines Sekundenzeigers auf der Vorderseite eine genaue zeitliche Lokalisation des Auslösevorgangs unmöglich macht? Diese Fragen, die sich jedem Benutzer zwangsläufig stellen müssen, machen für mich das medientheoretische Potential dieses Gegenstands aus.

Fazit

Dieses Projekt unterschied sich von den anderen, da es einen völlig anderen Denkansatz erforderlich machte. Es ging nicht darum, etwas anwendungsbezogenes zu schaffen, sondern darum, den Benutzer mit einer bestimmten Problematik zu konfrontieren. Diese Konfrontation findet bei meinem Gegenstand unverdeckt statt, Benutzer und Apparat befinden sich gewissermaßen in einem unlösbaren Konflikt, der aber meiner Ansicht nach für den Benutzer sehr ergiebig sein kann, wenn er sich auf ihn einlässt. »One Hour Photo« ist für mich eine Möglichkeit, die Macht, die Alltagsgegenstände über ihre Besitzer haben, sichtbar zu machen und damit kritische Reflexion zu ermöglichen.

SPOKEN WORDS: »Erlkönig«

Kooperation mit Patrick Oswald

Sinn der Aufgabe bestand darin, einen zuvor ausgewählten Text, in eine „Infografik“ zu wandeln. Dem USER sollte also mit Hilfe von Piktogrammen, Symbolen und grafischen Metaphern der Inhalt dieses Textes ohne Ziffern Zahlen und Satzzeichen vermittelt werden.

Hierbei war auf etwaige Besonderheiten des Textes zu achten, wie z.B.: Wiederholungen im Text oder bestimmbare Abfolgen, sowie unterschiedlichste Merkmale: Wie Anzahl der Spannungskurven, Anzahl der vorkommenden Personen oder Satzgliederung.

Der von uns ausgewählte Text, der ERLKÖNIG bietet eine Menge solcher strukturellen Merkmale. Als erstes viel die Reimform ins Gewicht: 8 Verse, die Reimfolge AABB und die Personen mit ihren Beziehungen zueinander. Wer mit wem redet oder wer wen beeinflusst.

Wir hatten ziemlich bald zwei für uns schlüssige Ansätze, die wir unbedingt weiterverfolgen wollten. Deswegen können wir auch zwei unterschiedliche Visualisierungen präsentieren, an denen wir beide mit Idee und Feedback gearbeitet haben.

Während der Weiterentwicklung unserer Ansatze entdeckten wir, dass sich unsere Darstellungsmethoden in Mikro- und Makroebene trennen ließ. Hierbei behandelt die Makroebene mehr die äußerlichen Zusammenhänge der Personen und eine grobe Zusammenfassung der Story selbst. Die Mikroebene hingegen befasst sich mehr mit dem Duktus? Der Anzahl der Silben dem Rhythmus des Gedichts und der entstehenden Pausen und Spannungen etc…

Aber seht selbst :D