Saturday, March 26, 2016

Visual brand and user experience

How does the visual brand of a graphical desktop affect the user experience?

A while back, I started to think about the "visual brand" or "visual identity" of graphical desktops. I wondered if there was a way to break down the components of a user interface to just those elements that truly signify the desktop.

Some desktop environments try to brand their desktop with visual elements including a distinctive wallpaper. For example, this picture of rolling green hills with a blue sky immediately reminds many users of Microsoft Windows XP:

Bliss, the default Microsoft Windows XP wallpaper (Wikipedia)

But it's not just images that define a visual identity for a desktop environment. The shapes and arrangements used in the presentation also define a user interface's visual brand. In this way, the shapes influence our perception and create an association with a particular identity. We recognize a particular arrangement and connect that pattern with a brand.

One reference that I use to explain our association of shapes with ideas is Picture This by Molly Bang. This book is a must-read for anyone interested in user interface design. Bang presents the idea that we perceive certain shapes in different ways, and we can affix ideas and emotional states to colors and shapes in an image.

By way of example, Bang tells the familiar story of Little Red Riding Hood through simple shapes. Red Riding Hood is a red triangle, a girl in a red hood and cape. Put the red triangle in a large white space, and we perceive the girl as alone. Make the background a dark purple, and Red Riding Hood is alone at night. Add vertical black bars to the image, and we interpret the bars as tree trunks, so the girl is alone in a dark forest. If some of those black bars are canted at angles, then the the dark forest becomes spooky and foreboding. And so on.

Our recognition of user interfaces works with the same association. Even without the distinctive wallpaper background, we can recognize particular arrangements of shapes and colors as different user interfaces.

Let's try a little experiment to demonstrate. Here are depictions of several common graphical desktops, constructed using block shapes and simple symbols. Can you guess which operating systems are shown here?


In no particular order, the operating systems shown are:

  • GNOME 3
  • GNOME 2
  • Windows 7
  • Windows XP
  • Windows 3
  • MacOS X
  • MacOS 9 (or earlier MacOS)
  • the command line (Linux, Unix, DOS)

Even without visual markings, logos, or wallpapers, you can probably guess that image #5 is GNOME 3. The distinctive pattern for the GNOME 3 desktop is the black top bar across a field. We perceive this arrangement as the GNOME 3 visual identity, the visual brand.

That association of shapes to GNOME 3 is so strong that you can assign any wallpaper to the background and still perceive the mock-up as GNOME 3. As long as the black bar is at the top, we recognize GNOME 3. As an example, let's apply the Windows XP wallpaper to mock-up #5:

You may experience some cognitive dissonance in seeing the Windows XP wallpaper on a GNOME 3 frame, but you still recognize the mock-up as GNOME 3.

Let's consider the history of GNOME desktop development, and look more closely at some of the above mock-ups. GNOME 1 (1997) used a visual framework of a desktop with a gray task bar at bottom. This arrangement of elements was familiar to many; it mimicked the same arrangement used by Microsoft Windows since Windows 95 (1995). This presented a familiar interface for users, and allowed for easy transition from Windows 95 to GNOME 1.

GNOME 1 screenshot (Wikipedia)

GNOME 2 (2002) modified the user interface arrangement, placing a separate task bar at the top where users could launch programs, and where GNOME displayed the date and time. A separate task bar at the bottom shows running applications. It was around this time that I helped friends and family to transition to free software, using GNOME 2 on the desktop. I explained GNOME 2's arrangement as "things you can do" (top) and "things you are doing" (bottom).

While the two task bars was a deviation from other popular desktop environments, the arrangement was not too dissimilar to Windows XP (2001).

GNOME 2 screenshot (Wikipedia)

GNOME 3 (2011) further adjusted the user interface arrangement, in response to several key issues in GNOME that had become more pronounced over time: Finding windows was frustrating and difficult; Workspaces were useful but not easy or natural to use; Launching applications was labor-intensive and error-prone; The panel suffered from over-configurability; applets were little used by most users.

GNOME 3 removed the traditional task bar, in favor of an "Overview" mode that shows all running applications. Instead of using a launch menu, users start applications with an "Activities" hot button in the black top bar. Selecting the Activities menu brings up the Overview mode, showing both things you can do (an application dock to the left of the screen) and things you are doing (window representations of open applications).

Comparing the user interface elements, the GNOME 3 visual identity is more similar to the MacOS arrangement, shown below in the same aspect ratio as an example:

GNOME 3 showing Overview mode (Wikipedia)

While we recognize the arrangement of these visual elements as the GNOME 3 identity, not everyone is very fond of it. You don't have to look very far on the Internet to find comments about how GNOME 3 is klunky or breaks the desktop metaphor. I don't think these people are specifically reacting to the GNOME 3 user interface per se but rather the disassociation of GNOME's visual identity with other desktop environments.

In usability testing, I don't know that we've explored how users approach the GNOME 3 desktop. Is the visual identity of the black bar and other elements a significant departure from other visual brands? I can only share observations from my usability tests (also noted in the usability tests of my students) that the GNOME 3 visual arrangement is similar to that of MacOS, and the window decorations are more similar to those of Microsoft Windows.

I believe it's not GNOME's change in desktop metaphor that causes strain in certain users, but rather the discontinuity of seeing Microsoft Windows decorative elements in a MacOS framework. The mix of visual elements creates a sense of cognitive dissonance, confusion in relating different yet familiar user interface elements in one graphical desktop system. In their frustration, these users find targets for their dissatisfaction, and "desktop metaphor" is a common focus point because the "desktop" is an easy concept to communicate.

But the "desktop metaphor" isn't the crux of the issue for these users. I think some users react badly to the incongruence of different user interface elements overlaid on a new visual identity. That's where dissatisfaction in GNOME 3 stems from. Users need a framework, a particular arrangement of visual elements, to guide them in what to do. The user interfaces for MacOS and Windows can be quite different. Certainly each user interface represents a distinct visual brand, and that brand evokes a particular emotional response in users. And with a sense of mixed identities, from MacOS to Windows to GNOME, I think users feel disoriented.

I'm not sure how GNOME can respond to this dysphoria in its user interface. But a few ideas do come to mind:

Reference happy colors
We know that humans attach emotional states to particular colors. I conducted a similar study a few years ago, about what you think of desktop colors. We perceive bright colors as happy, and we associate dark colors as moody. GNOME should establish a wallpaper image standard that emphasizes bright, happy colors. The current trend seems to be darker colors, such as the new "starry night" wallpaper to be packaged with Fedora 24.
Put an icon with the Activities menu
The Activities menu is simply the word "Activities" in the top-left hot corner. I think users quickly realize that they should use the Activities menu to start applications, but perhaps users would respond better if the "Activities" wordmark had a GNOME foot icon next to it, or some other simple icon. The GNOME 3 visual brand is similar to the MacOS visual identity, lacking the familiar "Apple" logo. GNOME users might have a more positive association with the Activities menu if it had a GNOME logo or some other identifying mark next to the word "Activities."

The visual brand of GNOME 3 has close ties to user experience. The definition of user experience isn't the same as usability. Usability and user experience are related, but different. Usability is about getting something done; user experience is about the user’s emotional impression. Lots of things can affect the emotional experience of a graphical desktop like GNOME. Colors, fonts, location of elements, and window decorations are just some of the things that can influence how a person feels about using GNOME. That’s the user experience.

Usability focuses on the user. The general rule about usability is that people use programs to be productive, and they are busy people who are trying to get things done. Through usability testing, the user decides when a product is easy to use. Because if a program is hard to use, no one will want to use it. And if they don’t use the software, then they won’t have an emotional experience about it.

Usability and user experience go hand-in-hand. Programs need to be pleasant (user experience) but people need to be able to use them, too (usability). But even with good usability, the visual brand can clearly influence the emotional response of end users. Users associate the arrangement of visual elements used in the desktop with other similar desktops, and experience a similar emotional response.

And that is how the visual brand of a graphical desktop can affect the user experience.
Note: This article is not an official GNOME position on visual brand.

images: Wikipedia


  1. It's falso interesting that gnome doesn't sport the gnome logo anywhere. Not even in Settings->Details , in there you find the distribution's logo.

    1. There is Gnome logo there on Arch Linux.

    2. In Debian, there is a GNOME logo in Details.

    3. That's kind of the point of the article right? There's no consistent logo usage in GNOME. Every distro is diffrent.

    4. That was the same with GNOME 2. In the panel where the GNOME icon was next to applications, Debian had a swirl, Fedora its Fedora logo, Red Hat a red fedora, Ubuntu a circle, etc.

      Not having the logo there makes the branding better. If there is a logo, downstream distributions are likely to replace it with the distribution logo (judging from GNOME 2).

    5. Anonymous, I wrote "falso" when I meant "also"

    6. Interesting, Fedora replaces the GNOME logo with its own.

  2. While some users might be scared away by Gnome's mix of UI elements, I wouldn't dismiss the change in desktop metaphor as a cause of strain as well. Even though GNOME is my favorite DE (I've been using Gnome 3 ever since it became part of the Ubuntu repos), one area where I feel it falls short compared to others is window switching, especially when using the mouse.

    Windows in the overview are often hard to distinguish from one another as there are very few distinguishing factors. Colors don't vary much between windows, there is no clear order to the windows, and only slow-to-distinguish textual cues indicate the application. Compare that with the Windows XP taskbar, where every window has an application icon and a consistent position on a taskbar based on time launched, so a person can use spatial memory to find a window, or Android's application switcher, where each activity has its own distinct color, icon, name, and is ordered by time last used.

    This would be a good topic for further usability testing.

    1. There's certainly room for more discussion on this, and usability testing would be a good way to uncover that.

      GNOME 3.0 wasn't initially received well. Even I had some problems adapting to it. But I know GNOME 3 has improved. I sometimes wonder if GNOME's poor reputation is just bad feelings carrying over from the 3.0 release.

      But I think part of the problem is no one really likes change. There's a good reason MacOS X looks so much like all the MacOS versions before it. You don't have to re-learn the interface, it's basically the same as it always was. Windows 95 was a major departure from Windows 3.x (but a welcome one) and Microsoft maintained that winning design all through Windows 7, changing the now familiar Windows design with the release of Windows 8.

      Similarly, GNOME 1 and GNOME 2 weren't too different from each other, and they certainly were familiar to anyone who used Windows at the time. The change in desktop design with GNOME 3 experienced the same backlash as the change to Windows 8.

  3. Speaking as a former Gnome user, all I can say is that none of the "key issues" identified in the mentioned report was an issue to me. I never had any trouble finding windows or launching applications. I found workspaces easy to use and understand, and configurability allowed me to adapt Gnome to my tastes, needs and work-flow. All of this was gone in Gnome 3. To me it's clear that the designers of Gnome 3 decided that they wanted to force their "vision" onto the users. It was okay for users who shared their vision, but many of us didn't and we had to go elsewhere. It had nothing to do with Gnome's visual branding or lack thereof.

    1. I'm curious, what free / open source software desktop environment do you use now?

      I'll admit when I first experienced GNOME 3, I wasn't a fan. It took a while to figure it out. In the meantime, I went back to other alternative desktops. XFCE was my favorite for a time. Very nice interface. Today I think Aura (the interface used in Google's Chromebooks) would be a good alternative desktop, if only you could run a terminal window.

    2. Currently I use XFCE with top and bottom panels. When I switched, I configured XFCE to resemble Gnome 2 as much as possible, and to be honest it's hard to tell the difference. A couple of times I tried different arrangements, but in the end always reverted back. I also use focus-follows-mouse mode since as long as I can remember.

    3. For a time, I used XFCE instead of GNOME. Like you, I modified the look and feel, and mimicked the Chromebook's Aura interface. It worked well for me. But eventually I moved back to GNOME 3.

  4. To me at least, almost every *nix desktop and OS X look and feel like variations on NeXTSTEP. So what makes Gnome 3 so jarring is that the "dock" is hidden behind a mouse click, much like it is on Windows 8.

    1. I had forgotten to mention NeXTSTEP in this. It is interesting to see the influence of NeXTSTEP in modern desktops. It was certainly ahead of its time. I'll see if I can reference NeXTSTEP in a followup post.

  5. The assertion that users' difficulties with Gnome 3 lie in a discontinuity of its design elements' purported associations with proprietary systems is utterly ludicrous and reveals an embarrassing lack of confidence in open source design, not to mention a complete misunderstanding of what veteran open source users actually experienced when first introduced to the original Gnome 3. I am a Fedora/Gnome3 user.