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 15|2

Kursbeschreibung

Dieser Kurs stellt eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar. Ausgehend von einer Reihe von Entwürfen und Experimenten wird die Herangehensweise an gestalterische Probleme im Interface Design vermittelt. Konkret werden im Kurs die Themen Screendesign, grafische User-Interfaces, Visualisierung und Semiotik behandelt. Dabei stehen insbesondere konzeptionelle Studien im Mittelpunkt. Weiterhin wird ein Überblick auf die Geschichte des Interface Designs gegeben, wobei relevante Projekte im Detail diskutiert werden.

Digitales Buch

buch-desktop-1.pngbuch-desktop-1.png

Aufgabenstellung

Es soll eine digitale Fassung eines ausgewählten Buchs 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. 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.

Dieses Projekt ist in Zusammenarbeit mit Moritz Gruhl entstanden

buch-desktop-3.pngbuch-desktop-3.png

Bearbeitung

Wir haben uns für das Kammerspiel „Twelve Angry Men“ von Reginald Rose, das durch den gleichnamigen Film von 1956 bekannt wurde. Da es, wie es sich für ein solches Stück gehört, hauptsächlich auf Dialogen aufgebaut ist, haben wir uns für eine Darstellung des Textes entschieden, die modernen Messengern sehr ähnelt. Von Relikten wie Seitenzahlen haben wir uns bewusst getrennt und versucht ein möglichst bedienungsorientiertes, klares Bild des Textes zu schaffen. Für die navigation steht eine einfache ausziehbare Leiste zur verfügung, die das springen zwischen den einzelnen Akten ermöglichen soll ohne ewig zum scrollen verdammt zu sein. In Schlüsselszenen werden Bilder aus dem Film im Chat-Verlauf-Stil wiedergegeben und betont damit noch einmal die Zeitlosigkeit der Geschichte (mit einem Augenzwinkern).

Die Vorteile dieser Darstellung zeigen sich besonders in der Mobilen Version (siehe unten).

buch-desktop-2.1.pngbuch-desktop-2.1.png
buch-desktop-2.2.pngbuch-desktop-2.2.png
buch-desktop-5.pngbuch-desktop-5.png
buch-desktop-4.pngbuch-desktop-4.png

Großbild Version 1024x768 Pixel

buch-mobil-1.pngbuch-mobil-1.png
buch-mobil-3.pngbuch-mobil-3.png
buch-mobil-2.pngbuch-mobil-2.png
buch-mobil-5.pngbuch-mobil-5.png
buch-mobil-4.pngbuch-mobil-4.png

Mobile Version 240x320 Pixel

Klangbild

theo_skizze.JPGtheo_skizze.JPG

Aufgabenstellung

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

Endprodukt Klangbild

Bearbeitung

Meine Klangaufzeichnung, die ich für diese Aufgabe verwendet habe, ist während einer U-Bahnfahrt entstanden. Der Wagon hatte eine Art von Defekt der zu einem Brummen führte der mich an Drone Music erinnerte. Dieses Geräusch habe ich noch etwas bearbeitet um einzelne Bestandteile klarer auszuarbeiten (was etwas mit Aufgabenstellung kollidierte).

Ich hatte mir vorgenommen diesen Klang auf irgendeine Weise im dritten Raum darzustellen, was sich außerhalb meiner ersten Skizze (siehe oben) jedoch als recht schwierig herausstellte. Nach ersten mühsamen Versuchen mit 3D-Renderern bin ich auf die Game-Engine Unreal gestoßen die mittlerweile kostenfrei zur Verfügung steht. Hier konnte ich endlich nach einer kurzen Eingewöhnungsphase meine eigene kleine Welt schaffen. Eine Landschaft mit einem seltsamen schwarzen Quader (à la Stanley Kubrik) und einer eigenen Atmosphere die die Geräusche widerspiegeln sollen.

Graphical User Interface

Flow.pdf PDF Flow.pdf

Aufgabenstellung

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.

Dieses Projekt ist in Zusammenarbeit mit Florian Dymke entstanden.

Bearbeitung

Zu beginn dieser Aufgabe haben wir uns erstmal mit den verschiedenen analogen Techniken zur Ideenfindung auseinandergesetzt und dann den derzeitigen Markt an Apps zu diesem Thema betrachtet. Alle von uns gesichteten Mindmapping Applikationen schienen uns unpraktisch und mir drängte sich immer die frage auf Warum ich das nicht einfach mit Papier und Bleistift machen sollte. Aufgrund dessen haben wir für unsere App auf eine Methode aufgebaut die am ehesten als Assoziationstechnik oder Bisoziation (weniger) bekannt ist.

Grober Ablauf:

  1. Nutzer muss Fragestellung formulieren Wir müssen eine neue Zahnbürste entwickeln.
  2. Er wird durch einerzeugtes Szenario dazu gezwungen um zudenken Was würde Luke Skywalker in dieser Situation tun?
  3. Der Nutzer muss eine Antwort darauf geben Lichtschwertzahnbürste!
  4. Nun wird das Ergebnis mit anderen Team-Mitgliedern verglichen und die Idee weitergesponnen.

Am Ende soll so, in unserer App, am doch eine Art Mind-Map entstehen, in der Kommentiert und Beiträge, innerhalb der Teams, anonym bewertet werden können.

Wir haben dieses Konzept analog mehrfach getestet und es hat erstaunlich gut funktioniert.

1GUI.pdf PDF 1GUI.pdf
4GUI.pdf PDF 4GUI.pdf
6GUI.pdf PDF 6GUI.pdf
7GUI.pdf PDF 7GUI.pdf
8GUI.pdf PDF 8GUI.pdf
9GUI.pdf PDF 9GUI.pdf
10GUI.pdf PDF 10GUI.pdf
3GUI.pdf PDF 3GUI.pdf
5GUI.pdf PDF 5GUI.pdf
1GUI.pdf PDF 1GUI.pdf
94GUI.pdf PDF 94GUI.pdf
96GUI.pdf PDF 96GUI.pdf
2GUI.pdf PDF 2GUI.pdf
4GUI.pdf PDF 4GUI.pdf
6GUI.pdf PDF 6GUI.pdf
7GUI.pdf PDF 7GUI.pdf
8GUI.pdf PDF 8GUI.pdf
9GUI.pdf PDF 9GUI.pdf
91GUI.pdf PDF 91GUI.pdf
92GUI.pdf PDF 92GUI.pdf
93GUI.pdf PDF 93GUI.pdf
95GUI.pdf PDF 95GUI.pdf
3GUI.pdf PDF 3GUI.pdf
5GUI.pdf PDF 5GUI.pdf

Screens werden nicht unbedingt in korrekter Reihenfolge wiedergegeben (siehe Flowchart oben)

In der Darstellung haben wir uns stark an den IOS Human Interface Guidlines orientiert um möglichst wenige Reibungspunkte und einen einfachen Einstieg zu gewährleisten. Dadurch, dass der durchschnittliche Nutzer wahrscheinlich noch nie mit einer Assoziationstechnik gearbeitet hat wird dieser Punkt um so wichtiger, auch wenn das Programm den User durch den gesamten Prozess führt.

Die Mindmap die entsteht ist etwas weniger auf Standards aufgebaut, da wir sonst schnell auf grenzen gestoßen sind. Allerdings entsteht dadurch ein Kontrast zur ersten Phase der App. Alles ist etwas kleinteiliger und soll an Sternenbilder erinnern die sich wie Synapsen zu Netzwerken verbinden.

Der Kontrast dieser beiden Teile wurde bemängelt aber im ganzen bin ich sehr zufrieden mit der Idee und der Umsetzung. Ich denke eine ähnliche App könnte wunderbar funktionieren und ich versuche diese Methode nun immer selbst für mein Ideenfindung anzuwenden.

1000 Worte

Theo_1000worte_Titelbild.pngTheo_1000worte_Titelbild.png

Aufgabenstellung Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild 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 es 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.

„Prokrastination (lateinisch procrastinare „vertagen“; Zusammensetzung aus pro „für“ und cras „morgen“), auch extremes Aufschieben, ist eine Arbeitsstörung, die durch ein nicht nötiges Vertagen des Arbeitsbeginns oder auch durch sehr häufiges Unterbrechen des Arbeitens gekennzeichnet ist, sodass ein Fertigstellen der Aufgabe gar nicht oder nur unter enormem Druck zustande kommt.“ (Wikipedia)

Bearbeitung

Da ich selbst von obigen Phänomen regelmäßig heimgesucht werde, habe ich mich dazu entschieden, diesen Sachverhalt sequenziell darzustellen. Am Anfang wollte ich alle Einflüsse und Ursachen die dazu führen abbilden, aber das wäre zu chaotisch geworden, bzw. es hätte den Rahmen gesprengt, deswegen habe ich auf Anreiz Boris' einen Normalo dem Prokrastinisten gegenübergestellt. Dadurch lassen sich nun die Konflikte klar erkennen und es war mir möglich durch kleine Details, der ansonsten sehr kühlen Darstellung, etwas Charme und Lebendigkeit zu verleihen.

Ich habe mich für ein striktes, extrem längliches Format entschieden um die Sequenz in den Vordergrund zu stellen, diese Entscheidung macht es Online etwas umständlich,bitte machen sie sich trotzdem die Mühe, der ein oder andere dürfte sich darin entdecken.

Eregbnis -> siehe unten

Theo_1000worte_final-01.pngTheo_1000worte_final-01.png

Endprodukt 1000 Worte

Fazit

Zu Beginn des Kurses hatte ich so meine Bedenken ob ich an allen Aufgaben Spaß haben werde, aber die prägnanten Vorträge und die sehr hilfreiche Kritik haben mich tiefer in die Aufgaben eintauchen lassen als ich dachte. Ich konnte viele Dinge lernen und weiterentwickeln ohne das Gefühl gehabt zu haben zu eingeengt zu sein. Vor allem bei dem Klangbild kamen die unterschiedlichsten tollen Ergebnisse zustande. Es war mir ein Fest.

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