Portfolio – Grundlagen der Gestaltung

Total Permutiert1

Abb. 1 Erste Version des Interface
Abb. 1 Erste Version des Interface

Aufgabe

Total permutierbar. So meine Lösung zu folgender Aufgabenstellung:

Jedem Gestalter passiert es, dass er einmal „auf dem kreativen Schlauch“ 2 steht und in der Ideenfindung keinen Schritt mehr weiterkommt. Bei der Aufgabe aus Modul 4 geht es darum, Permutationen zu erstellen, um zu Ideen zu finden. Also die gesamte Anzahl an Möglichkeiten einfach aufzulisten, um ganz einfach die beste Lösung auswählen zu können.

Grafisch soll dies durch vier Elemente, die je eine Größe von 20 × 20 Pixeln besitzen sollen, vorbereitet und die Permutationen eben dieser Elemente auf einem Platz mit einer Größe von 40 × 40 Pixeln umgesetzt werden. Es gibt 4! (vier Fakultät) Möglichkeiten, die vier Elemente auf dem Platz anzuordnen. So entstehen 24 völlig neue Ideen, aus vier zunächst isolierten Elementen. Um sich des optischen Eindrucks klarer zu werden, sollen nun sämtliche möglichen Plätze nebeneinander als ein Band dargestellt werden. Die Plätze können weiterhin innerhalb des Bandes nicht nur chronologisch, sondern auch nach bestimmten Kriterien sortiert werden. Eine Reihung soll nun rhythmisch sein, eine stetig und in der dritten sollen die Plätze von dynamisch zu statisch sortiert werden.

Formal sollen die Platzreihen als JPEG-Datei im Format 1280 × 720 ausgegeben werden.

Abb. 2 Grobskizze zur Interface-Gestaltung
Abb. 2 Grobskizze zur Inter­face-­­­­Gestaltung

Konzept

Was wäre, wenn nicht nur die Elemente total permutiert wären, sondern auch die ganze Lösung der Aufgabe? Es bietet sich förmlich an, nicht nur eine, für immer fertige und vollkommen abgeschlossene, Reihungskombination zu erstellen, sondern unbegrenzte Möglichkeiten zu eröffnen. Dafür ist es lediglich nötig, ein Tool zu erstellen, das es dem Benutzer erlaubt, immer wieder neue Permutationen aus immer neuen Grundelementen zu erschaffen. Und ihm dabei auch noch die Arbeit erleichtert.

Lösung

Mal Nachrichten, mal Hörspiel, mal Deutsch, mal Niederländisch, mal Musik, mal Rauschen. Das höre ich, wenn ich bei einem Radio, mit manueller Einstellung der Frequenz, was im Internetzeitalter wohl als veraltet gelten darf, durch die Sender wechsle. Irgendwie passiert dabei auch eine Permutation. Erst klarer Ton, dann Rauschen, dann wieder Ton, aber völlig neu zusammengesetzt. Wenn ich die Frequenzen nicht auswendig kenne, kann ich nicht voraussehen, welche Kombination aus Tonwellen als nächstes zu mir dringt.

Die Vorstellung des alten Röhrenradios inspiriert mich für meine Umsetzung des Interfaces. Dieses und das darunterliegende Permutationsprogramm setzte ich in der JAVA-Entwicklungsumgebung Processing um.

Funktionsumfang und Bedienung

Das Programm bietet dem Benutzer zahlreiche Möglichkeiten, die Permutationen zu erstellen, zu variieren und sich von den Ergebnissen inspirieren zu lassen. Beliebige 20 × 20 Pixel große Elemente werden aus einem vordefinierten Ordner in das Programm geladen. Nach Auswahl von vier Elementen durch Klick auf die Vorschaubilder, ist bereits der erste zusammengesetzte Platz im Vorschaubereich zu sehen. Die Anzeige eines bestimmten Platzes, sowie ein zufälliger aus der Menge kann über den Schieberegler im unteren Bereich gewählt werden.

Abb. 3 Editor für neue ­Elemen­­te. Das weiße Quadrat ist die Zeichenfläche
Abb. 3 Editor für neue ­Elemen­­te. Das weiße Quadrat ist die Zeichenfläche

Weiterhin gibt es die Möglichkeit, über den Klick auf Schaltflächen von der Anzeigeart Platz zur Anzeigeart Reihung zu wechseln. Nun werden alle 24 Plätze als Reihung angezeigt. Nun ist die Standardauswahl statisch zu sehen. Der Klick auf die Schaltfläche dynamisch bewirkt, dass der durch den Schieberegler ausgewählte Platz und sein direkter rechter Nachbar wiederholt angezeigt werden.

Zum Weiterarbeiten bietet es sich an, die Permutationsergebnisse zu exportieren. Durch Drücken der Leertaste wird der aktuelle Platz oder die aktuelle Reihung, je nach Anzeigeart, in einen vordefinierten Ordner im Format JPEG exportiert.

Als Extrafunktion, die den Workflow beim Benutzen des Tools unterstützt, gibt es einen eingebauten Editor für neue Grafikelemente. Dieser wird durch Klick auf das Pluszeichen („+“) im oberen Bereich des Bildschirms aufgerufen.

Gelöste Probleme

Durch die Entwicklung dieses Processing-Sketchs gibt es ein umfassendes Tool zur Erstellung von beliebigen Permutationen völlig ohne zusätzliche Werkzeuge. Dadurch lassen sich neue Ideen bei der Benutzung der Permutationsmethode sehr einfach generieren.

Gewonnene Erkenntnis

Die Aufgabe betreffend, habe ich die Chance genutzt, mich intensiv mit den Möglichkeiten von Processing zu beschäftigen (u.a. Objekt-orientierte Programmierung in JAVA). Das Tool konnte genau so umgesetzt werden, wie in der Konzeptphase geplant.

Abb. 4 Usability-optimierte ­Version des Interface
Abb. 4 Usability-optimierte ­Version des Interface

Das Kennenlernen der Permutationsmethode an sich konnte ich ebenfalls mitnehmen. Es bietet sich oft an, alle erdenklichen Möglichkeiten vor sich auszubreiten, um die beste Option wählen zu können. Nicht alle Möglichkeiten und auch nicht alle Vorzüge und Nachteile der jeweiligen Optionen sind immer gleich ohne diese explizite Aufzählung sichtbar.

Aus der Umsetzung des Interface nach der ursprünglichen Idee konnte ich noch einen weiteren Aspekt kennenlernen, der in der Konzeptionsphase zunächst nicht aufgefallen war. Das erste Interface besteht zu einem großen Teil aus Skeuomorphismen. Die Bedienelemente ahmen die Form der Bedienelemente des bekannten Röhrenradios nach, das als Inspiration galt. Dies geht aber so weit, dass diese Nachahmung stattfindet, „ohne dass dies[e] durch ihre Funktion begründet ist“ 3. Beispiele: Mit dem Schieberegler lässt sich kein Radioprogramm wählen, es entsteht kein Mehrwert dadurch, dass er alt aussieht. Und die typografische Gestaltung der Schaltflächen ahmt die realen Bedienknöpfe nach statt leseoptimiert zu sein.

Abb. 5 Detail aus dem Interface. Gewählte Elemente werden durch eine dunkle Hinterlegung hervorgehoben
Abb. 5 Detail aus dem Interface.
Gewählte Elemente werden durch eine dunkle Hinterlegung hervorgehoben

Nach dem Gewinn dieser Erkenntnis führen ein paar wenige, aber drastische Reduzierungen bereits zu einer erheblichen Optimierung. Diese Optimierung erfolgt durch die strikte Vereinfachung der Bedienelemente. Durch das Entfernen der Verweise auf haptische Element ist die Oberfläche deutlich aufgeräumter und hat an Gebrauchstauglichkeit zugenommen. Der Benutzer stellt keine Verbindung mehr her zu einem Radio, das mit der eigentlichen Funktion der Oberfläche nichts gemein hat. Zudem kann durch die Vergrößerung der Präsentationsfläche für die Plätze – wie bereits im Grobentwurf vorgesehen – der Fokus auf die Plätze als eigentliche Arbeitsfläche des Programms vergrößert werden (vergl. hierzu Abb. 1 und 4).

1 Prof. Jakob Lehr & Prof. Hannes Nehls: „AUFGABE 4 : TOTAL ­PERMUTIERT!“, 2013

2 ebd.

3 „Skeuomorphismus“, http://de.wikipedia.org/wiki/Skeuomorphismus, Abruf: 04.12.2013