I left it too long to blog about what’s been happening in GNOME design, and I’ve been left with a backlog of things to tell everyone about! In my last post, I wrote about the work the GNOME designers have been doing on the core user experience, including things like the lock screen, notifications, printing and scrolling. In this one I’m going to review application design efforts, as well as work we’ve been doing around application integration.

Application development is a major focus for us in GNOME design. We recognise that GNOME needs new, updated applications, and we’ve been making good progress in that direction. GNOME already has some new applications in the shape of Web, Documents, Contacts and Boxes. Others are starting to emerge, such as Photos, Videos and Clocks. Not only are we assisting in these ongoing application development efforts, but we are also designing other new applications, and we are also working on improving the integration between applications and GNOME 3.

Here’s our recent application work.

Clocks

Clocks is planned to be a new core app, which will provide handy tools for viewing the time in different parts of the world, alarms, setting timers and a stopwatch. Jon has elaborated his original designs recently, so that we have a fairly complete design for the app.

Hi-resolution mockups for this one come courtesy of Jimmac.

Notes

While there are notes apps for GNOME, we don’t yet have one that works well with GNOME 3 look and feel. We think there’s an opportunity to provide a new app that is both highly integrated and more refined than what we’ve had previously, and Jimmac’s stepped up to the plate to design a brand new application.

If anyone wants to help implement this design, they should definitely get in touch. I know this is something that a whole bunch of us would really like to see happen.

To Do

This one is a little personal project of mine. It’s an idea for a simple to do list application, modelled on GNOME 3 application design principles. To Do is definitely not one destined to be a core GNOME app, but it would make a good optional application, and could be a nice little hacking project for someone.

Activities Overview Search

Ensuring that applications are able to effectively integrate with GNOME 3 is also a big focus for ongoing design work. Integrated application search is one area where this has been happening.

GNOME 3.4 introduced the ability for applications to add their own search results to the Activities Overview. Documents and Contacts are doing this right now – if you are on 3.4, searching from the overview will give you results from these applications as well as displaying applications and settings panels.

In the future we want to have other apps providing search results to the overview. This will mean that a single search will tap into the full range of apps you have on your machine. We’ve been working on designs for how to display these integrated application search results and preliminary details of the new designs are on the wiki. (No pretty mockups yet, but they’ll come.)

Content Selection

One of the big aims behind GNOME 3 is to radically improve the ease with which users can find content, such as documents, music, videos and so on. It is this aim that led us to develop the new GNOME Documents application, as well as the designs for Photos, Music and Videos.

Each of the new GNOME content applications are intended to improve on the file system (and file manager) as a way to store and access content. They focus on presenting relevant content, will come with effective search facilities, and will allow you to filter content and create flexible collections.

The next step in this content story for GNOME 3 is to bring the benefits of the new content applications to selection operations. With this approach, choosing an item to attach to an email should work in exactly the same way as it does in one of the new content apps. This will closely tie the content applications in with the rest of the system.

The content selection designs are still work in progress. It’s a tricky design to get right and we’re taking our time with it. The current plan is to test a few of the patterns that make up the design before embarking on anything more adventurous.

As you can see from the mockup, the new content selection designs still include the option to use a file manager style interface, should that be required.

Application Menus

Last but not least, we’re pushing hard to achieve consistent application menu adoption for GNOME 3.6. Application menus have been planned as a feature of GNOME 3 for some time, but it was only in the last release that applications got the ability to define their own menus. Now that they have this, the challenge is to ensure that GNOME applications start using them consistently.

I recently proposed a GNOME Goal to promote the adoption of application menus, and some progress has been made. There are still a lot of bugs to be fixed though, so feel free to help out if you can.

<< Fin >>

Phew, that’s it. As you can see, the denizens of GNOME design land have been busy recently, and there’s lots of work to report on. If you would like to help make any of these designs a reality, just get in touch or look in the usual places. The future is looking really bright for GNOME, and I still get excited when I think about all the plans we have. The sooner we can get to where we want to be, the better!

As always, the GNOME design crew have been hard at work of late. We helped to drive many of the changes you can see in the last GNOME release, including a new color picker, updated application designs, new scrollbars and updated spin button widgets. We haven’t taken our foot off the gas though, and there’s plenty of work to report.

It’s an exciting time in GNOME design land right now. GNOME 3 is a big undertaking: we’re working to improve the entire experience, including everything from interface widgets and controls, through to applications and the core user experience. But we are making good progress, and more and more pieces are slotting into place. Slowly but surely, the design of the overall experience is starting to take shape.

It has been far too long since I’ve posted a GNOME design update. In fact, it’s been so long that I’m dividing this update into two. In this first part, I’m going to detail design work that is focusing on the core GNOME user experience. The second post will cover application design updates, as well as application integration. I’ll post that update in the next few days.

Excitingly, many (though not all) of these new designs are planned as features for the next GNOME release. If you want to help implement any of these designs, just get in touch.

Lock and login screens

This is something that we’ve wanted to do for some time. The lock screen plays much the same role as a screensaver – it is what is displayed when your device is idle. The difference between the lock screen and a screensaver is that the lock screen is really useful, of course, since it will display the time and updates about notifications (the notifications part will also be configurable).

Cue a motion mockup from Jimmac:

This motion mockup shows several things. In the first section, you see the process from boot through to user selection. (Yep, a simple spinner and fade in is all we want.) The second demonstrates what should happen once the machine has gone idle – the screen blanks, is woken up to display the lock screen, then the lock screen is removed and login occurs.

[Edit: a note about this - although the video shows the lock screen being removed with a short mouse drag, it will also be possible to remove it using the keyboard or with the mouse wheel.]

More details about the lock screen design can be found on the lock screen wiki page.

Message tray design updates

One area where we’ve all been keen to see some improvements is around notifications and the message tray. The GNOME design crew recently returned to those designs and came up with some updates which we think will make a big difference.

Under the updated designs, pop-up notifications will avoid the mouse pointer (some of this behaviour already landed in GNOME 3.4, actually) and linger until we are sure they have been noticed. The expanded notifications will also queue up so you can always see when new messages arrive.

Plans are also afoot to replace the moving targets in the tray with larger static icons:

Scrolling

Jon and Jimmac have spent quite a bit of time working through the details of how scrolling should work under different conditions. The idea here is to keep things as consistent as possible across different types of devices, while still leveraging their different strengths.

Jimmac’s motion mockups show the desired behaviour for both pointer and touch devices. We’re hoping to see scrolling improve along these lines in future GNOME releases.

Printing

Jon and Lapo have done a bunch of work that aims to improve the state of printing in GNOME, and they have produced some quite detailed mockups for new print dialogs. These look great in my opinion, and are a huge improvement on what we have right now.

One of the best things about these designs is that they let you get a clear preview of what will be printed. They also present a clear set of simple options.

Initial Setup

Initial setup is intended as a specification for what the user should see the first time they boot into GNOME 3. This is new territory for GNOME, but it is an important piece of the picture if we are going to produce a consistent experience for our users. The goal is to ensure that the system looks and feels like GNOME from the moment someone starts using it.

The initial setup assistant will be an optional component that can serve as a reference implementation for distributions. It includes several important elements for new users, such as a setup screen for online accounts and a product tour to help people get started.

And more…

There are other areas that the GNOME designers have been looking at, but which aren’t as fully developed. Other recent design work on the core user experience includes:

• New designs for how software updates should look and behave
• Time and date selection widgets
• Updates to the high contrast theme
• And, of course, lots work related to bugs and minor iterative improvements

My next post will deal with recent application design work, as well as application integration. See you then.

We set an ambitious goal for the first round of Every Detail Matters: we said that we would aim to fix 20 UX bugs by the end of the current release cycle. That’s not an easy thing to do: seemingly trivial bugs can turn out to be tricky little blighters, and 20 bugs is a lot of fixes to develop, review and land.

For much of this cycle, I wasn’t sure whether we would reach our goal. We did some great work, but the big 20 target often seemed a long way off. But, thanks to a last-ditch push by the GNOME Shell crew, we managed to hit that 20 bug total. Florian Müllner, who has been fantastic throughout EDM, closed the last bug right on the whistle, just before we hit the code freeze.

This is a really fantastic achievement, and I’m really impressed with everyone’s determination to make Every Detail Matters a success. I’d like to thank everyone who has contributed patches and helped to get them reviewed and landed.

I’m currently testing the upcoming GNOME 3.4 release, and I can definitely say that it is much improved thanks to everyone who has been working on EDM. There are some nice visual improvements that should be noticeable but, just as important, there are also many invisible fixes that will prevent frustration or annoyance.

So, without further ado, here are the champions who contributed patches and made it happen:

• Stefano Facchini
• Zan Dobersek
• Joost Verdoorn
• Florian Müllner
• Seif Lotfy
• Jean-Philippe Braun
• Stefano Candori
• Vít Stanislav
• Marc Plano-Lesay
• Alex Hultman

What’s really nice is that most of the people in this list fixed more than one bug each, and quite a few were collaborative efforts. (You can see the full list of fixed (and unfixed) bugs on the Every Detail Matters wiki page.)

All of the Every Detail Matters work will be included in the upcoming GNOME release (version 3.4), which will be out next week. Every Detail Matters will hopefully return for another round early next development cycle.

The first beta of GNOME 3.4 came out at the tail end of last week, which means that we are roughly on track for a final release at the end of March. The beta also marks the beginning of the UI freeze for this cycle, so now seems like a good time to check out the cool stuff that’s coming in 3.4.

The following are just the changes that I know about; I’m sure that there are plenty of others. There’s no shortage of things to talk about though: the amount of improvement in recent GNOME releases has been really impressive, and this release looks like it will be no exception.

Updated Applications

Applications are where many of the big changes can be found for this release. Documents and Contacts had their first releases in 3.2. Now they’re back, and they’re joined by Boxes too. All three of these new GNOME applications feature updated user interfaces, which is the outcome of the ongoing application design work that I discussed in my last blog post. We think they’re better than what we had before; we hope you do too.

GNOME Documents no longer has a sidepane, and instead features inline collections and a big thumbnail grid that fills the entire window. The searching and filtering experience has also been greatly improved.

Contacts has been redesigned to include a new list layout and a cleaner contacts pane that features inline editing and automatic linking suggestions.

Several existing GNOME applications have also received big updates this cycle. Epiphany is the principal example here. It has lost its menu bar and gained linked back and forward buttons and a really nice new address bar.

Empathy also has a new video calling UI, and Seahorse, the GNOME keyring application, has been given a facelift.

UI Components

There have been a number of improvements to GNOME’s user interface toolkit and visual theme this cycle. Application menus have now arrived, so that GNOME applications can place a menu in the top bar. This will be an important feature for future application design work, and a number of applications, such as Documents, Contacts and Epiphany, are already using it.

Smoothing rough edges and improving polish has been a big focus for 3.4. Several user interface widgets have also been substantially improved for the release. Spin buttons, which were rather tricky to use previously, have been re-engineered to make them easier. GNOME’s colour chooser dialog has also been modernised, and is vastly improved as a result.

The GNOME 3 visual theme has also received a lot of work this cycle. Many of the changes are subtle, but almost every part of the theme has been modified in some way. The overall effect is that it feels and looks much better.

The toolkit crew are also working hard to get smooth scrolling included in 3.4 and, I’ve been told, are almost done. This will be a major improvement to the whole experience if and when it is incorporated.

Core User Experience

Improvements have also been made to the GNOME 3 core user experience. One of the most important of these is the new ability for applications to act as search providers for the Activities Overview. GNOME Documents is already taking advantage of this, meaning that you will be able to search your documents directly from the overview.

These changes to the way that GNOME 3 does search means that any application will be able to provide search results for the overview. Eventually we hope that searching from the overview will allow you to tap into virtually all of your applications from a single place.

The Activities Overview also features a lot of small improvements, thanks to the Every Detail Matters initiative. This includes many bug fixes and visual improvements, such as restyled application and window labels. The overview should provide a much smoother and easier experience thanks to these efforts.

There are also some nice enhancements to the GNOME System Settings, including better looking power settings and enhanced graphics tablet configuration.

There are lots of other changes in 3.4, of course: there have been improvements to GNOME 3′s built-in screen recorder, a live wallpaper that subtly updates throughout the day has been created, and we have new, fully integrated authentication dialogs for networking. And I’m sure there are many other improvements besides those.

Altogether, the changes in 3.4 should provide a much nicer, smoother experience. This is also an important release in terms of what it means for the future. 3.4 contains the results of GNOME’s new focus on application development, which is something that will continue for a long time to come. It also provides new facilities for applications – such as application menus and integrated application search – that will become central parts of the user experience in the future.

Thanks to everyone who helped with the screenshots for this post!

Comments on this post are now closed

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:

1. 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.
2. 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.
3. 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