Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

12
1 Grafische Benutzungsoberfläche für einen Fahrkartenautomaten Labor1 „Grafische Oberflächen“ Philipp Burgk, Johannes Förstner, Tobias Holl, Ruth Schattmann

description

Grafische Benutzungsoberfläche für einen Fahrkartenautomaten. Labor1 „Grafische Oberflächen“ Philipp Burgk, Johannes Förstner, Tobias Holl, Ruth Schattmann. Aufgabenbeschreibung. Abläufe Fahrkarten kaufen E-Ticket aufladen Fahrplanauskunft abrufen Eingaben/Ausgaben - PowerPoint PPT Presentation

Transcript of Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

Page 1: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

1

Grafische Benutzungsoberflächefür einen Fahrkartenautomaten

Labor1 „Grafische Oberflächen“

Philipp Burgk, Johannes Förstner, Tobias Holl, Ruth Schattmann

Page 2: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

2

Aufgabenbeschreibung

• Abläufe– Fahrkarten kaufen– E-Ticket aufladen– Fahrplanauskunft abrufen

• Eingaben/Ausgaben– Klicks, Geld (Münzen), Kreditkarte, E-Ticket– Anzeigen, Ticket, Münzen, Kreditkarte, E-Ticket

Page 3: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

3

Beschreibung der Benutzer

•Rentner–Langsame Eingaben–Eingeschränkte Sicht–Tippt oft daneben

•Tourist–Keine Ortskenntnis/orientierungslos–Erstmalige Automatenbenutzung–Falsche Eingaben

•Geschäftsmann–In Eile–Weiß genau, wohin/was er will

Page 4: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

4

Aufgabenbeschreibung

•Leistungen (Erlernbarkeit, Geschwindigkeit)

Vorgang Kriterium Hilfe Benutzer

Ticket kaufen • 5 min ohne Vorkenntnisse• 1 min sonst

•Kann lesen/schreiben•Besitzt Bargeld/Kreditkarte

E-Ticket aufladen •5 min ohne Vorkenntnisse• 1 min sonst

•Kann lesen/schreiben•Besitzt Bargeld/Kreditkarte

FahrplanauskunftAbrufen

•5 min ohne Vorkenntnisse• 1 min sonst

•Kann lesen/schreiben

Page 5: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

5

Fallstudie – „Ticket kaufen“

•Ticketkauf auswählen•Abfahrtsort festlegen/bestätigen•Zielort festlegen/bestätigen•Rabatt bzw. Anzahl der Tickets festlegen•Evtl. Rückfahrt hinzufügen•Geld einwerfen•Kauf bestätigen•Ticket drucken•Rückgeld entnehmen

Page 6: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

6

Fallstudie – „E-Ticket aufladen“

•E-Ticket einstecken•Zahlungsmitteln eingeben (Geld/Kreditkarte)•Betrag bestätigen•Neuen Wert des E-Tickets anzeigen•E-Ticket ausgeben•Rückgeld ausgeben

Page 7: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

7

Fallstudie – „Fahrplan abrufen“

•Fahrplanauskunft auswählen•Abfahrtsort auswählen/bestätigen•Ziel auswählen/bestätigen•Uhrzeit/(Datum) auswählen/bestätigen•Fahrplan anzeigen

Page 8: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

8

Styleguide

•Font: Calibri•Farben: Blautöne•Metaphern: Holl‘sche Icons

Page 9: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

9

Storyboard – „Ticket kaufen“

Page 10: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

10

Storyboard – „Fahrplanauskunft“

Page 11: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

11

Storyboard – „E-Ticket aufladen (cash)“

Page 12: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten

12

Storyboard – „E-Ticket aufladen (CC)“