Road to Bachelor | Ein erster Versuch
682
post-template-default,single,single-post,postid-682,single-format-standard,ajax_fade,page_not_loaded,,qode-title-hidden,qode-theme-ver-10.1,wpb-js-composer js-comp-ver-5.0.1,vc_responsive
mockup_16-9

Ein erster Versuch

Nach der Erarbeitung der Variablen und reichlich Inspiration, möchte ich nun einen ersten Versuch durchführen, wie sich diese in visueller Form darstellen lassen. Folgendes Ergebnis stellte sich heraus:

Visualisierung_1280x720

Eine kurze Erläuterung dieser fiktiven Darstellung der Interaktionen: Der Mauspfad wird in Form einer permanenten Linie dargestellt. Die Strichstärke ist abhängig von der Geschwindigkeit der Maus. Klicks werden in Form von Punkten, an der jeweiligen Koordinate visualisiert. Wenn die Klicks innerhalb eines gewissen Zeitintervalls stattfinden, verbinden sich alle entsprechenden Punkte mit Linien zu einer Art Netz. Somit würden Klickzusammenhänge deutlich werden. Sollte ein Stillstand stattfinden werden an der Koordinate der Maus immer größer werdende Kreise in einem bestimmten Zeitintervall generiert. Scrolling dupliziert alle bisher generierten Formen in die jeweilige Scrollrichtung mit einer pro Schritt abnehmenden Deckkraft von 10% ausgehendend von 50% beim ersten Schritt. Die minimale Deckkraft beträgt dabei jedoch 10%. Somit wird verhindert, dass die komplette Fläche beim Scrolling vollgezeichnet wird. Der Effekt tritt jedoch nur solange ein, bis eine andere Aktion ausser Scrolling durchgeführt wird. Der Effekt bezieht sich also immer nur auf alle generierten Objekte, welche seit dem letzten Scrolling entstanden sind.

Nun zum Farbeinsatz. Abhängig von den HTML-Bereichen, in welchen sich der Cursor befindet, werden die jeweiligen Objekte gefärbt. In diesem Beispiel stände das grün für <nav></nav> das Cyan für <p></p>, das pink für <img></img> und das orange für <a></a>. Alle Aktionen, die sich nur im <body></body> abspielen bleiben weiß. Die Zeichenfläche sollte mit Hinblick auf die Black Box einen sehr dunklen Hintergrund haben, um mehr Spiegelungen zu erreichen. Der apm-Wert beeinflusst die Sättigung der kompletten Komposition. Wenn man sich der Benutzer also sehr aktiv verhält beginnen die Farben stark zu leuchten. Wenn er dahingegen sehr inaktiv ist, kann sogar eine komplett schwarz-weiße Anordnung entstehen. In diesem Beispiel liegt die Sättigung bei 70%. Also ein eher aktiver Benutzer.

Die Letteranordnungen stellen das Schreiben dar. Je kleiner die vergangene Zeit seit dem letzten Tastaturanschlag ist, desto höher wird der geschriebene Buchstabe auf der X-Achse platziert. In diesem Beispiel wurde also relativ schnell geschrieben, weil sich die Buchstaben im oberen Drittel der Zeichenfläche anordnen. Ziel dabei ist es nicht, das Geschriebene noch lesen zu können, sondern anhand der visuellen Abstraktionen Interaktionen interpretieren zu können. In diesem Fall die Geschwindigkeit des Schreibens.

In einem hinterfragenden Feedback-Gespräch mit meinem Betreuer Prof. Frank Rief kamen wir zu dem Ergebnis, dass ich mich bei diesem Versuch jedoch viel zu sehr selbst eingeschränkt habe. Ich habe mich bei jeder Visualisierung hinterfragt, ob ich in der Lage bin dies auch technisch umsetzen können. Möglicherweise war ich von der Datenerfassung noch zu stark voreingenommen. Den Ästhetischen Aspekt, welcher eine viel größere Rolle spielt, habe ich dabei komplett aus den Augen verloren. Der richtige Ansatz ist es einen hohen ästhetischen Maßstab zu setzen und dann zu überlegen, wie man diesen technisch umsetzen könnte. Nicht umgekehrt, wie in meinem ersten Ansatz. Dementsprechend möchte ich mich nochmal frei vom Aspekt der »Machbarkeit« auf die Suche nach neuen Inspirationen begeben.

 

2 Kommentare

Schreibe einen Kommentar