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

beyond – One map is not enough

In diesem Kooperationskurs mit Nokia Here bestand das Ziel darin, neue, innovative und interaktive Kartenanwendungen zu gestalten. Inspiriert von Designmethoden und Nutzungskontexten, die wir am Anfang gemeinsam mit Vertretern von Nokia Here erörterten, entwickelten wir zunächst ein Konzept, später einen Klickdummy, den wir in Usertests evaluierten, bis hin zu einem interaktiven Prototypen. Die Endpäsentation wurde bei Nokia Here in Berlin gehalten.

SZENARIO

Bildschirmfoto 2014-12-09 um 09.27.16.pngBildschirmfoto 2014-12-09 um 09.27.16.png

Bildschirmfoto 2014-12-09 um 09.27.45.pngBildschirmfoto 2014-12-09 um 09.27.45.png

Eine kleine Familie erkundet einen Tag lang die Stadt Berlin zu Fuß.

Bildschirmfoto 2014-12-09 um 09.28.09.pngBildschirmfoto 2014-12-09 um 09.28.09.png

Dabei fallen die Bedürfnisse sehr unterschiedlich aus. Während der Vater bsw. auf der Suche nach einem neuen Hemd ist, möchte sein Sohn viel lieber einen Spielplatz besuchen.

Bildschirmfoto 2014-12-09 um 09.28.25.pngBildschirmfoto 2014-12-09 um 09.28.25.png

Idealerweise gelangt die Familie an einen Ort, der alle Bedürfnisse abdeckt und zu Fuß gut zu erreichen ist. Die Frage ist nun, welche Richtung sie einschlagen und wie weit, bzw. wie lange der Fußmarsch dauern wird.

Konzept

concept.pngconcept.png

Nah und Fern Neben einer detailierten Karte steht dem Nutzer eine weitere, abstrahiertere Kartenansicht mit einem anderen Zoomlevel zur Verfügung. Diese Ansicht enthält ausschließlich kleine Marker für die relevanten Orte und Distanzlinien, um die grobe Entfernung einschätzen zu können. Dem Nutzer stehen also zwei Karten zur Verfügung, sowohl eine genaue Orientierung in der näheren Umgebung als auch eine ungefähre Orientierung in der vereinfachten Ansicht. Die beiden Kartendarstellungen unterscheiden sich optisch stark von einander Das Verhalten entspricht der Kompassfunktion von bsw. Google Maps.

Design

compilation1.pngcompilation1.png

Filtermenü Der Nutzer hat die Möglichkeit, die Orte nach verschiedenen Kategorien zu filtern. Es gibt 5 Kategorien (Essen & Trinken, Nightlife, Shopping, Grünanlagen und Kultur). Somit kann er sehen, wo sich Cluster bilden, die den Interessen aller Gruppenmitglieder entsprechen.

Subfilter Die jeweiligen Unterkategorien der 5 Hauptkategorien sind jeweils durch einen Double-Tap erreichbar und einzeln an- bzw. abwählbar.

compilation2.pngcompilation2.png

Details Mit Tap auf einen Marker auf der Karte erhält der Nutzer nähere Informationen über den Ort, die Distanz und die durchschnittliche Wegzeit zu Fuß und kann sich durch Tippen auf den Pfeil dort hin navigieren lassen.

Details × X Tippt der Nutzer auf einen Bereich in der oberen Darstellung, so bekommt er alle Orte angezeigt, die in der Tap-Zone liegen. Diese kann er nun via Swipe-Geste durchblättern.

User Testing

Nachdem wir einen ersten klickbaren Prototypen mit mittels Framer realisiert hatten, führten wir innerhalb des Kurses User Tests durch. Dafür bereiteten wir einige Aufgaben und Fragen vor und fassten die Ergebnisse in einer kleinen Dokumentation zusammen. Der Clou an der ganzen Sache war, dass wir nicht unseren eigenen Prototypen testeten, sondern jedes Team das Projekt einer anderen Gruppe bekam. Das sorgte einerseits für einen objektiveren Blick und hielt die Gruppen andererseits zu einer ordentlichen, ausführlichen Dokumentation an. Auf Grundlage der Testergebnisse konnten wir die Gestaltung noch an einigen Stellen optimieren.

High Fidelity Prototyp

prototyp_lowres.pngprototyp_lowres.png

Für die Endpräsentation bei Nokia hatten wir am Ende noch etwas Zeit, einen HTML-Prototypen zu bauen, in dem wir die Bedienung des Interfaces, inkl. Touchgesten und Transitions, und das Verhalten der (noch gefakten) Karte bereits erfahrbar machen konnten. Die Karte gestalteten wir mit TileMill (Mapbox) und renderten sie als statische Grafik. Da wir im Vorfeld den Präsentationsort kannten, konnten wir den Standort genau auf die richtige Position setzen und alle in der Gegend relevanten Points of Interests platzieren. Dies rief bei einigen Nokia-Mitarbeitern anfangs die Illusion hervor, es handele sich um eine echte, generative Karte. Lustig :)

Fazit

Der Kurs war sehr reichhaltig und es fand ein reger Austausch statt. Die Vorstellungen von Nokia und die unsreres Profs. Boris sowie einiger Studenten gingen zwischenzeitlich etwas auseinander, was kurzzeitig für Verwirrung sorgte. Diesen Zeitpunkt, eine (neue) Idee für eine Kartenanwendung zu entwickeln und sich ein Konzept zu überlegen empfanden wir als die schwierigste Phase.

Was wir in dem Kurs sehr gut fanden, war der Fokus auf das Prototyping. Wir hatten genügend Raum, unterschiedliche Techniken und Tools auszuprobieren und uns darüber auszutauschen. Hinzu kamen noch 2 HTML5- und ein Keynote-Workshop, die das Thema Prototyping abrundeten. Die Gestaltung von Karten mittels TileMill war ebenfalls Neuland für uns und sehr spannend.

Unterm Strich haben wir sehr viel mitgenommen und sind mit dem Ergebnis durchaus zufrieden.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: MO foto: Prof. Boris Müller foto: Dorit Mielke

Entstehungszeitraum

Wintersemester 2013 / 2014