Application Design I Prof. Hans Krämer Benedikt Groß

Transkript

1 Hochschule für Gestaltung Schwäbisch Gmünd Application Design I Prof. Hans Krämer Benedikt Groß Andreas Brendle Kirstin Walker Interaktionsgestaltung 3 Wintersemester 08/09

2 Application Design 03 Restaurantsoftware 07 Freeware Software 03 Use Case 18 Use Case 18 Kritik 17 Kritik 17 Informationsarchitektur 16 Informationsarchitektur 16 Funktionsumfang 15 Funktionsumfang 15 Bezahlmanager 14 Bezahlmanager 14 Hauptfenster 13 Hauptfenster 13 Login 12 Varianten 24 Blue Mesa 11 Buttons 23 Freeware Software 03 Varianten 19 Inhalt Recherche Analyse Umsetzung

3 Die Aufgabe im Fach Application Design I war es, ein Redesign einer Freeware-Software durchzuführen. Dabei galt es, nach einer geeignete Software zu recherchieren. Nachdem eine passende gefunden war, sollte diese nach unterschiedlichen Parametern, jedoch vor allem nach Informationsarchitektur, Struktur, Interaktionsmöglichkeiten, Usability und dem visuellen Erscheinungsbild analysiert werden. Im zweiten Teil wurde ein neues Konzept für ein Redesign der ausgewählten Software erarbeitet und umgesetzt. Application Design Inhalt

4 Datatron Datenbanken Freeware Software Recherche

5 S-Firm Online-Banking Freeware Software Recherche

6 PC Time Log Organisationssoftware Freeware Software Recherche

7 BlueMesa Restaurantsoftware Nach einigen Tagen Recherche haben wir uns entschieden, diese Software zu redesignen. Restaurantsoftware Recherche

8 Nachdem wir uns dafür entschieden hatten, eine Restaurantsoftware zu redesignen, haben wir in diesem Bereich weiter recherchiert. Auf den folgenden Seiten finden sich Ergebnisse unserer Internetrecherche. Nicht nur Freeware, trotzdem können wir uns bei keiner vorstellen, dass sie optimal zu bedienen sind.? Datatrackpos Restaurantsoftware Recherche

9 Ordermate Restaurantsoftware Recherche

10 Restaurant ProExpress Restaurantsoftware Recherche

11 Auf den folgenden Seiten werden wir die wcihtigesten Fenster: Login, Bestelleingabe und Bezahlen der Restaurantsoftware BlueMesa von Ralf??? genauer analysieren. Blue Mesa Analyse

12 durch Employee ID ID Card Fingerprint Logo Zahlenfeld Zusatzoptionen Login Analyse

13 Mitte: Vorwahl / einzelne Gerichte der Übergruppe / Beilagen, Zutaten, Saucen Bonmanager Bedienungsmanager Hauptfunktionen Bonmanager Logo Bedienung Auflistung Produkt + Preis Hauptgruppen Notiz Kundendatenbank Beilagen Preis Steuer Gesamt Produkt Detail Hauptfenster Analyse

14 Zahlmethode Bon History Bezahlmanager Analyse

15 Login-Bereich Benutzer ID eingeben / Bedienung Registrierung Manager Registrierung Hauptfenster Tageszeitabhängiges Essen wählen Hauptkategorien - Essen - Zutaten, Beilagen, Zubereitungsart - Trinken - Zugaben Notizen Kundeninformationen Anzeige - Produkt - Zusatz - (Gesamt-)Preis Ticket in Küche schicken Zahlungsfunktion Logout Zahlmanager Zahlungsart - Cash - EC - VISA -... Anzeige - Produkt - Zusatz - (Gesamt-)Preis Trinkgeld - zuschlagen - berechnen Bon - Drucken Zurück zum Hauptfenster Funktionsumfang Analyse

16 Informationsarchitektur Analyse

17 - unübersichtlich - falsche, unlogische Anordung und Gruppierung von Buttons - Funktionen einer Kategorie verstreut - zu überladene, falsch eingesetzte farbliche Gestaltung - Logo des Restaurants unnötig, sieht nur die Bedienung - Option, tageszeitabhängiges Essen wählen ist unnötig - Funktionen wie Tischwahl, Platzwahl dauern zu lange - Zahlungssystem zu unübersichtlich, Funktionen wie splitten der Rechnung fehlt - Zwei verschiedene Tastaturen - Essensauswahl bestätigen unnötig, Stornofunktion sinnvoller - benutzerunfreundlich - nicht intuitiv Kritik Analyse

18 Arbeitstitel: Herkömmliche Bestellung -Kassenterminal mit Touchscreen -Programm: Blue Mesa Persona Silke K, 33, ist neben vier weiteren Mitarbeitern in dem Restaurant Linde in Schwäbisch Gmünd tätig. Sie hat gelernt, das Programm schnell zu bedienen und kennt sicht damit gut aus. Die Bedienung loggt sich ein und gelangt zum Hauptfenster. Sie hat die Bestellung von zwei Gästen, die an einem Vierertisch sitzen, aufgenommen. Am Terminal wählt sie zuerst die Tischnummer. Dann wählt sie den ersten Platz und tippt die Bestellung Kässpätzle an. Zu trinken dazu wurde Radler bestellt. Sie wählt den nächsten Platz am Tisch, der ein Wiener Schnitzel mit Kroketten anstatt standartmäßig mit Pommes bestellt hat und kein Ketchup möchte. Als Getränk zu diesem Essen wurde Cola gewählt. Nachdem sie kontrolliert hat, ob sie alles richtig eingetippt hat, schickt sie die Bestellung an die Küche. Da sie vorher das essen den Plätzen zugewiesen hat, muss sie nicht fragen wer was bekommt. Die Gäste möchten zahlen. Sie registriert das Trinkgeld und druckt den Bon aus. Use Case Analyse

19 Nach ausführlicher Analyse haben wir uns daran gemacht, unsere Ideen für eine Restaurantsoftware digital zu entwerfen. Wir haben mit Entwürfen angefangen, die die drei groben Arbeitsschritte Login, Bestelleingabe und Bezahlen klar gegliedert sind. Varianten

20 Schnell wurde deutlich, dass eine klare Gliederung für die Arbeitsschritte sehr sinnvoll ist. Allerdings macht es kein Sinn, alles auf einen Screen zu packen, da es sonst wie beim Vorbild viel zu voll und unübersichtlich würde. Hier sehen Sie einen für das Login- Fenster, auf der nächsten Seite für die Hauptseite. Varianten

21 Varianten

22 Durch ein Reitersystem entsteht eine klare und eindeutige Gliederung. Am linken Rand angeordnet ermöglichen sie eine schnelle Bedienung, für geübte Benutzer kann so mit der linken Hand zwischen den Hauptkategorien geswitched werden und mit der rechten Hand die Auswahl getroffen werden. Ausgewählte Buttons der Hauptkategorien erhalten die gleiche Farbe wie der Hintergrund. Die Buttons für die weiteren Fenster Login und Bezahlen sind hier in den rechten Ecken angeordnet. Bei den Optionen No/Less/Extra ist standardmäßig immer schon eines von ihnen ausgewählt. Auch bereits aufgenommene Tische sind auf dem Screen zu sehen, so kann schnell zwischen ihnen gewechselt werden. Varianten

23 Die Buttons sollten und benötigen keine besondere Form oder Effekte, kein großes Drück mich, drück mich!. Der Benutzer (Bedienung im Restaurant) weiß, dass die Felder gedrückt werden müssen/können. Es gibt keine User, die die Application nur einmal und ohne Einweisung benutzen. In der Anwendung gibt es/ sind alles Buttons. Es gibt nur Felder, die nach dem Drücken auch ein Feedback geben. Sie müssen sich nicht viel abheben. Je schlichter sie sind und je weniger Aufmerksamkeit die Buttons an sich auf sich ziehen, desto mehr kann sich der Benutzer auf beispielsweise die Eingabe der Bestellung konzentrieren. Wichtig ist, dass sich der Benutzer schnell zurecht findet. Dafür bedarf es einer guten Anordnung und Menüstruktur. Der User sollte möglichst wenig Zeit an der Application verbringen, es muss schnell gehen. Die Buttons sollen eher etwas größer als übliche sein. Durch eine schnelle Eingabe, die wir erreichen möchten, wird gleichzeitig das tippen ungenauer. Deshalb ist auch der Abstand zwischen den Buttons sehr wichtig. Buttons

24 Unterschiedliche Varianten, bei denen Hauptfenster, Fenster für Optionen und Tischauswahl auf einem Screen untergebracht gezeigt haben, dass es zu unübersichtlich wird. Darum führten wir für diese weitere Reiter ein, die ihre Untermenüs erst nach dem Anwählen öffnen. Varianten

25 Varianten

26 Varianten

27 Varianten

28 Varianten

29 Varianten

30 Varianten

31 Varianten

32 Varianten

33 Varianten

34 Varianten

35 Varianten

36 Varianten

37 Varianten

38 - bei den Feldern, bei denen Zusatzoptionen möglich sind, erscheint nach dem Tippen ein Pop-Up Fenster. Dieses kann, wenn nicht gebraucht, schnell wieder geschlossen werden, da es an der gleichen Position wie das Feld den Schließen-Button hat -> Doppeltippen. Sonst können Zusätze/Optionen eingetippt werden und dann geschlossen werden. - Alle Extras und Optionen sind als Buttons immer verfügbar - Alle Extras und Optionen können durch einen Button geöffnet werden - Alle Extras und Optionen öffnen sich durch langes tippen auf dem jeweiligen Fenster Zusatzoptionen

39 Varianten

40 Trebuchet - Schnitzelwecken Kartoffelsalat DIN lightalternate - Schnitzelwecken Kartoffelsalat Bell Gothic - Schnitzelwecken Kartoffelsalat DIN Mittelschrift - Schnitzelwecken Kartoffelsalat Calibri - Schnitzelwecken Kartoffelsalat DIN Regular - Schnitzelwecken Kartoffelsalat Century Gothic - Schnitzelwecken Kartoffelsalat Verdana - Schnitzelwecken Kartoffelsalat Myriad Condensed Web - Schnitzelwecken Kartoffelsalat Helvetica - Schnitzelwecken Kartoffelsalat Myriad Pro Reg - Schnitzelwecken Kartoffelsalat Univers - Schnitzelwecken Kartoffelsalat tahoma - Schnitzelwecken Kartoffelsalat Univers - Schnitzelwecken Kartoffelsalat Schrift

41 - Touch, Multitouch - Joystick (Oben, Unten, Rechts, Links, Schräg, Bestätigen) - Kugel (Oben, Unten, Rechts, Links, Schräg, Bestätigen) - Touch und Tastaturähnliches gemeinsam für ungeübte Benutzer ist vermutlich ein Touch als einzige Eingabemöglichkeit das schnellste, mit dem geringsten Lernaufwand. Für geübte Benutzer jedoch wäre eine Eingabe mit beiden Händen, über zwei Schnittstellen, vermutlich nach einer Einlernzeit viel schneller. Schnittstelle

42 Umstetzung

43