Basics Interface 11|02 Dokumentation

Aufgabe

Gestalte eine digitale Fassung Deines Lieblingsbuches. Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch, oder auch ein Gedichtband sein. (Keine Comics!) Die digitale Fassung des Buches soll exemplarisch anhand von vier Screens in zwei verschiedenen Formaten vorgestellt werden - zwei horizontale Screens im Format von 1024 x 768 Pixeln und zwei vertikale Screens im Format von 240 x 320 Pixeln. Die Screens sollen nicht nur die Inhalte des Buchs wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe. Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung

Ich hatte zu dieser Aufgabe keinen Projektpartner, daher hatte ich auch selbst die Wahl der Buchvorlage. Diese fiel auf Douglas Couplands Post-Baby-Boomer-Roman »Generation X: Tales for an accelerated Culture«, dem Buch zur titelgebenden Bevölkerungsgruppe. Es ist durchzogen von Slogans, Cartoons und Definitionen wichtiger kultureller Termini, die eine eigene, sich mit dem Fließtext verschränkende Spalte im Satzspiegel haben, was dem Buch einen lexikalen Charakter gibt.

Bei der Umsetzung als digitales Buch war mein Plan, diesen Zusatzinformationen besonderen Raum zu geben. Außerdem wollte ich alles auch gleich für Touchscreen implementieren, da meiner Meinung nach ein digitales Buch von Touchgesten bestimmt sein soll und möglichst nicht von optischen Steuerelementen. Daher wollte ich Wert auf das Design der Touchgesten legen und im Übrigen die optische Gestaltung weitestgehend im Print-Stil halten. Strukturell sollte es durchblätterbare Kapitel, darin integrierte Infokästen und ein interaktives Inhaltsverzeichnis geben.

Für den Fließtext benutze ich die Georgia, die sehr robust gegen niedrige Bildschirmauflösungen ist. Die Display-Fonts sind der Originalausgabe von 1991 nachempfunden, als Schriften durchaus rücksichtslos skaliert wurden.

XGA

Die Infoboxen haben links eine eigene Spalte. Sie werden je nach Vorkommen im Text ein-/ausgefadet. Der Fließtext ist in der Hauptspalte rechts untergebracht. Er lässt sich durch Links-/Rechts-Swipe-Gesten blättern. Der Satzspiegel ist großzügig gewählt, um ein angenehmeres Lesen zu ermöglichen. Oben links ist das Kapitel eingeblendet. Berührt man es, wird das Inhaltsverzeichnis mit einem leichten Scaling-Effekt eingefadet. Hier gelangt man durch jeweiliges Berühren zu den Kapitelanfängen.

QVGA

Die QVGA-Variante habe ich ebenfalls auf dem iPad umgesetzt, mit einem entsprechend kleinen Ausschnitt des Bildschirms. Der Satzspiegel ist hier sehr sparsam bemessen, um bei guter Lesbarkeit noch ausreichend Seiteninhalt darstellen zu können.

Das Buch ist hierarchisch horizontal strukturiert, wie es bei kleineren Mobilgeräten üblich ist: Die Navigation beginnt links mit dem vertikal scrollbaren Inhaltsverzeichnis, von dort gelangt man nach rechts auf die Kapitel-Ebene - entweder durch Rechts-Swipe an die letzte gelesene Stelle oder durch Single Touch zum jeweiligen Kapitelanfang. Die Kapitelebene lässt sich per Swipe vertikal blättern (nicht scrollen). Dadurch bleibt die Buchseiteneinteilung erhalten, wodurch Orientierungsschwierigkeiten im Text vermieden werden können. Markierungen an der rechten Seite der Kapitelansicht weisen auf verfügbare Infoboxen hin. Diese werden durch Rechts-Swipe ein- und durch Links-Swipe wieder ausgeblendet. Von der Kapitelansicht gelangt man durch Links-Swipe zum Inhaltsverzeichnis.

Das komplette Buch lässt sich mit den 4 Swipe-Gesten Hoch/Runter/Links/Rechts oder wahlweise eine 4-Richtungs-Cursortaste, wie sie auf nicht touchfähigen Mobilgeräten üblich ist, bedienen. (Die einzige Ausnahme hiervon ist die Kapitelanwahl, die mit Single Touch realisiert ist.) Auf diese Weise lässt sich die gesamte QVGA-Fläche zur Eingabe nutzen, eine umständliche/unergonomische Bedienung wird vermieden.

Aufgabe

Es soll ein Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designern/Entwicklern bei der Generierung von Ideen unterstützen. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden. Die Applikation kann unter Umständen über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr. Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher soll weitesgehend die standardisierte iPhone-GUI eingesetzt werden. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.

Umsetzung

Ich habe mich bei dieser Aufgabe auf Varianten des Brainstorming konzentriert, die das iPhone-Format nicht überfordern, sondern dessen Stärken nutzen. Es kam mir darauf an, die Funktionalität der App unbedingt überschaubar zu halten und feature bloat zu vermeiden.

Das Konzept baut auf der Idee der mind map auf, bei der von einer initialen Idee als Wurzel ausgehend ein Baum von weiterführenden Ideen und Assoziationen entsteht. Das Darstellungsproblem der Mindmap auf kleinen Screens beruht auf dem theoretisch exponentiellen Wachstum von Bäumen. Das Zoomen und Draggen einer riesigen Mindmap hielt ich allerdings für kontraproduktiv. Ich entschied mich daher, das Wachstum zu reglementieren: Es sollten pro Iterationsschritt nicht mehr als drei weiterführende Ideen möglich sein. Außerdem entschied ich mich für eine zusätzliche Variante, bei der nur genau eine weiterführende Idee pro Iteration erlaubt ist, was zu einer Assoziationskette führt. Das Ganze soll sowohl im Netzwerk mit anderen Menschen als auch als Solitaire-Variante mit der App (über Suchmaschinen-Ergebnisse) gespielt werden können.

Nachdem man sich für Variante Mind Map oder Assoziationskette entschieden hat, legt man noch Titel, Beschreibung und Art der erlaubten Medien fest: keine Beschränkung, rur Bilder/Fotos oder nur Text.

Im Netzwerk kann man laufenden Brainstormings beitreten.

Im Brainstorming selbst wählt man die Idee aus, an die man anknüpfen möchte, und kann je nachdem, was im Brainstorming an Medientypen zugelassen ist, zwischen Freihandzeichnen, eigenem Bilderalbum, Texteingabe per Tastatur oder per Spracherkennung wählen. (Beim Freihandzeichnen sorgt eine eingeblendete Zeichenspitze dafür, dass der Zeichenpunkt nicht vom Finger verdeckt wird.)

Bei der Assoziationskette ist es im Gegensatz zur Mind Map erstens nicht möglich, nach oben zu scrollen, um den Verlauf es Brainstormings zurückverfolgen zu können. Es ist immer nur die letzte Iteration zu sehen. Zweitens kann die Medienbeschränkung nicht vorausgewählt werden, sondern auf alterniert immer zwischen »nur Text« und »nur Bilder/Fotos«. Drittens darf ein User in der Netzwerkvariante an einem Brainstorming, an dem er bereits teilgenommen hat, nicht mehr bzw. erst nach einer ausreichenden Anzahl von Zwischeniterationen wieder teilnehmen, um den Stille-Post-Effekt der Assoziationskette nicht zu beeinträchtigen.

Beendete Brainstormings, an denen ich teilgenommen habe, sind im Archiv zu finden.

Aufgabe

Es soll eine akustische Begebenheit (kein Musikstück!) 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 bildschirmorientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Umsetzung

Bei der Idee, eine akustische Begebenheit zu visualisieren, blieb ich gedanklich am räumlichen Aspekt der Akustik hängen. Das brachte mich zum Stereoklang. Ich beschloss, ein eindrückliches Stereosignal per Processing zu visualisieren und entschied mich für den Hubschrauberflug am Beginn von »The End« der Doors.

Das Lautstärkeverhältnis der Stereokanäle übersetzte ich in eine X-Koordinate, mit der ich einen Kreis seitlich bewegen konnte, je nachdem, auf welchem Kanal es lauter war. Damit sich der Kreis bei dem pulsierenden Rotorengeräusch nicht rhythmisch zur Mitte zurück bewegte, verfeinerte ich diese Methode, indem ich das Lautstärkeverhältnis über einen gewissen Zeitraum mittelte.

Die absolute Lautstärke übertrug ich auf den Kreisradius, um den Kreis pulsieren zu lassen.

Den Kreis ersetzte ich später durch zwei gegenüberliegende rotierende Kreislinienausschnitte, um die Helikopterassoziation zu verstärken. Der zeitliche Ablauf sollte durch das langsame Nach-unten-Schlieren des Signals betont werden.

Aufgabe

Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommu- niziert werden.

Bei der Auswahl eines Themas sollte drauf geachtet werden, dass das Thema hinreichend komplex ist.

Umsetzung

Die Aufgabe habe ich gemeinsam mit Mareka Pährisch bearbeitet.

Wir einigten uns auf das Thema »Wie umweltfreundlich sind Elektroautos wirklich - CO2-Bilanz bei fossilen und bei elektrischen KFZ-Antriebskonzepten«. Vor dem Hintergrund der aktuellen Diskussion, die den Nutzen von Elektroautos für die Umwelt hinterfragt, haben wir versucht darzustellen, wovon bei welchem Antriebskonzept die CO2-Bilanz abhängt.

Ziel war es dabei, die These zu relativieren, dass Elektro-PKW eine schlechtere Umweltbilanz haben als sparsame Benzin- oder Diesel-PKW. Diese These nimmt vereinfachend an, dass der CO2-Bilanz eines Elektroautos die des allgemeinen deutschen Strommixes zugrundezulegen ist.

Wir wollten nun darstellen, dass der Konsumentenentscheidung bei PKW mit Verbrennungsmotor »sparsam vs. nicht sparsam« eine Konsumentenentscheidung bei Elektroautos gegenübergestellt werden kann. Die bezieht sich weniger auf die Kaufentscheidung, da der Stromverbrauch der Elektroautos aus Massenproduktion ähnlich ist. Vielmehr liegt die Entscheidung in der Wahl des Stroms, der zum Aufladen verwendet wird. Strom aus regenerativen Energien hat das Potenzial, der Emissionsfreiheit beliebig nah zu kommen. Dieses Potenzial wird dem Elektroauto exklusiv mitgegeben.

Auf verschiedene weiterführende Fragen (Atomstrom, Biosprit, Ökobilanz des Herstellungsprozesses) verzichteten wir in dieser vereinfachenden Darstellung bewusst, da diese auf sehr verschiedenen Ebenen zu betrachten sind: Die negative Umweltbilanz von Atomstrom ist nicht mit CO2-Emissionen zu erklären, ebenso hat Biosprit eine gute CO2-Bilanz, greift aber auf anderem Wege in Biosysteme ein und wirft außerdem ethische Fragen auf. Uns erschien es dennoch gerechtfertig, die CO2-Bilanz des Antriebskonzepts isoliert zu betrachten.

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Basics Interface 11|02 Dokumentation

Ein Projekt von

Fachgruppe

Art des Projekts

Betreuung

Entstehungszeitraum