Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Park Sanssouci – Interactive Guide

Ausgelegt als klassische Tisch-Applikation, die in Museen, Ausstellungen oder Touristikbüros stehen könnte, ist eine interaktive Multitouch-Anwendung entstanden, die einen schnellen Überblick über den Park Sanssouci-Park Potsdam bietet. Dementsprechend sollte sie auch der Zielgruppe durch intuitive, einfache Steuerung entgegenkommen, und dabei den Nutzungskontext, nämlich wenig Zeit und oft Stress nicht aus den Augen verlieren aber trotzdem – bei Bedarf – Informationstiefe bieten. Das Ganze auch noch optisch ansprechend zu verpacken, war dabei ein zusätzlicher Anreiz.

Headline1.jpgHeadline1.jpg

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.

Skizzen.jpgSkizzen.jpg

Umsetzung2d.jpgUmsetzung2d.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-Screen.jpgUmsetzung2d-Screen.jpg

Umsetzung2d-Screen_02.pngUmsetzung2d-Screen_02.png

Umsetzung3d.jpgUmsetzung3d.jpg

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-Screen1.jpgUmsetzung3d-Screen1.jpg

Umsetzung3d-Screen2.pngUmsetzung3d-Screen2.png

Umsetzung3d-Screen3.pngUmsetzung3d-Screen3.png

UmsetzungUI.jpgUmsetzungUI.jpg

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-Screen.jpgUmsetzungUI-Screen.jpg

UmsetzungCode.jpgUmsetzungCode.jpg

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

UmsetzungCode-Screen1.jpgUmsetzungCode-Screen1.jpg

UmsetzungCode-Screen2.jpgUmsetzungCode-Screen2.jpg

ErsteTests.jpgErsteTests.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-Foto1.jpgErsteTests-Foto1.jpg

ErsteTests-Foto2.jpgErsteTests-Foto2.jpg

Ergebnis.jpgErgebnis.jpg

Ergebnis-Foto1.jpgErgebnis-Foto1.jpg

Ergebnis-Foto2.jpgErgebnis-Foto2.jpg

Ergebnis-Foto2_2.jpgErgebnis-Foto2_2.jpg

Ergebnis-Foto3.jpgErgebnis-Foto3.jpg

Ergebnis-Foto4.jpgErgebnis-Foto4.jpg

Fazit.jpgFazit.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.

Fachgruppe

Sonstiges

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Florian Schulz foto: Lionel Michel foto: Julian Stahnke foto: Prof. Dr. Frank Heidmann

Entstehungszeitraum

Wintersemester 2010 / 2011