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

Upload: anakin

Post on 19-Jan-2016

44 views

Category:

Documents


0 download

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

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)“