Empty States Case Study
Ich habe dieses Projekt als Einreichung für ein Uxcel-Design-Brief erstellt. Darin wurde dem Designer die Aufgabe gestellt, Empty States für eine Bildungsplattform zu entwerfen. Ich habe mich entschieden, meine Seiten für eine Course-Collection-App zu erstellen, und weil das nicht genug war, wollte ich als zusätzliche Herausforderung für jede Seite auch Dark-Mode-Versionen entwerfen. ⬇️
Farbpalette: Light Mode
Als Brandfarbe hab ich Blau gewählt, um einen Eindruck von Ruhe und Konzentration zu vermitteln. Ein helles Aquamarin ergänzt die Palette um eine Akzentfarbe. Die für eine komplette App notwendigen weiteren Farben (etwa für Fehler, Erfolg, weitere Zwischentöne etc.) habe ich aufgrund des beschränkten Rahmens des Projekts nicht berücksichtigt.
Farbpalette: Dark Mode
Für den Dark Mode habe ich eine dunklere Variante des Blautons vom Light Mode genutzt. Die Brandfarben habe ich entsättigt, damit sie vor dem dunklen Hintergrund nicht zu kräftig erscheinen. Das neutrale Dunkelgrau ist in dieser Version ebenfalls heller.
Illustrationen und Icons
Für die Illustrationen, die den Effekt von Ruhe und Konzentration verstärken sollen, konnte ich einige kostenlose Vektorgrafiken von Streamline auf Figma finden, die es mir ermöglichten, die Farben zu ändern und sie an meine Farbpalette anzupassen. Die verwendeten Icons stammen aus der Majesticons-Sammlung. Ich benutzte sie, um eine Navigationsleiste für die App zu bauen.
Fertige Wireframes
Nun fügte ich die gezeigten Komponenten zu simplen Empty States zusammen, die den Nutzer schnell und effektiv darüber informieren sollen, wieso auf den Seiten jeweils nichts zu finden ist und was er dagegen tun kann:
Empty State #1: No Active Courses
Dieser Bildschirm soll im Abschnitt „Active Courses“ des „Course“-Tabs angezeigt werden, wann immer Benutzer keinen aktiven Kurs haben, unabhängig davon, ob sie neu in der App sind oder den Kurs, an dem sie zuvor gearbeitet haben, bereits abgeschlossen haben. Der primäre Text informiert die Benutzer schnell über den Zustand der Seite, während der sekundäre Text sie motivieren soll, mit einem Kurs zu beginnen, den sie durchstöbern können, indem sie auf den CTA-Button klicken.
Empty State #2: No Bookmarks
Dieser Bildschirm soll im Bookmarks-Tab erscheinen, wenn Nutzer keine Lesezeichen haben. Auch hier motiviert der CTA-Button sie dazu, etwas daran zu ändern.
Insights: Was ich aus diesem Projekt gelernt habe
Dieses Projekt war eines der ersten Uxcel Design-Briefs, die ich gemacht habe, bei denen es um die konkrete Gestaltung einer UI ging. Dabei ist mir vor allem Folgendes klar geworden:
- Weniger ist mehr: Die Empty States konzentrieren sich auf das Wesentliche, und das ist auch gut so.
- Dark Mode-Farben: Die Sättigung abzuschwächen ist ein einfacher Weg, eine Farbpalette für den Dark Mode zu optimieren.
Einen Link zu meiner Figma-Datei gibt es hier: