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

Kursdokumentation: Basics Interface 15|2

Kursdokumentation: Basics Interface 15|2

12FOId-XD Interaction Design 1.151 Grundlagen Interfacedesign WS 2015/2016 Dozent: Prof. Boris Müller

Thema 01: Digitales Buch

Es soll eine digitale Fassung ihres Lieblingsbuches gestaltet werden. 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 mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024×768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240×320 Pixeln (QVGA).

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.

deckblatt_thema01.jpgdeckblatt_thema01.jpg

Bei diesem Projekt habe ich mit [Marc-Andre Nagusch](https://incom.org/profil/7126 „Marc-Andre Nagusch“) zusammengearbeitet.

Wir haben uns zur Ausarbeitung der Aufgabe für das Sachbuch »Die Geschichte der Welt in 100 Objekten« entschieden.

Die sicherlich größte Herausforderung ergab sich aus dem massiven Inhaltsverzeichnis der gewählten Vorlage, das neben mehreren Kapiteln zusätzliche Unterkapitel aufweist. Wir mussten daher ein Menü gestalten, welches die Navigation in drei Tiefenebenen (Kapitel, Unterkapitel, Unterkapitelvorschau) erlaubt, dabei aber dennoch intuitiv bedienbar bleibt.

Die letztendliche Ausarbeitung legt einen Fokus auf reduzierte Optik mit sanften Farben und ruhiger Typografie.

01_12FOid-XD_reading_state_01.png01_12FOid-XD_reading_state_01.png
02_12FOid-XD_reading_state_01.png02_12FOid-XD_reading_state_01.png
03_12FOid-XD_chapter_state_01_all_open.png03_12FOid-XD_chapter_state_01_all_open.png
04_12FOid-XD_reading_state_02_(highlighted).png04_12FOid-XD_reading_state_02_(highlighted).png
05_12FOid-XD_statistic_state_01.png05_12FOid-XD_statistic_state_01.png
06_12FOid-XD_smalldevice_reading_state_01 Kopie.png06_12FOid-XD_smalldevice_reading_state_01 Kopie.png
07_12FOid-XD_smalldevice_reading_state_01 Kopie 2.png07_12FOid-XD_smalldevice_reading_state_01 Kopie 2.png
09_12FOid-XD_smalldevice_chapter_lvl1_open.png09_12FOid-XD_smalldevice_chapter_lvl1_open.png
10_12FOid-XD_smalldevice_chapter_lvl2_open.png10_12FOid-XD_smalldevice_chapter_lvl2_open.png

Thema 02: Klangbilder (Narratives in Time and Space)

Es soll eine akustische Begebenheit (Gespräch, Klangaufzeichnung, Filmausschnitt, Musik, etc.) 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. Die akustische Begebenheit soll aufgezeichnet und auch präsentiert werden und darf nicht länger als eine Minute sein.

Fabian-Lempke_Klangbild_Der-Tatortreiniger Kopie.pngFabian-Lempke_Klangbild_Der-Tatortreiniger Kopie.png

Die zweite Aufgabe bereitete mir mit Abstand am meisten Schwierigkeiten.

Ich habe mir das Leben selbst unnötig schwer gemacht, indem ich ein Musikstück zur Analyse auswählte: das Intro der TV-Serie »Der Tatortreiniger«. Bei der Visualisierung von Musik ist Takt- und Rhythmusgefühl von klarem Vorteil. Jedoch bin ich hilflos unmusikalisch. Teilweise fühlte ich mich wie ein Blinder, der versucht die Mona Lisa zu zeichnen.

Mit viel, viel Zeit, Kaffee und der Audiospur auf Dauerschleife gelang es mir dennoch einzelne Instrumente zu isolieren, zu identifizieren und von Hintergrundgeräuschen zu trennen.

In der Visualisierung habe ich taktgebende Instrumente sowie Hintergrundgeräusche in Spuren aufgeteilt und in einem klaren Raster dargestellt. Melodiegebende Instrumente hingeben wurden in drei losen Linien, mit roten Farbtupfen, über das Raster gelegt.

Die Elemente des Rasters geben sowohl Lautstärke als auch zeitliche Abstände wieder. Die roten Melodiespuren enthalten Informationen zu Tonhöhe und zeitlicher Abfolge.

Thema 03: Graphical User Interface (GUI)

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 und Entwürfen 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 entwickelt werden - gerne auch mehr.

Das Ziel ist, einen iOS-8-konformen und gleichzeitig individuellen Entwurf zu erarbeiten. Es soll die standardisierte iOS-8-GUI eingesetzt werden - das App soll aber auch eine eigene Note bekommen. Die Entwürfe sollen 375x667 Pixel groß sein (für den Entwurf setze ich Punkt=Pixel). Zusätzlich zur GUI soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden.

Die Aufgabe soll in Zweierteams bearbeitet werden.

deckblatt_thema02.jpgdeckblatt_thema02.jpg

Bei diesem Projekt habe ich mit [Florian Zia](https://incom.org/profil/7088 „Florian Zia“) zusammengearbeitet.

Statt einer klassischen »gebe Stichwörter ein und verbinde / ordne diese dann sinnvoll«-App fiel unsere Wahl auf eine inspirationsgetriebene Lösung.

Bei inspired.app liefert ein Algorithmus passende Stichworte und Bilder zu einem selbst eingegebenen Suchbegriff (ähnlich einer Kombination aus Lexikon und Suchmaschine). Durch Klick oder Tap auf einen der Vorschläge wird dieser als neuer Ausgangspunkt einer Suche verwendet. Auf diese Weise kann man sich relativ schnell in verschiedene Richtungen und Tiefen inspirieren lassen. Ein typischer Inspirationspfad könnte etwa so aussehen: Kalender → Monat → Jahreszeiten → Winter → Weihnachten.

Passende Vorschläge können per Drag and Drop in einer Projektmappe abgespeichert werden. Zu abgespeicherten Bildern können Kommentare hinterlassen werden.

01_Projektübersicht_iPhone-6.png01_Projektübersicht_iPhone-6.png
02_Projekt-erstellen_iPhone-6.png02_Projekt-erstellen_iPhone-6.png
03_Pinnwanddetail_iPhone-6.png03_Pinnwanddetail_iPhone-6.png
04_Pinnwanddetail_DragItem_iPhone-6.png04_Pinnwanddetail_DragItem_iPhone-6.png
05_Pinnwanddetail-#2_iPhone-6.png05_Pinnwanddetail-#2_iPhone-6.png
06_Suchbegriff-anpassen_iPhone-6.png06_Suchbegriff-anpassen_iPhone-6.png
07_Pinnwanddetail_Bildansicht_iPhone-6.png07_Pinnwanddetail_Bildansicht_iPhone-6.png
08_Pinnwanddetail_Bildkommentar_iPhone-6.png08_Pinnwanddetail_Bildkommentar_iPhone-6.png
09_Einstellungen_iPhone-6.png09_Einstellungen_iPhone-6.png
10_Pinnwanddetail_Projektmappe_iPhone-6.png10_Pinnwanddetail_Projektmappe_iPhone-6.png
Flowchart.pngFlowchart.png

Thema 04: 1000 Worte

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

fabian-lempke_1000-worte.jpgfabian-lempke_1000-worte.jpg

Ich entschied mich, den »Low Earth Orbit«, also die niedrige Erdumlaufbahn, zu erklären. Hierbei mussten folgende Sachverhalte erörtert werden:

  1. Die niedrige Erdumlaufbahn ist… nun, niedrig. In dieser Höhe herrschen noch immer circa 90% der normalen Gravitation.
  2. Daraus ergibt sich die Frage, wieso ISS und Wettersatelliten dennoch ihre Umlaufbahn halten können ohne auf die Erde zu stürzen.
  3. Die Antwort liegt im Äquivalenzprinzip von Schwerkraft und Beschleunigung. Einfach ausgedrückt: befindet sich ein Körper im freien Fall, so empfindet er Schwerelosigkeit. (Hier mit Newtons Apfel und einem lustigen Wurm erklärt).
  4. ISS und Co müssen sich also im ständigen freien Fall um die Erdkrümmung herum befinden, um der Gravitation ein Schnippchen schlagen zu können.

Bei der Bearbeitung diese Aufgabe habe ich zum ersten Mal ausschließlich mit illustrativen Mitteln gearbeitet. Ganz klassisch mit Stift auf Papier und später die eingescannten Skizzen per Photoshop kombiniert. Für mich eine spannende Erfahrung. Hätte ich noch etwas mehr Zeit gehabt, so hätte ich noch etwas Zeit in die stilistische Vereinheitlichung der einzelnen Skizzen investiert.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 15|2

Entstehungszeitraum

Wintersemester 2015 / 2016

Keywords