A look at how Oildex uses color theory to enhance user experience.

Tags: , , , , , , , , , ,

Getting color right in our user interface is a constant source of conversation and research at Oildex. When we’re considering color palette options in our OpenInvoice, OpenTicket, Data Exchange, and Oilfield Services Suits apps; we consider contrast ratios, visual hierarchy, color psychology, aesthetics, and, of course, user input.

Color Contrast Ratios
Legibility and clarity in our apps are essential at Oildex. We want our users to quickly read the text and identify important buttons and elements onscreen. To help us make sure everything is clear and visible, we follow the World Wide Web Consortium’s well-documented Web Content Accessibility Guidelines. They specify a 4.5:1 contrast ratio to accommodate users’ different visual acuity. At that ratio the majority of users in most environments can successfully distinguish onscreen elements; meaning, we don’t put light gray text on white backgrounds or put similar colors together. Even though not everyone has a vision impairment, everyone does benefit from the improved legibility that proper contrast provides.

Visual Hierarchy
Establishing a hierarchy is vital when it comes to navigation. The use of stronger colors to accent appropriate elements are used to help users quickly identify actions or navigate screens. Below is an example from one of our Data Exchange applications. Notice the action buttons on the first screenshot; ‘Delete,’ and ‘Download’ functions are shown grayed out. They’re inactive until an item is selected. Once a user selects a check stub in their list, the buttons activate — in this example, the ‘download’ button turns green, increasing the contrast ratio to highlight the element so that it stands out on the page.

ScreenShot 1
user experience_color theory
ScreenShot 2
user experience-Color visual hierarchy

Color Psychology
Color has a big influence on the behavior and mood in interface design — it plays an important role in the design process, from action buttons to conveying certain emotions. Green means go. Red means stop. We’ve all known that since before we could talk. Similarly, certain colors in digital interfaces can immediately convey an action or status with almost zero cognitive loads for users. Staying true to basic color psychology ensures an intuitive product and minimizes confusion.

Aesthetics
Our color palette is kept purposefully simple and limited. Using just a few shades consistently creates a pleasing and uncluttered interface. We avoid loud, clashing colors on purpose. Too much visual competition will fatigue users in a short amount of time.

We also look at the growing number of people using our apps on mobile devices. Sparing use of color and contrast ratios are even more important. Screens are exponentially more difficult to read amidst glare and ambient light. Imagine trying to approve a digital field ticket when text, buttons, and icons are equally-weighted shades of gray.

As for user input, that’s where you come in. We can’t stress enough how important getting feedback from our users is. If you have ideas about things we could do to improve your experience on any of our oildex products, email us.