Nach wie vor spielt der visuelle Sinn eine zentrale Rolle im Interfacedesign. Trotz vielfacher Innovation im Bereich multi-modaler Interaktion ist die zentrale Schnittstelle zwischen Mensch und Computer nach wie vor der Screen. Das Fach Visual Interface Design stellt formal-ästhetische Fragestellungen von interaktiven visuellen Systemen in den Mittelpunkt.

Aufgabe Nach der Analyse verschiedener Info-Grafiken, bestand die Aufgabe darin, eigens gesammelte Informationen anschaulich zu visualisieren. Der Themenbereich wurde relativ frei in »einen Aspekt unseres Lebens« formuliert.

Schlafverhalten

Die Infografik beschreibt mein Schlafverhalten in den Tagen vom 5. bis 10. November.

Daten Die Daten wurden mittels der iPhone-App »Sleep Time« erfasst, welche Bewegungen und Geräusche des Nutzers misst und anhand dessen erkennt, ob sich der Schlafende momentan in einem leichten Schlaf oder in einer Tiefschlafphase befindet. Darauf basierend versucht die App, den Nutzer in einer Phase leichten Schlafs aufzuwecken. Wie realistisch und genau die ausgegebenen Daten sind und vorallem wie effektiv die App ihre Aufgabe an sich lösen kann, lässt sich sicher streiten. Man erkennt aber durchaus wie ruhig mein Schlaf in einer Nacht gewesen ist. Vergleicht man beispielsweise die beiden Nächte Di.–Mi. und Fr.–Sa. miteinander erkennt man sofort, welche Nacht erholsamer gewesen ist.

Gestaltung Die Gestaltung der Infografik ist simpel und grafisch und verzichtet auf illustrative Ansätze oder Effekte. Die Visualisierung der einzelnen Nächte erfolgt linear. Innerhalb der Zeitleiste werden die Parameter »nicht im Bett«, »wach im Bett«, »leichter Schlaf«, »Tiefschlaf« und die gemessenen Aktivitäten dargestellt. Die drei wichtigsten Informationen (in welche Schlaftphase man sich befindet) werden durch dicke, flächige Balken dargestellt, durch Farbigkeit und räumliche Anordnung differenziert und somit schneller erfassbar gemacht. Auf diesen Balken läuft eine weiße Linie, die Intensität der gemessenen Geräusche und Bewegungen aufzeigt. Unter den fünf einzelnen Nächten sind die durchschnittliche Nacht und die sich daraus ergebenen Durchschnittswerte dargestellt.

Aufgabe Als Einstieg in das Thema »Pixel vs. Vector« sammelten wir fotografisch verschiedene Pixelschriften in deren Kontext, stellten unsere Ergebnisse einander vor und analysierten diese im Anschluss gemeinsam. Darauf begannen wir mit dem Entwurf unserer eigenen Raster- und Pixelschriften, wobei uns freigestellt blieb, ob wir uns eines klassischen Pixelrasters bedienen oder selbst ein neues entwickeln.

Ingrid

Raster Ausgehend von einem sich überlagernden Kreisraster entstand die Rastschrift »Ingrid«. Um Eigenständigkeit zu erlangen, arbeitete ich innerhalb des Rasters sehr streng nur mit 0°-, 45°- und 90°-Linien. Zu Beginn der Entwicklung wurden lediglich Kreise verwendet, sodass die ersten Buchstaben noch einen sehr gepunkteten Charakter besaßen. Ich entschloss mich, die horizontalen und vertikalen Linien und im nächsten Schritt auch die diagonalen 45° Linien zu geschlossenen Strichen zu verbinden. Bei Ingrid kann man also weniger von einem Pixel- als vielmehr von einem Rasterfont sprechen. Eine zweite Variante, bei der die 45°-Linien nicht miteinander verbunden sind und die dadurch mehr an einen Pixelfont erinnert, wurde ebenfalls erstellt.

Gestaltung Durch das Kreisraster und die dadurch entstehenden runden Strichenden erhält die Schrift trotz ihrer Rasterkonstruktion einen weichen Charakter. Dies habe ich bei der Formen- und Kurvenfindung versucht zu unterstreichen, um einen eigenständigen Charakter zu erzeugen.

Die Weiterentwicklung, der Ausbau der Glyphenpalette (v.a. Großbuchstaben) und auch die Optimierung der Kleinbuchstaben (Linienübergänge, ein zu kleiner i-Punkt, der r ist auch grauenhaft …) ist geplant. Eine Überlegung wäre außerdem, aus Ingrid eine monospaced Schrift zu machen. Vielleicht könnte man auch in Erwägung ziehen, die Strenge des Rasters ein wenig zu lockern und die Linienführung etwas flexibler gestalten

Copyright

©Julian Thiel

Raster

Copyright

©Julian Thiel

Bisherige Glyphen von Ingrid-A

Copyright

©Julian Thiel

Anwendung des Raster vor dem letzten Entwicklungsschritt. Die 45°-Linien wurden hier noch nicht miteinander verbunden.

Copyright

©Julian Thiel

Glypenpalette von Ingrid-B

Aufgabe Aufgabe des dritten Teilabschnittes des Kurses war eine Piktogramm-Familie zu gestalten. Die Thematik wurde uns völlig freigestellt und einzige Anforderung war, ein Icon-Set zu entwickeln, welches in sich zu einander passte und eine gemeinsame Formensprache besitzt.

Die fünf Sinne

Das entworfene Iconset stellt die fünf Wahrnehmungssinne des Menschen dar. Auch hierfür diente als Grundlage das selbe Kreisraster mit den selben strengen Vorgaben wie bei der Entwicklung des Rasterfonts: eine Strichstärke, abgerundete Ecken und Strichenden und sämtliche Linien nur 0°-, 45° und 90°-Winkeln. Die so entstandene Anmutung besitzt auch hier ein hohes Maß an Eigenständigkeit und Wiedererkennung, sodass sich der Zeichenstil hervorragend für z.B. die Platzierung innerhalb eines passenden Corporate Designs eignen würden.

Unabhängig davon wie hoch der Nutzen eines solchen Rasters ist, denke ich, sollte man sich in manch Hinblick davon lösen, um ein optimaleres Ergebnis zu erzielen: Das in dem Titel der Dokumentation verwendete Auge besitzt beispielsweise in den oberen Strichen eine andere Winkelführung. Dies verbessert das Piktogramm im Detail erheblich ohne dabei die Anmutung und die Formensprache zu zerstören.

Copyright

©Julian Thiel

Raster

Copyright

©Julian Thiel

Sehen

Copyright

©Julian Thiel

Hören

Copyright

©Julian Thiel

Schmecken

Copyright

©Julian Thiel

Fühlen

Copyright

©Julian Thiel

Riechen

Aufgabe Innerhalb eines Usecases soll die Interaktion zwischen Nutzer und System anhand eines Buttons veranschaulicht werden. Dabei ist das Aufzeigen der Möglichkeiten, wie unterschiedliche Zustände aussehen und sich verhalten könnten, anhand von drei Beispielen wichtig.

Interaktivität zwischen User und System Die entstandenen Buttons stellen den Entwurf einer grundsätzlichen Schaltfläche auf einem Desktop Computer dar. Die Beispiele zeigen, dass ein filigraner Gestaltungsunterschied ausreichen kann, um Bedienelemente von Inhalt zu differenzieren. So kann es unter Umständen auf einer rein textlastigen Seite ausreichen, Links alleine durch Unterstreichnung zu kennzeichnen. Beim Entwerfen wurde nicht nur der Button an sich berücksichtigt, sondern auch der Cursor. So ist es – systemunabhängig – auch möglich, statt der üblichen Hand, Pfeile einzusetzen, die beispielsweise in die Richtung zeigen, in der die Schaltfläche gedrückt wird.

Schnell erkennt man allerdings schon die Problematik bei einem allgemeinen Entwurf von Schaltflächen: eine gute Gestaltung und ihre Bewertung ist immer abhängig vom Kontext. Daher stellte ich die Schaltfläche in den Kontext einer Einkauf-Applikation. Dazu diente der »In den Warenkorb«-Button. Die Überlegungen aus der ersten Phase wandte ich auf die Gestaltung an, um zusätzlich nach Drücken des Buttons noch den Effekt eines Soges hinzuzufügen, der sozusagen das Produkt in den Warenkorb fallen lässt.

Rückblickend haben mir der Kurs und vorallem die Bearbeitung der verschiedenen Aufgaben sehr viel Spaß bereitet und mich in verschiedene Richtungen weiterentwickeln lassen. Der Input in Form von Präsentationen und Vorlesungen gefiel mir gut. Insgesamt hätten vielleicht die Zwischenpräsentationen der Aufgaben noch ein wenig kritischer betrachtet werden können. Trotzdem war mein Lernfaktor hoch.

Abgesehen vom [Basics Interface Kurs von Boris Müller](https://incom.org/projekt/3139 „https://incom.org/projekt/3139“) hatte ich mich bisher leider nicht mit Informationsvisualisierung in solch freier Form jenseits von Balken-, Torten- und Kreisdiagrammen beschäftigen können. Das hat mir sehr viel Spaß gemacht und ging auch überraschenderweise recht locker von der Hand. Dies ist auf jeden Fall ein Bereich, mit dem ich mich noch mehr auseinandersetzen möchte. Die Gestaltung der Schrift hat mich mit Abstand am meisten Zeit gekostet, was aber auch in der Natur der Sache liegt. Hier konnte ich allerdings lernen, wie flexibel ein auf den ersten Blick strenges Raster doch sein kann und welch eigenständige Ergebnisse sich damit erzielen lassen. Typedesign ist ohnehin ein Bereich, in den ich sehr viel Zeit investiere und die Schrift soll auf jeden Fall noch weiterentwickelt werden. Für Aufgabe Drei gilt eigentlich das selbe wie für vorherige Aufgabe. Ich habe schon einige Icons entworfen, jedoch keine mit einem solchen Maß an Wiedererkennung wie dieses Set. Geschuldet ist dies natürlich alleine dem Raster. Aufgabe Vier hat mir dagegen am wenigsten gefallen. Warum, kann ich gar nicht mal genau sagen – vielleicht hätte ich mich im Anwendungskontext weiter einschränken sollen. Nichtsdestotrotz sehe ich natürlich den hohen Nutzen und die Relevanz, die einer Schaltfläche und die damit entstehenden Interaktionen zugeschrieben wird.

Alles in allem: Vielen Dank für den gelungenen Kurs.