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

Basic Interface WS 12|02 Flavio Gortana


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.

Ansatz

Für die erste Gruppenarbeit, die ich zusammen mit Peter Fröde gelöst habe, haben wir uns den australischen Lonely Planet ausgewählt. Das Buch ist vielmehr ein Nachschlagewerk oder ein Lexikon als ein Buch, das man von vorne bis hinten durchliest. Es ist sehr umfangreich mit einer hohen Informationsdichte und hat daher einen klaren hierarchischen und keinen linearen Aufbau. Zur bearbeitung der Aufgabe haben wir uns zwei exemplarische Stellen herausgesucht. Die erste behandelt die Geschichte von Sydney und besteht vorwiegend aus Prosa eingeteilt in unterkapitel. Die zweite Stelle ist eine Liste von Übernachtungsmöglichkeiten in Sydney und besteht aus einem kleinen Text wobei hier aber zusätzliche Informationen wie Kontakt und Adresse ebenso eine hohe Wichtigkeit haben. Die Navigation ist sehr simpel gehalten, wobei diese bei einer digitalen Umsetzung des Buches wahrscheinlich komplexer sein müsste. Ein Button oben links bringt den Benutzer zur Übersicht über die Städte und Regionen und ein Untermenü ermöglicht die Navigation zwischen verschiedenen Themen zur ausgewählten Stadt oder Region.

Umsetzung

01 Fliesstext 1 1024.png01 Fliesstext 1 1024.png

Fliesstext 1024 x 768 Screen

04 Hotel 2 1024.png04 Hotel 2 1024.png

Informationsblöcke 1024 x 768 Screen

Small_Screen.pngSmall_Screen.png

Fliesstext 240 x 320 Screen
Informationsblöcke 240 x 320 Screen


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

Ansatz

Den klassische Ansatz eines Brainstormings — eine Mindmap mit Stichwörtern und Verbindungslinien — als iPhone App umzusetzen hat für mich wenig Sinn gemacht. Der zentrale Aspekt einer Mindmap ist es eine komplette Übersicht über alle Gedanken und Ideen zu einem Thema zu erstellen und Beziehungen unter den einzelnen Stichworten herzustellen. Dies geschieht in der Regel auf einer grossen Fläche, die der Idee, eine Übersicht zu erstellen, gerecht wird. Ein iPhone Display ist dafür aber eindeutig nicht geeignet. Ein möglicher Ansatz wäre gewesen zu versuchen die Idee einer Mindmap mit den vorhandenen UI-Elementen wie bspw. Listen umzusetzen. Ich habe mich jedoch dafür entschieden einen komplett anderen Ansatz eines Brainstormings umzusetzen. Bei meinem Ansatz geht es darum die natürlich vorhandene Willkür und Fantasie des Gehirns auszunutzen und durch spontane Assoziationen auf neue Ideen zu kommen. Der Benutzer legt hierzu zu Beginn ein Set von Schlüsselwörtern oder -Bildern (Keys) zu einem bestimten Thema fest. Anschliessend kann er ein Game starten um Ideen zu generieren. Ein Game funktioniert ähnlich wie Bilder, bei denen gewisse Teile ausgetauscht werden können während andere stehen bleiben.

Bildschirmfoto 2013-03-21 um 14.32.06.pngBildschirmfoto 2013-03-21 um 14.32.06.png

Quelle — [Edita's Casting](http://www.editoskastingas.lt/ „Edita's Casting“)

Dabei wird jeweils zu einem selbst festgelegten Key ein zweiter Key angezeigt, wobei der zweite Key von Seiten der App zufällig generiert d.h. abgerufen wird. Durch diese willkürliche und zufällige Kombination von zwei begriffen oder Bildern entstehen spontane Assoziationen, die schlussendlich zu neuen Ideen führen. Diese Ideen können in Form von Text festgehalten werden. Diese Ideen können nach dem Beenden eines Games unter Pairs oder Ideas wieder aufgerufen und mit einem einfachen Bewertungssystem geordnet werden.

Umsetzung

iPhone_4_Presentation_Split_Games_Keys.pngiPhone_4_Presentation_Split_Games_Keys.png

Screen 1 — Übersicht über bereits gespielte Games Screen 2 — Liste der eigenen Keys

iPhone_4_Presentation_Split_Generate_Idea.pngiPhone_4_Presentation_Split_Generate_Idea.png

Screen 1 — Aktives Game bei dem gerade zwei Begriffe angezeigt werden Screen 2 — Detailansicht einer einzelnen Idee

iPhone_4_Presentation_Split_Ideas_Pairs.pngiPhone_4_Presentation_Split_Ideas_Pairs.png

Screen 1 — Liste der Generierten Ideen Screen 2 — Ideen geordnet nach Key Paaren


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.

Ansatz

Als akustische Begebenheit habe ich mir bei dieser Aufgabe die Geräuschkulisse in Kreuzberg an Silvester 2012 um 00:00 Uhr ausgewählt. Visualisiert habe ich den Ausschnitt von 23:59:30 bis 00:00:30, also eine halbe Minute im alten und eine halbe minute im neuen Jahr. In einem ersten Ansatz habe ich versucht die Geräuschkulisse durch die Eigenschaften der einzelnen Klänge (Helligkeit, Lautstärke, Tonhöhe, Art des Klanges) in ihre ursprüngliche visuelle Form zurückzuführen. Lautere Geräusche würden durch grössere Elemente repräsentiert werden, dumpfe durch transparentere Elemente etc. Der Input „Mut zur Verdichtung zu haben“ sowie das Feedback ich soll visualisieren was ich höre und nicht was ich weiss haben mich dazu gebracht die Idee zu überdenken.

Concept-03.pngConcept-03.png

Erstes Konzept

Die Idee, die ich schlussendlich umgesetzt habe ist auf einem Kreisförmigen Layout aufgebaut. Der Kreis soll die Minute darstellen, in der der Klang effektiv aufgenommen wurde — der Start der Visualisierung ist auf sechs, die Mitte auf 12 Uhr. Eingetelit habe ich die Geräusche in Knall, Knistern, Pfeifen und Jubelschreie.

Umsetzung

Umgesetzt habe ich die Visualisierung in Processing. Ich habe manuel ein kleines Datenset erstellt, welches jedes die Zeit sowie die Art von jedem Geräusch der Aufnahme beinhaltet. Ein kleines Script hat diese Datenset dann ausgelesen und gezeichnet.

01.png01.png

Knalle — Dargestellt durch eine kürzer werdende Serie von Linien. Die Lautstärke ist dargestellt in der Länge der jeweils dicksten Linie

02.png02.png

Knistern — Das Knistern ist dargestellt durch kurze Linien, die sich von Anfang bis Ende des Knisterns ziehen.

03.png03.png

Pfeifen — Das Pfeifen ist dargestellt durch eine Zickzack-Linie

04.png04.png

Jubelschreie — Jubelschreie sind dargestellt durch kleine, in strahlen angeordnete Linien.


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.

Ansatz

Bei der bildlichen Darstellung eines komplexen Themas habe ich mit Heike Otten gearbeitet. Wir haben uns darauf geeinigt das Komplexe Thema der eines Wechselkurses darzustellen. Welche Faktoren bestimmen den Wert einer Währung? Was hat die Stärke eines Wechselkurses für Auswirkungen auf die Wirtschaft und das Leben eines Landes? Da wir beide — ausser Interesse — keinen wirklichen Bezug zu diesem Thema hatten mussten wir uns zuerst selber darüber informieren. Sehr schnell wurde klar, dass das Thema zu komplex ist um in seinem vollen Umfang ohne beschreibende Texte zu darzustellen. Wir mussten also auf einige wenige Kernpunkte fokussieren um nicht in der masslosen Komplexität die Orientierung zu verlieren. Wechselkurse werden bestimmt durch viele verschiedene Faktoren, wobei einige davon von der Regierung eines Landes bestimmt oder beeinflusst werden können, während auf andere wenig einfluss genommen werden kann, weil sie von der globalen Wirtschaft bestimmt werden. Die Stärke einer Währung ist eng gekoppelt an die wirtschaftliche Stärke eines Landes. Diese Grössen können als kontinuierliche Kurve, die weder Anfang noch Ende haben, gedacht werden. In der Abbildung sind diese dargestellt durch die blaue (Wirtschaft) und die grüne (Währung) radiale Kurve. Abhängig von verschiedenen Faktoren wird die Wirtschaft und die Währung stärker oder schwächer. Hierbei ist zu beachten, dass das Verhältnis der Wirtschaftsstärke zur Stärke einer Währung das Wohlergehen eines Landes bestimmen. Ist die Wirtschaft sowie die Währung schwach (in der Abbildungunten Links) geht es einem Land schlecht. Es wird nicht investiert, da wenig Profit erzielt werden kann. Das Land kann weder Waren exportieren, da nichts produziert wird, noch Waren importieren, da die eigene Währung zu schwach ist um Waren aus dem Ausland lukrativ zu erstehen. Ist die Wirtschaft als auch die Währung stark (oben rechts) geht es dem Land grundsätzlich gut. Es wird viel gebaut und produziert. Jedoch wird wenig exportiert, da die Landeseigene Ware für das Ausland verhältnismässig teuer ist. Der Sweet Spot, den es zu erreichen gilt ist eine starke Wirtschaft, während die Währung tief gehalten werden kann (oben links). Es fliessen viele Gelder in das Land, es wird viel Produziert und wegen der schwachen währung auch exportiert.

Umsetzung

Wechselkurse.pngWechselkurse.png

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Entstehungszeitraum

Wintersemester 2012 / 2013

zusätzliches Material