Web-Apps

Artikel in Arbeit (Struktur, Inhalte)

Dokumentation der Entwicklung eines Prototyps. Einsatzgebiet vor allem für Applikationen mit POIs (Points of Interest). Meine gewonnenen Erkenntnisse, sowohl aus technischer Sicht, als auch bezüglich der Integration von Daten. Unter „Integration der Daten“ will ich Stichworte wie OpenData, OpenLinkedData ansprechen. Beispiel Apps:

icon hotel terminusHotel Terminus
Persönlichkeiten, Prominente auf Schweizer Friedhöfen. Über 420 Einträge mit genauer Lage von Friedhof und Grab.
Projektbeschrieb
icon badenBaden gestern
und heute
Alte und neue Bilder aus Baden (AG), Schweiz. Mit Lokalisation auf einer Karte und in Listenform.
icon eduardoflying Eduardo
Den Anstoss gab mir die Teilnahme am ersten „Swiss Open Cultural Data Hackathon“.
icon old pictures of ZurichOld Pictures of Zurich
Alte Fotos und Gemälde von Zürich
icon old pictures of ZurichFelix und Regula
Visualisierung weiblicher und männlicher Strassennamen in Zürich.
 

Anforderungen

  • Einfache Struktur
  • Schnelle Reaktionszeiten (User Experience wie bei nativen Apps)
  • Alle Daten werden über Links und Requests in die App „gezogen“, das heisst, es werden keine Daten gespeichert.
  • Kartensystem GoogleMaps (To-Do: Begründen)
  • Anzeige von POIs in der Nähe des aktuellen Standorts
  • Wegbeschreibung zum POI
  • Funktionsfähig auch ohne Geolokalisation
  • Anzeige von Bildern und Zusatzinformationen zum POI
  • Listenansicht
  • Filtern
  • Sortieren
  • Suchen

Usability

Marker

Fig. 1: Eine typische Karte für eine POI-Applikation. Nehmen wir an, nach dem Klick auf einen Marker wird ein InfoWindow mit Zusatzinformationen angezeigt. Wenn man das InfoWindow wieder schliesst, hat man wieder dasselbe Bild vor sich. Man muss sich also merken, auf welche Marker man schon geklickt hat. Das ist anstrengend. Man kann sich nicht einfach „durchklicken“.

many markers

Fig. 1 markers.png

Fig. 2: Nach dem Öffnen des InfoWindows verändert sich die Farbe des Markers. Man weiss, welcher Marker bereits geklickt wurde. Kleines Feature, grosse Vereinfachung.

many markers

Fig. 2 markers2.png

Fig. 3: Die schnelle Erkennbarkeit von Markern auf der Kartenansicht UND Satellitenansicht muss getestet werden.

marker3

Fig. 3 markers3.png
marker4

Bei der Gestaltung des Markers habe ich mich stark an das GoogleMaps Interface angelehnt. Man kann ein eigenes System/Iconset für Marker kreieren. Der Benutzer muss dann aber zuerst dieses System „lernen“.

Listenansicht

Fig. 4: In der Listenansicht werden bereits besuchte POIs durch eine hellere Darstellung gekennzeichnet. Das hilft den Nutzern zu verstehen, wo sie schon gewesen sind und entlastet das Kurzzeitgedächtnis. Siehe auch „besuchte Marker“ Fig. 1 + 2.

Listenansicht

Fig. 4 listenansicht.png

Bilder zoomen

Bilder können vergrössert werden. Auf Handys via Touch-Geste (Fig.5) und auf Grossbildschirmen via Button (Fig.6).

Zoom

Fig. 5 handyzoom.jpg
Computer Zoom

Fig. 6 computer-zoom.jpg

Bildvergleich

Fig. 7: In der Web-App „Baden gestern und heute“ kann man alte und neue Fotos eines Standorts vergleichen.

Fotos Alt Neu

Fig.7 alt_neu.jpg

Werkzeuge

Scripts, Frameworks

Ich habe einige Tools evaluiert, fand sie aber alle zu komplex für eigentlich einfache Funktionen und die überschaubaren Datenmengen. Ich benutzte html, css3, json und jQuery mit den nachfolgenden Helpers.

Diverses

Die kleinen Freuden

Früher (jQuery)$('#mapCanvas').css('height', Math.max(0, (($(window).height())) - 74 ) + 'px');

Heute (CSS3)#mapCanvas { height: calc(100% - 74px); }

Weiterführende Links

 

Posted:
Labels: , ,