Articles Comments

GUI Journal » GUI Design, Mistakes, Process » GUI Design: Look and Feel

GUI Design: Look and Feel

Designers often use the expression “Look and Feel,” but many think of it as a single concept. “Look” and “Feel” are two different things. Some years ago I had a conversation with a colleague at Novell®, when for the first time I gained a real appreciation for the different terms. I realized at that time that, though I knew the different concepts, I had not always kept the two ideas separate in my design process. Look and Feel work hand in hand, but concentrating on them separately and designing them independently from each other can ultimately result in a much better solution.

LOOK

“Look” basically involves everything that is visible, regardless of the purpose of the application or interface or any entity on the interface. Look includes graphics, icons, fonts, and colors. This is the area of the product that requires a graphic designer.

Figure 1. Gmail® by Google® on Chrome® and Redesigned® on Firefox®

Figure 1 shows a view of Gmail® by Google® as displayed on two different browsers. The upper left is the Gmail default view in Chrome®, while the inset graphic (lower right) is the Gmail Redesigned® 4 extension displayed in Firefox®. Notice that the logos, the colors, the look of the buttons, and the fonts are all different. Also, the Redesigned version has icons to the left of several items while the original has icons to the right of only two items. The title bar and the advertisement areas are also different between the two: where Chrome displays the links with the default underline, links in the Firefox version have yellow text, no underline, and change on hover. These differences are all about a different “Look,” but the “Feel” of the two displays is unchanged.

FEEL

“Feel” involves the flow and interaction of an interface, including how entities on the panel are selected, or how operations on those entities are specified. The flow and interaction of the two displays in Figure 1 are identical. For example, no matter which version is used, these actions are the same: selecting Contacts will change the entire display from a list of mail messages to a list of contacts; items in those lists may be selected individually with the checkbox to the left of the item name or selected all at once with the checkbox at the top of the list; and selecting Compose Mail will provide a form for creating and sending an email message (Figure 2).

Figure 2. Gmail Compose Mail Panel on Chrome and Redesigned on Firefox

Figure 2 shows Gmail’s Compose Mail display both in Chrome (top) and Redesigned on Firefox (bottom). All the same operations are in the same location and function in the same way for each; the Feel is unchanged. (The Plain Text option even wrapped similarly in both displays when I sized the window for screen shots.) However, the Look is very different, including the display of the toolbar icons and the way they change with mouse hovering.

CHANGING THE LOOK OR FEEL

While a change in the Look of an interface is usually met with enthusiasm, be very careful when changing the Feel of a product between versions. Some users were outraged when the File Manager® (Windows® 3.1) was replaced by the Explorer® (Windows 95). I read an article at the time that included a phrase that stuck with me all these years: “It may seem difficult at first, but after you get used to it….” If that is what you are saying about a change in your interface, then that’s a serious red flag. The change better be a fantastic improvement if you’re asking your user to “get used to it.”

Because I remembered the phrase I was easily able to find the article still posted on the web more than a decade later: Interface Hall of Shame. This article outlines all the concepts that the user must relearn in order to deal with the new interface. Similar complaints can be found regarding changes between the newest versions of Windows as in this article entitled, If you love Windows XP, you’ll hate Windows 7. This article outlines various tasks that must now be done differently, by going to a different location, making an extra click, etc.

Of course Microsoft® recognizes the issue, but they are convinced that the enhancements are worth the change. They also usually attempt to appease those users reluctant to embrace the “improvements” by providing a “Classic View” option.

Users become accustomed to the way an application feels. And remember, for the most part, they are just trying to accomplish a task. Users will only appreciate a change in the Feel of the interface if it makes their task easier and if they don’t have to spend very much time learning how to do it differently.

KEY DESIGN POINTS

  1. Look and Feel are two different things and should be designed independently.
  2. The Feel has the biggest affect on the user and requires the most detailed attention, because that is how tasks are accomplished.
  3. Be extremely wary about changing the Feel between versions; be sure you know how real users are employing your interface before you make changes.

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for NetIQ and Novell (divisions of Attachmate) as a Software Engineering Consultant and User Experience Architect. Carl has led teams and been the principal designer of multiple GUIs which have received analyst acclaim. He also consults on multiple other products within Novell and NetIQ.

Filed under: GUI Design, Mistakes, Process · Tags: , , , , ,

3 Responses to "GUI Design: Look and Feel"

  1. Lynn Christensen says:

    Thanks for the mention, Carl.

  2. Kelvin says:

    Carl,

    This article was very helpful. I am trying to anwser this question “Should we re-desing our GUIs or keep the same “Legacy Look” of our applications in future versions?

    Keep the good work.

    1. Carl says:

      Kelvin,
      It’s important to keep updating the look and features of a GUI, but it’s very easy to go overboard with redesigning. Your users get used to the feel and where they need to go to accomplish what they want, so redesigning too much can really cause frustration if you’re not careful. CSS has provided a great way to quickly change the look of a GUI, and I highly recommend it. New colors and styling can add much, without changing the feel.

      Thanks for your question!

Leave a Reply

*


1 × eight =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>