Copyright

©Dominic Rödel

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 minde- stens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln und mindestens 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. Die Aufgabe soll in Zweierteams bearbeitet werden.

Ergebnis

Diese Aufgabe entstand in Zusammenarbeit mit meinem geschätzten Mitstudenten David Rehman.

Für diese Aufgabe haben wir uns für ein Studenten-Kochbuch entschieden. Eine einfache Navigation sowie eine klare Inhaltliche Strukturierung unter Berücksichtigung Zielgruppenrelevanter Eigenschaften stand dabei im Vordergrund. Zudem sollte der inhaltliche Charakter des Buches, hauptsächlich durch die Bilder vermittelt, im optische Stil des digitalen Buches aufgegriffen werden und eine optische Geschlossenheit ergeben.

Begonnen wurde die Arbeit an der kleinen Version. Hier ermöglicht ein immer herausfahrbares „Menü“ vom oberen Bildrand den direkten Einstieg in Kategorien des Buches wie Beispielsweise Salate, Suppen, Fisch, Fleisch, bis hin zur Dessert Kategorie, sowie die direkten Sortierfunktionen innerhalb dieser Kategorien nach Alphabet, Zutatenpreis und Zubereitungszeit. Hat man ein Rezept aus der Liste mit Vorschaubild und Titel ausgewählt gelangt der Benutzer zu einer Seite, die der Zutatenübersicht dient und dann die Möglichkeit hat, zu den einzelnen Zubereitungsschritten zu gehen. Hier wird dann in einer Art „Fließtext“, wobei die einzelnen Zutaten und Mengen zur besseren Übersicht typografisch Hervorgehoben werden, erklärt, wie das Gericht zuzubereiten ist. Das optische Auslaufen der Schrift nach unten und die Navigation an der Rechten Seite verdeutlicht die Möglichkeit des Scrollens. Ein automatisches „einrasten“ nach inhaltlichen Informationsblöcken gliedert die einzelnen textlichen Zubereitungsschritte zudem. Eine klassische swipe Geste scrollt also nicht komplett durch, sondern nur bis zum nächsten Schritt. Die große Version wurde letztlich basierend auf dieser Version gestaltet wobei hier die Möglichkeit genutzt wurde den ansprechenden Fotos deutlich mehr Platz zu geben.

Copyright

©Dominic Rödel

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 Kon- zeptphase entwickelt werden. Die Applikation kann unter Umständen über das technisch Machbare hi- nausgehen - 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 wer- den. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmab- laufplan (Flowchart) skizziert werden.

Ergebnis

Das Resultat dieser Aufgabe ist die Mindmap App „BrainTrain“. Ziel war es, eine Mindmap App zu entwickeln, die es ermöglicht verschiedneste Arten von Inhalten, also Text, Fotos, Sprachnotizen etc. auf einer Mindmap zu platzieren und gleichzeitig ein hohes Maß an Übersichtlichkeit zu bewahren. Letzters Ziel im Hinterkopf, entschied ich mich für eine grafische Anlehnung an etwas, was sich seit jeher durch seine Übersichtlichkeit auszeichnet und letztlich auch Namensgebend für die App ist - Metro bzw. U-Bahn Pläne: Klar definierte Flächen und deutliche Farben sowie Kontraste ohne viel Verläufe in Typischen iOS GUI Element Formen.

Hat der Nutzer eine Mindmap mit einem Thema angelegt, erscheint dieses als Hauptelement auf der Mindmap. Tippt man dieses an, erscheint Ringförmig um dieses Element eine Auswahl, die es ermöglicht ein neues Element hinzuzufügen - entsprechend der angegebenen Pfeilrichtung. Hat der Benutzer eine Richtung für das neue Element gewählt, erscheint das neue Element mit einer Ringauswahl nach dem Inhalt des neuen Elements. Möglich sind hier:

• Text
• Foto
• Video
• Inhalt aus der Zwischenablage
• OCR Texterkennung via Foto
• Die Möglichkeit eine Handskizze auf dem Screen zu erstellen
• Eine Websitevorschau eines Links
• Sprachkommentar

Mit dem roten „X“ in der Mitte des neuen Elements kann der Vorgang abgebrochen werden.

Nach der Auswahl des Element-Tyus wird der eigentliche Inhalt ausgewählt. Hier wird zwischen Titel und Inhalt unterschieden. Wird nur ein Titel eingegeben, wird dieser im Element angezeigt. Ist Inhalt vorhanden, hat dieser den Vorrang, der Titel wird dann nur intern genutzt.

Ist ein neues Element angelegt, kann dieses durch erneutes Antippen, weiter benutzt werden. Das Ringmenü zeigt die Optionen:

• Von hier ein weiteres Elment hinzufügen
• Element bearbeiten
• Element Löschen
• Eine Verbindung trennen
• Inhalt des Elements betrachten

Wird dann beispielsweise ein neues Element rechts hinzugefügt, bewegt sich der Ausschnit der Mindmap langsam und nachvollziehbar so, dass das neue Element sich dann im horizontalen Zentrum befindet. Ein Hinweis an der Verbindungslinie der Elemente zeigt eine Vorschau oder den Titel des nicht sichtbaren Elementes welches an der Verbindungslinie hängt.

Besonders komfortabel ist die Ansichtsänderung oben rechts die einen Wechsel zwischen der Detailansicht und einer reduzierten ermöglicht. Hier werden dann nur übersichtlich verkleinert die Titel der einzelnen Elemente und die Verbindung derer gezeigt.

Copyright

©Dominic Rödel

Es soll eine akustische Begebenheit (kein Musikstück!) in einem Zeitra- ster 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.

Ergebnis

Aufgrund der inhaltlichen Nähe zur Klangvisualisierung im Kurs Informationsarchitektur und -visualisierung entschied ich mich bei der Bearbeitung dieser Aufgabe für eine etwas andere, experimentelle Herangehensweise.

Visualisert werden sollte die Stage Start Sequenz des NES Spieles Donkey Kong. Diese lag mir in einer 4 Sekunden langen MIDI Sequenz vor.

Für die Bearbeitung beschäftigte ich mich mit dem Aufbau von Midi Datein und deren Struktur: So gibt es quasi durch Text definierte Töne und eine Angabe zu ihrem Abspielzeitpunkt nach Beginn des Abspielens und eine Angabe der „Tonspur“.

Diese Informationen sollten in einem Poster - das letztlich ca 2m hoch ist und welches sich optisch am Levelaufbau des Donkey Kong Spiels orienterit - dargestellt werden.

Herausgekommen ist eine Visualisierung in der die Einzelnen „Stages“ grob die Zeitachse wiederspiegeln. Alles was auf einer Stage vorhanden ist passiert simultan. Im Spiel wird von unten nach oben gespielt, entsprechend ist auch die Leserichtung von Unten nach Oben. Eine Aufteilung der Stages in linken und rechten Teil visualisiert die erste und zweite „Tonspur“. Die Töne an sich, sinder in Form von Barcodes abgebildet, die jeweils die Zeile Midi Code beinhalten die für diesen Ton verantwortlich sind.

Bevor ich zu diesem Ergebnis kam, gab es noch eine Variante die noch Abstrahierter war. So wurde der ganze Quellcode der Midi Datei in Form eines QR Codes dargestellt, wobei die einzelnen Quadrate durch 9x9 Pixel große Tiles des Spiels repräsentiert wurden.

Copyright

©Dominic Rödel

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

Ergebnis

Das ganze Poster ist unter „Material“ zu finden. Diese Aufgabe entstand in Zusammenarbeit mit meinem geschätzten Mitstudenten Corvin Weber.

Wir entschieden uns aufgrund der anhaltenden Debatte über das Sperren von Videos im Internet durch die GEMA für eine Visualisierung der nötigen Schritte die notwendig sind, um zu überprüfen ob ein Video bzw. dessen Inhalt irgendwie durch die Gema vertreten ist.

Die Legende oben links erklärt den Inhalt. Alles was mit dem Video das untersucht werden soll zu tun hat, ist grau eingefärbt, was sich mit der Musik befasst ist blau dargestellt, alles was mit Text zu tun hat, ist orange. Die Leserichtung ist von links unten nach rechts oben (resultierend aus der isometrischen Perspektive) Große Würfel sind Fragen-Elemente und haben auch eine vorgegebene Leserichtung innerhalb dieser. Kleine Würfel in rot und grün sind Entscheidungs-Elemente.

Zu Beginn steht die Frage: Bekommt der Videoupload ins Internet ein „go“? Darauf hin wird in der grauen Ebene der Inhalt des Videos untersucht. „Hat das Video überhaupt Ton?“ „Handelt es sich um Melodie?“, „Gibt es zudem einen Text?“ Anhand dieser Informationen wird dann geschaut welche inhaltlich gleichen Schritte für das Prüfen der GEMA Vertretung von Musik und oder Text durchgegangen werden müssen, also auf welcher oder welche Ebene, bzw. Ebenen man sich weiter bewegen muss.

Entsprechend wird hier also für Text bzw. Meldodie geprüft: „Ist der Urheber verstorben?“, „Liegt der Urheber Tod bereits 70 Jahre zurück?“, „Lag der Tod 1993 bereits 50 Jahre zurück?“, „Hat der Urheber seine Rechte an die GEMA abgetreten?“, „Hat der Uploader Geld an die GEMA bezahlt?“ und entsprechend „Eine Lizenz von der Gema erhalten?“, Daraus ergibt sich dann die Konsequenz, dass also für „Melodie oder Text der Uplaod OK ist“.

Ein Kurs der wirklich Spaß gemacht hat - besonders die GUI Aufgabe hat Lust auf mehr gemacht und die 1000 Worte Aufgabe hat einem gezeigt, wie wichtig es ist, sich mit einem Thema bis ins kleinste Detail zu befassen um daran arbeiten zu können. Besonders positiv möchte ich auch herausstellen, dass einem die Möglichkeit gegeben wurde zu experimentieren und auszuprobieren.