Repository navigation
Design Grober Entwurf
Verantwortlicher: Simon Künnen
Im folgenden wird der grobe Entwurf aufgezeigt und die mit diesem einhergehenden Funktionen dargelegt. Der grobe Entwurf dient später als Grundlage für den konkreten Design Entwurf, welcher in Form von Photoshop-Mockups erstellt wird. Dabei dient der grobe Entwurf als erste Richtlinie an der sich orientiert werden sollte.
Um einen ersten Ideen-Pool zu generieren und sich auf eine gemeinsame Grundidee zu fixieren, wurde mit dem gesamten Team ein Ablauf von groben Skizzen an einer Tafel entwickelt. Grundlage für diese Skizzen waren Erfahrungswerten aus bereits vorhanden Apps und der grobe Funktionsumfang welcher am Anfang des Projektes bestimmt wurde. Der gemeinsame Konsens war eine möglichst einfach und schlichte App zu entwickeln, deren Priorität es ist, unkompliziert und möglichst schnell den User zum gewünschten Routenergebnis zu führen. Der Fokus des Projektes wurde im Vorhinein auf eine Webapp, welche für mobile Endgeräte geeignet ist, gesetzt. Daher wurde auch im Design-Team die Priorität auf ein Design für mobile Endgeräte gesetzt. Im folgenden wird der erste Grobentwurf und Workflow beschrieben.
1 Start-Screen
Der Start-Screen wird schlicht und einfach gehalten. Der User hat die Wahl zwischen zwei verschiedenen Optionen, zum einen kann er auf den "Go Happy"-Button klicken, welcher direkt anhand von standartisierten Werten und der aktuellen Position eine Route generiert. Zum Anderen kann durch den Knopf "Custom" eine ungefüllte Route erzeugt werden. Der Nutzer soll dabei jede Bar einzeln und nach seinem Belieben hinzufügen können. Der Fokus wird hierbei klar auf den "Go Happy"-Button gelegt, dieser wird farblich und mit einem Logo gestaltet, da dies als primäre Option gesehen wird. Der "Custom"-Button soll durch einen leicht grauen Schriftzug umgesetzt werden, um diesen nicht in den Mittelpunkt zu stellen. Durch das setzen eines klaren Fokus wird eine einfache Benutzerführung unterstützt.
2 Routen Übersicht
Nach dem der User sich für die Option "Go Happy" oder "Custom" entschieden hat, soll er zu diesem Screen weitergeleitet werden. Die Übersicht wird dominiert durch eine scrollbare Liste mit den jeweiligen Bars und einer Navigationsleiste. Jede Bar in der Liste wird durch eine rechteckige Box dargestellt, die die ganze Breite des Screens nutzt. In jeder Box soll die Zeitspanne, in der man sich in die Bar begeben sollte, sowie der Bar-Name und eine kurze Beschreibung dargestellt werden. Von extern werden des Weiteren ein Kostenfaktor und eine Bewertung der Bar, in form von Sternen, eingebunden. Jede Box ist auch ein Button, der zu einer erweiterten Ansicht der Bar führt. Die Navigationsleiste hat drei verschiedene Buttons. Zum einen kann ein Optionsmenü aufgerufen werden (Button auf der ganz linken Seite), zum Anderen gibt es einen Button zum neu generieren der Route und einen Button der zur Kartenansicht führt. Die Navigationsleiste hat stets eine feste Position und wird durch das "durchscrollen" der Liste nicht beeinflusst.
3 Erweiterte Routen Übersicht
Wird auf die Box einer Bar geklickt, so dehnt sich diese Box aus und verschiebt die anderen Boxen zu gleichen Teilen nach oben, bzw. nach unten. Bei dieser größeren Box werden erweiterte Informationen dargestellt. Zu diesen zählen beispielsweise die Öffnungszeiten und die "Happy-Hour"-Konditionen. Durch ein erneutes klicken auf die Box, oder auch einer anderen, soll diese Box sich wieder zusammen ziehen.
4 Optionsmenü
Durch das betätigen des Buttons ganz links in der Navigationsleiste, oder durch ein Wischen auf dem Bildschirm von links nach rechts, wird ein Optionsmenü von links nach rechts in den Bildschirm gefahren. Dabei wird die Übersicht der Route rechts aus dem Bildschirm gedrängt. In der nun offenen Optionsleiste können die Routenoptionen bearbeitet werden. Dazu zählen die Parameter: Ort, Start-/Endzeit, Verweilzeit, Radius. Des Weiteren kann die Leiste als erweiterte Navigationsleiste fungieren. Durch die unten in dem Optionsmenü aufgelisteten Buttons "Meine Routen" und "Top 10" lässt sich zu den Top-Routen oder den eigenen, offline gespeicherten, Routen navigieren. Durch ein erneutes klicken auf den Optionsbutton, welcher immer noch zusehen ist, fährt das Optionsmenü wieder aus dem linken Bildschirmrand.
5 Kartenübersicht
Durch ein klicken auf den Maps-Button wird die Route auf einer Karte dargestellt. Diese Ansicht soll hauptsächlich informativ sein und bietet keine Option die Route zu bearbeiten. Durch ein klicken auf die einzelnen Wegpunkte erscheint eine kleine Box, in der Informationen wie die Adresse der Bar abgebildet werden. Durch ein klicken auf die besagte Adresse soll eine direkte Weiterführung zu einer Karten-App wie Google-Maps oder Apple-Maps möglich sein.
Um den User eine möglichst einfache Navigationsführung zu ermöglichen, wurde zusätzlich zu dem ersten groben Entwurf eine alternative Navigationsmöglichkeit vorgestellt. Diese hat die Absicht eine klarere Trennung zwischen den Filter für die Route und der Navigation zwischen den einzelnen Views zu trennen. Grundlage für die alternative Navigation ist eine zweite Subbar unter der bereits vorhanden Navigationsleiste, in welcher die Filter für die Route eingestellt werden können. Das Navigationsmenü, welches von der Seite in den Bildschirm gefahren werden kann, würde nur noch der reinen Navigation zwischen den einzelnen Seite und ggf. für allgemeine Einstellungen der Applikation dienen. Die folgende Darstellung verdeutlicht durch eine Skizze die alternative Navigation: