Give it a try and see how it works.

Prototyping
Arduino
Usability

Color Case

Interface Design

Team

Nathalie Lea MißlingNina Hielscher

Semester, Year

2nd, winter 2022/2023

Design Objective

To enhance the digital color selection process for designers, we aim to implement various controls to enable precise manipulation and provide a color storage system that optimizes the workflow.
This approach eliminates the constant back-and-forth clicking with the mouse. Simultaneously, a haptic interface enables more intuitive and precise control.

Enhanced through  user feedback.

Design Objective

To check the initial functional prototype, we conducted task-based usability testing. Participants varied in their knowledge of color and their interest in color selection.

Tasks

  1. Coose an image
  2. Give the color a lilac/pink tone (peach)
  3. Save your color

Challenges

The strengths of the color selection function lie in its tactile feel. In particular, the precision-enhancing sliders in conjunction with an Adobe Color function are considered useful by users and are understood even without assistance. Users find the color selection process pleasant, which makes the entire interaction more appealing and fun.

Strengths

The implemented controls needed optimization in terms of position and readability. We discovered that our interface essentially serves two distinct purposes: color storage and color selection. This realization brought us back to the idea of incorporating different modules.

1. Encoder - Color Bar Control

The rotary knob is positioned at the center of the color selector. Surrounding it is an LED ring that displays either the HUE color scale or the 3 scales of the RGB color space. The controls on the desktop display move in the same manner. We use a 360-level encoder, which enables us to set colors with great precision.

2. Sliders - Color Field Control

The sliders are positioned at right angles to each other, the axes as in a coordinate system, and are analogous to the color field. The vertical slider controls the brightness and the horizontal slider controls the saturation. The sliders only ever move the cursor in the color field along their axis, allowing colors to be set more precisely.The sliders are operated by a motor, which allows us to give them a certain resistance when moving and which allows the slider to move to the correct positions when switching between the color spaces.

3. Switch and RGB

To switch from Hue to RGB, simply press a switch button. Above it are 3 buttons to switch between the 3 basic colors in RGB mode. The position of the switch allows the user to clearly see which of the color spaces it is in.If you switch to the RGB color space, additionally the LEDs of the inactive vertical slider switch off and the LED strip of the horizontal slider shows the scale of the current basic color.

4. Color-Save button

The prototype also offers the option of saving the set color. To do this, press the button on the left of the color memory. To be able to edit the color again, the user uses a long press on the same button.

Code and Color Window

We utilized a created server for communication between Arduino and JavaScript. Using JavaScript and the "One-Color" library, we programmed a page that represents a color window, which we controlled with the Arduino.

Imagining beyond the current project scope.

Code and Color Window

Through Cinema 4D rendering, we were able to visualize additional elements and functions that were not implemented in the prototype:

  • 2 Separable Modules
  • Touch and Display Screens
  • Reduced Size
  • Color Harmonies in the Color Storage
  • Elaborated Color Window

more projects