Wir kamen recht früh zu dem Schluss, das Interface sehr dezent zu gestalten um nicht zuviel Sicht auf die Karte zu verlieren. Die Elemente sollten sich nur bei Bedarf zeigen, und sonst nahezu unsichtbar sein. Die Entscheidung fiel auf eine horizontale Leiste am unteren Bildschirmrand, die schnellen Überblick über die einzelnen Gebäude im Park bietet und einen Filter, über den sich die Informations-Ebenen Gebäudenamen, Nahverkehr, Parkplätze und Restaurants einzeln ein- und ausblenden lassen. Beides nur sichtbar, wenn der Nutzer dieses wünscht, ansonsten verborgen.

Headline1.jpg
Skizzen.jpg

Kartenmaterial wurde gescannt, vektorisiert und für den Export mit mehreren Ebenen aufbereitet und bildete so die Basis für die virtuelle Karte.

Umsetzung2d.jpg
Umsetzung2d-Screen.jpg
Umsetzung2d-Screen_02.png

Parallel dazu entstanden die Modelle der Gebäude. Diese basieren zum Teil auf Satellitenbilder oder auf selbsterstelltem Photomaterial. Fertig gemodelt und beleuchtet wurden sie nach und nach auf der Karte eingetragen.

Umsetzung3d.jpg
Umsetzung3d-Screen1.jpg
Umsetzung3d-Screen2.png
Umsetzung3d-Screen3.png

Am schnellsten erschliessen lässt sich der Park durch Ziehen mit dem Finger, alternativ dazu lässt sich in der Übersichtsleiste ein Gebäude auswählen, auf dass sich dann die Kamera ausrichtet und zusätzliche Informationen angezeigt werden. Die gesamte Karte ist durch Pinch&Zoom zoombar, wobei eine Level-Anzeige rechts oben den jeweiligen Zoom-Grad verrät.

Eine weitere Interaktionsmöglichkeit bietet der Ebenenfilter, bei dem man sich je nach Wunsch Zusatzinformationen geben lassen kann.

UmsetzungUI.jpg
UmsetzungUI-Screen.jpg

Verwendet für die Multitouch-Gesten wurde die TUIO-Library, komplette Programmierung in AS3 in der Entwicklungsumgebung FDT.

UmsetzungCode.jpg
UmsetzungCode-Screen1.jpg
UmsetzungCode-Screen2.jpg

Getestet wurden die Gesten für das Ziehen und der Pinch&Zoom der Karte, Größe von Interface-Elementen und die Lesbarkeit der Schrift.

ErsteTests.jpg
ErsteTests-Foto1.jpg
ErsteTests-Foto2.jpg
Ergebnis.jpg
Ergebnis-Foto1.jpg
Ergebnis-Foto2.jpg
Ergebnis-Foto2_2.jpg
Ergebnis-Foto3.jpg
Ergebnis-Foto4.jpg

Schwierig für uns war das Fehlen des gewohnten Umgangs mit der Mouse. Es war interessant, dass einfache Muster wie Anzeigen von Informationen bei Hover oder ähnliches schlichtweg nicht existierten und dafür andere Lösung gefunden werden mussten. Auf der anderen Seite kamen aber auch neue Muster wie die Bedienung mit mehreren Fingern hinzu, was wieder zusätzliche Möglichkeiten eröffnete.

Fazit.jpg