Grafische Benutzungsoberfläche für einen Fahrkartenautomaten
description
Transcript of Grafische Benutzungsoberfläche für einen Fahrkartenautomaten
![Page 1: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/1.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/3.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/5.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/8.jpg)
8
Styleguide
•Font: Calibri•Farben: Blautöne•Metaphern: Holl‘sche Icons
![Page 9: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/9.jpg)
9
Storyboard – „Ticket kaufen“
![Page 10: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/10.jpg)
10
Storyboard – „Fahrplanauskunft“
![Page 11: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/11.jpg)
11
Storyboard – „E-Ticket aufladen (cash)“
![Page 12: Grafische Benutzungsoberfläche für einen Fahrkartenautomaten](https://reader036.fdocuments.net/reader036/viewer/2022062409/56814e24550346895dbb897d/html5/thumbnails/12.jpg)
12
Storyboard – „E-Ticket aufladen (CC)“