Als Gasthörer, der eigentlich nur herausfinden wollte, ob der Studiengang Interfacedesign in der Praxis auch so interessant ist, wie er klingt, klopfte ich an und wurde ich sogleich äußerst unbürokratisch und offen von Prof. Boris Müller in den Kurs aufgenommen. Zu meinem weiteren Glück gehörte, dass die Anzahl der Kursteilnehmer erst einschließlich mir eine gerade Zahl ergab, was für die Partneraufgaben vonnöten war. Also durfte ich nicht nur passiv „gasthören“, sondern, den immatrikulierten Kursteilnehmern gleich, aktiv am Kurs teilnehmen. Für die vier Teilaufgaben standen jeweils drei Wochen Bearbeitungszeit zur Verfügung. Jeweils mit zwei Besprechungsterminen mit Feedback von Prof. und Kurs. Nachfolgend die Ergebnisse meiner Partner- und Einzelarbeiten.

Copyright

©Yaron Zimmermann

Die erste Aufgabe bestand darin, einen vorhanden Buchtext für die Veröffentlichung auf digitalen Geräten in den Auflösungen 1024 x 768 Pixel (XGA) und 240x320 Pixel (QVGA) gestalterisch aufzubereiten. Dies geschah in Zusammenarbeit mit Fabian Schultz. Zuerst durchforsteten wir unsere Bücherregale nach geeignetem Material und wurden mit dem Klassiker der fiktionalen Kinderliteratur „Alice in Wonderland“ schnell fündig und einig. Von Lewis Carrol geschrieben und von John Tenniel ausgiebig mit illustrativen Lithografien bebildert wurde es 1865 erstmals veröffentlicht und somit hatten wir uns weder um Urheberrechte noch um gute Grafiken zu sorgen.

Nach ersten Tests in mit Schriftarten legten wir auf die Calluna Sans fest, da sie eine gute Lesbarkeit besitzt, was sich beim Rastern auf QVGA als sehr wichtig erwiesen hatte. Außerdem entsprach sie unserer Vorstellung einer zwischen Klarheit und gestalterisch ansprechender Definition ausbalancierten Schriftart. Der Zeilenabstand im Grundlinienraster setzten wir in etwa auf die doppelte Versalhöhe um weder alleinstehende Zeilen, noch einen zusammenlaufenden Textblock zu erzeugen. Die kurzen Gedichte des Buches sind, der englischen Reclam-Ausgabe gleich, in kursiven Lettern gesetzt. Auch wenn es auf den in die Jahre gekommenen Text womöglich passen würde, haben wir uns gegen hervorgehobene oder gar illustrative Initialen ebenso, wie gegen sonstige Ornamente entscheiden, da sie dem immersiven Lesen widerstreben. Auch im sonstigen Design haben wir versucht möglichst reduziert zu bleiben. So gibt es beispielsweise keine Zusatzfunktionen, wie etwa das Setzen von Lesezeichen, das Markieren und Speichern von Text usw., so wird der Bildschirm meist ausschließlich vom Fließtext eingenommen und es gibt kaum Menü-Buttons.

XGA: Trotz des breiten Seitenverhältnisses haben wir uns auch beim querformatigen XGA-Format für eine einzelne Textspalte entschieden, da ein alleinstehender Block Text nicht in Spannung zu einem zweiten steht, was die Konzentration fördert. Da niemand auf die Idee käme, eine Spalte zu blättern bzw. swipen, haben wir uns für ein endloses Scrollen entschiede. Beim Erreichen des nächsten Buchabschnitts schnappt der Kapitelheader sanft an den oberen Bildschirmrand. Bilder sind zentriert in den Fließtext eingebunden. Das ist zwar wenig originell, gibt den detaillierten Illustrationen aber die ungeteilte Aufmerksamkeit, die sie benötigen. Zum Menü gelangt man durch einen Tab in den oberen Bildschirmbereich. Während die Leseansicht unscharf wird „fällt“ es von oben in die Bildschirmmitte. Eigentlich ist das Menü kein solches, sondern lediglich eine Kapitelübersicht, das gelesene Abschnitte fließend in der entsprechenden Kapitelfarbe koloriert und „unentdeckten“ Teil in unbuntem grau darstellt. Hier kann fließend durch die Kapitel gescrollt werden. Am unteren und oberen Ende ist der Scrollhorizont durch eine feine Haarlinie angezeigt (scrollmorphisches Design). Durch einen Tab in den unscharfen Bereich gelangt der User zurück zum Buchtext. Wir haben uns bewusste gegen eine Funktionsleiste oder sonstige sichtbare Buttons entschieden, da wir diese gestengesteuerte Funktion des Menü-Öffnens und -Schließens als leicht „herausfindbar“ genug fanden, um die visuelle Reduktion radikal durchzusetzen.

QVGA: Bei der hochformatigen und deutlich kleineren QVGA-Variante bestehen die Unterschiede zur XGA-Version vor allem in der Textdarstellung. Den seitlichen whitespace haben wir auf ein Minimum reduziert um eine akzeptable Zeilenlänge bei gut lesbaren ...Punkt zu behalten zu können. Auch ist die Kapitelübersicht hier aus Platzgründen fullscreen und ein Wechsel zwischen Buchtext und Menü nur durch einen Tab auf den oberen Bildschirmbereich möglich. Dieser ist hier im Fließtext mit einem schmalen Balken welcher den Kapiteltitel auf farblich Kapitel-entsprechendem Hintergrund zeigt.

Die letzte Kritik, die wir nicht ganz ausräumen konnten, war, dass unsere Gestaltung eine gewisse Nähe zu medium.com hat bzw. zu generisch ist, sprich, das Layout würde auch für ein vollkommen anderes Buch sehr gut passen. Das haben wir jedoch als Kompliment aufgefasst.

Copyright

©Yaron Zimmermann

Ziel der zweiten Aufgabe war es, ein „Klangerlebnis einer räumlichen Struktur zuzuordnen“. Dabei sollte die akustische Begebenheit vor dem Hintergrund der musikalischen Notation, der bildenden Kunst oder einer sonstigen Kulturleistung des Menschen für den Betrachter nachvollziehbar in einem Zeitraster visualisiert werden.

Die erste Idee bestand darin, die Zeitachse, einem Uhrzeiger gleich, um ein Zentrum zu drehen, dabei jedoch dreidimensional entlang der Z-Achse zu bewegen, woraus eine Helix bzw. Spirale entstanden wäre. Eigenschaften des Klanges sollten durch graphische Variablen wie Farbe, Kontur u.ä. der Helix codiert werden. Wegen Zeitdrucks und der Gefahr die Probleme des ersten softwareseitigen Umsetzungstests nicht rechtzeitig lösen zu können habe ich mich dann nach einer anderen Lösung gesucht. Der zweite Ansatz war, eine RGB-LED hinter einem semitransparenten Reispapier von einem Motor entlang einer Achse zu bewegen und dies von einer Kamera vor dem Reispapier mit einer Langzeitbelichtung aufzeichnen zu lassen. Der Klang hätte über einen Lautsprecher, der sich stets direkt neben der LED befände in Schwingungen derselben verbildlicht werden können. Außerdem hätte er sich in der Farbe und Helligkeit der LED, sowie der Motorgeschwindigkeit äußern können. Zuletzt entschied ich mich auch dagegen, weil ich für die Eignungsprüfung schon ein Arduinoprojekt hatte (und deswegen kein freies Board mehr) und gerade mehr nach einer Lösung abseits des Computers suchen wollte.

In der Zeitung hatte ich kurz zuvor einen Artikel über Synästhesie und Menschen, die damit leben müssen gelesen und war von dem Gedanken Überschneidungen in den Sinneswahrnehmungen und -verarbeitungen zu visualisieren angetan. Bei der Synästhesie werden Bereich der Wahrnehmung miteinander gekoppelt bzw. Sinnesebenen miteinander vermischt. Dies geschieht im Gehirn, wenn eine Reizwahrnehmung in dem entsprechenden Verarbeitungszentrum das eines anderen Sinnesorgans mit anregt. Entsprechend gibt es die unterschiedlichsten Ausprägungen von synästhetischen „Störungen“ welche für den Betroffenen nicht zu unterdrücken sind. Da mir als Laie unser westliches Notensystem nicht leicht erschließbar erscheint habe ich versucht ein Legastheniker-freundliches synästhetisches Notensystem für die gewählte Sounddatei zu definieren. Als „akustische Begebenheit“ habe ich einen Liedausschnitt aus Jean-Jacques Perrey - The Elephant Never Forgets gewählt, da es relativ klar abgetrennte Klänge, wiederkehrende Muster und einige interessante „ausklingende“ Töne hat, was sich schon fast grafisch anhört. Grafische Korrelation bestehen zwischen Tonlänge und Elementgröße, Klangfarbe/Geräuschart und Elementform sowie Tonhöhe und Elementfarbe. Bei letzterem habe ich mich an dem, nach Tonarten und Farben sortierten Quintenzirkel des russischen Pianisten, Komponisten und Farb-Synästhetiker Alexander Nikolajewitsch Skrjabin orientiert. Hier hätte ich rückblickend besser meinen eigenen Farbkreis definieren sollen, da manche Töne farblich zu nah aneinanderliegen und auch nicht über das abgebildete Klangspektrum hinausgehen. Zuerst habe ich den Ausschnitt in MIDI-konvertiert um die Tonhöhen heraus zu finden. Die Form der einzelnen Ton-Bilder sind frei nach dem Bouba/Kiki-Effekt entstanden, also möglichst dahingehend, dass es sich zu dem Klang „richtig“ bzw. passend angefühlt hat. Länger anhaltende, ausklingende Klänge werden auf dem linearen Zeitstrahl schmaler und ziehen sich in die folgende Form hinein. Der echoende Klang zu Beginn der dritten Strophe zieht sich wie ein Strudel in die Tiefe und der hallende „Gong“ am Liedende ist dem instrumentalen Vorbild nah und verständlich. Für die exakt gleichen Töne z.B. Noten 2-4 zu Beginn des Songs wäre es dem Konzept zuträglicher gewesen, die wabbelige Form jeweils exakt gleich zu halten und lediglich die Farbe der Tonhöhe entsprechend zu variieren.

Copyright

©Yaron Zimmermann

Als dritte Aufgabe sollten die Kursteilnehmer in Partnerarbeit eine Brainstorming App zur Unterstützung bei der Generierung von Ideen und Entwürfen sowohl grafisch, als auch konzeptionell entwickeln. „GUI“ erfolgte in Zusammenarbeit mit Laura Ruß. Namensgeber für die App „Pensive“ (engl. „nachdenklich“) ist das Wortspiel des englischen Originals des „Denkariums“ aus der populären Romanreihe Harry Potter, welches jedoch „Pensieve“ geschrieben wird, also mit Stiftsieb übersetzt werden muss. Hier werden Gedanken und Erinnerungen frei schwebend in grau-blau-farbiger Umgebung gesammelt und können später wieder betrachtet werden. Auch wenn die Aufgabe klar iOS-8-Konformität vorschreibt, haben wir uns von Google Material Design inspirieren lassen.

Schon zu Beginn war uns klar, dass wir das Konzept des klassischen Brainstormens nach A.F. Osborn und C. Hutchison zur Grundlage nehmen und nicht durch Überladen von Funktionen ad absurdum führen würden. Konkret heißt das, dass wir zu Beginn eine fixes Zeitlimit festlegen, welches das Ende der Prozesses festlegt Da Gruppendynamik laut Wikipedia eine wichtige Rolle beim Brainstormen spielt, haben wir auf die Möglichkeit des Einladens von weiteren Personen zur gemeinsamen Ideenfindung nicht verzichtet. Als dritte und letzte Funktion kann einer Ideenlosigkeit durch dem Hinzuziehen des künstlichen Genies Abhilfe geschaffen werden. Dies kann während der Session ein- sowie wieder abgeschaltet werden.

Ist ein Brainstorm abgeschlossen, so erscheint er in der Session-Übersicht beim Programmstart mit vollständige einfarbig-eingefärbter Umrandung. Als ein solcher lässt er sich nicht mehr fortsetzen sondern lediglich begutachten und exportieren. Dies soll ein „Verschleppen“ von ewig unfertigen Projekten entgegenwirken. Als Schriftart wurde wieder die in der ersten Aufgabe (Digitales Buch) bewährte Calluna Sans verwendet, da sie simpel und klar ist, gut rendert, sehr gut auf Displays lesbar ist und wir sie wesentlich schöner als die standardmäßige Helvetica fanden.

Navigation: In der Übersichtsdarstellung beim Appstart lassen sich die Projekt-Blasen durch Tab-und-Ziehen anordnen und durch Doppel-Tab fortsetzen bzw. begutachten. Wenn eine neue Session gestartet wird und die zentrale Haupt-Blase definiert wurde, kann durch einen Tab auf diese ein „child“ erzeugt werden, welches dann automatisch zur angetabten (in diesem Beispiel die Haupt-Blase) mit einer Linie verbunden wird. Gleiches funktioniert mit in der Hierarchie tieferen Blasen. Verbindungen können auch interhierarchisch stattfinden. Dafür wird von der einen Blase aus eine Swipe-Bewegung zur anderen ausgeführt. Diese können natürlich auch wieder getrennt werden. Wie als wenn der User ein Cutter-Messer in der Hand hätte führt er dazu einen „Schnitt“-Swipe orthogonal zur bestehenden Linienrichtung aus. Ist die intelligente Ideenfindungshilfe eingeschaltet wenn auf eine Blase getabt wird, so steigt diese auf und es erscheinen neben den Symbolen der Werkzeuge zum Festhalten der eigenen Ideen auf der linken Seite in zu den Eigene-Idee-Blasen monochromatisch invertierten Farben Symbol- und Schlagwort-Vorschläge der App. Fotos und Sounds werden nicht vorgeschlagen, da dies womöglich eher ablenkend und überladen als anregend wirken könnte. Ist eine neue Blase einmal erstellt, kann sie weder bearbeitet noch gelöscht sondern lediglich anders verbunden werden. Dies ist im Sinne des Brainstormingkonzepts, wonach keine Idee korrigiert oder anderweitig bewertet werden sollte, sondern der Fokus einzig auf dem schnellem Sammeln von Gedanken beruht. Wird eine AI-Blase angetabt, so färbt sich diese sofort dem Farbschema entsprechend blau ein und gesellt zu den anderen. Es lässt sich also im Nachhinein nicht erkennen, was eine eigene Idee war und was berechneten Ursprungs ist. Klickt der User nun auf eine weiße Blase, so gelangt er dem Werkzeug entsprechend zu einem screen, der sich nur der entsprechenden Erzeugung widmet. Im Beispiel sieht man die Erstellung einer Text-Blase. Der Zeitfortschritt lässt sich am Fortschreiten der farblichen Füllung der deutlichen Umrandung der Hauptblase erkennen. Ist diese restlos ausgefüllt, ist die Session beendet. Durch einen Swipe vom unteren Bildschirmrand nach oben lässt sich das Menü aufrufen, wo dem User die Option geboten wird, die Session zu Pausieren oder ganz zu beenden. Außerdem können weitere Teilnehmer eingeladen werden, die bisherigen Ergebnisse geteilt (bzw. exportiert) werden. Im obersten Settings-Bereich sind die drei Aktiv-/Inaktiv-Buttons aufgereiht. Diese bieten die Möglichkeit, die App mit der Cloud synchron zu halten, Genius ein- bzw. auszuschalten und, ja, im Notfall sogar die zuvor eingestellte Zeitbegrenzung wieder zu deaktivieren. Mit einem Swipe nach unten verschwindet das diffus-semitransparente Menü wieder in der Versenkung.

Copyright

©Yaron Zimmermann

Die vierte und letzte Aufgabe bestand darin, einen komplexen Sachverhalt zu kommunizieren ohne dabei auf Text, also Wörter, Zahlen u.ä. zurück zu greifen. Ein gutes Bild sagt mehr als tausend Worte, ebenso ein gutes Interface.

Aus dem aktuellen Thema Urban Farming heraus habe ich mich mit Hydro- und Aquakulturen beschäftigt und versucht diese Prozesse grafisch zu erläutern. Auf Rat des Kurses habe ich mich dann jedoch dafür entschieden, meine zweite Skizze weiter zu verfeinern, welche den Prozess der Kultivierung von Pilzen in den eigenen vier Wänden erklären zu versucht.

Die Zeichnung besteht aus zwei Kreisläufen, die im zentralen „Stamm“ des Heranwachsens zusammenlaufen. Auf der linken Seite ist das der Kreislauf der Erzeugung und Ernte für den Verbrauch und auf der rechten Hälfte ist die Produktion mit anschließender Sporenentnahme und Aufbereitung für die nächste „Besporung“ des Substrats abgebildet.

Zunächst muss die Reispflanze vom Reisbauern geerntet (links oben) und das Korn vom pflanzlichen Rest getrennt werden. Damit das Korn als Substrat (Nährboden) besonders gut fungieren kann wird das Korn fein gemahlen und als vierter Teil zusammen mit einem Viertel Wasser und dem halben Teil Vermiculit verrührt und die entstandene Masse anschließend in ein Schraubglas gepresst. Nun wird das Glas in einem Schnellkochtopf unter hohem Druck 20 Minuten lang sterilisiert und kann danach von einer ebenfalls sterilen Sporenspritze „besport“ werden. Anschließend wird das Glas in einem lichtundurchlässigem Karton bei etwa 25°C für mindestens zwei Wochen aufbewahrt und dann, wenn sich das Myzel im Glas vollständig ausgebreitet hat, entnommen, geöffnet und der enthaltene „cake“ auf einem Tellerchen in eine lichtdurchlässige Box gestellt. Wasser und Kieselsteine (oder Perlit) sorgen dafür, dass die Luftfeuchtigkeit auf konstant hohem Niveau bleibt. Direkte Sonneneinstrahlung kann dem Myzel schaden, indirektes Sonnenlicht dagegen vonnöten. Wiederum nach gut zwei Wochen sollten sich die Fruchtkörper soweit ausgebildet haben, dass sie erntereif sind. Dies ist am beginnenden Aufreißen der Haut zwischen Hutkappe und Stiel zu erkennen. Die meisten essbaren Pilze können direkt erntefrisch konsumiert werden. Hier ist nun der Scheideweg des Doppelkreislaufes: Entweder werden die reifen Pilze im Ganzen direkt konsumiert oder die Hutkappe direkt am Stielansatz abgeschnitten um sie im Folgenden zur Sporengewinnung zu nutzen. Für letzteres wird die Kappe mit den Lamellen nach unten über Nacht auf ein Stück Papier oder Alu-Folie gelegt und ein Glas darüber-gestülpt. Die abgeworfenen Sporen bilden einen schönen Sporenabdruck und können mit abgekochtem, kalten Wasser vermengt in die ebenfalls sterilen Spritzen aufgezogen werden. Damit wäre der regenerative Kreislauf der Pilzzucht vollständig. Entscheidet sich der Erntende am Scheideweg jedoch für den Konsum der Fruchtkörper, so kann es bei entsprechenden Pilzen nach Ablauf einiger Minuten dazu führen, dass ein asiatischer Kegelhut angeflogen kommt und zu fröhlicher Arbeit im Reisfeld verleitet. Womit sich auch der zweite Kreislauf schließt.

Neben dem Umfang der Anleitung lag die Herausforderung in der Kommunikation von Zeit und dem Mineral Vermiculit. Zeit musste im Minutenbereich, im Stundenbereich und im Wochenbereich dargestellt werden. Während für die ersten beiden Bereiche eine Uhr oder Stoppuhr bzw. die Darstellung einer unter- und wieder aufgehenden Sonne einigermaßen gut funktionierte, hat die Woche ihre Schwierigkeiten mit sich gebracht. „Mann ohne Bart -> Mann mit Bart“ war mir zeitlich zu unpräziese und eine Schwangerschaft ist zwar ziemlich genau 9 Monate lang, 2 Wochen machen aber keine 6 Prozent davon aus und wären wieder schwierig darzustellen. Ein „gutes“ Huhn legt ca. 300 Eier im Jahr, also nicht ganz eins pro Tag. 14 Eier stellen also etwas mehr als zwei Wochen dar, was gut auf den Zeitraum der Inkubation und die Zeit in der Fruchtkammer passt, da optimale Bedingungen (Temperatur, Luftfeuchtigkeit usw. ) erreicht werden und die Zeit wirklich nur im aller besten Falle bei zwei Wochen liegt. Ob bzw. wie schnell sich das Huhn mit seinen gelegten Eiern dem Betrachter als Zeitdarstellung erschließt sei dahingestellt. Vermiculit ist ein Mineral der Silikate mit der monströsen Summenformel (Mg0,5,Ca0,5,Na,K)0,7(Mg,Fe,Al)3[(OH)2|(Al,Si)2Si2O10]·4H2O. Leider ist es dem Normalverbraucher eher nicht bekannt. Abseits der Industrie wird es vor allem von Reptilienhaltern geschätzt, da es für eine konstante Luftfeuchtigkeit in Terrarien sorgt. Da Vermiculit nun ein unverzichtbarer Bestandteil bei der Pilzzucht ist, habe ich eine kristalline Struktur im Bodenbelag eines Terrariums als direkte Darstellung dafür gezeichnet, auch, wenn das den Prozess für Uneingeweihte vor ein Verständnisproblem stellen könnte.

Diese Anleitung dient nur zu Studienzwecken und sollte weder Aufzucht von Speisepilzen oder sonstigen Pilzen genutzt werden.

Die Aufgaben waren sowohl herausfordernd, als auch offen genug gestellt und der Zeitraum mit wöchentlichen Besprechungen nicht zu lang, um sowohl konstant im Thema zu bleiben als auch frisch angespornt auf gute Ergebnisse hin zu arbeiten. Abgesehen vom Klangbild, wo ich keine Zugang zu bekommen konnte, bin ich mit meinen Partner- und Einzelarbeitsergebnissen in diesem Kurs sehr zufrieden. Besonders die Aufgabe einen Prozess unter Verzicht auf Worte graphisch darzustellen hat mir viel Freude bereitet und mit meinem Ergebnis dieser Aufgabe bin ich am meisten zufrieden. Emils Anmerkung, dass eine freie Wahl zwischen Google Material Design und den iOS 8 Guidelines bei der GUI-Aufgabe eine Bereicherung gewesen wären, möchte ich bekräftigen. Die Bearbeitung der Aufgaben, die spannenden Vorlesungen, der Wechsel von Partner- und Einzelarbeiten und das wirklich sehr gute und konstruktiv-kritische Feedback - unabhängig vom Stand/Niveau der Arbeit - von Kurs und Prof.* haben mich als Gestalter weiter gebracht.

*Keine Featuritis, kein Eckendesign und das hier, ja, das ist ein Gestaltungsproblem.