Basic Interfacedesign WS 10/11 Jakob Flemming
Ergebnisse des Kurses Basic Interfacedesign bei Stephan Thiel - WS 2010/11
01 Digital Book
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.
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.
Umsetzung
Ich entschied mich bei dieser ersten Aufgabe für den Roman "Into the Wild" von John Krakauer. Dieser handelt von dem sozialen Aussteiger Christopher McCandless und seiner (tödlichen) Reise nach Alaska.
Da die Geschichte unter anderem anhand seiner Aufzeichnungen rekonstruiert wurde, wollte ich diesen Aspekt unterstreichen, indem ich dem digitalen Buch einen "Used-Look" gab. Es sollte der Eindruck entstehen, als ob man das originale Tagebuch quasi in den Händen hält.
Das Interface ist ganz klassisch und auf die ganz wesentlichen Funktionen reduziert, wie ich es bei einem Roman für sinnvoll erachtet habe. Das Menü scheint sich in die Buchseite einzufügen. Es kommen (ausser einer Landkarte) keine Bilder vor, was die Bedienung noch einmal vereinfachte.
Gegenüber der iPhone-Version, hat die iPad-Version eine interaktive Karte, auf der man den Weg von Christopher McCandless nachverfolgen kann und gleichzeitig aber auch als Inhaltsverzeichnis dient. Auch auf den "normalen Seiten" enthält die iPad-Version zusätzlich kleine Details.
02 GUI
Aufgabe
Es sollte eine Fernsteuerungs-Anwendung für das iPhone konzipiert und gestaltet werden. Die Applikation durfte über das technisch Machbare hinausgehen, wichtiger war aber die Ausgestaltung des User-Interfaces. [...]
Der Fokus für die Präsentation des Interface-Konzepts sollte sich nach der Gewichtung auf Echtzeitsteuerung oder Kontrolle planerischer Aufgaben richten. Hierbei sollte sich das Interface für die planerischen Aufgaben an den iPhone Human Interface Guidelines orientieren, während es beim Echtzeitsteuerungsteil auch stark davon abweichen kann.
Idee
Das Konzept und die Umsetzung dieser Aufgabe erfolgte in Zusammenarbeit mit Christoph Wiedenmann. Die Grundidee bestand darin, ein Aquarium und dessen Funktionen (Temperatur, Licht, Wasserwerte, etc.) zentral mit dem iPhone, von überall und zu jeder Zeit, zu überwachen und fernzusteuern. Dadurch sollen z.B. schwer erreichbare Steckdosen, die an Zeitschaltuhren hängen oder ein Fischsterben durch eine unbemerkte Veränderung des Wassers, der Vergangenheit angehören.
Anfangs für Hobbyaquaristen gedacht, orientierten wir uns bei der Umsetzung an einer professionellen Fischzucht (bei der schon die kleinste Veränderung der Umwelt verheerende Folgen haben kann) um die Wichtigkeit des Monitorings und Controllings zu demonstrieren.
Ergebnis
Vorbereitend mussten wir uns erst einmal mit der Thematik eines Aquariums auseinandersetzen, um zu verstehen, welche Parameter für einen gesunden Lebensraum wichtig sind. Angefangen bei der Steuerung des Lichts und der Temperatur, bis zu einzelnen Wasserwerten, wie pH-Wert, Nitrat- oder Eisenwert.
Auf dem Startscreen hat der Nutzer alle gewünschten Parameter in einer Übersicht, die die aktuellen Einstellungen und den Verlauf in Form einer Kurve anzeigt [Bild 1].
Im Hauptmenü kann man die Parameter, welche man in der Übersicht angezeigt haben möchte, an/abwählen [Bild 2] und zwischen verschiedenen Aquarien wechseln.
In unserem Beispiel sieht der Nutzer schon auf dem Startscreen, dass sich der pH-Wert außerhalb des Normalbereichs befindet. Er wechselt in die Detailansicht [Bild 4] und sieht anhand der Sensoren, dass sich der pH-Wert (in einem Bereich des Aquariums) über dem Maximalwert befindet. Über das PopUp gelangt er zu den entsprechenden Einstellungen, welche die allgemeinen Informationen, den aktuellen und den optimalen Wert anzeigen [Bild 5]. Um den pH-Wert in seinem Aquarium zu senken, klickt der Nutzer auf pH-minus und erhält detailliertere Informationen zum Thema, sowie eine empfohlene Menge, die das Programm aus den Werten und der Größe des Aquariums errechnet [Bild 6]. Klickt der Nutzer auf den berechneten Wert, hat er die Möglichkeit die empfohlene oder eine selbst festgelegte Menge in sein Aquarium hinzuzugeben [Bild 7].
03 Anti Usability : Design that Makes it Suck !
Aufgabe
Gestalte eine Intervention zu einem sozialen, durch Technologie und deren Interfaces verursachten Phänomen, durch die Restriktionen oder Fehlverhalten bewusst werden.
Umsetzung
Parkplätze sind öffentliche Plätze, die vor allem von PKW-Haltern benutzt werden, die für die Anmietung eines Platzes für einen gewissen Zeitraum Geld zahlen.
In Zeiten von überteuerten Wohnungsmietpreisen (mit Balkon), der fehlenden Transparenz bezüglich der Investitionen des Parkgeldes und der zunehmenden Bebauung des urbanen Raumes stellen wir die Frage: „Was wäre wenn wir diese zahlreichen öffentlichen Plätze anders nutzen würden?“ Hausgemeinschaften könnten beispielsweise Parkplätze vor der Haustür anmieten, um dort Pflanzen und Kräuter anzupflanzen oder es sich dort Abends einfach gemütlich zu machen. Entstanden ist nach diesem Konzept eine Intervention, bei der Tagsüber öffentliche Parkplätze in Berlin zu Lese- und Ruheplätzen, abends zu Tanzplätzen umfunktioniert wurden.
In Zusammenarbeit mit Sebastian Sadowski.
04 Spoken Words
Aufgabe
Die letzte Aufgabe im Kurs Basic Interface bestand darin, einen komplexen gesprochenen Text unserer Wahl zu analysieren und in einer Informationsgrafik darzustellen. Bei der Bearbeitung der Aufgabe sollten wir zum einen den klanglichen Verlauf des Gesprochenen(Inotation, Lautstärker,...) darstellen und zum anderen den Inhalt ohne Benutzung von Text wiedergeben.
Idee
Das Konzept und die Umsetzung dieser Aufgabe erfolgte in Zusammenarbeit mit Christoph Wiedenmann. Um uns dem Thema „spoken Words“ zu nähern begannen wir uns verschiedene bekannte Politische Reden, Filmausschnitte und Musikstücke anzuhören. Durch Zufall entdeckten wir, den uns schon bekannten TED Talk „Ren Robinson says school kills creativity“ wieder. Da wir beide inhaltlich sowie vom Aufbau der Rede begeistert waren entschlossen wir uns diesen TED Talk zu visualisieren.
Unter „Links“ ist ein Link zum TED Talk auf www.ted.com zu finden.
Ergebnis
Zur ersten Orientierung in dem 20minütigen Vortrag von Sir Ken Robinson, haben wir uns ein inhaltliches Gerüst geschaffen, mit dessen Hilfe wir die grobe Struktur und den Verlauf der Rede abbilden konnten.
Anschließend haben wir die Rede in thematische Abschnitte unterteilt und deren Kernaussagen herausgearbeitet. Diese haben wir soweit heruntergebrochen, bis wir sie jeweils in einem einzigen Icon darstellen konnten.
Aufgrund der verzweigten Struktur, entschieden wir uns gegen eine lineare Abbildung von rechts nach links, sondern wollten den ursprünglichen Verlauf der Rede abbilden. Dazu haben wir die einzelnen Themengebiete in Kreise aufgeteilt, durch die die Rede verlaufen sollte. Es musste also eine Möglichkeit gefunden werden, einen kontinuierlichen Redefluss durch mehrere Kreise verlaufen zu lassen.
Darüber hinaus sollte ein weiterer Aspekt der Rede herausgearbeitet und dargestellt werden. Hierzu haben wir uns die Längen jedes Abschnitts und deren Satzteile genauer angesehen. Letztlich haben wir einen kontinuierlichen Redestrang, nur durchbrochen von kleinen Pausen des Redners, durch die einzelnen Themenkreise gezogen, in deren Mitte sich das dazugehörige Icon befand. Die tatsächliche Rede (blau) innerhalb eines Kreises wird dabei durch eine feine durchgehende Linie (weiss) miteinander verbunden.
Als einen weiteren Aspekt, haben wir die Reaktionen des Publikums (rot/orange) entlang des Redestrangs eingearbeitet.
Die Kreise sind gleich groß, bis auf den finalen Kreis, der die Hauptthese der Rede beinhaltet. Die Darstellung spiegelt keine Gewichtung der Themen wieder, sondern den Aspekt das sich einzelne Themenbereiche immer wieder auf die Hauptthese beziehen und letztlich in ihr münden.
Innerhalb einzelnen Themen kam es zu Verweisen auf vorhergehende Aussagen, welche wir mithilfe von feinen, grauen Linien zwischen den Themenkreisen zeigen wollen.
