skgm App-Development WebApp Frontend (4)

WebApp Frontend (4)

Interaktion

Beim ersten Start der WebApp wird der Nutzer aufgefordert seine EMail Adresse einzugeben und einen Anbieter auszuwählen, beides wird auf dem Smartphone in einem Cookie gespeichert. Der Nutzer kann beides jederzeit über die Einstellungsmaske, zu erreichen über den „Einstellungen“ Button, unten rechts, ändern.
Hat der Nutzer bereits eine Bestellung zusammengestellt, kann der Anbieter nicht mehr geändert werden, dies ist nur möglich wenn die Bestellung zuvor gelöscht wird. Auf diesem Weg wird verhindert, dass der Nutzer Produkte bei verschiedenen Anbietern wählt und somit Inkonsistenz in die Bestellung und die Berechnung des Gesamtbetrags bringt.
In der Software navigiert der Nutzer, neben den Buttons, durch scrollen und antippen von Unterpunkten einer Listenansicht. Die erste Ebene besteht aus einer Liste, die verschiedene Kategorien enthält und immer identisch ist, egal welchen Anbieter der Nutzer gewählt hat (der gewählte Anbieter wird namentlich oben links angezeigt). Durch den optisch immer gleichen Startpunkt findet sich der Nutzer auch nach Wechsel des Anbieters sofort zurecht. Tippt der Nutzer eine der Kategorien an, wird per slide Animation eine Liste der Produkte, die der gewählte Anbieter in dieser Kategorie führt und deren Preis dargestellt. Um wieder in die Kategorieansicht zu navigieren ist oben links ein „Zurück“ Button vorhanden.

Tippt der Nutzer eines der Produkte an, erhält er nach einer slide Animation die Detailinformationen des Produkts, inclusive Beschreibung und ggfs. weiteren Informationen. In dieser Maske kann der Nutzer unterhalb der Detailbeschreibung einen Freitextkommentar eingeben und das Produkt bestellen. Bevor es in die Bestellliste übertragen wird, muss der Nutzer das Hinzufügen in einem Pop-Up bestätigen; nützlich falls er beispielsweise in das Kommentarfeld tippen wollte, aber statt dessen den „Bestellen“ Button darunter angetippt hat. Er kann über den „Zurück“ Button oben links wieder die Liste der Produkte anzeigen lassen, oder aus der Detailansicht heraus direkt in die Bestellübersicht wechseln. Dafür ist oben rechts ein „Button“ mit der Aufschrift „Bestellung“ vorgesehen.
Tippt der Nutzer den „Bestellung“ Button oben rechts, wird die Bestellübersicht geöffnet. Dort kann der Benutzer einzelne Produkte aus seiner Bestellung löschen, über den „Zurück“ Button oben links zu der vorherigen Ansicht zurückkehren, oder über den „Bestellen“ Button oben rechts per slide Animation in eine Maske springen, auf der er falls gewünscht Datum und Uhrzeit der Lieferung/Abholung angegeben kann. Datum und Uhrzeit werden per DatePicker angegeben. Nachdem der Nutzer Datum und Uhrzeit angegeben hat, wird der Button zum Absenden der Bestellung eingeblendet. Tippt der Nutzer „Bestellung absenden“, muss er dies in einem Pop-Up bestätigen.
Klickt der Nutzer nach dem Absenden der Bestellung auf den „Zurück“ Button, wird per slide Animation die Bestellübersicht eingeblendet. Die Maske wird durch das Absenden der Bestellung modifiziert. Der Nutzer kann nun keine Produkte mehr löschen und statt dem Button „Bestellung absenden“ wird oben rechts ein Button „Details einblenden“ angezeigt. Tippt der Nutzer erneut den „Zurück“ Button oben links kommt er wieder in die Kategorieansicht. Weitere Bestellungen, bzw. das Hinzufügen weiterer Produkte, ist jetzt jedoch bis zum Abschluss der aufgegebenen Bestellung nicht mehr möglich. Tippt der Nutzer den „Details anzeigen“ Button, bekommt er die Parameter der Vorbestellung angezeigt (Gesamtpreis, Datum & Uhrzeit), sowie ein Button „Bestellung stornieren“. Damit kann der Nutzer die gesamte Vorbestellung stornieren und aus dem System löschen, so lange der Anbieter die Vorbestellung noch nicht bestätigt hat.
Sollte der Kunde dringende Gründe haben von der Vorbestellung zurücktreten zu wollen, so muss er sich telefonisch mit dem Anbieter in Verbindung setzen.
Hat ein Anbieter den Nutzer wegen eines Ausfalls gemeldet, wird dem Nutzer ein Hinweis mit der ID der Vorbestellung und den Kontaktdaten des Anbieters angezeigt. Er wird darauf hingewiesen, dass er sich mit dem Anbieter in Verbindung setzen muss um den Fall zu klären, und dass eine weitere Bestellung seinerseits, die als Ausfall markiert wird, zu einem Ausschluss vom System führt. Wird der Nutzer nochmals wegen eines Ausfalls markiert, wird er vom System ausgeschlossen und kann keinerlei Aktionen mehr über die WebApp durchführen.

Related Post