Basics Interfacedesign
Dokumentation von Ivo Herrmann – Sommersemester 2013
In dem Kurs Basics Interfacedesign wurde sich mit den zentralen Themen des Interfacedesigns auseinandergesetzt. Nach einer allgemeinen Einführung wurden vier spezifische Themen behandelt und Lösungen zu dazugehörigen Aufgaben erarbeitet.
Digitales Buch
Aufgabe
Gestalten Sie eine digitale Fassung Ihres 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 mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden – mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln und mindestens zwei vertikale Screens im Format von 240 x 320 Pixeln. (Achtung – dies ist kleiner als die „klassische“ iPhone-Auflö̈sung.)
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 wichtigen Kriterien bei der Bearbeitung der Aufgabe. Die Aufgabe soll in Zweierteams bearbeitet werden.
Prozess
Mein Teampartner Alex Wieland und ich konnten uns schnell auf ein Buch einigen und entschieden uns für den Kinderbuchklassiker: Emil und die Detektive von Erich Kästner.
Da es sich hierbei um einen Roman handelt, stand die gute Lesbarkeit des Mengentextes im Vordergrund. Die ersten Ideen haben wir skizziert. Für Feedback zur Gestaltung war es zu wenig, aber die Ideen waren in Ordnung.
Danach haben wir beschlossen unabhängig voneinander Screens zu gestalten, um eine Basis für weitere Überlegungen zu haben. Die Auswahl der Screens war einfach, da nur ich welche gestaltet habe.
Aus der letzten Feedbackrunde im Kurs kam heraus, dass nur noch kleine Änderungen und Ausbesserungen gemacht werden müssen. Außerdem sollten wir uns für eine von drei Navigationsmöglichkeiten bei der großen Version entscheiden.
Ergebnis
Besonders wichtig war gut lesbarer Text, der durch passende Schriftgröße und optimaler Zeilenlänge, sowie ausreichendem Kontrast zum Hintergrund entstand. Als Schriftart wurde die Thesis, um genau zu sein TheSerif benutzt. Die Schrift mit Serifen sollte etwas klassisches ausdrücken und dennoch gut auf dem Bildschirm zu lesen sein. Weil TheSerif so gut gehinted ist, eignet sie sich optimal für gut leserlichen Text auf geringen und hohen Auflösungen – auch bei kleineren Textgrößen auf dem Screen.
Bei der 1024x768 Pixel Version ist der Text auf zwei Spalten verteilt. Navigiert wird über eine Gestensteuerung, dabei ensteht ein „Blätter Effekt“, wie bei einem gebundene Buch aus Papier. Die Zweispaltigkeit erzeugt kürzere Zeilenlänge und somit eine bessere Lesbarkeit. Die Schriftgröße müsste enorm vergrößert werden, wenn der Text über die ganze Breite laufen würde. Das hätte zur Folge, dass weniger Text pro Seite gezeigt wird und der Leser durch ständiges Navigieren/Umblättern aus der Geschichte gerissen wird.
Die 240x320 Pixel Version stellt den Text einspaltig dar, weil sonst bei lesbarer Schriftgröße zu wenig Zeichen pro Zeile vorhanden wären, um einen angenehmen Lesefluss zu garantieren. Jedes Kapitel wird durchgängig dargestellt und der Inhalt kann vertikal gescrollt werden. Am Kapitelende erscheint ein Button mit der Verlinkung zum nächsten Kapitel.
Beide Versionen verfügen über eine Kapitelnavigation, welche sich bei Aktivierung über die aktuelle Ansicht legt. Die Zeichnungen sind in der kleinen Version im laufenden Fließtext integriet und in der großen Version als Einzelsite dargestellt.
Als kleines Extra habe ich mir eine Orientierungselement (roter Marker auf der linken Seite) überlegt, welches bei der 240x320 Pixel Version während des Scrollen auftaucht. So soll dem Leser auch bei schnellem Scrollen die zuletzt gelesene Zeile gezeigt werden.
Fazit
Die Aufgabe, die dazu gehörende Vorlesung und das jeweilige Feedback haben mir viele Grundregeln im Umgang mit Typografie auf dem Screen beigebracht. Von der Lesbarkeit, über Strukturierung, bis zur Detailtypografie war sehr viel wissenswertes dabei.
Graphical User Interface (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. (Die Auflösung entspricht dem iPhone 3GS - Retina-Displays ignorieren wir.) Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.
Idee
Meine Brainstorm App sollte die schnelle Aufnahme von Medien, wie Fotos, Text, Videos und Sound ermöglichen. Diese Medien sollen einem Projekt zugeordnet werden und anschließend gesammelt in einem Projektpool/Stream angesehen werden können.
Als Administrator eines Projektes soll man Teinehmer hinzufügen/entfernen, sowie Projektinformationen (Beschreibung, Projektbild) erstellen und bearbeiten können.
Als Namen viel mir „Sparks“ ein, inspiriert von dem Lied „Dancing in the Dark“ von Bruce Springsteen in dem es heißt: „You can't start a fire without a spark“.
Ergebnis
Die meisten Elemente stammen aus dem iOS6 Styleguide und haben ihre ursprüngliche Funktion beibehalten. Dennoch wollte ich die standard iOS Optik verändern und habe allen Elementen einen eigenen Style/ein eigenes Skin mit neuem Farbschema verpasst.
Nach dem Start der App folgt die sofortige Auswahl des Medientypes, damit soll der direkte Einstieg bei einer aufkommenden Idee möglich sein. Oft hat man die besten Ideen spontan und kann diese dann schnell festhalten und teilen.
Für die Eingabe hat jeder Medientyp eine eigene Ansicht, in der der Inhalt eingefügt und das zugehörige Projekt gewählt oder angelegt wird. Es ist auch möglich über den Startscreen direkt in ein Projekt einzusteigen. Dort wird ein Stream/Pool mit allen Sparks, die zu diesem Projekt gehören angezeigt.
Für die Darstellung der Sparks im Projekt habe ich mich für eine Kachelansicht mit möglichst großer Vorschaufläche pro Objekt entschieden. Dabei habe ich etwas Abwechslung durch unterschiedliche Kachelgrößen erstellt.
Ein Tab für Projektinformationen in der Projektansicht enthält eine Projektbeschreibung, ein Projektbild, sowie alle Teilnehmer des Projektes. Der Ablaufplan verdeutlicht die möglichen Schritte.
Fazit
Die Auseinandersetzung mit dem iOS Styleguide hat mir die Elemente und deren Funktionen gut verdeutlicht. Ich habe versucht die Elemente für ihren Ursprünglichen Sinn zu Nutzen, um neuen Nutzern das Navigieren zu vereinfachen. Und das ist auch die Erkenntnis aus der Nutzung eines solchen Styleguides. Dem Nutzer wird durch bereits erlernte/bekannte Mechanismen, das Erlenen neuer, komplexer Navigationselemente erspart.
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. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.
Prozess
Obwohl wir eher eine zufällige akustische Begebenheit suchen/aufnehmen sollten, wollte ich etwas mir bekanntes visualisieren. Meine erste Idee war der Sound beim Öffnen einer Truhe im Spiel Legand of Zelda, jedoch war mir selber schon klar, dass es sich hierbei eher um Musik oder generierten Sound handelt.
Deswegen habe ich mir noch einen zweiten Sound gesucht und bin auf ein bekanntes geräusch aus meiner Kindheit gestoßen. Eine anfahrende Straßenbahn aus Berlin in den frühen 90er Jahren. Der Elektromotor hat einen sehr eigenen Sound, welcher gut wiederzuerkennen ist. Auf Youtube habe ich ein Video mit dem Sound gefunden, das auch andere zufällige Geräusche beinhaltet. Nach der Vorstellung der Sounds im Kurs habe ich mich für den Straßenbahnsound entschieden.
Ergebnis
Für die Darstellung des finalen Bildes habe ich einen linearen Ablauf von links nach rechts gewählt. Die Geräusche habe ich, je nach Intensität, auf verschiedene Ebenen gelegt und nach Art gruppiert. Die Lautsärke wird durch die Grauwerte gezeigt. Im Hintergrund befindet sich eine Ebene mit kleinen Störgeräuschen (knacken).
Fazit
Für mich die mit Abstand schwierigste Aufgabe. Eine bildliche Darstellung für Geräusche zu finden ist eine echte Herausforderung. Für jeden Betrachter das passende grafische Mittel für die Darstellung eines bestimmtes Geräusches zu erstellen, benötigt viel Überlegung und Geduld. Trotzdem sehr spannend und vor allem etwas Neues. Eine experimentelle Herangehensweise ist geradezu nötig, um die Aufgabe zu lösen und macht den Prozess interessant.
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. Die Aufgabe soll in Zweierteams bearbeitet werden.
Prozess
Weil die Kommunikation mit meinem zugeteilten Teampartner nicht funktioniert hat, habe ich die Aufgabe allein gemacht. Als Thema habe ich mir die Produktion der Nudel ausgesucht. Da ich im Kurs Designmanagement auch die Nudel (Spaghetti) behandelt habe, kannte ich den Ablauf.
Für die Erzählung wollte ich einen linearen Ablauf mit einzelnen Segmenten darstellen. Vom Aussäen des Getreides bis hin zum Abtransport der verpackten Nudeln im LKW, sollten alle Arbeitsschritte gezeigt werden. Das fertige Bild sollte in einem stark illustrativen Stil erscheinen.
Ergebnis
Das Ergebnis beinhaltet alle Arbeitschritte. Manche vereinfacht und manche sehr detailliert dargestellt, das war auch die größte Kritik. Einige Abläufe hätten stärker abstrahiert und somit auch vereinfacht werden können.
