UI Semantic Differential

Overview

I’ve struggled nailing down some of the UI colors for an upcoming product change. One of the challenges working with a data querying/reporting product is the over-abundance of screen information needed for powerful tasks and workflows. These powerful tools have a lot of functionality and information that needs to fit into a modern web-browser. Now that I’m responsible for all aspects of UX design (UI, UX, and UR) at Remedy, I’ve been able to fine-tune some of my design processes and methods for decision making… which frequently turns into experimentation. This is the result of one of those design methods that I found useful in designing a massive, data-relational product. I’m sure others have done stuff like this before, but I found this technique and method for contextualizing UI colors valuable for validating them in the UI. This is not a style-guide. It is a graphic truth-table of sorts… a semantic differential.

Details

This project came about from reading a design book, Massification of the Intangible. As I struggled to pin down UI colors, I realized that making decisions regarding UI colors during processes that were focused on interaction and workflow was kind of like trying to sketch a landscape while driving down a bumpy road. Simply picking colors along the way or describing them in terms of color-value wasn’t enough. So I created some graphics that contextualized selected colors and produced some high-level color layout maps and color grids (semantic differential). I also mapped out colors by co-locating them in a grid, representing their placement as they existed in the UI (content zones next to panel zones). I even layered button colors and transparencies on the grid to evaluate their likeness and harmony with other UI elements – again the value of which was to evaluate them in context of each other. Marking used colors on a grayscale scale helped me see where my background color range was compared to my foreground color range. Finally, I created a color target to help me see the range of colors as it related to a layout-focusing technique that I was using from my cognitive psychology and visual/neurology knowledge – reducing contrast between peripheral layout elements and increasing the contrast between center-gaze layout elements.

Insights

I’ve usually just considered color-selection process of UI design to be very subjective… “this looks good”. But with the amount of layout and workflow elements I was working with, I needed some extra rigor and a different technique other than using RGB values and the ink-dropper tool to help me understand what I was doing. In producing this UI semantic differential, I realized that I had a couple of colors that were too close in contrast – and that I needed to choose one color for both. I also realized that the contrast levels I was working with usually amounted to a change value of 30 units (30-40). Finally this technique helped me understand and create a more solid rationale for a color-picking strategy I was trying to use. This was to keep more vibrant colors and higher contrast for visual content that was of high-importance or needed focus, and reducing the colors and contrast for more peripheral layout containers and content – drawing upon some ideas inspired from a focus+content visualization technique suggested by Leung and Apperley.