Sunday, August 18, 2013

User interface analysis via Molly Bang

I'd like to share some brief thoughts about how one might discuss user interfaces. Analysis about what "works" in user interface design might come from any number of sources. Jakob Nielsen is one obvious reference; Nielsen is an author, researcher, and consultant on user interfaces, especially Web usability, Web design strategy, and user-centered methodology. Janice (Ginny) Redish is another resource; Redish is a recognized specialist in plain language writing for the web user experience (UX) research, and consultant specialist in usability.

However, we may also base an analytical discussion of imagery on the work of American illustrator Molly Bang. Her book, Picture This, illustrates ten basic principles present in powerful pictures:
  1. Smooth, flat, horizontal shapes give us a sense of stability and calm.
  2. Vertical shapes are more exciting and more active; they imply energy.
  3. Diagonal shapes are dynamic because they imply motion or tension.
  4. The upper half of a picture is a place of freedom, happiness, and triumph, while the bottom half of a picture feels more threatened, heavier, sadder, or constrained; objects placed in the bottom half also feel more grounded.
  5. The center of the page is the most effective “center of attention.” It is the point of greatest attraction.
  6. White or light backgrounds feel safer than dark backgrounds.
  7. Pointed shapes are threatening, while rounded shapes or curves are secure or comforting.
  8. Larger object in a picture are perceived as stronger.
  9. Audiences associate the same or similar colors much more strongly than the same or similar shapes.
  10. Contrasts enable perception of patterns and elements.
(Bang, Molly. Picture This: How Pictures Work. San Francisco: Chronicle Books, 2000.)

Let me take a moment to briefly explore a few user interface concepts using Bang's principles:

Bang's principle that the "upper half of a picture is a place of freedom, happiness, and triumph" while "objects placed in the bottom half feel more grounded" (4) seems to be mirrored in the Mac interface vs the Windows interface. MacOSX places the "menu bar" at the top of the screen: File, Edit, View, etc. while both MacOSX and Windows locate the "action bar" at the bottom (MacOSX calls this the "Dock" while Windows labels it the "Taskbar," but both do essentially the same thing: represent currently-running programs, and provide a menu to start new programs). Mac users may relate to adjectives such as "freedom, happiness, and triumph" - and if they've ever wondered why, it may be because their program interaction is at the very top of the screen. GNOME 3 puts the "Activities" menu at the top of the screen - but it uses a black background (see next).

The idea that "light backgrounds feel safer than dark backgrounds" (6) is important in understanding why I decided to switch my "Aura-like" Xfce desktop from a dark theme to a light theme. I mentioned the darker colors made things more difficult to read, and the light grey theme ("Adwaita") provided much better visibility. But it was also a matter of not "feeling" right. With the dark theme, I sometimes felt lost. Changing to the light grey theme immediately changed my perception; things seemed easier to use, even when I had changed nothing other than the color. Interestingly, the black "Activities" menu bar in GNOME 3 may contribute to users' negative reaction.

That "rounded shapes or curves are secure or comforting" (7) may explain the recent (last five years?) trend with user interfaces to provide rounded edges. Of course, Apple's original Macintosh computer (1984) used rounded corners. Today, MacOSX and many Linux desktops (including GNOME 3) make use of rounded edges, both for the desktop and for program windows. Xfce and Microsoft Windows use "hard" corners for the desktop, but round corners for program windows.

Contrast (perception of patterns and elements, 10) and colors (associate the same or similar colors, 9) may be significant elements in successful user interfaces. I'll return to this idea in a later discussion.

No comments:

Post a Comment