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.
Ob kleine Randnotiz, eine Erinnerung oder die Transkription eines Interviews. Notizen sind allgegenwärtig. Mittlerweile gibt es unzählige Möglichkeiten Notizen zu erstellen. Ob ganz analog von Hand oder gleich digital, damit man die Notizen direkt weiterverwenden kann. Durch die Betrachtung verschiedenster Scratchpads lässt sich feststellen, dass immer wieder versucht wird, Elemente aus dem analogen Alltag in die digitalen Anwendungen zu übertragen. Diese Entwicklung möchten wir mit unserem Redesign der Desktopanwendung von Evernote aufgreifen und die Vorteile eines analogen und klassischen Notizbuchs aufgreifen und im Digitalen durch freiere Möglichkeiten fortschreiten.
Die bestehende Desktopanwendung
Bereits auf den ersten Blick lässt sich beim Screenflow von Evernote eine beachtliche Tiefe feststellen. Die einzelnen Funktionen erfordern eine große Anzahl an Screens um ans Ziel zu kommen. Dabei versucht Evernote alle Funktionen auf einen Blick darzustellen. Der verfügbare Platz auf dem doch recht großen Desktopscreen wird von Evernote großzügig genutzt, was die Orientierung der User:innen zu ihren Ungunsten erschwert. Optimal für das Redesign von Evernote wäre also ein reduziertes User Interface, mit den wichtigsten Informationen an der richtigen Stelle, um den Umfang der Userflows zu reduzieren und somit die Usability zu erhöhen.
Flowcharts
Für jeden Use Case der Desktopanwendung wurde ein Flowchart erstellt. Dabei ließ sich schnell feststellen, dass die Flowcharts der einzelnen bestehenden Use Cases der Evernote Desktopanwendung vielschichtig sind und für eine bestimmte Aufgabe gleich mehrere Lösungen bieten. Dabei verlieren User:innen den Überblick, welche Aufgabe man auf welchem Screen erledigen kann. Dies möchten wir ausräumen, indem wir direkt bei der Ursache ansetzen: Dem Screenflow. Dieser soll erheblich reduziert und ausgedünnt werden. Dabei soll der Fokus auf den Basisfunktionen liegen. Im nächsten Schritt wurden für jeden bestehenden Use Case neue Flowcharts erstellt, um den kommenden Umfang des Redesigns besser abschätzen zu können.
Produktvision
Das Redesign von Evernote hilft Organisator:innen, Designer:innen, Schüler:innen und Student:innen, sowie Privatanwender:innen, deren Ziel es ist Veranstaltungen oder Projekte zu organisieren und Notizen zu diesen anzulegen, indem wir mit einer einfachen, gut strukturierten und realitätsnahen Anwendung ein optimales und nutzerfreundliches Umfeld bieten.
How Might We
Mit How Might We Questions, bei denen wir uns Gedanken zur möglichen Umsetzung der einzelnen Funktionen der App machten, legten wir den Grundstein für die ersten Skizzen und darauffolgende Varianten.
Konzept
Das bestehende Konzept von Evernote wurde auf den Kern analysiert. Dabei stellten wir fest, dass die aktuelle Desktopapplikation nur wenig intuitiv und zu sehr verschachtelt ist. Die Orientierung fällt den User:innen schwer. Diese Hauptprobleme lösten wir mit einem neuen Ansatz. Die neue App orientiert sich nun an der analogen Vorgehensweise beim Schreiben von Notizen. Dabei werden Notizen in ein Notizbuch geschrieben, welches anschließend in einem Bücherregal aufbewahrt wird. Dieses analoge Prinzip ergänzten wir mit digitalen Features, wie verschiedenen Markierfunktionen in einer Notiz, einem Vollbildmodus zum Lesen der Notizen, sowie einem Kalender für anstehende Events und einer To Do - Liste. Dabei war es das Ziel in der App, mit der man Abläufe plant und sich Notizen macht, gleichzeitig einen Überblick über anstehende Ereignisse zu behalten.
Umsetzung
Zunächst wurden aus den groben Skizzen Varianten gebildet, welche in einem interaktiven Prozess verfeinert wurden. Nach und nach wurden die Skizzen Stück für Stück in Wireframes umgesetzt und weitere Varianten gebildet. Dabei entstand am Ende der Konzeptphase ein “Minimal Viable Product”, welches unser Grundkonzept bildet. Dieses konnte als Clickdummy durch User Tests mit Ausnahme kleinerer Verbesserungen validiert werden. Anschließend wurde ein Teil des verbesserten MVP als vier Use Cases und fünf Keyscreens mit Figma (Visual Design) und Protopie (Prototyp) umgesetzt.
Visual Design
Evernote soll eine Wohlfühlatmosphäre bieten, welche die User:innen bei der Zielerreichung unterstützt und Informationen unaufdringlich, aber dennoch klar übermittelt. Warme Farben sollen dabei eine angenehme Umgebung bieten, während frischere Farben an wichtigen Stellen Akzente setzen. Reduzierte Formen stellen die Informationen in den Vordergrund und bieten je nach Information einen definierten Informationsbereich, welcher nicht zusammengehörige Informationen voneinander abgrenzt, aber Zusammengehörige gegenseitig ergänzen lässt und Bezüge herstellt. Dabei werden plastische Formen und Icons genutzt, um den analogen Bezug zu festigen und parallel die moderne, aber doch warme Atmosphäre zu erhalten. Um unsere moderne aber nicht klinische Designsprache erfolgreich umzusetzen, wurden viele Varianten gebildet und ständig evaluiert. Dabei analysierten wir vor allem die visuelle Wirkung dieser Designvarianten.
Für grundlegende Bedienfunktionen der Applikation, wie auch die Navigation, finden Flat Icons Verwendung. Sie sorgen für eine klare und distanzierte Beziehung zu den Funktionen und bauen zusammen mit den Fluent Icons einen Kontrast auf. Fluent Icons werden für Handlungen und wichtige Informationen verwendet, da sie diese deutlicher als Flat Icons illustrieren und die analoge Komponente verstärken.
Vielen Dank für das Interesse.
Wir wünschen viel Spaß beim Betrachten des Videos.
Nähere Informationen zum Projekt finden sich in der Dokumentation.
Bei Fragen oder Anmerkungen freuen wir uns über einen Kommentar.
Hinterlasse einen Kommentar