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.