Basics Interface WS 12|02

Digitales Buch

Aufgabe

Gestalte eine digitale Fassung Deines Lieblingsbuches. Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch, oder auch ein Gedichtband sein. 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 können. Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe.

Lösung Für die Aufgabe habe ich mich entschlossen, eine digitale Version des Kochbuches „Genial Kochen“ von Jamie Oliver zu erstellen. Da das Originalbuch etwas lieblos und kühl gestaltet ist, habe ich mir zur Herausforderung gemacht, das Buch in seiner digitalen Fassung nahbarer und wärmer umzusetzen. Als Gestaltungselement wird somit ein Träger mit wellenförmiger Kante eingesetzt, welcher an eine Tischdecke oder Gardine angelehnt ist und häusliche Wärme vermittelt. Typografisch setzt die Schriftmischung aus Bello und Thesis Akzente. Die Gerichte wurden neu kategorisiert, sodass sich drei Navigationsebenen ergeben: Gerichtart, Auflistung der Gerichte und Detailansicht. In letzterer kann man sich mittels der Pfeile innerhalb der Liste in zweiter Ebene durchklicken. Im kleinen Format ergibt sich zusätzlich in der Detailansicht noch die Möglichkeit zwischen Zubereitung und Zutaten zu wechseln.

Startseite 1024x768

Listenansicht 1024x768

Detailansicht 1024x768

Startseite 240x320

Listenansicht 240x320

Detailansicht 240x320

Graphical User Interface – Brainstorm-App

Aufgabe

Es soll ein Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designer / 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.

Lösung Ansatz der Brainstorm-App INTERCHANGE ist das Zusammentragen von Ideen mehrerer Personen während diese unterwegs sind. Wichtig erschien mir, nicht eine klassische Mind-Map mit einer Baumdarstellung zu gestalten. Zum einen ist das kleine Ausgabemedium für eine solche Darstellung nicht geeigent und zum anderen beruht das Konzept der App darauf, Ideen schnell festhalten und kategorisieren zu können. Die spätere Auswertung dagegen könnte durchaus - über die Export-Funktion - auch eine Mind-Map-Darstellung sein. So entstehen zwar relativ viele Listenansichten, diese erfüllen jedoch den Zweck, die Struktur und die Tiefe der App klar darzustellen. Die App ist somit in drei große Komponenten aufgeteilt: Zum einen gibt es eine Projekt-Ebene, in der Ideen bereits kategorisiert sind. Die Projekte enthalten verschiedene Teilnehmer, die darauf zugreifen können. Innerhalb dieser Projekte ist es immer möglich, eine Idee zu kommentieren oder zu bewerten. Zum anderen gibt es einen Ideen-Pool, welcher eine persönliche lose Sammlung von Ideen darstellt, die noch keinem Projekt zugewiesen sind. Außerdem gibt es ein „Dashboard“, in dem der Nutzer sich sämtliche Aktivitäten anzeigen lassen kann, die andere Nutzer seit seinem letzten Login getätigt haben.

Flowchart

Startbildschirm

Übersicht Projekte

Projektansicht - Auflistung der Assoziationen (erste Ebene)

Projektansicht - Sortierfunktion

Projektansicht - weiterführende Funktionen

Detailansicht einer Assoziation - Beispiel: Foto-Input. Hier können die Nutzer der Gruppe noch weiterführende Kommentare oder Ideen schreiben oder den Beitrag mittels „like“ als wichtig markieren.

Dashboard - Ansicht der Aktivitäten anderer Nutzer seit dem letzten Login in der App.

Erstellen einer neuen Idee (Beispiel: Text-Input)

Sortierung in den losen Ideen-Pool oder Zuweisung zu einem speziellen Projekt.

Klangbild

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.

Lösung Nach langem hin und her entschloss ich mich einen 40-sekündigen Mitschnitt aus dem NBA-Finale 1993 zwischen den Chicago Bulls und Phoenix Suns zu visualisieren. Die MP§-Datei ist unter Material zu finden. Bei der Umsetzung habe ich besonderen Wert darauf gelegt, wirklich die Geräusche zu verarbeiten, die ich höre und nicht, was ich höre - ich wollte also nicht bildlich werden, sondern die Klänge in Formen und Überlagerungen visualisieren. So nehmen die beiden dominanten Moderatoren-Stimmen auch in der Visualisierung erheblichen Raum ein und stechen nocheinmal farblich hervor, während z.B. das Qietschen der Schuhe entsprechend unauffällig dargestellt ist, da es nur bei genauem Hinhören auszumachen ist. Das ständig präsente Publikum wird durch ein Rauschen im Hintergrund wiedergegeben.

1000 Worte

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 kommuniziert werden. Bei der Auswahl eines Themas sollte drauf geachtet werden, dass das Thema hinreichend komplex ist. Naturwissenschaftliche Themen sind z.B. gut geeignet. Es können aber auch Alltagsthemen genommen werden wie z.B. die Zubereitung eines Essens. Die Aufgabe soll in Zweierteams bearbeitet werden.

Lösung Als Thema für diese Aufgabe habe ich mit Max Tillich die Bundestagswahl gewählt. Die Problematik des Themas bestand letztendlich darin, dass es selbstverständlich sehr komplex ist, sodass wir uns lediglich auf den Wahlvorgang im Allgemeinen beschränkt haben. Überhangmandate, die Regierungsbildung usw., die wir zu Beginn auch darstellen wollten, haben wir deshalb weggelassen. Die Grafik wird von unten nach oben gelesen, beginnt mit dem Ausfüllen des Wahlzettels und teilt sich schließlich zwischen Erst- und Zweit-Stimme auf, um letztendlich bei der Bildung des Parlamentes wieder zusammenzutreffen und so die Legitimationskette des Wahlvorganges darzustellen.

Fazit

Insgesamt bin ich mit dem Kurs sehr zufrieden, was alleine schon den Vorträgen, der fundierten Kritik und ganz einfach dem Auge von Boris Müller geschuldet ist. Sämtliche Aufgaben und die Struktur des Kurses haben mir sehr gefallen. Letztendlich hätte ich mich gerne noch intensiver mit den einzelnen Aufgaben auseinandergesetzt – aber mehr Zeit kann man ja bekanntlich immer investieren, um ein optimaleres Ergebnis zu erzielen.

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Basics Interface WS 12|02

Digitales Buch

Graphical User Interface – Brainstorm-App

Klangbild

1000 Worte

Fazit

Ein Projekt von

Fachgruppe

Art des Projekts

Betreuung

Entstehungszeitraum

zusätzliches Material