- 1Das Ziel
- 2Analyse
- 3Design System: Kommunikation
- 4Scan Animation
- 5Scan Dots
- 6Scan Blur
- 7Bild Feedback
- 8Design System: Komponenten
- 9Ergebnisse und Ausblick
Das Ziel
Nomitri steht vor der Herausforderung, die App als Lösung in einer anstehenden Präsentation vor Einzelhändlern zu verkaufen. Zu diesem Zeitpunkt besitzt das Team keinen Designer. Die Oberfläche der App wurde von den Entwicklern mitgestaltet. Die Gründer erkannten, dass die App visuell ansprechender und transparenter gestaltet werden muss. Nomitri benötigt ein zielgruppengerechtes und ansprechendes Design für die Endnutzer.
Analyse
Vorgehensweise
Bei einem eintägigen Workshop in Berlin mit den Gründern und Entwicklern tauchten wir tief in die Vision von Nomitri ein. Wie soll Nomitri auf dem Markt wahrgenommen werden? Wer ist unsere Zielgruppe und welche Erwartungen hat sie an die App? Welche Daten zum Nutzerverhalten existieren, die sich für das Design verwenden lassen? Hier ins Detail zu gehen ist besonders spannend, da der Workshop die Basis für den späteren Erfolg des Designs bietet.
Exkurs: Dev & UX
Die Ziele der Gründer waren klar: Sie benötigen eine schnell adaptierbare Lösung, mit einem Fokus auf Ästhetik und ein Design, das die wertvollsten KPI erhöht. Für mich war es jedoch ebenso wichtig zu erfahren, wie wir dieses Design an das Entwicklungsteam geben. Denn das schönste und durchdachteste Design ist wertlos, wenn es die Entwicklung unverhältnismäßig lang beeinträchtigt. Aufgrund meiner Vorerfahrungen im Software Development konnten wir schnell Aspekte sammeln, die für die Entwicklung zu berücksichtigen sind.
Die aktuelle Lösung
Im Anschluss an die Positionierung arbeiteten wir uns gemeinsam durch die aktuelle Lösung der App, um alle jetzigen und auch zukünftigen Anwendungsbereiche zu verstehen und auf deren Funktionalität zu prüfen. Wir schlossen den Workshop mit einer Definition und Sammlung von User Stories ab, die den Umfang des Projektes festlegen sollten:
- Design Guidelines
- Komponentenbibliothek
- Content Guidelines
- Journey & Wireframes
- User Interface & Präsentation
Design System: Kommunikation
Grundlagen
Im ersten Schritt erstellte ich ein Design System, dass mit spielerischen und farbenfrohen Elementen kommuniziert. Simple Formen bei den Komponenten sorgen für hohes intuitives Verständnis beim Endnutzer. Das Design System soll helfen, die App skalierfähig und konsistent zu gestalten. Dafür sorgt eine Farbpalette, eine Beschreibung der Typografie und Abstandsregeln.
Communication Guidelines
Einen hohen Stellenwert für die App hat das Thema Kommunikation. Da der Nutzer beim Scannen von Lebensmitteln nicht immer auf das Smartphone blickt und die KI an wenigen Beispielen noch fehlerhaft scannt, sind verschiedene Arten von Feedback notwendig.
Die Übermittlung von Feedback ist einer der wichtigsten Schritte, um sicherzustellen, dass eine künstliche Intelligenz ihren Nutzern ihren Zustand und ihre Absicht effektiv mitteilen kann. Integrität und Offenheit in der Kommunikation erhöhen nicht nur das gefühlte Maß an Sicherheit und Konformität für Nutzer, die Informationen weitergeben, sondern sind auch notwendig, um Daten Leben einzuhauchen und komplexen Berechnungen und Formeln ein Gefühl von Empathie zu verleihen.
Animationen
Bei Nomitri verkörpern Animationen den Stil des Start-ups, betonen die Verbindung zwischen Elementen, weisen auf Zustände und Aktionen hin und geben Feedback. Weiterhin nutzen wir Animationen, um Emotionen zu vermitteln und der künstlichen Intelligenz die Möglichkeit zu geben, auf unbeschwerte Weise zu kommunizieren und so Vertrauen, Sicherheit und Konformität zu erhöhen.
Scan Animation
QR Code Scan
Durch das Einbinden einer subtilen Animation wird eine Scanfunktion als aktiver wahrgenommen. Nomitri verwendet die typische Animation, die mit dem Scanvorgang verbunden ist. Ein dünner Balken, der sich von einer Seite zur anderen bewegt und ein transparentes Rechteck hinterlässt.
Scan Dots
In der Animation sind Kreise eines der vorteilhaftesten Elemente, da ihre einfache geometrische Form ein leichtes Verständnis ermöglicht und eine Vielzahl von Formen und Bewegungen erlaubt. Bei /nomitri/nomitri-Lösungen werden Status und Fortschritt durch Töne und Punkte kommuniziert, die von verschiedenen Bewegungspfaden begleitet werden.
Scan Blur
Der Scanning Blur besteht aus zwei um 45° gedrehten, stark verschwommenen, kegelförmigen Radialverläufen mit 30 % Deckkraft, die zu 75 % außerhalb des oberen oder unteren Bildschirms platziert sind. Sie verändern und betonen den aktuellen Zustand.
Bild Feedback
Feedback Clouds bieten eine visuelle Darstellung potenziell verbesserungswürdiger Scans. Der Benutzer kann diese sehen, wenn er ein unbekanntes Ereignis klären oder korrigieren muss. Dadurch wird die Lernkurve für die korrekte Verwendung der App erhöht.
Design System: Komponenten
Kontrast als Herausforderung
Während der Auswahl der Farbwerte und der Erstellung der Komponente wurde eine Schwierigkeit ganz besonders hervorgehoben: Die App zeigt größtenteils das Kameradisplay an, das wiederum von oben auf den Einkaufswagen gerichtet ist. Supermärkte haben verschiedene Wagen- und Bodenfarben, von hell bis dunkel. Durch zahlreiche Kontrast-Tests konnte ich das beste Ergebnis finden: Die UI ist standardmäßig in einem Dark Mode, mit einem abdunkelnden Overlay oberhalb der Kamera und starken, farblich von weiß/hellbraun und schwarz erhöhten Kontraste. Wichtige Elemente werden zusätzlich umrahmt.
Einzigartiger Hintergrund
Um ein Gefühl von Bewegung und Lebendigkeit zu vermitteln, werden im Hintergrund verschwommene, sich bewegende Ellipsen verwendet. Ihre Struktur besteht aus mehreren kreisförmigen geometrischen Elementen in den Primärfarben des Design Systems, die zusammen und getrennt voneinander bewegt werden können. Bewegungen sollten jedoch mit großer Sorgfalt verwendet werden, wenn es mit Bewegung eingesetzt wird, um die Aufmerksamkeit des Nutzers zu erhalten.
Atomic Design
Für die Entwicklung von Designsystemen bietet das atomare Design eine klare Methodik. Die Fähigkeit, vom Abstrakten zum Konkreten zu gelangen, wird durch das atomare Design ermöglicht. Dadurch sind wir in der Lage, Systeme zu entwerfen, die Konsistenz und Skalierbarkeit fördern und gleichzeitig die Dinge in ihrem Kontext veranschaulichen. Indem wir ein System zusammensetzen, anstatt es zu dekonstruieren, können wir es von Anfang an konstruieren, anstatt uns im Nachhinein Muster herauszupicken.
Ergebnisse und Ausblick
Ausblick
Nach dem Prinzip "The best UI is no UI" kann eine Verbesserung der AI dazu beitragen, Fehlerraten zu verringern und somit den Nutzer zu weniger Interaktionen zu fordern. Zudem können großflächigere Tests der App dazu beitragen, Feedback von Nutzern zu sammeln und diese zur Verbesserung der App zu nutzen.