Kunzmann_Eva (Block II)

Vorüberlegungen

Der Cursor ist das Werkzeug, mit dem der User unmittelbaren und meist intuitiv Einfluss auf das Geschehen auf dem Screen nehmen kann – eine für den Computer verständliche Hand, wenn man so will. Anhand dieser Assoziation ist zunächst zu überlegen mittels welcher Handbewegungen mit Gegenständen im realen Alltag interagiert wird. Im nächsten Schritt muss festgestellt werden, auf welche Weise sich diese abstrakter und mit einer Computermaus umsetzen lassen.

Mausinteraktion: Ziehen

Ziehen bedeutet: etwas in der eigenen Bewegungsrichtung in gleichmäßiger Bewegung bewegen. Damit man an etwas ziehen kann, muss man es festhalten und zwar über die gesamte Dauer des Prozesses. Deshalb ist der Gebrauch der Funktion mouseDragged() naheliegend.

Die nachfolgenden Screenshots zeigen Ausschnitte aus einem Programm, das beliebig viele Rechteck-Objekte erstellt, die mithilfe des Cursors unabhängig von einander ausgewählt werden können. Trifft der Mauszeiger (nur Mausbewegung) auf ein Objekt, so wird dieses transparent weiß gefüllt und beginnt zu zittern, als würde es gekitzelt. Bei gedrückter linker Maustaste ist es möglich, das Objekt zu greifen und an einen beliebigen Punkt zu ziehen.

Mausinteraktion: Drücken

Im Alltag drückt man auf Dinge mit der Erwartungshaltung, dass dieser Druck etwas Bestimmtes auslöst. Zum Beispiel auf einen Lichtschalter, der beim ersten Drücken das Licht anstellt und es bei erneutem Drücken wieder ausmacht. Am Computer lässt sich diese Interaktion durch Klicken imitieren.

In folgendem Beispiel wird das Lichtschalter-Szenario aufgegriffen. Auf der Leinwand befinden sich Kreise, die mögliche Lichtquellen darstellen. Zunächst ist nichts zu sehen, der Betrachter befindet sich sozusagen im Dunkeln. Fährt man mit dem Cursor über diese Kreise wird das Objekt, über dem er sich befindet erkennbar. Auf diese Weise kann man nach einem Lichtschalter „tasten“. Mit einem Klick geht dann das Licht an, der Kreis füllt sich weiß und das solange, bis ein zweites Mal auf denselben Kreis geklickt wird.

Mausinteraktion: Drehen

Für diese Interaktion wurde die Funktion mouseWheel() genutzt. Auf der Grundlage von Linien-Objekten, die ihre Länge entsprechend ihrer vertikalen Position auf der Leinwand anpassen, ist es dem User mithilfe des Mausrads möglich, durch die Objekte zu navigieren, sie weiter zu drehen.

Eine Drehung ist eine kreisförmige Bewegung, weswegen dieselben Elemente immer wiederkehren. Um dies zu gewährleisten, tauchen dieselben Linien-Objekte, die aus dem sichtbaren Bereich „herausgedreht“ wurden, bei einer X-Position von null immer wieder auf.

Um diese imitierte Drehbewegung zu veranschaulichen, ist eine der Linien eingefärbt.

Konzeption: Entwürfe

Im Folgenden werden aus den Interaktionsstudien abgeleitete Konzeptionen gezeigt, die den Datensatz, dessen Aufbereitung und Interaktion vereinen sollen.

Es handelt sich um Skizzen, die zunächst der Entscheidungsfindung, welche Ansätze weiterzuverfolgen sind, dienen.

Wetterdaten im Vergleich

Die Darstellung skizziert eine interaktive Datenvisualisierung, die es dem Betrachter ermöglichen soll, verschiedene Aspekte des Wetters mit einander in Relation zu setzen.

Die Quadrate vor den Schlagworten im linken unteren Teil der Grafik sollen in das Feld, das die Daten abbildet, gezogen werden können. Mit dieser Mechanik soll der User seine eigene Auswahl treffen können und die Gelegenheit haben, verschiedene Parameter mit einander zu vergleichen.

Die Mechanik im rechten unteren Teil der Grafik soll anzeigen, welches Jahr im Augenblick betrachtet wird. Anhand des Mausrades soll innerhalb der Jahre navigiert werden können.

Außerdem soll ein Doppelklick die Daten der Parameter sortieren, sodass sie nicht länger über die Zeitachse, sondern entsprechend ihrer Werte angeordnet sind.

„Wetterpegel“

Verschiedene Aspekte des Datensatzes sollen als Lautstärkepegel und zusätzlich über Sound dargestellt werden. Dieselbe Scrollnavigation wie im vorhergehenden Beispiel dient, um zwischen den Jahren wechseln zu können.

Mithilfe der Regler sollen die Frequenzen anpassbar gemacht werden, sodass der User anhand der präsentierten Wetterdaten seine eigenen Klänge zusammenmischen kann.

Lösung von Teilproblemen

Die oben angeführten Konzepte können Form verschiedener Teilprobleme betrachtet werden, die es zur Umsetzung im Folgenden zu lösen gilt.

Hierbei steht zunächst die Realisierung der einzelnen Interaktionsmechaniken im Vordergrund. Design ist daher vorerst nebensächlich.

Scroll-Navigation

Hier ist die scrollbare Navigation durch die Jahre technisch gelöst worden.

Dreht der Benutzer das Mausrad nach unten, springt die Selektion nach rechts, das betrachtete Jahr ist das jeweils nächste. Sobald aus der Navigation herausgescrollt würde, befindet sich die Selektion wieder am Anfang und Daten für das Jahr 2009 werden wieder angezeigt.

Genauso, nur umgekehrt verhält sich die Interaktionsmechanik, wenn das Mausrad nach oben gedreht wird.

Soundpegel & (erste) Regler

Nach der Festlegung auf das Konzept der „Wetterpegel“, sollten zunächst die Bezugspegel visualisiert werden. Um das Problem, dass ein einziges Rechteck nicht mit verschiedenen Farben gefüllt werden kann, zu umgehen, werden mittels einer Schleife – dem abzubildenden Wert entsprechend viele – Rechtecke gezeichnet. Wird eine Bestimmte Anzahl an Rechtecken überschritten, wird deren Farbe angepasst.

Die Regler, die später der Sound-Manipulation dienen sollen, werden heller, wenn man mit der Maus darüberfährt und lassen sich bei gedrückter Maustaste entlang der Linie nach oben und unten verschieben.

Umsetzung

Bei der Umsetzung stehen Visualisierung der Daten als Soundpegel, Klang sowie der ästhetisch ansprechende Aufbau der interaktiven Grafik im Vordergrund.

Zunächst werden die Daten an die, mittels der Sound-Library Tone.js, Frequenzen der erzeugten Töne gekoppelt, wobei sich schnell gezeigt hat, dass die vier ursprünglich geplanten Sounds zu einem überaus intensiven Klangerlebnis führen. Aus diesem Grund wird die Idee aus dem Konzept angepasst und nur auf drei verschiedene Datenbereiche reduziert: Windgeschwindigkeit, Sonnenstunden und Durchschnittstemperatur.

Nach dem Treffen dieser Auswahl ist zu überlegen, welche Klänge erzeugt werden und wie sie anhand der Regler und anderen Interaktionen moduliert werden sollen. Dabei werden den drei Aspekten unterschiedliche Frequenzkurven zugeordnet. Die Windgeschwindigkeit wird über einen Sinuston, die Sonnenstunden als Dreieck- und die Temperaturen als Quadratschwingungen hörbar gemacht.

Gestaltung des Labels

Um die interaktive Datenvisualisierung abzurunden gilt es, eine stimmige Schriftart zu finden. In diesem Fall Roboto, da es sich um eine cleane serifenlose Schriftart handelt, die eine Varianz an Schnitten mit sich bringt und auch bei ihrer Nutzung im Code mit einer guten Performance im Chrome-Browser zu rechnen ist.

Label und Icons, die die abgebildeten Werte repräsentieren, werden auf dem Hintergrundbild gestaltet. Im Folgenden sind eine Auswahl verschiedener Label-Variationen sowie der ausgestaltete Hintergrund mit Label und Icons zu sehen.

Zusammensetzen der Komponenten

Schließlich werden Hintergrund, Datenvisualisierung, Sound, interaktive Komponenten und im Code generierter Beschreibungstext zusammengebracht.

Der erste Regler manipuliert den Klang der Winddaten und greift auf einen Multiplikationsfaktor der Frequenz zu, sodass der durch die Daten generierte Ton höher wird, wenn man den Regler nach oben zieht und tiefer, wenn man ihn in die entgegengesetzte Richtung bewegt. So verhält es sich auch beim dritten Regler, der auf die Temperaturwerte zugreift. Der mittlere Regler gibt einen Schwellwert vor, der überschritten werden muss, dass der von den Informationen über die Sonnenstunden erzeugte Ton abgespielt wird. Je weiter unten sich der Regler befindet, desto niedriger ist dieser Schwellwert und umgekehrt.

Mithilfe der Leertaste lässt sich die Visualisierung starten – und an einer beliebigen Stelle anhalten. Die Nummerntasten von eins bis neun ermöglichen es dem Betrachter, von Jahr zu Jahr zu wechseln. Die Mausradinteraktion entscheidet über die Geschwindigkeit, in der Grafik und Töne abgespielt werden. Der reduzierten Darstellung entsprechend wird auf grafische Elemente zur Verdeutlichung dieser Interaktionen verzichtet. Stattdessen befinden sich unter dem Label Hinweise für den Benutzer.

Der Hinweis über die mögliche Verwendung des Keyboards verschwindet, nachdem eine Taste gedrückt worden ist. Ebenso der Scroll-Hinweis nach einer Mausradinteraktion. Hat der Nutzer beides ausprobiert, verschwindet auch die Überschrift „Instructions“.

Unterhalb der Bedienungsanweisung befinden sich detaillierte Angaben zu den hörbargemachten Werten und zum aktuellen Datum.

Ergebnis

In der finalen Visualisierung bleiben die Bedienungshinweise stehen. Außerdem wird die Darstellung der Pegel im Code mit individuellen Zoom-Faktoren angepasst, sodass ein ruhigeres Bild für den Betrachter entsteht.

Wichtig ist in Anbetracht des Sounds, dass die Daten im Vordergrund stehen. Deshalb geben sie – nicht nur im übertragenen Sinn – den Ton an.

Im Nachfolgenden sind die Interaktionsmöglichkeiten noch einmal zusammengefasst: