Color Case - Interfacedesign 1

Um den digitalen Farbwahlprozess für Gestalter*innen zu verbessern, entwickelten wir Color Case. Verschiedene Bedienelemente ermöglichen eine präzise Steuerung und der Farbspeicher erleichtert den Workflow.

Problematik und Nutzungskontext

Wo genau liegt die Problematik oder Verbesserungspotenzial bei der Farbwahl? Um das herauszufinden, starteten wir zu Beginn des Projekts eine kleine Umfrage unter Mitstudierenden und Dozenten.

Wir sind zu dem Schluss gekommen, dass wir das ständige Hin- und Herklicken mit der Maus vermeiden und mit einem haptischem Interface intuitiver und präziser steuern wollen.

Erste Ansätze

Aus unseren Ideen kristallisierten sich 2 Bereiche heraus, die beide Teil unseres Interfaces werden sollten. Zum einen die Bedienung der Farbwähler der Anwendung und zum anderen ein externer Speicher.

Dabei beschäftigten wir uns besonders mit der Haptik von verschiedenen Bedienelementen und deren Feedback, wie zum Beispiel ein bestimmter Widerstand, fühlbare Stufen oder gewählte Anschläge.
Eine Idee der Crazy8 war ein farbkastenartiger Aufbau. Dafür haben wir uns die klassischen Wasserfarbkästen genauer angeschaut und uns überlegt, wie man die Farbmischtöpfchen in einen technischen Kontext bringen kann.

Code

Server und Arduino

Da es keine Shortcuts für die zu steuernden Funktionen gibt, konnten wir nicht auf den Farbwähler in Programmen wie Illustrator oder Figma zugreifen. Deswegen nutzen wir einen selbst erstellten Server zur Kommunikation zwischen Arduino und Java Script.
Mit Java Script und der Library “One-Color” programmierten wir eine Seite, die ein Farbfenster abbildet, das wir mit dem Arduino ansteuern.

Farbfenster

Das Farbfenster ist so aufgebaut, dass es die wichtigen Funktionen unseres Prototyps direkt anzeigt, wodurch es dem User verdeutlicht, welche Möglichkeit er hat, um seine Farben einzustellen.

Usability-Testing

Prototyp

Der Prototyp für das Testing beinhaltete schon einige der wichtigsten Funktionen. Jedoch gab es noch vereinzelte Einschränkungen.
Trotzdem war es sehr aufschlussreich und wir konnten einige Probleme und Aspekte erkennen, die uns geholfen haben unseren Prototypen weiter entwickeln zu können.

Allgemein nehmen wir aus dem Testing mit, dass das gesamte Interface handlicher und kleiner werden muss, damit es einen Use Case findet. Außerdem stellten wir fest, dass unser Interface im Groben zwei verschiedene Aufgaben erfüllt, das Farbspeichern und die Farbwahl. Diese Erkenntnis brachte uns wieder zu einer unserer ersten Ideen, der verschiedenen Module.

Finaler Funktionsprototyp

Finaler Designprototyp

Durch das Cinema 4D Rendering, konnten wir noch einige Elemente und Funktionen darstellen, die wir im Prototyp noch nicht umsetzen konnten: