GNOME Shell Design

History

The GNOME Shell design draws upon the experience of the GNOME community and first took shape at the 2008 User Experience Hackfest. Since then the design has received considerable refinement and elaboration.

GNOME Shell design is a community project which is conducted in the open. Mockups can be found in the GNOME Shell design repository and discussions occur on the #gnome-design IRC channel. GNOME Shell design receives regular contributions from volunteers and community members.

Current status

The design Git repository contains the current version of mockups and designs.

Information for developers

Design information and guidance for application and sub-system developers can be found on the guidelines page, as well as here.

Discussion

Discussion of GNOME Shell design occurs mostly on IRC on the #gnome-shell and #gnome-design channels of irc.gnome.org. If IRC is inconvenient, you can use the main GNOME Shell mailing list. Try to familiarise yourself with the design and its rationale before discussing it on project channels.

Goals and advantages

The GNOME Shell design has a number of key advantages over the existing GNOME 2 desktop. The Shell:

• Makes it easy for users to focus on their current task and reduces distraction and interruption
• Provides the GNOME desktop with a consistent and recognisable visual identity
• Is beautiful: it has been crafted in order to be visually elegant and aesthetically pleasing
• Overcomes several usability and user experience limitations found in the GNOME 2 desktop (details of some of these can be found below)
• Incorporates additional features which are relevant to contemporary computer usage, such as integrated messaging and search
• Effectively works on contemporary hardware: the Shell will provide an excellent experience on touch-based devices and will scale down to small screen sizes. It has also been designed with wide-screen in mind

The GNOME Shell design is informed by these design principles.

Components

The following is a brief description of some of the key components of the shell design (several items have been omitted for the sake of brevity, as has much detail). A much more detailed (though in places out of date) description of the design and its rationale can be found in the shell design document.

Top bar

The top bar is designed to be able to scale to a range of screen sizes and to be consistent across devices. This consistency is a key part of the attempt to give the GNOME desktop an identifiable visual identity. (Other elements of this effort include the new default GNOME wallpaper and widget theme.)

The contents of the top bar are entirely system-owned: this communicates a clear delineation of role to users and promotes the identity of the desktop as a separate entity from applications, as does the visual styling of the top bar. This styling has also been designed in order to be non-distracting and to enable users to focus on the task at hand.

The top bar includes the activities button, application menu, clock, system status area and user menu.

System status area

The purpose of the system status area is to represent the status of the system to the user. The defined and delineated role of this area promotes ease of understanding. The system status design is intended to overcome a number of problems associated with the GNOME 2 notification area, which has become overpopulated and, from the perspective of users, defined by a lack of clarity of purpose.

The system status area contains status icons and associated menus for volume, bluetooth, network, battery and accessibility.

Activities Overview

This is a separate view designed to enable users to get an overview of their current activities and to enable effective focus switching (in this regard, the overview is a facilitator and a mediator, not a destination). The top bar continues to be displayed in the overview in order to provide a familiar landmark and visual anchor.

The separation of the overview from the normal window view is a reflection of users' natural focus-switching behaviour. It aims to ensure that users are not distracted when they are occupied with a task and to give them quick access to a streamlined focus-switching interface when they need one. A key feature of the overview is that it allows a user to optionally appraise their current activities prior to making a decision on where to turn their focus to next.

The activities overview can be accessed via:

• The activities keyboard key (commonly known as the Windows key)
• The activities button in the top bar
• The hot corner (top-right hand corner)
• A hardware button (this primarily applies to hand-held or touch-screen devices)

The use of the hot corner for overview activation makes accessing the overview lightning fast and almost effortless.

The overview has been designed so that it can be operated using a touch-screen interface.

Dash

The dash indicates currently running applications and acts as an optional quick launch and favourites facility.

Window picker

The window picker provides an easy way to identify and switch to other open windows. It also provides a convenient way to close multiple windows without having to switch to them. A key feature of the window picker is the ability to get a quick overview of current activities.

Application picker

This enables new applications to be launched and open applications to be switched to. The avoidance of exclusive application categories and nested sub-menus is a distinct advantage of application launching in the shell compared with the GNOME 2 desktop. Users do not have to guess which category an application is in, and the motor control demands of the application picker are lower than those of menus. The application picker also utilises spatial memory, making it quick and easy to relocate applications.

Search

Search is activated as soon as a user types while in the overview. Combined with keyboard activation of the overview, this means that launching and switching can be achieved without the use of a mouse. This is a powerful and fast approach which will be familiar to users of GNOME Do.

Notifications and messaging tray

The shell's notification system has been designed to subtly communicate events to the user without distracting them. The location of notifications at the bottom of the screen avoids a number of usability problems found in the GNOME 2 desktop:

• Notification bubbles are less likely to intercept pointer clicks.
• Notifications are disassociated from the system status area: this clarifies and distinguishes system status from messaging.
• Ensures that users do not accidentally select items in the top bar when attempting to click on a notification.
• Allows interaction with notifications, which opens possibilities for responding to and interacting with messages from other users.
• Allows notifications to have expanded detail states on roll-over. This expanded state can include additional information and actions relating to the notification, including in-line replies.

The ability to reply to messages and to engage in conversations without the need to change window is a key new feature introduced by the shell. This thoroughly integrates messaging into the desktop.

The persistence of notifications in the messaging tray means that users can easily respond to messages at a time of their choosing, thus reducing interruption.

Application switcher

The application switcher provides a mechanism for quickly switching windows that is familiar to users of Windows and OS X. The Shell application switcher provides a number of advantages over the equivalent GNOME 2 functionality:

• Window thumbnails
• Pointer-based interaction - applications and windows can be clicked on
• Application-centrism: grouping around applications aids recognition

Research, testing and validation

The GNOME Shell designers are committed to empirical testing and validation. A large number of existing studies have been reviewed as a part of the design process and plans have been made for user testing to support the shell design process. The shell designers and developers continually use the shell as a part of their own testing and validation activities.

• A comprehensive literature review has been conducted as a part of the GNOME Shell design process. Some of the reviewed material can be found here.

• The shell designers have done research on status indicators.

• The usability test plan (phase I) contains details on the design assumptions behind the shell and a plan for how they will be tested.

• User observation data includes notes on a couple of observation sessions with GNOME 2.

Historical material

• The GNOME Shell design document contains a detailed account of the design, though it is outdated in some areas.

• Old mockups

• A history of the very early shell designs can be found in the iterations pages.

• The old design playground page contains various design suggestions and experiments.

• Annoyances - old notes on various design limitations people have encountered.

• Finding and reminding original proposal - obsolete initial ideas for "finding and reminding"

• Gizmos - old design discussion for "desktop widgets".

• Fallback - design page for the old "GNOME fallback" experience.

• Notes on some of the original design goals

• Migration notes from the old GNOME 2 applets to GNOME 3

More information, your questions answered

Answers to common questions about the GNOME Shell design can be found on the GNOME Shell design FAQ.