In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Basics Interfacedesign
Dieser Kurs stellte eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar.
Es sollte eine digitalle Fassung eines Buches gestaltet werden. Der Umgang mit Typografie stellt eine wesentliche Grundkompetenz aller Designdisziplinen dar. Im Interfacedesign spielt die Verwendung von Typografie unter den Bedingungen des Bildschirms eine große Rolle.
Die digitale Fassung des Buches sollte exemplarisch anhand von Screens in zwei verschiedenen Formaten vorgestellt werden. Die einen Screens im Format von 1024x768 Pixeln und die anderen im Format von 240x320 Pixeln.
Die Screens sollten nicht nur die Inhalte des Buchs wiedergeben, sondern auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können.
Diese Aufgabe bearbeitete ich zusammen mit Donatus Wolf.
Wir wählten Mark Uwe Klings „Die Känguru Chroniken“. Es erschien uns interessant ein Buch zu wählen, das viel Dialog enthält. Zunächst suchten wir nach einer passenden Schriftfamilie und fanden diese in Conduit. Als Navigationsmittel stellten wir einen roten Balken an die linke Seite des Screens. Angetippt würde dieser sich zum Menü ausfahren und die Kapitel zur Navigation freigeben. Im Anschluss machten wir uns daran wege zu finden die Dialoge in den Fordergrund zu stellen. Wir versuchten im großen Format zunächst den einen Dialogpartner, den Ich-Erzähler, immer fettgedruckt, linksbündig und in einer Linie mit dem beschreibenden Text stehen zu lassen und den anderen Dialogpartner, in den aller meisten Fällen das Känguru, ebenfalls fett aber rechtsbündig, also gegenüber stellen. Der Flattersatz bereitete allerdings Schwierigkeiten beim lesen der Texte des zweiten Dialogpartners. Wir versuchten zunächst das Problem durch einen Blocksatz zu beheben, entschieden uns aber dagegen, um eine geschicktere gestalterische Lösung zu finden. Wir setzten den Texthintergrund auf weiß und die Bereiche unmittelbar daneben auf ein helles rot. Und fanden schließlich als adäquate Lösung kleine Balken, die stets am bündigen Rand der Dialogtexte standen. Dies verlieh den Dialogen zusätzlich einen Chat-Charakter.
Wir übertrugen diesen letzten Versuch auch auf die kleinformatigen Screens. Der Chat-Charakter kommt, aufgrund des für ihn typischeren Formats, auf ihnen noch besser zur Geltung.
Wir verblieben bei der chat-artigen Lösung. Wir machten noch einige Verbesserungen, indem wir die Stärke der Balken etwas verringerten und deren Höhe regelhaft an den Text anglichen. Gleichzeitig verkürzten wir die Zeilenlänge der Dialoge, um so das „hin und her“ zu verstärken.
Selbiges übertrugen wir auf die kleinen Screens.
Es sollte eine akustische Begebenheit (Klangaufzeichnung) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll für den Betrachter nachvollziehbar sein und eine Minute nicht überschreiten.
Ich entschied mich dazu, die Geräusche aufzunehmen, die bei der Herstellung eines Cappuccinos an einer Siebträgermaschine entstehen.
Ich begann in zwei sehr unterschiedliche Richtungen zu denken. Im ersten Schritt versuchte ich, durch händerische Zeichnungen um eine Zeitlinie herum, die Klänge durch abstrakte Symbole zu visualisieren, um mich im nächsten Schritt komplett zu beschränken. Ich erschuf ein sehr strenges Raster, in dem jede Spalte für eine Sekunde der Begebenheit stand. Die einzige Visualisierungsform die ich mir zugestand war die durch das Raster entstehenden Felder in Graustufen zu füllen.
©Joshua Pacheco
Für die letzte Iteration entschied ich mich dazu, an dem Raster weiter zu experimentieren. Mich interessierte, wie weit ich mit den starken Beschränkungen kommen würde.
Die Leserichtung ist von links nach rechts. Die Spalten entsprechen nicht mehr einer Sekunde sondern tragen der kürzesten Klangeinheit, dem Klopfen des Siebträgers, zu gute. Die Helligkeit des Graus entspricht der Intensität oder Härte bzw. Weichheit der Klänge. Durch Formbewegung im Bild werden Tonhöhenunterschiede bzw. Tonbewegungen verdeutlicht. Die Größe der Formen und die Höhe innerhalb der Spalte entsprechen meiner subjektiven Wahrnehmung von Fordergrund in der Begebenheit.
Die Gestaltung einer grafischen Benutzerschnittstelle hat zum Ziel, den Nutzern die Möglichkeit zu geben, ihre Vorhaben reibungslos und fehlerfrei zu realisieren. Die Grundlage für die Gestaltung eines Interfaces bilden standardisierte Steuerelemente wie zum Beispiel Buttons oder Scrollbalken. Je nach Anforderungen an die GUI können der müssen jedoch auch eigene zum Teil anwendungsspezifische Steuerelemente konzipiert werden.
Es sollte eine Brainstorming-App für das iPhone realisiert werden. Die App soll eine Gruppe von Designern/Entwicklern bei der Generierung von Ideen und Entwürfen unterstützen. Das Ziel war, einen iOS 8-konformen und gleichzeitig individuellen Entwurf zu erarbeiten. Es sollte die standardisierte iOS 8 - GUI eingesetzt werden - die App sollte aber auch eine eigene Note bekommen.
Diese Aufgabe bearbeitete ich zusammen mit Alexander Dreymann.
Unser Konzept für die Brainstorms bestand aus drei Phasen. In der ersten Phase sollten alle Mitglieder des Brainstorms Ideen und deren Kategorien innerhalb des Brainstorms schriftlich und anonym festhalten können, eine Bewertung der Ideen durch andere Mitglieder findet zu diesem Zeitpunkt noch nicht statt. Allerdings können bisher erstellte Ideen eingesehen werden und erscheinen auch in einem Live-Feed auf dem Screen der Ideen-Erstellung. In einer zweiten Phase können die Mitglieder weiterhin Ideen zu dem Brainstorm hinzufügen und nun auch kommentieren und mit einem „Like“ bewerten. In der dritten Phase sind die Mitglieder nun nicht mehr in der Lage Ideen hinzuzufügen, sie können nur noch alle bisherigen Ideen bewerten. Es geht nun lediglich darum, die beliebteste Idee je Kategorie festzustellen.
Wir benötigten also einen Start-Screen mit einer Übersicht der aktuellen Brainstorms und der bereits abgeschlossenen. Außerdem sollte es auf diesem Screen auch einen Link zum Screen geben, auf dem ein neuer Brainstorm erstellt werden kann. Auf diesem Screen muss der Titel benannt, Teilnehmer hinzugefügt und die Dauer der drei Phasen bestimmt werden können. Außerdem benötigten wir einen Übersicht-Screen für den jeweiligen Brainstorm, in dem die aktuelle Phase und deren Dauer benannt und ein Link zum Screen mit bisherigen Ideen unterteilt in Kategorien bereitgestellt wird. Und schließlich brauchten wir noch die Screens zum eigentlichen erstellen einer Idee, inklusive Live-Feed und der Screen zum bewerten und einen zum kommentieren der Ideen.
Für unsere letzte Iteration besäuberten wir Typografie und verwendeten statt Conduit und San Francisco an allen Stellen nur noch Conduit. Außerdem haben wir die Blindtexte durch autentischere Brainstorm-Texte ersetzt. Der Button zum hinzufügen eines Brainstorms rückt auf dem Startscreen von der Mitte unterhalb der Top-Bar auf eine iOS-typischere Position oben rechts in der Bar. Auf der linken Seite gegenüber befindet sich nun ein Button der zu einem kleinen Tutorial führt, das die Phasen erklärt. Es wird auch beim ersten erstellen eines Brainstorms angezeigt. Der Einstellungs-Screen zum Erstellen bleibt beinahe unverändert. Auf alle Screens innerhalb eines laufenden Brainstorms haben wir einen Timer-Balken implementiert, der immer den aktuellen Zeitstand der Phase anzeigt. Außerdem sind auf dem Screen zum hinzufügen einer Idee der Timer und der Live-Feed durch eine Haarlinie vom Textfeld getrennt. Zu guter letzt haben wir uns bei der Rating-Phase für ein Up- und Down-Voting-System entschieden.
Ein Interface hat immer die Aufgabe, abstrakte Vorgänge verständlich und bedienbar machen. Dazu müssen die Funktionsmechanismen eines Computers klar kommuniziert werden und oftmals auch Analogen aus der Alltagswelt gefunden werden. Eine visuelle Darstellung kann einen Sachverhalt deutlicher und schneller kommunizieren als ein ausführlicher Text.
Es sollte also ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten und soll den Sachverhalt möglichst deutlich und klar kommunizieren.
In einer ersten Iteration entschied ich mich dafür die Herstellung eines Cappuccinos an einer Siebträger-Maschine darzustellen. Ich unterteilte sie in acht Schritte und zeichnete in Sketch alle dazu benötigten Elemente. Im ersten Schritt fallen gemahlene Kaffeebohnen in einen Siebträger. Im zweiten Schritt wurde der Kaffee im Siebträger festgedrück, was durch die angeschnittene Ansicht des Siebträgers sichtbar wird. Im dritten Schritt läuft erhitztes Wasser aus der stark abstrahierten Maschine durch den Kaffe im Siebträger in eine Tasse unter der Maschine. Die Schritte vier bis sechs handeln das eingießen und Schäumen der Milch ab. Die Schritte sieben und acht erklären den grundsätzlichen Schüttprozess der Milch in den Espresso, um ein Endergebnis wie in Bild neun zu erreichen.
In der zweiten Iteration ersetzte ich das Rot des Hintergrundes durch ein leichtes Grau. Der Siebträger im dritten Schritt ist nun komplett angeschnitten, der Milchschaum in den Schritten fünf und sechs ist etwas weniger kleinteilig und eine letzte Schüttbewegung wurde ergänzt.
©Joshua Pacheco
In der finalen Iteration ergänzte ich den Prozess der Herstellung eines Cappuccinos um die Herstellung der Kaffe-Varianten Flat White, Café Latte, Espresso und Americano.
Ein Projekt von
Joshua Pacheco
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Prof. Boris Müller
Zugehöriger Workspace
Basics Interface 16|1Entstehungszeitraum
Sommersemester 2016