Color Theory

Color choice matters. Having the right colors, represent the right things, in the right places, act as visual cues to website visitors and mobile app users without requiring them to process words to understand where one step leads to another.

Beginning

Early color theory ideology is fairly common as it’s frequently taught in primary school art classes. Light and dark colors for contrast, chroma for saturation and intensity, hue that identifies colors. The first stage of color theory, historically, was the identification and mixing of what is commonly referred to as primary colors – we all know these as Red, Blue, Yellow. The idea that mixing primary colors can create all colors, though antiquated, does provide the basic understanding of how we understand color. Our perception and manipulation of physical colors in the visible spectrum not only gets identified at an early age, but we also start to be indoctrinated – in a way – to how those colors should be perceived.

Perception

A large portion of color theory focuses on the scientific and artistic combination of colors to create alternating hues and saturations in an effort to produce a type of harmony. In interface design, color theory can be used to leverage the fundamentals of color identity, harmony, and how various colors work together to provide intuitive interface objects that don’t require much more than simply recognizing contrast in areas that make intuitive sense to users.
  • Dark backgrounds on buttons against light content containers
  • Lighter font colors for links amongst dark paragraph context
  • Saturated backgrounds on objects housing navigation or areas of interest
  • Related, harmonious colors for active application states
These things, albeit basic, are cornerstones for how we intuit separation between areas of focus and areas of importance. Using these fundamentals, we can leverage the psychology of colors and perception of them to optimize the flow of an interface and greatly decrease friction from point to point within conversion funnels.

Optimize

When addressing your application or website and trying to reduce friction as much as possible, here’s a list of questions to run through. The answers to these questions require an understanding that humans are inherently impatient, have far more options at their fingertips than ever before in history, and will follow the path of least resistance on their quest to improve or add to themselves, their lives, their possessions, or their business.
  • Are links easy to discern from regular text?
  • Are links concise? (1 – 4 words, as to not be confused with emphasized text)
  • At first glance, can you spot the most important button on the page without reading it?
  • Do you have instructions for how to get from one area of your interface to the next?
  • Is your navigation hidden?
  • Without reading, can you see the most important objects on the page that aren’t images?
The common thread, can you move from the landing area of an interface to a conversion funnel, without reading or thinking about it? Proper use of color will allow users to achieve this. The effort needed to make a large impact is minimal, the results can be remarkable, and if done correctly, your app or website should also end up looking more polished and well thought out.

Association

Written copy is important for a number of reasons; it’s good for search engine optimization, people generally like to research their decisions prior to coming to a conclusion, and it gives you a means to provide users a reason to stay. What it doesn’t provide is an opportunity to instruct or guide – often. This doesn’t mean you don’t have an opportunity to instruct of guide, but unless your brand is established and people are seeking you out already sold on understanding the expected outcomes of using your app or website, it is important to allow inference from presentation. Some examples of how this applies to primary brand establishment:
  • Forest Green is commonly associated with finance
  • Pastel blue or vibrant, saturated primary colors, association is social media
  • Pure blue, the association is medial or dental
  • Navy is commonly associated with government entities
  • Red is very commonly used in the food industry, as well as vibrant orange
Knowing common threads for how colors are associated to industries by consumers at scale is a matter of conditioning over time. This doesn’t mean there isn’t flexibility in color palette for branding but it should help drive decisions on imagery and focus of elements that can easily draw the relationship between your website or app and industry it serves. On a micro scale, color association for affirmation is as simple as not using red, which typically translates to error/stop/cancel. Oddly enough, green is too obvious and shouldn’t be used for calls-to-action, if you can help it. Blues, yellows, oranges, and monochromatic colors are all great for drawing attention to objects, as long as the contrast is elevated against the common environment of the interface design.

Palette

Every interface should include at least three colors that are associated to your brand. Brand colors typically come from personal decisions or a design agency, but from that the brand colors can be used to determine contrast hues to use for calls to action, hover/action states, and interface emphasis zones. Common color harmony variances follow these rules:
  • Analogous: A series of colors very closely related in hue to one another, slightly shifted, all with the same saturation levels.
  • Monochromatic: A palette very closely related saturation shifted
  • Triad: A variance of colors offset to provide a set of complimentary colors that reside along the same hue level
  • Complimentary: Linear offset colors that are directly opposite (on the spectrum) in relation to the first color in the provided palette
  • Split Complimentary: Linear, angular offset colors that are opposite to the first color provided in the palette
  • Double Split Complimentary: Uses the split complimentary then direct complimentary to provide a series of colors offset from the first provided
  • Square: A linear cross of complimentary colors based on a single, primary color provided
  • Compound: A compressed split complimentary palette that leverages a favored half of the spectrum (cool colors stay cool, warm colors warm)
  • Shades: Brightness shift of a single color
The usage of color, properly thought through, balanced and placed into an interface can make a large, positive impact on the performance of a website or mobile application, especially if the goal of the interface is to capture some type of conversion through a funnel or form. The more intuitive and psychologically-friendly the design of your project is, the better it will perform.

Making Decisions with Data

The smartest decision that can be made about your web or mobile app are details that you likely already have, it’s just a matter of finding them and determining how to use them.

Big Data

Intimidating. Vast. Overwhelming. The term “Big Data” sounds far more brooding than it actually is. Large amounts of data, when organized into uniform parts, isn’t difficult to digest if you know where to start, and what questions you’re trying answer. Put simply, big data is merely a larger set of data. If organized correctly, it simply has more answers, more things to discover, and more possibilities to help your online business grow. The important thing to note about analysis of data is that it can and should provide decisions outside of your intuition or the opinions of others. Pages that are visited the most, points in the sales funnel that see a high level of exits, contact forms that simply aren’t ever filled out, shopping carts left unfulfilled, and ad campaigns that simply never result in generating new business. All of these things and more can be discovered in your existing data. Reading site logs and usage metrics help pave the way to optimizing your online presence to be a powerful, completive, and successful online business.

First thing’s first

In order to properly assess a website’s or mobile app’s performance, the data must be organized and uniform. Usage metrics are typically measured via code embedded in the pages for each content page or interface object in your project. Additionally, buttons, forms, and page flows (product page > cart > shipping > checkout > thank you) should all have analytics code embedded within it. Every entry page that’s captured can all the following actions on the site should be recorded to give you the most conclusive and comprehensive snapshot of website or mobile application performance. Once you’re certain your application is tracking all the proper pages and objects, you’ll have to determine what you need to know. Typically understanding what you want to discover in the data presents itself quickly:
  • Newsletter sign ups
  • User registrations
  • Increase in returning visitors
  • Additional ad-revenue opportunities
  • Shopping card abandonment
  • Products and related product sales
  • Contact form and lead generation
  • Content resonating among site visitors
  • Conversions from Free to Paid users
  • Digital Downloads
  • Media plays
The types of conversion and content that users can consume online is nearly endless, but at the end of the day, the fundamentals for what’s needed stay the same from business type to business type, industry to industry. “What makes users show up” and “how do I keep them clicking?”.

Let Data Guide You

It might sound cheesy, and this isn’t about just letting intuition and opinions go to the way side while you follow only what the analytics tells you, but there’s a level of prioritization, objectivity, and clarity that can come from allowing the data drive the decisions for how you change your business. A common thread for designing apps and websites is the personal connection the creators have toward the aesthetics of their project. While it’s possible to improve some aspects of a business’s outcomes without drastically changing the look and feel of their website or mobile app, data might tell you “everything’s on the table”.
  • Do you have too many steps in your sign up process?
  • Which pages draw more traffic?
  • What’s different about content areas that underperform?
  • Are your CTA’s in the correct place?
  • Are they the correct color?
  • Is the navigation clear?
  • Is the interface easy to understand?
  • Is your copy properly in-linked, worded, and placed?
  • Are your content elements big enough? Small enough? Spaced correctly?
All of these are factors that can be determined with a mix of best practices, general consumer psychology, and data analytics.

Never Stop Improving

As your website or mobile app gains traction, more users, more customers, more traffic means more data. Routinely sampling and analyzing usage metrics can greatly improve and continually allow your business to evolve to what resonates among your ever-changing audience. Staying relevant, allowing yourself to constantly evolve, and your business to continually improve is a key factor in increasing revenues and expanding your horizons. Big Data is the key and allowing yourself to read it, trust it, and follow the guidance it can provide is how you get from where you are to where you want to be and beyond.