Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Basics Interface Design - Moritz Kronberger

Basics Interface Design - Moritz Kronberger

Die Dokumentation des Kurses Basics Interface Design im WS 2011 bei Prof. Boris Müller.

Digitales Buch

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 können. Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe. Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung

Das Buch „Lost Moon“ von Jim Lovell und Jeffrey Kruger erzählt die Reise der Apollo 13, ein Raumschiff auf der Reise zum Mond, und wie eine Explosion an Bord, das Leben der Raumfähre und der Astronauten gefährdet. Wir haben versucht bei der Umsetzung des Ebooks den Stil der damaligen Zeit, an Beispiel des Bordbuchs, und den Stil des Buches, in Form der blauen Umrandung, widerzuspiegeln. Das Ebook entstand in Zusammenarbeit mit Thomas Petrach.

1a_digitalbook_1024x768.png1a_digitalbook_1024x768.png

2b_navigation_touch.png2b_navigation_touch.png
2c_navigation_swipe.png2c_navigation_swipe.png
3b_navigation_open.png3b_navigation_open.png
3e_start.png3e_start.png
3f_flug.png3f_flug.png
3g_flug.png3g_flug.png
3h_flug.png3h_flug.png
3j_movie.png3j_movie.png

Als Navigation fungiert einzig eine Leiste am unteren Bildschirmrand. Hier zeigt ein blauer Slider die aktuelle Position im Buch an und durch verschieben des Sliders kann zu anderen Seiten oder Kapiteln gewechselt werden. Sobald der Slider „gegriffen“ wird zeigen blaue Stellen an der Leiste die nächsten Kapitel an, zusätzlich erscheint darüber eine Kapitelanzeige und die aktuelle Seitenzahl. Rechts oben können Bildschirmhelligkeit und Schriftgröße verändert werden. Fotos und die dazu gehörige Bildunterschrift füllen im Buch immer eine komplette Spalte aus. Durch doppeltippen auf das Bild wird es bildschirmfüllend angezeigt. Als Schrift diente uns die PT Serif, für Bildunterschriften wurde die Courier gesetzt.

4a_240x320_digitalbook.png4a_240x320_digitalbook.png
4b_240x320_digitalbook.png4b_240x320_digitalbook.png
4c_240x320_bild.png4c_240x320_bild.png
4d_240x320_bildunterschrift.png4d_240x320_bildunterschrift.png
5a_240x320_ausgang.png5a_240x320_ausgang.png
5b_240x320_hover.png5b_240x320_hover.png
6a_240x320_game1.png6a_240x320_game1.png
6b_240x320_game1.png6b_240x320_game1.png
6c_240x320_game.png6c_240x320_game.png
6d_240x320_game.png6d_240x320_game.png
6e_240x320_movie.png6e_240x320_movie.png

GUI

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

Umsetzung

Die App legt den Fokus auf Brainstorming unterwegs. Der Ausgangspunkt ist eine Mindmap. Diese kann über den „Share“ Button mit anderen Mitgliedern des Brainstorms geteilt werden. Somit haben alle Mitglieder Zugriff auf die Mindmap, können sie verändern oder über Video/Text direkt in der App in Verbindung mit ihren Kollegen bleiben.

Brainstorm App Screen 1.jpgBrainstorm App Screen 1.jpg

Die App besteht aus einer Tableiste mit vier Optionen. Mindmap, Chat, Skype und Settings. Hinter dem Ersten verbirgt sich die Liste aller Mindmaps. Durch antippen können diese verändert werden. Der Blaue Punkt zeigt Veränderungen an, die durch andere Mitglieder der jeweiligen Mindmap getätigt wurden. Oben rechts können Neue angelegt werden und oben links können durch „Edit“, Mindmaps gelöscht oder verschoben werden.

Brainstorm App Screen 8.jpgBrainstorm App Screen 8.jpg

Innerhalb der Mindmap können neue Blasen über Doppeltippen auf eine schon vorhandene Blase erstellt werden. Mit Drag&Drop können die Blasen angeordnet werden. Pinch & Zoom verschafft mehr übersicht. Durch schütteln des Gerätes wird in der Mindmap-Hierachie um einen Schritt zurück gegangen.

Brainstorm App Screen 6&7.jpgBrainstorm App Screen 6&7.jpg

Durch Tap & Hold auf eine Blase erscheint das Kontextmenü. Hier können einzelnen Blasen bestimmte Farben zugeordnet werden. Über den „Share“ Button oben rechts wird das Share-Menü aufgerufen. Hier können Mitglieder zum Brainstorm hinzugefügt werden. Alle Mitglieder können die Mindmap nach belieben verändern oder erweitern.

Brainstorm App Screen 4.jpgBrainstorm App Screen 4.jpg

Im Chat können die Mitglieder des jeweiligen Brainstorms in Kontakt bleiben. Zugehörig zu jeder Brainstorm Session gibt es einen Nachrichten Thread. Alle Mitglieder können Nachrichten an die Gruppe versenden. Neben dem Titel des Threads werden die Personen, die zu diesem Chat gehören angezeigt, oder wenn nicht genug Platz ist, die Personenanzahl.

Klangbild

Aufgabe

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.

Umsetzung

Wie auch schon im der Ebook Aufgabe greift das Klangbild wieder die Reise der Apollo 13 auf. Der Soundclip zeigt den Zeitpunkt an dem an Bord des Raumschiffs die Explosion eines Sauerstofftanks stattfindet. Zuvor kommuniziert die Crew mit Huston. Ich habe das Audio in 3 verschiedene visuelle Spuren aufgeteilt: Houston (die Mannschaft am Boden), Odyssey (die Kommandokapsel der Apollo 13, und ihre 3 Astronauten: Jim Lovell, Fred Haise und Jack Swigert) und Hintergrundgeräusche (Explosion und Rauschen in der Leitung). Houston wir rot dargestellt, die Odyssey blau und die Hintergrundgeräusche weiß in der Mitte.

Apollo 13.jpgApollo 13.jpg

Hier der dazu gehörige Soundclip: (ab 0:45)

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

Umsetzung

Dieses Projekt entstand in Zusammenarbeit mit Henrik Hagedorn. Gemeinsam entschieden wir uns für das Thema Pubertät. Jeder Mensch muss irgendwann einmal durch. Körperliche und geistige Entwicklung mit Hochs und Tiefs zwischendurch.

Wir beschrieben 3 Wege, wie eine Pubertät verlaufen kann.

Einmal der Musiker: Nachdem er über Videospiele hinweg ist kommt er über die Liebe zur Musik zu seinem eigenen Instrument hin zur eigenen Band, die Frauen liegen ihm zu Füßen, doch plötzlich passiert ein Schicksalsschlag: seine Mutter stirbt. Er fällt in ein Loch, versucht sich an Zigaretten und stirbt schlussendlich an Drogen.

Der Zweite ist eher ein Langweiler. Im Alter zwischen 12 und 16 passiert nichts nennenswertes, mit 16 hat er aber endlich seinen ersten Kuss. Kurz darauf besteht er die Führerscheinprüfung und hat dann sein erstes mal.

Der dritte Weg fängt schlecht an. Nachdem er wegen Videospielen die Schule vernachlässigt, bekommt er Hausarrest. Bald jedoch hat seinen ersten Kuss und mit knappen 15 sogar schon sein erstes Mal. Doch er fängt alsbald an mit Alkohol, Zigaretten und Drogen zu experimentieren und bald stirbt auch er.

1000_worte_moritz_henrik.jpg1000_worte_moritz_henrik.jpg

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2011 / 2012