In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Basics Interfacedesign SS 2011 | Gabriel Credico
Die Dokumentation der im Kurs bearbeiteten Aufgaben.
Entstanden an der FH Potsdam, Studiengang Interface-Design Im Kurs »Basics Interfacedesign« bei Prof. Boris Müller Sommersemester 2011 http://interface.fh-potsdam.de
Gestalte eine digitale Fassung Deines 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 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.
Die Umsetzung:
Zur Bearbeitung der Aufgabe wurden wir in Gruppen eingeteilt. Fabian und ich entschieden uns spontan für eine Packung »Studentenfutter«, einem einfachen Kochbuch, herausgegeben von Dr. Oetker. Wie der Name schon nahelegt, sind die Rezepte schnell und auch für Kochanfänger leicht umsetzbar.
Die »Komplexität« der Rezepte spiegelt sich auch in deren Kategorisierung wieder: Wir schlüsselten diese in Vorspeisen, Hauptgerichte und Nachspeisen auf. Nach dem man eine der Kategorien gewählt hat, bekommt man eine Übersicht der (in dieser Kategorie vorhandenen) Gerichte angezeigt und kann anhand von drei Parametern (Fleisch-Vegetarisch, Zeit, Schwierigkeit) die Liste nochmals optimieren. Oder man wählt eines der Rezepte aus. In der darauf folgenden Ansicht wird das Rezept gegliedert dargestellt.
Die Kompakte Variante unterscheidet sich strukturell ein wenig in der Rezeptansicht. Dort haben wir uns, aufgrund des Platzmangels und dem damit verbundenen Scrollen, für eine Sprungnavigation innerhalb des Rezeptes entschieden. Trotzdem kann natürlich auch gescrollt werden.
Als Navigationskonzept kam zusätzlich zur (gewohnten) hierarchischen Variante noch die Idee des Kochtopfes auf: Der Benutzer wählt – wenn der Kühlschrank mal wieder ausgemistet werden muss – die Zutaten aus, und schmeisst diese in einen Kochtopf, welcher dann die passenden Rezepte anzeigt. Diese Variante haben wir der Einfachheit halber Weggelassen, aber sie bietet eine reizvolle Art wie man es auch hätte lösen können.
©Gabriel Credico
- Die Rezeptansicht
- Startansicht mit Kategorieauswahl
- Listenansicht mit Parametern
- Rezeptansicht
Kompakte Version
- Listenansicht mit Parametern
- Rezeptansicht (Zutaten)
- Rezeptansicht (Schritte)
Es soll eine Web-Radio-Applikation für das iPhone konzipiert und gestaltet werden. Die Applikation kann gern über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr.
Die Applikation sollte über folgende Funktionen verfügen: Stream-Auswahl, Musiksteuerung (Start, Stop, Lautstärke), Favoriten, Aufnahme, Aufnahmenverwaltung.
Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher sollen 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.
Die Umsetzung:
zur Lösung dieser Aufgabe wurden wir auch wieder in Gruppen eingeteilt. Stipe Bandow und ich gingen relativ Zeitnah an die Lösung der Aufgabe ran. Die ersten Scribbles entstanden in der Absicht, eine klassische Radio-App mit Weckfunktion zu entwickeln. Als erstes musste ich mich (als Nicht-iPhone-User) natürlich in die Materie einlesen und eindenken. Die iOS Human Interface Guidelines und Stipe’s iPhone halfen dabei zum Glück.
Dann kamen die ersten Gedanken über die Funktionalität zustande.
Wir wollten einen „Now playing“-Screen verwenden, der die aktuelle Sendung detailiert darstellen kann. Und wie soll man auf ihn zugreifen können? Logischerweise von jedem Screen aus. Also kommt dieser in die TabBar.
Und was ist mit der Recording Funktionalität? Um sie sinnvoll zu integrieren, muss sie auch jederzeit zuschaltbar sein, also auch in den „Now playing“-Screen integriert sein.
Braucht man eine Zeitleiste? Wenn man einen Livestream hört machen sie keinen Sinn, wenn man jedoch eine Aufnahme hört schon. Also zeigt man durch eine Schraffierung der Zeitleiste, dass sie gesperrt ist.
Nachdem die Scribbles fertig waren, und es an das eingemachte (also Photoshopwork) ging, drängte sich immer mehr der Gedanke auf, dass die „Now playing“-Screen zusätzlich zur aktuellen Sendung/Lied noch eine Programmvorschau anzeigen könnte. Er sollte sozusagen den gesamten Stream auch als Informationsstrom anzeigen. Also war er ab sofort die „Streamview“.
So könnte man auch bei aufgenommenen Sendungen die Daten der einzelnen Sendungen/Titel mitspeichern und anzeigen.
©Gabriel Credico
- „Streamview“ bei dem Abspielen einer Aufnahme
- Die Übersicht
- Die Senderliste
- Die Favoritenliste
- Aufnahmen sortiert nach Monaten
- „Streamview“ bei dem Abspielen einer Aufnahme
- „Streamview“ bei der Aufnahme eine Streams
©Gabriel Credico
- Das Ablaufdiagramm
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 Bildschirm- orientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.
Die Umsetzung:
Die erste Aufgabe, die alleine zu lösen war. Meine Wahl für das Hintergrundgeräusch fiel auf den Prozess des Geldabhebens bei einem Geldautautomaten. Ich habe dabei versucht die vorhandenen Geräusche weiter aufzubrechen und in einen Katalog aus Grundgeräuschen zu überführen.
Beim analysieren habe ich versucht zwischen zwei verschiedenen Geräuschenarten zu trennen. Sprich: Geräuschen die innerhalb des Hörerfokuses liegen und denen außerhalb (also mehr im Hintergrund stattfindend).
Diese Unterscheidung wurde durch die Farbe der Linie, welche die einzelnen Geräusch-Symbole verbindet dargestellt. Blau definiert die Geräusche innerhalb und Grau die Geräusche außerhalb des Hörerfokus. Zusätzlich dazu werden die Geräusche die im Hintergrund stattfinden dunkler dargestellt.
©Gabriel Credico
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 Umsetzung:
Schon direkt zu Beginn des Semesters wusste ich mehr oder weniger welche Thematik ich bei dieser Aufgabe behandeln möchte. Ich wollte den Vorgang der Nuklearkatastrophe von Fukushima in einer Infografik verarbeiten. Die Thematik war nicht zu komplex. Man konnte die Vorgänge gut (sofern passend dokumentiert) verstehen und nachvollziehen.
Das größere Problem war eher, die quantitative Menge der parallelen Prozesse, welche wiederrum in jedem der Reaktorblöcke ein wenig anders verliefen wirklich detailliert und innerhalb des großen Informationsflusses darzustellen. Es fiel mir schwer zwischen dem Anspruch einer beinah kompletten Dokumentation des Prozesses und der hierfür benötigten Zeit abzuwägen. Beinah hätte ich daher das Thema doch nicht weiterverfolgt.
Nach der Rücksprache bekam ich den Tipp, dass Thema weiter herunterzubrechen und mich auf die wesentlichen und zu verallgemeinernden Bestandteile des Prozesses zu konzentrieren, statt auf den gesamten. Gemessen an dem extrem knappen Zeitrahmen, blieb mir auch nicht viel anderes übrig :)
©Gabriel Credico
©Gabriel Credico
Im ersten Abschnitt wird erklärt, wie das Ernergiegewinnungsystem eines Siedewasserreaktors eigentlich funktioniert.
©Gabriel Credico
- Das Erdbeben zerstört die Stromzufuhr des Meerwasserkreislaufes, woraufhin die Notstromaggregate die Stromzufuhr übernehmen.
©Gabriel Credico
- Der von dem Erdbeben ausgelöste Tsunami zerstört die Notstromaggregate und die Kühlwasserturbinen, der Reaktor kann sich nun noch durch ein wenige Stunden haltendes Notfallkühlsystem kühlen. Dieses fällt schließlich aus. Dadurch steigt die Hitze und der Druck innerhalb des Reaktorkerns.
©Gabriel Credico
- Durch die massiv erhöhte Temperatur innerhalb des Reaktorkerns bildet sich Wasserdampf, welcher mit den freiliegenden Brennstäben reagiert. Dabei entsteht Wasserstoff.
©Gabriel Credico
- Der erhöhte Druck innerhalb des Kessels und die Fehlerhaften Ablassventile haben zur Folge, dass der Wasserstoff innerhalb des Kerns in die Schutzhülle eindringt und dort mit Sauerstoff reagiert. Es gibt eine Wasserstoffexplosion, welche einen Teil der Schutzhülle stark beschädigt.
©Gabriel Credico
- Um eine weitere Erhitzung des Reaktorkerns – in dem zu diesem Zeitpunkt vermutlich schon eine Kernschmelze stattgefunden hat – zu vermeiden, wird Meerwasser direkt in das Reaktorgebäude gepumpt.
Diese (in der Infografik) letzte Aktion zeigt sehr gut wie Hilfelos die Betreibergesellschaft und die japanische Regierung einer solchen Katastrophe ausgeliefert ist.
©Gabriel Credico
Ein toller Kurs!
Alle Aufgabenstellungen werden gut besprochen, wodurch man viel Feedback erhält und viel verstehen kann. Die große Menge an konstruktivem Feedback trägt dazu bei, aus den abwechslungsreichen Aufgaben viel mitzunehmen.
Ein Projekt von
Gabriel Credico
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Prof. Boris Müller
Entstehungszeitraum
Sommersemester 2011