Repository navigation
Design Mockup
Verantwortlicher: Simon Künnen
Im folgenden wird der Design-Entwurf vorgestellt. Beim Design-Entwurf handelt es sich um eine Kollektion aus Photoshop-Dateien, die die einzelnen Views der Applikation beschreiben. Es gilt der Grundsatz den Entwurf möglichst nahe an der Realität zuhalten. Des Weiteren bietet der Entwurf Grundlage für die Umsetzung des Templates, die Design-Guideline und die Funktionalität. Während des Entwurfs wird mit web-eigenen Mitteln, wie CSS und HTML, versucht den Entwurf möglichste detailgetreu nachzubilden. Der Entwurf wird über eine längere Zeit entwickelt und unter ständiger Rücksprache mit dem Team finalisiert. Diese Wikiseite beschreibt diesen finalen Entwurf und gibt einen kleinen Rückblick auf die Entwicklung. Des Weiteren wird textuell die Funktionalität und Workflows beschrieben.
###Version 1.0 - finales Mockup und Beschreibung interaktives Sketchup: https://marvelapp.com/2gjg21
####View 2.0 - Overview Page
direkte Seite, nachdem auf den Button "Go Happy" auf der Startseite geklickt wurde
Zeigt die aktuelle Route im Bearbeitungszustand. Die Applikation ist im Grundzustand in drei Bereiche eingeteilt. Den obersten Bereich der Applikation bildet eine "Top-Bar". In dieser wird der aktuelle Titel der Seite angezeigt, sowie verschiedene Icons die zu verschiedenen Ansichten der App führen. In diesem Falle ist ein Link zu einem Optionsfenster auf der linken Seite zu finden, sowie ein Icon zur Neugenerierung der Bar-Liste, als auch ein Icon welches zur Übersicht der Route in Form eines Kartenfensters führt.
Unterhalb dieser "Top-Bar" befindet sich die "Sub-Bar", welche durch drei Links zu verschiedenen Seiten führt. Der Link "aktuelle Route", welcher in diesem Falle durch eine dunkle Farbe und einen dunklen Balken indiziert, dass man sich auf dieser Seite aktuell befindet, führt zu der Route, welche sich aktuell im Bearbeitungszustand befindet. Der zweite Link "Meine Routen" führt zu einer Liste von den lokal gespeicherten Routen, die auch offline verfügbar sind. Als drittes ist der Link "Top 7" zu finden, welcher zu einer Seite mit den besten Routen der Woche führt.
Unterhalb der "Sub-Bar" befindet sich der Content-Bereich. In diesem wird eine Liste von Bars aufgeführt, welche die aktuelle Route darstellen. Die Liste ist scrollbar und lässt sich sowohl nach oben, als auch nach unten verschieben, die "top-Bar", als auch die "Sub-Bar", bleibt in diesem Falle statisch und werden nicht verschoben.
in diesem View besteht die Möglichkeit durch ein "wischen" von Rechts nach Links die Bar aus der Liste zu löschen und durch eine neue zu ersetzen (View 2.2)
Durch ein "Klicken" auf eine Bar, werden die Details für eine Bar aufgerufen (View 2.1)
Durch ein "Wischen" von Links nach Rechts öffnet sich das Optionsmenü
####View 2.1 - Overview Page mit genaueren Bar Information
#####Auslöser Dieser View wird aufgerufen, wenn auf eine Bar im View 2.0 geklickt wird
#####Beschreibung Durch das klicken auf eine Bar im View 2.0 werden erweiterte Informationen für eine Bar aufgerufen. Dabei wird die Box, in der sich die Informationen für die Bar befinden, gleichmäßig nach oben und unten ausgedehnt. Die anderen Bars der Route werden dabei oben und unten aus dem Bildschirm geschoben. Der neu gewonnene Platz zeigt nun, zusätzlich zu dem Namen, der kurz Beschreibung und der Bewertung, die Öffnungszeiten und die "Happy-Hour"-Konditionen. Des Weiteren zeigt eine kleine Karte einen Überblick über die Umgebung der Bar. Ein kleiner roter Knopf oben links neben dem Namen bietet dem Nutzer die Chance die Bar aus der aktuellen Route zulöschen. Nach dem betätigen wird zu dem View 2.2 weitergeleitet. Durch ein erneutes klicken auf den Timeslot, oder auch ein andere Bar, zieht sich die Ansicht wieder zusammen und der Nutzer befindet sich wieder im View 2.0.
####View 2.2 - Overview Page mit Austausch einer Bar
#####Auslöser Nach dem Löschen einer Bar, entweder durch das Betätigen des "Lösch"-Knopfes im View 2.1 oder durch das Wischen einer Bar von rechts nach links im View 2.0 wird dieser View aufgerufen.
#####Beschreibung Der Nutzer hat in diesem View die Möglichkeit eine Bar aus der aktuellen Route zu löschen. Durch das betätigen des "Bar austauschen"-Button wird die Bar gelöscht und der View 2.3 aufgerufen. Alternativ kann der Nutzer auf eine andere Bar in der Liste klicken, oder durch das Wischen von links nach rechts, das Löschen rückgängig machen und der Nutzer kommt wieder zum View 2.0
####View 2.3 - Overview Page nach dem Löschen einer Bar und der Auswahl einer neuen
#####Auslöser Betätigen des "Bar austauschen"-Button in der View 2.2
#####Beschreibung Der Timeslot der alten Bar kann in diesem View eine neue Bar platziert werden. Die Auswahl für die neuen Bars wird automatisch generiert anhand passender Happy-Hours, genaueres zu der Generierung der Auswahl kann dem Algorithmus des Frondend-Teams entnommen werden. Für jede Bar in der generierten Liste wird ein kleines Vorschaufenster erstellt. Das Vorschaufenster enthält die Kurzbeschreibung, das Bild der Bar, sowie die Bewertung und den Kostenfaktor. Um eine Bar auszuwählen kann der Nutzer durch ein streichen von rechts nach links durch die Liste scrollen. Dies soll grundsätzlich in beide Richtungen möglich sein. Hat der Nutzer eine passende Bar gefunden, so kann er diese durch ein klicken auf das Vorschaufenster auswählen und in den Timeslot setzen. Nach dieser Aktion befindet sich der Nutzer wieder im View 2.0.
####View 2.4 - Overview Page mit Optionen/Filterauswahl
#####Auslöser Betätigen des Optionen-Button oben links in der Navigationsleiste, oder durch ein Wischen von links nach rechts im View 2.0.
#####Beschreibung Im Optionsmenü lassen sich grundsätzlich Filtereinstellungen vornehmen. Des Weiteren kann man die aktuelle Route speichern, als auch die Share-Funktion betätigen. Im Formular für die Ortseingabe kann eine Stadt, Straße mit oder ohne Hausnummer eingegeben werden. Des Weiteren soll die Eingabe durch eine Autovervollständigung unterstützt werden. Tippt der Nutzer in das Feld und hat noch keine weiteren Eingaben vorgenommen, so ist die einige Auswahl "Aktueller Ort", welcher die aktuelle GPS-Position, ohne die Notwendigkeit einer eigenen Eingabe, auswählt. Die Autovervollständigung schiebt die anderen Menüpunkte/Filter nach unten um Platz für eine Auswahl der Vorschläge zu liefern. Weitere Optionen sind die Auswahl des Radius, Uhrzeit und Verweilzeit. Die Eingabe wird hier über Slider vorgenommen. Die vorgenommenen Einstellungen werden vorgenommen, wenn der Nutzer wieder in die "Aktuelle Route"-Übersicht (View 2.0) zurückkehrt. Durch das klicken auf den Button "Sharen" wird ein Popup im stile des Views 4.0 aufgerufen. In diesem kann der Nutzer einen Link kopieren, um diesen mit anderen Nutzern zu teilen. Durch das klicken auf "Offline verfügbar machen", wird die aktuelle Route offline unter "Meine Routen" verfügbar gemacht. Die Eingabe für den Namen der Route wird ebenfalls über ein Popup-Fenster vorgenommen. Will der Nutzer das Optionsmenü verlassen, so kann er dies durch das Klicken auf den Optionsbutton, welcher immer noch zusehen ist, veranlassen. Das Optionsmenü verlässt hierbei den Bildschirm auf der linken Seite und wird durch den "Aktuelle Route"-View verdrängt.
####View 3.0 - Meine Routen
#####Auslöser Betätigen des "Meine Routen"-Buttons in der Navigationsleiste
#####Beschreibung In diesem View sieht der Nutzer die Liste von Routen, welche er offline gespeichert hat (vgl. View 2.4).Jede Route wird mit einem Icon, einem individuellen Namen und einem Datumsstempel versehen. Die Anzahl der Routen ist hier auf eine Anzahl von X Routen beschränkt (bedingt durch den vorhanden Cache). Durch das Klicken auf einer dieser Routen, wird die Route im View "Aktuelle Route" (View 2.0) aufgerufen. Der Nutzer kann daraufhin diese Route wieder bearbeiten. Des Weiteren lässt sich die Route durch betätigen des "Lösch"-Buttons das Löschen einer Route initieren (View 4.0). Ähnlich wie im Optionsmenü (View 2.4) kann jede Route auch hier geshared werden. Dies geschieht, im gleichen Stile, durch ein Popupfenster. Mit dem Suchformular lässt sich in den eigenen Routen nach einer bestimmten Route suchen.
####View 4.0 - Popup-Overlay
#####Auslöser In diesem Falle durch das Betätigen des "Löschen"-Buttons im View 3.0. Dieses Mockup ist jedoch stellvertretend für sämtliche Popup-Vorgänge.
#####Beschreibung Wird von dem User einer Bestätigung oder eine Eingabe verlangt, wie z.B. beim löschen einer Route, so wird ein Popup mit diesem Stil aufgerufen. Über die aktuelle View wird eine graue, transparente, Fläche gelegt. Auf dieser wird das Popup dargestellt. Dieses kann allgemeine Informationen, Error-Messages o.ä. darstellen. Die konkrete Darstellung der einzelnen Popups kann variabel gestaltet werden.
####View 5.0 - Kartenansicht
#####Auslöser Betätigen des "Maps"-Button in der Navigationsleiste in der View 2.0
#####Beschreibung In diesem View wird die Route in form einer Karte dargestellt. Der View soll rein informativ sein und bietet nicht die Möglichkeit die Route zu verändern oder Einstellungen vorzunehmen. Jede Bar wird als Punkt auf der Karte dargestellt. Eine Linie auf der Karte verbindet die einzelnen Punkte. Drückt der Nutzer auf einen Punkt/Bar auf der Karte, öffnet sich ein Fenster in dem der Name der Bar, das Zeitfenster und auch die Adresse dargestellt werden. Durch ein klicken auf die Adresse soll der Nutzer in eine Drittanbieter-Applikation, wie z.B. GoogleMaps oder Apple-Maps, weitergeleitet werden.
###Version 0.2 - vorläufiges Mockup
- interaktives Sketchup: http://marvl.in/1h46d3
Kommentare/Verbesserungen:
- Subbar muss wesentlich größer gemacht werden
- "Meine Routen" zu trist und einfach im vergleich zu "Aktuelle Route"
- Änderung von "Top Routen" zu "Top 7"
- Erstellen von "Top 7" Mockup
Mockup wurde intern im Team besprochen und es wurden sich auf die oben genannten Verbesserungsvorschläge geeinigt, die im nächsten Mockup umgesetzt werden
###Version 0.1 - vorläufiges Mockup
- interaktives Sketchup: http://marvl.in/278iec
Kommentare/Verbesserungen:
- Schriftgröße muss verändert werden
- Zu überladen vom Text?
- Anpassung an die analysierten Anwendungsfälle
- Änderung der Navigation
- Trennung zwischen Filter und Navigation
- Änderung des Hinzufügens von neuen Bars
Mockup wurde intern im Team besprochen und es wurden sich auf die oben genannten Verbesserungsvorschläge geeinigt, die im nächsten Mockup umgesetzt werden