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

Potsdamer Stadtgeflüster

Potsdamer Stadtgeflüster - ein alternativer Stadtplan für Potsdam ist ein Projekt von Greta Peukert, Stefanie Horvath und Cécile Zahorka, entstanden im Rahmen des Kurses „Google Maps and beyond: Karten für Desktop, Mobile und Print“ (Betreut von Sebastian Meier) im Sommersemester 2014.

Motivation

Was ist Potsdam? Gibt man auf Google „Potsdam“ ein, könnte man den Eindruck erhalten, dass Potsdam eine einzige Schlösser-Landschaft sei. Zugegeben ist eine Dichte von knapp 20 Schlössern für eine Stadt ziemlich beeindruckend. Dennoch sehen wir nicht ein, dass Potsdam nur über die ehemaligen Königshäuser definiert wird.

Was weißt du über Potsdam? Erschreckend wenig! Die Tram-Linie 96 vom Hauptbahnhof bis zum Campus, inklusive der Häuser welche die Straße säumen. Doch diese könnten auch nur aus einer Fassade bestehen und die Mehrheit der Studenten würde es wahrscheinlich nicht merken. Warum ist jemandem diese Stadt so unbekannt, obwohl er seit drei oder mehr Jahren mehrmals die Woche viele Stunden in ihr verbringt?

Potsdam ist mehr als nur Sanssouci Diese Stadt braucht sich nicht nur über ihre Schlösser und Parks definieren. Es gibt so viele sehenswerte Dinge oder Orte, die auf keiner Karte verzeichnet sind. Potsdam hat Kultur und Ausstellungen, Theater und Festivals, Fahrradtouren und Uferpromenaden, Badestrände und Wasserski-Strecken, Kaffee-Röstereien und Bierkeller.

Potsdam hat mehr zu bieten als Schlösser und Seen! Wir wollen einen alternativen Stadtplan erstellen mit ganz besonderen Orten, die bisher auf keiner Karte zu finden sind. Damit wollen wir keine touristische Karten ersetzen, sondern Studenten, Pendlern, neu Zugereisten oder gelegentlichen Potsdam-Reisenden Orte zeigen, welche die Stadt so sehr bereichern.

Recherche

Potsdam hat für Touristen einiges zu bieten. Dementsprechend gibt es viele Karten mit den typischen Sehenswürdigkeiten.

Deshalb suchten wir bei unserer Recherche Karten oder Visualisierungen, welche auch mal einen anderen Blickwinkel auf Städte zeigen. Dabei fanden wir einige Beispiele, die unserem Anspruch schon sehr nahe kamen.

Bildschirmfoto 2014-07-14 um 12.59.03.pngBildschirmfoto 2014-07-14 um 12.59.03.png

meinestadt.de ist eine Website, die eine interaktive Karte anbietet, bei der man sich verschiedene Kategorien und Unterkategorien anzeigen lassen kann. Hier findet man nicht nur touristische Plätze, sonder auch Grillplätze, Strandbars, Kanustaionen, etc.

Bildschirmfoto 2014-07-14 um 13.19.11.pngBildschirmfoto 2014-07-14 um 13.19.11.png

Auf der interaktiven Karte von potsdammer-strasse-kompakt.de sind touristenrelevante Stationen wie z.B. Geschichte & Architektur, Gastronomie & Nachtleben oder auch Geheimtipps mit Adressinformationen verzeichnet.

Bildschirmfoto 2014-07-14 um 13.32.24.pngBildschirmfoto 2014-07-14 um 13.32.24.png

Alle Hamburg-Tipps auf einer Karte! hamburgschnackt.de sammelt Lieblingsorte der HamburgerInnen auf einer Stadtkarte. Dort kann man per Mail seinen Lieblingsort verraten, welcher dann mit oder ohne Foto auf der interaktiven Karte erscheint.

Konzept

Wir haben uns dazu entschieden, ein Webportal zu entwickeln, auf welchem ein alternativer Stadtplan von Potsdam mit ganz besonderen Orten entsteht, die bisher auf keiner Karte zu finden sind. Bei diesem fortlaufenden Projekt basieren die verwendeten Karteninhalte auf nutzergenerierten Daten. Jeder Potsdamer, Besucher oder Pendler kann seinen Teil dazu beitragen, die wundervollsten Orte Potsdams auf eine Karte zu bringen.

Webportal Ein auf der Website integriertes Kartentool bietet die Möglichkeit, Potsdam zu entdecken und näheres über die Lieblingsorte der Stadtkenner zu erfahren. Es gibt verschiedene Kategorien nach denen gefiltert werden kann. Die Orte der jeweiligen Kategorien werden auf der Karte in Form von Markern dargestellt und unterscheiden sich durch individuelle Icons und Farben. Neben den Ortsinformationen findet man emotionale Begriffe, welche die Besucher mit den Orten asoziieren. Es wird außerdem angezeigt, wie viele Personen diesen Ort bereits empfohlen haben - dadurch entsteht eine Bewertungsanzeige anhand welcher man die Beliebtheit der Orte messen bzw. erkennen kann.

Kartendaten Jeder der Lust hat, seine liebsten Orte mit anderen zu teilen, kann an der Gestaltung der Karte mitwirken und diese über das Webportal mit detaillierten Angaben und Informationen empfehlen. Die mitgeteilten Orte werden redaktionell gepflegt und nach Prüfung ihrer Richtigkeit auf der Karte veröffentlicht.

Datenerhebung - Umfrage

Bildschirmfoto 2014-07-14 um 13.54.40.pngBildschirmfoto 2014-07-14 um 13.54.40.png

Um Daten für unser Projekt zu sammeln, erstellten wir eine interaktive Umfrage. Diese beginnt mit einem Einleitungstext, wo jeder Nutzer noch mal eine Kurze Information erhält um was es geht.

Bildschirmfoto 2014-07-14 um 13.58.13.pngBildschirmfoto 2014-07-14 um 13.58.13.png

Zunächst muss jeder Nutzer ein Thema, danach eine passende Kategorie auswählen, welche seinen Lieblingsort beschreibt. Dabei haben wir folgende Themen zur Verfügung gestellt:

  • Essen & Trinken
  • Feste & Märkte
  • Geschäfte, Läden, Dienstleister
  • Natur & Outdoor
  • Point of Interest

Bildschirmfoto 2014-07-14 um 14.01.48.pngBildschirmfoto 2014-07-14 um 14.01.48.png

Hat der Nutzer beides ausgewählt, kann er den Namen und wenn möglich die Adresse angeben. Ist ihm die genaue Adresse nicht bekannt, hat dieser die Möglichkeit mit Hilfe eines Pins den ungefähren Standort zu markieren.

Bildschirmfoto 2014-07-14 um 14.06.27.pngBildschirmfoto 2014-07-14 um 14.06.27.png

Anschließend beginnt der persönliche Teil, der Umfrage. Jeder Nutzer kann nun beschreiben, warum dieser Ort für ihn so besonders ist. Dies kann er mit Hilfe von Begriffen oder/und Emotionen tun.

Jeder Punkt der Umfrage, welche mit einem Sternchen gekennzeichnet ist, muss ausgefüllt werden. Die anderen sind auf freiwilliger Basis.

Bildschirmfoto 2014-07-14 um 14.13.31.pngBildschirmfoto 2014-07-14 um 14.13.31.png

Ist alles ausgefüllt, hat der Nutzer den größten Teil der Umfrage geschafft. Er hat nun die Möglichkeit weitere Lieblingsorte einzutragen.

Bildschirmfoto 2014-07-14 um 14.19.33.pngBildschirmfoto 2014-07-14 um 14.19.33.png

Möchte der Nutzer jedoch keinen weiteren Ort eintragen, werden zum Schluss nur noch ein paar Fragen zur Person gestellt, welche natürlich anonym bleiben. Hierbei kann er zusätzlich seine Email hinterlassen um Neuigkeiten des Projektes zu erfahren.

Datenerfassung

Nach einer ca. 3 wöchigen Befragungsphase sammelten wir die Daten in einer Exceltabelle. Um eine bessere Übersicht der eingetragenen Orte zu erhalten, ordneten wir diese zunächst in eine normal Googlekarte. So erhielten wir eine erstmalige Übersicht der verschiednen Themenbereiche und Kategorien.

Bildschirmfoto 2014-07-14 um 14.23.59.pngBildschirmfoto 2014-07-14 um 14.23.59.png
Bildschirmfoto 2014-07-14 um 14.25.56.pngBildschirmfoto 2014-07-14 um 14.25.56.png
Bildschirmfoto 2014-07-14 um 14.27.59.pngBildschirmfoto 2014-07-14 um 14.27.59.png
Bildschirmfoto 2014-07-14 um 14.27.09.pngBildschirmfoto 2014-07-14 um 14.27.09.png

Farben & Fonts

Farben-Font.jpgFarben-Font.jpg

Die meisten Webseiten mit Interaktiven Karten von Potsdam sind in hellen unauffälligen Farben gehalten. Um dem entgegen zu wirken wählten wir ausdrucksstarke kräftige Farbtöne. Sie sollen klar und aufmunternd wirken. Alle Farben zusammen ergeben eine spannende Kombination.

In der Sidebar und beim Logo ist das Türkis bestimmend. Der lila Farbton zeigt dem Nutzer den ausgewählten Bereich. Während die Typo in normalen Schwarz- und Grautönen gehalten ist.

Icons

Icons.jpgIcons.jpg

Auf der Karte sind die Icons farbig unterschieden, um sie deutlicher auseinander halten zu können. Jede Kategorie und die jeweilige Unterkategorie hat ihren eigenen Farbton. Diese sind mit ihrem hohen Kontrast gut zu unterscheiden.

Zu den Kategorien gehören folgende Icons:

Essen & Trinken: Restaurant, Café, Bar Feste & Märkte: Feste, Club Natur & Outdoor: Park, Badestelle, Spielplatz, Sport, Wassersport Points of Interest: besondere Orte, Sehenswürdig Geschäfte & Dienstleister: Lebensmittelgeschäft, Non-Food Store

Kartengestaltung

Bildschirmfoto 2014-07-09 um 01.55.49.PNGBildschirmfoto 2014-07-09 um 01.55.49.PNG

Die Karte wurde in TileMill gestaltet, damit sie für Web und Print jederzeit verwendet werden kann. Obwohl uns eine invertierte oder sehr farbige Karte sehr gut gefallen hätte, entschieden wir uns zu einer eher schlichten Gestaltung mit einer reduzierten Farbpalette mit natürlichen und gedeckten Tönen. Durch die Fülle an Informationen und Ebenen in den einzelnen Zoom-Stufen, ist uns eine hohe Lesbarkeit wichtig. Wir haben die OSM-Karte aufgeräumt und auf weniger Farben reduziert; manche Orte haben wir mit einem Pattern unterlegt, z.B. das Wasser oder Grünflächen. Auf die gesamte Karte haben wir auf die niedrigen Zoom-Stufen zudem eine Falt-Optik gelegt.

Webportal

Das Webportal mit integriertem Kartentool bietet die Möglichkeit, Potsdam und seine Umgebung zu entdecken und näheres über die Lieblingsorte der Stadtkenner zu erfahren. Außerdem kann jeder, der die Karte mitgestalten möchte, seine liebsten Orte über ein Umfragetool empfehlen.

01.jpg01.jpg

Kartentool Gleich am Anfang stand fest, dass wir die Karte zwar in voller Breite, aber mit begrenzter Höhe in die Website einbinden wollen, um zu signalisieren, dass es außer der Karte noch weiteren Kontent und die Möglichkeit einer Ortsempfehlung gibt. Im Kartenbereich gibt es neben einer Sidebar mit Navigation und Informationen die Möglichkeit, die Kartenansicht zwischen Zoomstufe 12 und Zoomstufe 18 zu verändern. Standardmäßig wird die Karte auf Zoomstufe 14 angezeigt. Durch Klick auf das Logo wird die Seite neu geladen und alle vorgenommenen Aktionen werden zurückgesetzt.

02.jpg02.jpg

Interface Da es nach und nach immer mehr Elemente auf der Karte werden, wollten wir das Interface möglichst simpel und übersichtlich halten. Es gibt eine Sidebar, auf der man alle Orte oder nur jene aus einer bestimmten Kategorie in der Ortsliste sowie auf der Karte anzeigen lassen kann. Die Informationen in der Liste beinhalten Name, Unterkategorie, Adresse sowie eine Bewertung bei welcher angezeigt wird, wie viele Personen den jeweiligen Ort bereits empfohlen haben. Die Orte können aufsteigend nach Name oder Beliebtheit sortiert werden.

03.jpg03.jpg

Klickt man auf eine Ortsbeschreibung, wird auf den Ort gezoomt und der Kartenausschnitt auf Zoomstufe 18 vergrößert. Bei Klick auf den Marker erscheint ein Tooltip mit dem jeweiligen Ortsnamen. Einen Großteil der JavaScript-Programmierung verdanken wir der Hilfe von Kursleiter Sebastian Meier.

04.jpg04.jpg

Contentbereich Neben einer Projektbeschreibung gibt es die Möglichkeit, seine Lieblingsorte über eine interaktive Umfrage mitzuteilen. Die Umfrage wurde mit Limesurvey generiert und designed. Die empfohlenen Orte werden redaktionell gepflegt, Punkte wie Name oder genaue Ortsangabe ergänzt und anschließend auf der Karte veröffentlicht. Die Datensammlung für den Prototypen erfolgt derzeit noch über eine Excel-Liste, aus welcher wir eine .json Datei für die Einbindung in die Website generieren.

05.jpg05.jpg

Prototyp

Der derzeitige Stand des Webportals kann über diesen Link aufgerufen werden.

Ausblick

Wir wünschen uns, das Webportal dahingehend weiterzuentwickeln, dass die eingereichten Orte direkt in eine Datenbank gespeichert werden und über einen Backend-Bereich administriert werden können. Außerdem ist angedacht, eine Print-Version der Karte zu gestalten und drucken zu lassen, sobald genügend Orte gesammelt wurden.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Dr. Sebastian Meier

Entstehungszeitraum

Sommersemester 2014

Keywords