Um den digitalen Farbwahlprozess für Gestalter*innen zu optimieren, entwickelten wir Color Case.Ein haptisches Interface, das mithilfe verschiedener Bedienelemente und einem integriertem Farbspeicher, eine intuitive und genaue Steuerung bietet und damit den Workflow deutlich erleichtert.
Zur Überprüfung des ersten Funktionsprototyps, führten wir einen aufgabenbasierten Usability-Test durch.
Bei der Analyse ergab sich zum einen, dass die implementierten Regler Optimierungsbedarf hinsichtlich ihrer Position und Lesbarkeit und visuellem Feedback aufwiesen.
Darüber hinaus wurde deutlich, dass unser Interface insgesamt handlicher und kompakter gestaltet werden muss.
Dies führte zur Idee der Aufteilung unseres Tools in zwei Module:
die präzise Auswahl der Farbe
das Speichern der Farbe in einer seperaten Palette
Da es in Design-Programmen wie Figma keine Shortcuts für die zu steuernden Funktionen gab, war der direkte Zugriff auf den digitalen Farbwähler nicht möglich. Daher entschieden wir uns dazu, ein eigenes Farbfenster mithilfe der Bibliothek namens "One-Color" zu programmieren.Um eine reibungslose Kommunikation zwischen unserem mit Arduino gesteuerten Tool und unserem digitalen Farbfenster, das mit JavaScript programmiert wurde, sicherzustellen, haben wir einen Server erstellt.
Zeigt die aktuell ausgewählte Farbe, lässt sich durch Drücken des Buttons speichern
Zeigen die Skalen des RGB Farbraums, stellen sich synchron zu den LEDS des Color Case ein
Steuerung durch Schieberegler
Steuerung durch Schieberegler
oder Encoder
Der Drehknauf in der Mitte des Farbwählers wird von einem LED-Ring umgeben, der entweder die HUE Farbskala oder die 3 Skalen des RGB Farbraums darstellt. Die Regler auf dem Desktopdisplay bewegen sich analog dazu. Mit 360 Stufen ermöglicht der Encoder eine präzise Farbeinstellung.
Die Schieberegler, angeordnet im rechten Winkel, ermöglichen die individuelle Steuerung von Helligkeit und Sättigung. Im RGB-Farbraum schaltet sich der vertikale Regler aus, während der horizontale die aktuelle Grundfarbe (R, G oder B) anzeigt. Ein Motor sorgt dafür, dass die Schieberegler präzise positioniert sind, wenn zwischen den verschiedenen Farbräumen gewechselt wird.
Um von Hue zu RGB zu wechseln, betätigt man einen Switch Schalter. Darüber liegen 3 Buttons um im RGB Modus zwischen den 3 Grundfarben zu wechseln.Regler auf dem Desktopdisplay.
Der Prototyp bietet außerdem die Möglichkeit, die eingestellte Farbe zu speichern. Dazu drückt man den Button über einem der Farbfelder auf dem Farbspeicher. Um die Farbe wieder bearbeiten zu können, nutzt der User einen Long-Press auf demselben Button..
Dank Cinema 4D-Rendering konnten wir zusätzliche Elemente und Funktionen darstellen, die im vorherigen Prototyp noch nicht umgesetzt wurden:
Unser Konzeptvideo präsentiert die nahtlose Integration von Gerät und App, in einigen Nutzungskontexten.
