One of the things that the GNOME design crew have been focusing on recently is creating a new approach to application design for GNOME 3. We want GNOME applications to be thoroughly modern, and we want them to be attractive and a delight to use. That means that we have to do application design differently to how we’ve done it in the past.

Design is always an iterative process, and the new GNOME application design approach has been steadily evolving for some time. There have been lots of design ideas and mockups, and there has been plenty of testing of prototypes and of proper implementations. This process has resulted in some design patterns being consigned to the scrapheap while others have come to have an increasingly important place in our hearts. Slowly but surely, things are starting to fall into place.

As the new GNOME 3 application design approach has stabilised, we have been able to pursue the development of more new applications. GNOME Documents and Contacts have been joined by Boxes, Web and Clocks. We also have designs in the works for many other new applications, including Mail, Videos, Chat, Photos, Calendar and more. Each of these new designs utilise the application design approach that we have been developing. We are also starting to document our new application design approach in a new version of the HIG. This will help application developers to create their own GNOME 3 apps.

In what remains of this post I’m going to try to give you a taste of the new application designs, as well as give a bit of background about why they have been designed in the way that they are.

Maximised Windows

Displaying multiple windows at the same time means that screen space isn’t used efficiently, and it means that you don’t get a focused view of what it is that you are interested in. Windows that aren’t maximised also create additional tasks for people. Often you need to adjust their size, or you have to move them around.

These are just some of the reasons why GNOME 3 applications have a particular approach to windows. In general, their primary windows will maximise by default, and they will lose their titlebars when they are maximised (smaller utility applications will not be affected by this). This will mean that the screen will be dominated by the window that you are focused on. It will also mean that the maximum amount of screen space will be devoted to useful stuff (like content).

Views

Each window of a GNOME 3 application can display different views, so that you can navigate to different parts of the app within it. Breaking up an interface into different views makes it more efficient and more pleasurable to use. It means that the content and controls that are displayed are always relevant to the task in hand, and means that superfluous interface elements are kept to a minimum.

The designs for the GNOME 3 Music app are a great example of this. It contains a view for browsing and a view for looking at a particular album, artist or playlist. Each view only contains content that is relevant to the current activity, meaning that each experience is enhanced, and that you travel through the application to the functionality that you want, rather than having it presented to you all at the same time.

Primary Toolbars

In GNOME 2, primary toolbars were like a toolboxes. They were a mixed bag, containing a variety of things that might or might not be useful to you at any given time. There was also a lack of consistency between apps, and the layout of toolbars often didn’t help you to understand their functionality. Together, this gave toolbars a high cognitive overhead and meant that they lacked visual elegance.

GNOME 3 primary toolbars are a bit different. They will only contain a few elements, and they will be much more consistent across applications, making them much easier to use. Their contents will also follow common alignment points, so they will look much nicer.

Primary toolbars in GNOME 3 also play a navigation role. They take over the job of labelling the view from the window titlebar, and they are at the top of the user interface’s hierarchy, framing content and providing key mechanisms for interacting with it. They’re object orientated.

Selections and Contextual Actions

The design pattern for making selections and acting on them is the result of a lot of work. It has been through quite a few iterations. Jimmac even created a whole series of html prototypes to help determine the best approach. There’s still one online that you can try.

Selections and contextual actions revolve around the checkmark button. Pressing it activates an overlay that allows multiple items to be selected and acted on using an overlaid toolbar.

The new design makes selecting multiple items possible without the need for a keyboard (since shift and alt modifiers aren’t required) and is touch compatible. Providing a separate space for contextual actions also guides users by providing a consistent mechanism for acting on content.

Search

Search can be an incredibly powerful tool, and it is central to GNOME 3 application design. Search will be ubiquitous and instantly available within GNOME 3 applications. If you are not editing a text field or a document, all you have to do is start typing to initiate a search.

Search will also be accessible using this nifty pull-down search design. This is a nice way of making search always available without having search boxes attached to every single grid or list of content. There are also variants of the design pattern that will allow you to use predefined filters on your content.

And more

There are many other application design patterns that we’ve been working on, including application menus, a new grid view for displaying collections of content, in-app notifications, new models for dialogs, nice full screen controls and a sidebar list pattern. Together, these provide the opportunity to create applications that efficient, modern, elegant, and a pleasure to use

The design patterns that I’ve introduced in this post aren’t the end of the story though. This new approach to GNOME application design is still evolving. We’re still testing the patterns we have come up with, and there are still missing pieces to this new application design approach. We are still investigating how to make maximised windows work well on very large screens, for example.

As the new GNOME applications develop, so will the design patterns. Everyone who is working on these new applications – both developers and designers – are helping to determine the shape of GNOME’s next generation of applications. And if you want to contribute you can also play a part.

Edit:

Judging by the comments it would seem that there is a bit of confusion about what is meant by maximising windows by default, so let me try and clarify:

Not all applications will use this behaviour – only those that have been designed to do so. If an app won’t work being maximised, it won’t be. Although these applications will maximise by default, it will still be possible to unmaximise them. If you want to be able to view more than one window at once you will still be able to do so. There will be mechanisms put in place that will adjust the behaviour to compensate for large screens. We are currently investigating a number of options here, including not automatically maximising windows on these large screens or adjusting their layout to make best use of the extra space. Everyone involved is well aware of the need to work well with large screens!

Comments on this post are now closed