Tuesday, November 18, 2014

Color and usability?

We all know that colors have an important role in good design. Designers must remain sensitive to how different people perceive colors, while honoring typical color conventions: green means Go, red means Stop, etc. Additionally, users will associate user interface controls that use the same or similar colors to mean the same thing.

In user interface design, particularly with open source software and usability, colors also affect the mood of an application. Darker colors may be perceived to be moody, while lighter colors may suggest an airy, friendly interface. It's no surprise that both iOS and Android have shifted to using bright colors in their icons and interfaces.

Colors must certainly harmonize for this to work, however. As uncovered in a 2003 study, users perceive aesthetically pleasing interfaces to be easier to use. In the study, the same website rendered with a different, contrasting color scheme fared poorer usability than the same website with a pleasing color scheme. Similarly, users learn best when applications use color in a standard way, such as links in a web page.

Recently, I began to consider the perceived (not actual) usability of open source software programs based simply on their choice of color. In particular, GNOME uses a high-contrast white-on-black top bar. The new GNOME 3.14 uses dark windows for some applications (such as Photos and Weather) which is different from the light colors in most other GNOME programs (such as Nautilus file manager). Could these colors affect how GNOME is perceived by new users?

To start, let's look at a few examples:

MacOS X Yosemite (from Wikipedia)
Windows 8 (from Wikipedia)
GNOME 3.14 (from gnome.org)

Note that MacOS X uses a lighter color theme, including a "greyed out" top menu bar and Dock. Windows 8 uses a dark blue background and darker primary colors for application tiles. GNOME 3.14 uses a muted color scheme which becomes especially pronounced when Activities View is active, as shown above.

What do these colors mean to you? Do you perceive colors to affect usability?

Help me to talk about how colors affect usability. I have set up a simple online survey that takes only a few minutes. In the survey, you will view 15 color samples. Describe each color using words other than colors. For example, you might describe the color using emotions (sad, happy) or environmental (sea, forest, sky) or other adjectives (confused, fuzzy).

This is not an academic exercise, although I believe it will be useful in discussing how color choice affects open source software and usability. I'll post a brief analysis in a few weeks.

UPDATE: Here are the results: What you think about desktop colors

1 comment:

  1. I think the reason why these interfaces use such bright colors, is that most interfaces have given-up using gradients to draw inset and outset rectangles around containers. Instead, bright, high-contrast colors are used to visually indicate container boundaries.

    The examples above, especially Win 8 and GNOME, show the shifting fashion away from bounding rectangles towards solid-color contrast to show where a window ends and desktop begins.

    ReplyDelete