Du willst Design studieren?Bewerbungsschluss zum Sommersemester 2023 ist der 15. November!
Inhalt des Kurses
Application Design 2
Die UX einer Software wird durch die Summe ihrer Teilaufgaben gebildet.
Ein allgemeines Erscheinungsbild der Software wird gestaltet, einzelne Abläufe und Interaktionen iterativ entworfen, überprüft und ausgearbeitet.
Eine Anwendersoftware erleichtert und vereinfacht vielfältige Arbeiten für Benutzer.
Ziel des Moduls »Application Design 2« ist es, die wichtigsten Arbeitsaufgaben einer ausgewählten Anwendersoftware (Desktop) zu analysieren, um diese neu zu gestalten und erlebbar zu machen. Im ersten Schritt bestimmen die Studierenden dazu eine geeignete Applikation als Betrachtungsgegenstand.
Die Müller Fotoanwendung gehört zum Fotoservice der Drogeriekette “Müller”. Zusammen mit dem Fotodienstleister “cewe” können verschiedene Fotoprodukte gestaltet und gekauft werden.
Die Anwendung verfügt über einen Editor, in dem die Produkte gestaltet werden und über die Software bestellt werden können.
Use Case
Um die Anwendung erfahrbar zu machen, wurde ein Use Case festgelegt. Anhand von diesem konnte die Anwendung und deren Nutzung repräsentativ dargestellt werden.
Der Use Case umfasst dabei das Kaufen eines individuellen Fotobuches über die Müller Bestellsoftware. Aufgeteilt in drei Abschnitte, wird der komplette Prozess durchgegangen. Dazu gehört die Vorauswahl zum Buch, das Gestalten der einzelnen Seiten und der Bestellvorgang als Abschluss.
Research und Erkenntnisse
Die Anwendung wurde mithilfe von verschiedenen Methoden analysiert und durch User Testings und kurzen Interviews, konnten hilfreiche Erkenntnisse gewonnen werden. Die Anwendung ist sehr umfangreich und bietet eine vielfältige Auswahl an Bearbeitungsmöglichkeiten innerhalb des Editors. Dabei wirkt es fast schon überladen und wird schnell unübersichtlich. Die Navigationsstruktur und Zugänglichkeit von verschiedenen Tools ist dabei irreführend und inkonsistent und vermindert die Usability. Auch der Prozess, das Fotobuch zu gestalten, ist laut User:innen langwierig und ineffizient. Dabei sind die User:innen oft schon erschöpft vom Einfügen und Platzieren der Fotos auf den einzelnen Seiten und haben schließlich keine Zeit mehr, das Fotobuch zu gestalten.
Lösung
Die Anwendung sollte übersichtlich sein und einen möglichst effizienten Prozess ermöglichen. Dazu reduzierten wir das Erscheinungsbild auf die wichtigsten Tools und ordneten die Navigationsstruktur neu an. Außerdem wurde ein neues Feature miteingebaut, welches den User:innen beim Einfügen von Fotos helfen soll und somit genügend Zeit zum Ausgestalten ermöglicht.
Wireframes
Es entstanden einige Varianten zu den einzelnen Aufgaben innerhalb des Use Cases. Diese wurden in digitale Wireframes umgesetzt und es entstanden mehrere Klickdummys.
Visual Design
Wir entschieden uns für dezente Grau- und Weißtöne für den Hintergrund, sodass das Erscheinungsbild ruhig und aufgeräumt wirkt. Der Fokus kann dann auf dem persönlichen Fotoprodukt liegen und die User:innen werden nicht zu stark abgelenkt. Als Akzentfarbe wird das Müller Orange verwendet, dadurch werden bestimmte Elemente hervorgehoben und die Farbe bewirkt eine starke Assoziation zur Marke Müller.
Mithilfe von leichten Schatten werden Ebenen besser voneinander abgehoben, sodass klare Hierarchien entstehen und die Nutzer:innen sich intuitiv zurechtzufinden.
Microinteractions
Besonders Wert gelegt wurde auf verschiedene Microinteractions und Animationen. Diese geben den Nutzer:innen Feedback und tragen so erheblich zu einer verbesserten Usability bei. Dabei wurden allgemein verschiedene States (Hover State, Default, Active) bei Buttons und Cards umgesetzt. Auch kleine Animationen, die es den User:innen ermöglichen, Vorgänge besser nachvollziehen zu können und die Übersicht zu behalten. Im Editor wurden Tooltips verwendet, die den User:innen die Icons zusätzlich erläutern. So kann ein reduziertes Gesamtbild eingehalten werden und trotzdem genügend Informationen zu den Bearbeitungsmöglichkeiten an die Nutzer:innen vermittelt werden.
Hinterlasse einen Kommentar