Geldautomaten-App. ÄNDERUNGSDATUM Thu May ERSTELLER Team "UI Konzeption" (Michael Schultes, Andreas Zeitler)

Transkript

1 -App ÄNDERUNGSDATUM ERSTELLER DATEINAME geldautomaten-app BESCHREIBUNG Screen-Mockups und Screen-Flow VERSIONSGESCHICHTE Freitag, 11. Mai 2012: erster Version Montag, 28. Mai 2012: finales UI Design und Anforderungen an die einzelnen Gruppen ergänzt Donnerstag, 31. Mai. 2012: Änderungen und Ergänzungen nach Kundenpräsentation, betreffend vor allem Bankengruppen- Auswahl

2 Screen Flow Screen 0 Bootscreen Standard Startbildschirm Activity Screen 1 Start Bankengruppe auswählen Ortungserfassung auswählen Activity Screen 2 Adresse Optionaler Screen zur manuellen Eingabe des Standort anhand einer Adresse Hintergrund Prozess Datenabfrage Datenabfrage vom Server als Hintergrund-Task zeigt Ladeanimation Auch an dieser Stelle: Nachricht wenn Fehler auftritt Activity Screen 3 Screen 3 Liste / Karte Liste / Karte TabBar Activity mit Listen-Tab und Karten-Tab Liste zeigt sortiert nach Entfernung Map zeigt als Stecknadeln Activity Screen 4 Details Detailansicht eines ausgewählten zeigt Adresse, Öffnungszeiten, Gebühren, Zusatzinfos zeigt außerdem: Karte mit User-Location und Geldautomat von hier aus kann Routining über Google Maps gestartet werden Dokument Legende Gruppen-Anforderung kennzeichnet Screen-Flow Anmerkung Anmerkung für UI Umsetzung Element identifiziert Steuerelement des SDKs (wenn möglich) 2 / 8

3 Screen 1: Start Geändert Anmerkung: immer portrait-only Ausrichtung (kein Landscape) Anmerkung: UI skaliert für Tabletts einfach, keine eigenes Tablet-Layout Tablet-Layouts gesondert berücksichtigt wenn genügend Zeit für die Umsetzung Basisinformationen ActionBar Bankengruppe Überschrift (Label) Bankengruppe 1 Sparkasse, Bank 2, Bank 3 Bankengruppe 2 Bank 1, Bank 2, Bank 3 Bankengruppe 3 Sparkasse, Bank 2, Bank 3 Bankengruppe 4 Sparkasse, Bank 2, Bank 3 List Mehrfachauswahl der Bankengruppe Geldinstitute in Gruppe werden als Detailtext (kleiner Schriftgrad) dargestellt um Eingabe des Geldinstituts durch User zu vermeiden Wenn zu viele Institute in Group für Liste dann unten Detailtext. Datenspeicherung": string[] cashgroups string[] cashgroupbanks hard-coded Werte für Bankengruppen und deren Beschreibungstexte (Geldinstitute) static string selectedcashgroup der ausgewählte Wert muss in der Activity des Screens 3 abrufbar sein (statischer Wert?) Banken in Gruppe: Sparkasse, Bank 2, Bank 3, Bank 4, Bank 5 Position festlegen Automatisch (GPS) Automatische Positionsermittlung, sehr genau Überschrift (Label) Spinner-Element 2 Label siehe unten kurze Beschreibung des Ortungsmodus Weiter Screen 3 wenn "Automatisch GPS" im Spinner-Element 2 gewählt Screen 2 wenn "Manuell" im Spinner-Element 2 gewählt Spinner-Element 2: Automatisch (GPS) Manuell Eintrag deaktivieren, wenn GSP nicht verfügbar Eintrag ändern in "Automatisch (GSM)" wenn nur Funksignal-Ortung verfügbar 3 / 8

4 Screen 2: Adresse Geändert Adresse eingeben Adresse eingeben Überschrift (Label) Straße PLZ Ort Nr Textfelder Textfelder Anforderung von Kundenseite: Auflösungsabhängig gestalten Adresse eingeben Adresse 1 Adresse 2 Adresse 3 Adresse 4 List speichert den Verlauf der eingegebenen Adressen wird zeitbedingt optional umgesetzt Gestaltung praxisbedingt anpassen (kleinere Schrift, anderer Rahmen, etc.) Weiter Screen 2 wenn Adresse vollständig Code: hier Adresse validieren siehe Address.isValid() Vorschlag: Mindestens PLZ oder Ort muss eingegeben sein, zusätzlich Überprüfung auf Typkorrektheit in PLZ- und Hausnummer- Feld (nur Zahlen) Klassen public class Address public string street public string number public string postal_code public string city public bool isvalid() "true" wenn Adresse vollständig genug für Serveranfrage public Address[] addresshistory optional als Datenhaltungs-Container für Adressverlauf public static void savetofile() lädt addresshistory aus einer Datei (JSON/XML) public static void loadfromfile() schreibt addresshistory in eine Datei 4 / 8

5 Screen 3: Liste mit Laden Listenansicht beim Start der Activity: Serverabfrage starten Interface-Methode für Start der Serverabfrage void startserverrequest(activity onactivity, Address withaddress = null) Liste Karte TabBar Karte deaktiviert -> aktivieren wenn Daten abgerufen Toast mit Spinner Umsetzung": folgende Schnittstellen-Methoden werden in dieser Activity benötigt (oder ähnlich): abfragen... void didstartserverrequest() Ladeanzeige einblenden und ggf. Liste leeren void didfinishserverrequest(atm[] resultingatms) Ladeanzeige ausblenden und Liste zurückgelieferte ATM-Objekte in Liste Laden void requestfailedwitherror(string errormessage) Zeigt Fehlermeldung an (z.b. "keine Internverbindung") Fehler-Handling mit Nachrichten-Boxen auf diesem Screen = Standard-Elemente von Android 5 / 8

6 Screen 3a: Liste Liste immer sortiert nach Entfernung Filterung der Liste kann geändert werden (z.b. nur kostenlos oder andere Bankengruppe) Standard: "alle" Listenansicht Liste Karte TabBar Sparkasse 100 m Listen-Item Gestaltung der Listen-Einträge entsprechend den technischen Möglichkeit dens SDKs Commerzbank 200 m Screen 3 Details zum Listen-Item Code: hier Listen-Item übergeben Commerzbank 300 m Sparkasse 1,2 km Commerzbank 12 km Refresh Filter Split ActionBar mit Refresh Button und Filter-Button Umsetzung": "Refresh": hier Liste neu laden, nur wenn GPS aktiviert oder erstes Laden fehlgeschlagen! "Filter": erlaubt Bankengruppe via Popup-Liste zu ändern -> löst Refresh aus wenn Bankengruppe geändert Filter-Spinner: > alle statische Optionen Klassen public class ATM Ausgestaltung dieser Klasse, Felder benötigt von UI-Umsetzung: > nur kostenlos Bankengruppe 1 Bankengruppe 2 aus string[] cashgroups erzeugt wenn möglich mit Detailtext in zweiter Zeile mit kleinerem Schriftgrad public Hashtable costsofwithdrawl Key-Value basierte Liste der Gebühren, Key=Bankengruppe, Value=Gebühren public static ATM[] atmsfound alle ATM-Objekte die die Serveranfrage liefert public static ATM[] atmsdisplayed Array der ATM-Ojbekte die aufgrund des aktuellen Filters angezeigt werden public static void updatefilter(string filter) aktualisiert atmsfiltered auf Basis des übergebenen Filters Umsetzung": bei Fertigstellen der Server-Abfrage wird aus atmsfound das atmsdisplayed-array erstellt und damit die Listenansicht gefüllt. Implementieren der updatefilter-logik 6 / 8

7 Screen 3b: Karte Kartenansicht Liste Karte TabBar Google Map Technisch noch nicht genau geklärt Offen: MapPins setzen? Overlay-Fenster darstellen? Userposition darstellen? Overlay-Fenster erscheint wenn auf Stecknadel getapped wird hat Button Sparkasse das Detail-Screen für Geldautomat aufruft Neupfarrplatz Screen 3 Details zum Listen-Item hier ATM-Objekt übergeben Map Pin Element (=Stecknadel) 7 / 8

8 Screen 4: Details Geändert Sparkasse: Sparkasse Neupfarrplatz 34, Regensburg Google Map Kartenansicht Details siehe unten Implementierung / 1. User-Position und Position des werden dargestellt. 2. Es wird beim Start der Activity die Route abgefragt und eingezeichnet. 3. Solange Abfrage läuft wird Ladeanzeige eingeblendet Öffnungszeiten Montag bis Freitag Wochenende Gebühren 8:00 Uhr bis 20:00 Uhr 8:00 Uhr bis 20:00 Uhr für Bankengruppe 2-Kunden 5,00 Euro für Bankengruppe 3-Kunden 5,00 Euro für Bankengruppe 4-Kunden 5,00 Euro Button startet Neuabfrage der Route Info-Bereich optional Scrollbar um weitere Infos darzustellen, wenn von Server geliefert, z.b. welche Karten Navigation starten Transfer zu Navigations-App entweder Android-App oder Google Maps im Browser hier Adresse des an Google Maps API übergeben und Navigation starten Minimap A: Route wird abgefragt A Minimap B Route nicht gefunden oder Anfrage fehlgeschlagen Minimap C Route gefunden + eingezeichnet. Gestaltungsmöglichkeiten nicht bekannt B C 8 / 8