Visual Dynamics

Dokumentation

Martin von Siebenthal

Riccardo Lardi

Zürcher Hochschule der Künste

Interaction Design
2. Semester
FS 2010

Gestalterische Grundlagen II
Prof. Jürgen Späth
Inhaltsverzeichnis Dokumentation | Martin von Siebenthal | Riccardo Lardi

Aufgabenstellung

Themensuche

Spezifizierung

Konzipierung

Umsetzung

Fazit

2
Aufgabenstellung Dokumentation | Martin von Siebenthal | Riccardo Lardi

Mit dem Slogan „EXPLORE THE WORLD“ vor Augen sollte eine Touchscreen
basierte Applikation, die auf eine Wand projeziert werden sollte, entworfen
werden, mit welcher der Benutzer mit von uns ausgewählten Daten interagie-
ren können sollte.

Die primäre Zielsetzung bestand also darin, eine Möglichkeit zu bieten, über
Gesten durch die dargestellten Informationen zu navigieren, aber auch diese
auf eine interessante Art und Weise manipulieren zu können.

Es sollte Wert darauf gelegt werden, die Visualisierung so simpel und dadurch
so verständlich wie möglich zu halten, sowie auch die Interaktionsmöglich-
keiten möglichst intuitiv zu gestalten. Der Umgang mit der Anwendung sollte
selbstverständlich und dadurch auch mit einem positiven Erlebnis verbunden
sein.

Das Vorgehen wurde so geplant, dass als erstes die Recherche und Informa-
tionssuche getätigt werden sollte, bevor es mit der Konzipierungs- und Ent-
wurfsphase weitergehen und schlussendlich die finale Umsetzung in Form
eines „Fakes“ erfolgen sollte. Dieser „Fake“ sollte in Form eines Filmes den
Sinn und Zweck, die Funktionsweise und die dazugehörigen Interaktionsges-
ten aufzeigen und verständlich machen.

3
Themensuche Dokumentation | Martin von Siebenthal | Riccardo Lardi

Um ein geeignetes Thema für unsere Arbeit zu finden, besuchten wir die Da-
tenbank von Gapminder (www.gapminder.org) und schrieben uns interessante
Datensätze heraus. Folgende Themen interessierten uns:

Air accidents
Arms export / import
Aviation kilometers
Cell phones
CO2 emissions
Earthquakes
Electricity / Energy Use
External debts
Internet
Oil
Personal Computers
Unemployment rate
Water
Working hours

Wir entschieden uns für das Thema Wasser, da Wasser zu den wichtigsten Re-
sourcen zählt und je länger desto wichtiger wird.

Durch die Datensätze auf Gapminder stiessen wir auf die FAO (Food and Agri-
culture Organisation of the United Nations, www.fao.org), wo weitere Datensät-
ze zum Thema Wasser zu finden waren.

4
Spezifizierung Dokumentation | Martin von Siebenthal | Riccardo Lardi

Wir hatten uns also auf das Thema Wasser geeinigt und hatten unzählige Da-
tensätze dazu. Jetzt ging es darum das Thema einzugrenzen. Wir informier-
ten uns deshalb auf der FAO-Webseite, welche Probleme zum Thema Wasser
existierten, um dann eines dieser Probleme anhand von Daten visualisieren zu
können. Wir stiessen auf folgende Probleme:

Essen benötigt in der Produktion immer mehr Wasser.

70% des Wasserverbrauchs wird für die Landwirtschaft gebraucht.
Die Bevölkerung nimmt stehts zu.
Der Wasserverbrauch verdoppelt sich in den nächsten 50 Jahren.
Es gibt immer mehr Dürre- und Fluten.
Der Zugang zu Wasser ist nicht für alle Menschen gewährleistet.
Eingriffe in den Wasserkreislauf verändern das Ökosystem.
Wasser kostet in ärmeren Ländern zum Teil mehr als in reicheren Ländern.
0,78 % der gesamten Wasserresourcen sind für uns direkt nutzbar.

Am eindrücklichsten erschienen uns die Zahlen zum Wasserverbrauch für die

Essensproduktion. So benötigt zum Beispiel ein Hamburger in der Produkti-
on 2400 Liter Wasser, ein Kilogramm Getreide 1500 Liter und ein Kilogramm
Fleisch gar 15000 Liter. Da uns diese Zahlen bisher nicht bekannt waren und
wohl den meisten Menschen auch nicht bekannt sind, fokussierten wir uns auf
die Problemstellung der Essensproduktion.

5
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 01

Unser erstes Konzept beinhaltete mehrere Datensätze und Interaktionsmög- Bei all den Überlegungen zu den Daten vernachlässigten wir die Visualisie-
lichkeiten. Es wurde das Jahr, der Wasserverbauch, die verfügbaren Wasser- rung. Die Daten wurden per Säulendiagramme und Weltkarte dargestellt, was
resourcen, der Wasserverbrauch, der Fleisch- und Getreidekonsum angezeigt. nicht sehr innovativ ist. Wir versuchten deshalb in einem nächsten Schritt die
All diese Daten sollten dynamisch veränderbar sein. Daten zu reduzieren.

Oben in der Mitte kann das Jahr angewählt wer- Wenn auf der Karte ein Land angewählt wird, be- Beim Tippen auf ein Parameter wird auf der Karte
den. Auf der rechten Seite befindet sich der Ge- ziehen sich die Zahlen bei den Parametern auf die Verteilung des gewählten Parameters ange-
samtwasserverbrauch im Verhältnis zu den vor- das selektierte Land. zeigt. Je dunkler desto höher der Wert.
handenen Resourcen. Im unteren Bereich sind
die Parameter wie Wasserverbauch, Fleisch- und
Getreidekonsum pro Kopf.

6
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 02

Nach dem ersten Konzept versuchten wir weniger in die Tiefe zu gehen, son-
dern den Schwerpunkt auf die Visualisierung zu legen. Wir erstellten daher
mehrere Konzepte mit unterschiedlichen Interaktionsmöglichkeiten. Dies ist
das erste davon.

Das Ziel des Konzepts ist, den Unterschied zwi- Der Benutzer hat drei Möglichkeiten: Er lässt Bei der Wahl der grössten Fleischkonsumenten
schen dem Wasserverbrauch pro Kopf und dem sich die Länder mit dem höchsten oder mit dem werden diese in absteigender Reihenfolge darge-
Wasserverbrauch für die Fleischproduktion auf- kleinsten Fleischkonsum anzeigen oder kann sel- stellt. Durch antippen der Pfeile links und rechts
zuzeigen. Wir haben dafür zwei Kreise vorgese- ber Länder auswählen und vergleichen. kann zurück bzw. weiter navigiert werden.
hen. Der innere und kleinere Kreis steht für den
Wasserverbauch pro Kopf, der äussere und grös-
sere Kreis für den Wasserverbauch der Fleisch-
produktion pro Kopf.

7
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 02

Es gab zwei Hauptprobleme bei diesem Konzept. Das eine war, dass die Inter-
aktion auf verschiedenen Screens stattfand und der Benutzer zwischen diesen
Screens wechseln musste. Das andere Problem war, dass die Visualisierung
relativ emotionslos daher kam.

Bei der Wahl der geringsten Fleischverbraucher Bei der manuellen Selektion kann der Benutzer Die Länder werden dann in der selektierten Rei-
werden die neun Länder in aufsteigender Reihen- anhand einer Karte oder per Texteingabe Länder henfolge angezeigt. Der Benutzer hat die Mög-
folge angezeigt. auswählen und in einem nächsten Schritt mitein- lichkeit eine neue Suche zu starten oder zurück
ander vergleichen. zum Homescreen zu gelangen.

8
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 03

Der Kerngedanke bei diesem Konzept war den Übergang zwischen einzelnen Es ist zwar spannend wie vom Grossen fliessend ins Kleine gewechselt wird,
Screens spannender und fliessender zu gestalten. Der Inhalt ist nebensächlich jedoch ist die Interaktion langweilig. Wir wollten deshalb eine spannendere
und könnte durch etwas anderes ersetzt werden. Interaktion herausfinden, die man mit diesem Konzept kombinieren könnte.

Zu Beginn wird ein grosser Wasserfleck angezeigt,
welcher den Gesamtwasservorrat der Erde sym-
bolisiert. Wenn eine Interaktion mit dem Screen
stattfindet (z.B. Tippen) teilt sich der Wasserfleck
in Salz- und Süsswasser. Es wird klar, dass Süss-
wasser nur ein sehr kleiner Teil der Gesamtmen-
ge ausmacht. Es wird auf den Süsswasserfleck
gezoomt.
Wiederum nach einer Interaktion teilt sich der
Fleck in drei Teile: Gletscher, Grundwasser, Seen/
Flüsse. Das ist die Verteilung des Süsswassers
auf der Erde. Das Grundwasser fliesst mit Seen/
Flüsse zusammen und wird herangezoomt.
Nach einer weiteren Interaktion trennen sich
mehrere Teile ab und zeigen das Verhältnis des
Wasserverbauchs der verschiedenen Kontinen-
ten.

9
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 04

Der Schwerpunkt lag bei diesem Konzept auf der Interaktion. Es wäre eine
Möglichkeit gewesen, diese Interaktion mit dem Konzept 03 zu kombinieren.

Der Benutzer sieht eine Weltkarte mit den Konti- Er teilt das Wasser unter den Kontinenten auf, wie Zum Schluss wird dem Benutzer angezeigt, wie
nenten und eine gewisse Menge Wasser vor sich. er den Verbrauch einschätzen würde. die Verteilung richtig gewesen wäre.
Er kann das Wasser mit den Händen teilen und
verschieben.

10
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 05

Ein weiteres Konzept, bei welchem wieder mehr der Inhalt im Vordergrund Das Problem war, dass das zur Verfügung stehende Wasser den Eindruck er-
stand ist das folgende. Es zeigt grundsätzlich das virtuelle Wasser in verschie- wecken könnte, wir hätten noch mehr als genug Wasser. Es werden jedoch ne-
denen Esswaren und vergleicht die Menge miteinander. Zusätzlich ist das zur ben Esswaren auch in anderen Sektoren noch Wasser gebraucht, was in dieser
Verfügung stehende Wasser ersichtlich. Darstellung nicht ersichtlich war.

Man kann diverse Esswaren in die Dropzone zie- In der linken Spalte wählt man die Anzahl aus. Beim Hinzufügen weiterer Esswaren kann der
hen. Dann verändert sich der Wasserverbrauch. Die Wasserverbauch anhand der Icons miteinander
linke Wassersäule zeigt an wie viel Wasser ge- verglichen werden.
braucht wird. Die Anzahl von Symbolen wieder-
spiegelt auch den Wasserverbauch. Ein Symbol
könnte zum Beispiel 10 Liter sein.

11
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 06

Da in Konzept 05 der Hamburger am meisten Eindruck machte, beschlossen Das Konzept war auf den ersten Blick nicht verständlich. Wir haben es deshalb
wir uns auf den Wasserverbauch in Fleisch zu beschränken. Zudem hatten wir weiter ausgearbeitet.
eine Statistik gefunden, die den Fleischkonsum für alle Länder pro Kopf auf-
zeigt.

Es existieren vier Zeilen und vier Spalten. In der
ersten Zeile ist ersichtlich, welche Länder ausge-
wählt sind. In der zweiten Zeile, auf was sich der
Wasserverbauch bezieht. In der dritten Zeile den
Wasserverbauch.
In der Spalte ganz rechts können Länder ausge- Der Fleischkonsum kann auch manuell angepasst
wählt und per Drag und Drop in die Zonen bewegt werden.
werden. Es wird der Fleischkonsum, das benö-
tigte Wasser und den Wasserverbauch im Haus-
halt pro Kopf dargestellt. In der vierten Zeile ist
ersichtlich, wie viele Personen im Haushalt von
dem für die Produktion gebrauchten Wasser le-
ben könnten.

12
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Konzept 07

Aufgrund des Konzepts 06 haben wir eine neue Darstellung ausgearbeitet, Es war immer noch verwirrend, dass der Fleischkonsum direkt mit dem Was-
welche den selben Inhalt vermitteln soll: Die Beziehung zwischen Wasser für serverbrauch im Haushalt verglichen wurde. Zudem nahm die Karte zu stark
die Fleischproduktion und Wasserverbauch im Haushalt. gewichtet. Dies führte uns zu unserem finalen Konzept.

Man wählt per Drag & Drop ein Land aus der Karte
aus und wirft es in den Teller, um den Fleischkon-
sum oder in das Glas, um den Wasserverbauch im
Haushalt anzuzeigen.
Aus dem Fleisch heraus sticht eine Wassersäule,
die das virtuelle Wasser im Fleisch indiziert. Zwi-
schen Teller und Glas erscheint ein Pfeil, auf wel-
chen man tippen kann.
Beim Tippen auf den Pfeil wird dargestellt, wie-
viele Personen für einen Tag in dem Land, wel-
ches ins Glas gezogen wurde, von dem virtuellen
Wasser des Fleischkonsums des anderen Landes
leben könnten.

13
Konzepte Dokumentation | Martin von Siebenthal | Riccardo Lardi

Finales Konzept

Das Finale Konzept basierte auf den Konzepten 06 und 07 und natürlich auf Wir haben für beide Länder, die miteinander verglichen werden, den Fleisch-
den Erfahrungen, die wir bei allen Konzepten gemacht hatten. Das Ziel war verbauch und den Wasserverbauch im Haushalt dargestellt. Die Länder wer-
eine reduzierte Visualisierung mit einfachen Interaktionen und einem grossen den nicht mehr mittels Karte, sondern durch eine Auswahl am unteren Bild-
Realitätsbezug, um die Emotionen anregen zu können. rand selektiert.

Am Anfang werden zwei zufällige Länder ausge-
wählt und die Zahlen dazu angezeigt.
Der Benutzer kann nun durch tippen und schie-
ben ein anderes Land wählen. Die Statistiken pas-
sen sich simultan zur Auswahl an.
Es kann auch direkt die Grösse des Fleischkon-
sums oder des Wasserverbauchs im Haushalt
skaliert werden. In dem Falle springt die Statistik
zum nächst grösserem/kleinerem Fleischkonsu-
menten bzw. Wasserverbraucher.

14
Umsetzung Dokumentation | Martin von Siebenthal | Riccardo Lardi

Für die Realisierung unseres Konzeptes entschieden wir uns nach reichlicher
Überlegung für eine Umsetzung mithilfe einer 3d Rendering Software (Cinema
4D). Unsere Vorstellungen von der Art, wie die Daten visualisiert werden soll-
ten, liessen sich auf diesem Weg am besten und effizientesten verwirklichen.
Ausserdem waren so die Animationsvorgänge und damit die Interaktionen gut
und einfach veranschaulich- und realisierbar.

15
Umsetzung Dokumentation | Martin von Siebenthal | Riccardo Lardi

16
Umsetzung Dokumentation | Martin von Siebenthal | Riccardo Lardi

17
Fazit Dokumentation | Martin von Siebenthal | Riccardo Lardi

Abschliessend bleibt zu sagen, dass wir den Kurs als sehr inspirierend hin-
sichtlich vieler Dinge empfunden haben. Beispielsweise das Recherchieren
von interessanten Daten bzw. Statistiken - man stösst unweigerlich auf span-
nende Fakten, die man bisher nicht kannte - so entstanden einerseits viele
„wow“-Momente, andererseits fühlte man sich bisweilen fast erschlagen von
der Fülle an Information.

Ferner die Konzipierungs- und Entwurfphase, welche uns als gute Übung im
Handwerk des Prototyping in Skizzierform und des Erstellen von Storyboards
in Erinnerung bleiben wird.

Schlussendlich die Umsetzung der Interaktionsmöglichkeiten, bei welcher wir

versuchten, uns auf Wesentlichkeiten und auf die Selbstverständlichkeit der
Bedienung zu fokussieren.

Als noch auszuarbeitende bzw. zusätzlich zu implementierende Punkte gehört

folgendes:
- Animationen mit Sound untermalen
- Stufenloses Skalieren der Werte
- Dynamisches Ändern der Zahlen

18