Their are four primary ways to guide users to GUI elements: color, shape, grouping, and size. Often we utilize all of these to call attention to specific features and buttons of a GUI, but the two most important are color and grouping of GUI elements.

Compare the two screenshots below; the top one uses color sparingly and the bottom one utilizes color to a greater extent .

The above GUI calls unbalanced attention to the volume and power off buttons which are secondary information. The eyes “wonder” around the GUI while repeatedly being redirected to the power off buttons and volume bar. While it is important to draw attention to these areas of the GUI (power off button, volume bar) because they serve a distinct purpose, it should not be done by overpowering other GUI elements. Everything must be balanced in a way that the user can visually navigate the screen and find the information and buttons they are looking for quickly and easily.

By adding color to the source menu on the left the user  is quickly provided with visual information that tells them that the source buttons are blue and the active source page they are on (Blue-ray) is green . The top output menu does not even need color because it stands out as a grouped horizontal menu separately from the vertical source menu on the left. When and where to use color should be on your mind throughout the design process.

Use color with a purpose. Green is widely thought of as representing “ON” or “GO” in many cultures so it makes sense to use it to represent active pages or active features of a GUI.  Make use of a color’s innate symbolism, such as red representing OFF or yellow to warn users.

The background color and pattern of a touch screen GUI plays an important role in separating sub-pages from the main menu. Compare these examples.

A white background is too bright and visually competes with the sub-page’s button (DVD controls).  The contrast is overwhelming and does not allow the user to rest their eyes within the sub-page menu.

This high saturated blue background helps separate the sub page from the main GUI elements but the color still overpowers the sub-page’s buttons and draws too much attention away from the primary purpose of this sub menu which are the DVD controls.

By lowering the value and saturation of the background we can draw more attention to the sub-menu’s buttons while still utilizing color in the GUI background.

The best way to get good at using color is to use it and question every color choice. Does this color suit my client or project? Does this color serve a purpose or is it merely decoration? Does this color draw unnecessary attention?

The student who becomes his own teacher is at advantage. Go. Learn.


About these ads