Home
Predicting Flight Delays Exploring Catastrophic Forgetting for Question Answering Domain Adaptation in Text-to-Text Transformers Effect of Political Ideology on Consumer Behavior Pulmonary Nodule Segmentation Poverty and COVID-19 Barriers to entry in Open Source Software Certifications and Discounts Interactive Wheel Based Image Recoloring GUI Coreless Promoters in Arabadopsis DNA Health Portal - Built for All

Interactive Wheel Based Image Recoloring GUI

The Purpose

Adobe researchers developed an image recoloring tool with an optimized image color decomposition algorithm. The goal is to redesign the user interface and improve the user interaction of the tool. To achieve this goal, we will represent the 3D geometrical representation of the hue, saturation, and value (HSV) color space in a 2D circular view. We utilized usability principles to design an effective interface that can be used by professional designers and knowledge workers.

Original UI:

The Quest

First we met with our mentor, Jose Echevarria, from our corporate sponsor, Adobe to understand the overall goals of our project. For the entire time we worked on the project, we met with him weekly to give progress updates, discuss any issues, and ensure we were working towards the correct goals. We prepared a requirements document that served to clarify the scope of the project. Also, once we had access to the codebase, we performed a technology review to better understand the different components and other technology in that space. Since most of us, were not very familiar with color theory, we spent some time learning more about the theories behind color and perception.

Our codebase mainly consisted of these libraries and functions:

  • Three.js: A library for 3D graphics
  • Chroma.js: A library for used to display color and different colors spaces
  • TrackballControls.js: Part of the Three.js library under the examples/js/controls and is used for interaction with the mouse
  • Detector.js: Has been refactored to WebGL.js, also part of Three.js under examples/js
  • stats.min.js: Monitors code performance
  • purl.js: Used to personalize webpages to each user
  • Blob.js: Represents file of raw immutable data
  • canvas-toBlob.js: Converts canvas elements into Blob objects
We spent about ten weeks coding to accomplish a redesigned graphical user interface. During this time, we also conducted a usability study with six participants to on the initial user interface given to us by Adobe. This helped us identify pain points for the users and understand what elements would be important in redesigning the user interface. After the development of the redesigned interface, we conducted another usability study with the same participants to identify if we were successful in providing users a more intuitive and easier to use interface.

The Solution

Redesigned UI

The Impact

To assess the usability of our GUI, we conducted initial user studies on Adobe’s original user interface and then another round after we developed our new GUI.

Takeaways from studies on the original GUI:

  • P3: “It assumed you already knew a lot of the functionality”
  • P2: “I don’t understand the RGB cube [but] I like the inertia feature”

Takeaways from studies on our redesigned GUI:

  • P3: “I really liked moving points on the color wheel [but] didn’t really need the sliders”
  • P1: “It was engaging to see my changes update in real time”