Positionsbestimmung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 211

rants und einem Optionsmenü, in dem bestimmte Restauranttypen ausgewählt wer-
den können. Die Screens werden über eine Symbolleiste untereinander verbunden, die
App startet mit der Karte. Fertigen Sie dazu einen Wireframe an (Abbildung 5.4).

Restaurants Optionen

5

Pizza Dach √ Pizza

Burgeramt √ Burger

Spaghetti Western √ Pasta

Sushi Izumi √ Sushi

Pesto I Pizza

Il Due Forni

Abbildung 5.4 Der Wireframe für die »Where to Eat«-App

Den Wireframe verwenden Sie, wie in Kapitel 3, »Konzeption und Gestaltungsprinzi-
pien«, beschrieben, für Nutzertests. Wenn Sie die Wireframes gezeichnet haben,
scannen bzw. fotografieren Sie sie ab und laden die Bilder auf ein Testgerät. Sie haben
nun drei Bilder, die Sie im Fotobetrachter Ihres Smartphones hin- und herwechseln
können. Dadurch entsteht beim Nutzer bereits ein ziemlich realistisches »App-
Gefühl«, das die Ergebnisse unseres Tests verbessert. Geben Sie Ihrem Testbenutzer
eine konkrete Aufgabe, z.B. »Finden Sie heraus, wo sich die nächstgelegene Pizzeria
befindet«. Der Nutzer soll diese Aufgabe mithilfe des App-Wireframes lösen, Sie über-
nehmen dabei die Bedienung. Wenn der Testkandidat also auf Optionen tippen
würde, wählen Sie für ihn das entsprechende Bild aus. Der Test hilft Ihnen dabei, die
Erwartungshaltung des Nutzers zu verstehen und eventuell vergessene Funktionen
zu ergänzen.

In unserem Beispieltest fallen Ihnen besonders bei der Listenansicht zwei Dinge auf:
Die Benutzer konnten die Restaurants nicht den Markern auf der Karte zuordnen.
Außerdem war unklar, welches nun das nächstgelegene Restaurant ist. Sie lösen die-
sen Umstand, indem Sie vor jedes Restaurant in der Liste einen kleinen Kartenaus-
schnitt einfügen, der bei der Assoziation hilft. Außerdem ergänzen Sie die Liste um
die jeweiligen Entfernungen der Restaurants zu unserer aktuellen Position.

5.2.1 Position auf einer statischen Karte eintragen

Das Konzept steht, nun setzen Sie die App mit HTML5 um. Zunächst müssen Sie eine
GPS-Koordinate in einer Karte eintragen. Damit Sie das Kartenmaterial nicht selbst