With 3.8 behind me, I’ve been able to turn back to some good honest design work. I’ve been looking at quite a few aspects of GNOME 3, including Settings and GNOME Shell. However, in this post I am going to focus on some of the application design activities that I have been involved in recently. One of the nice things here is that I have found the opportunity to fill in some gaps and pay some attention to some of the long-lost applications that are in need of design love.

Contacts

I haven’t blogged about Contacts for a while. 3.8 was a great release for the application though, mostly thanks to some fantastic work by Erick Pérez Castellanos. We got a new editing UI and a new selection mode, as well as a new linked accounts dialog. Along the way many of the most prominent usability bugs were fixed. Thanks to Erick for making this happen.

The Contacts designs have been slowly evolving since they were first conceived, and they have turned into something that I am really happy with. I spent a bit more time on them recently, with some updates to the toolbar and a few other things.

Character Map

I use the GNOME Character Map on a fairly regular basis, and it has to be said that it could do with some love. I’ve been meaning to do a redesign for quite some time, and I finally found the opportunity a few weeks ago.

The most important thing about the design, in my opinion, is that it provides an easy way to browse different types of characters. This alone will make a huge difference to the experience. Another nice feature is the recently used section, since I think that most people have a small set of characters that they keep going back to.

Web Apps

I think that web applications could be pretty important for GNOME in the future, and we already have a great foundation on which to build here. I recently took a look at how web apps could have toolbars of their own, which resulted in the following mockups.

The web app toolbars are pretty simple – back, forward, reload and close.

Cheese

Last summer I had the pleasure of mentoring Fabinia Simões, who did a great job redesigning Cheese. In the past few weeks I’ve revisited her designs and done a set of hi-resolution mockups. We’re continuing to discuss some of the details, but I’m increasingly happy with the design.

One interesting thing to note about this design is how the navigation design patterns that we’ve developed for GNOME 3 applications are able to help even with a simple application like Cheese. Having a set of patterns like this really helps to reduce the work involved in designing (or in this case, redesigning) applications, as well as leading to consistency for users.

Transfers

Transfers is a new application for GNOME 3. It’s like a download manager, but it handles other things like copy/move operations for files and file transfers from Chat contacts. In some ways it isn’t the most exciting application, but it will fill in an important blank in the content story, and will make it easy to find content that you have received from other people and places.

These mockups are still a little rough, but they are a good place to be starting.

So what’s the story with the close buttons?

Those of us who work on GNOME design have been pushing to reduce the presence of window titlebars for some time. The main driver for this is to use screen space more efficiently. The average titlebar includes big swathes of empty space, and they take up valuable vertical pixels. We’ve already seen the result of this direction in our treatment of maximised applications, where the titlebar is hidden.

Now that Wayland and client side decorations are on their way, we are able to realise our ambitions for screen efficiency even further. So far we have only been able to hide the titlebar when windows are maximised. In the new world of Wayland, windows can permanently lose their titlebars, whatever state they are in. Not only that, but they can also present window controls – like the close button – inside the window itself. This means that we can consistently show the close button on the right side of the toolbar, whether the window is maximised or not.

One of the drivers for my recent application design work has been to test out this approach to titlebars in an array of different contexts, and me and the other designers will continue to examine how it will work in different applications as we move forward.

As always, these designs are in a process of evolution, and feedback is welcome.

I just got back from Madrid, where I attended this year’s Libre Graphics Meeting.

LGM is a great chance to meet with other designers working in the open, and this year’s event was no exception. There were lots of great talks, including some from really interesting speakers, and I really enjoyed and valued the diversity of the topics that were discussed, which mixed Free Software technology, artistic and design practice, as well as academic thinking. Highlights for me included Ben Martin and Dave Crossland’s “Fonts of Doom”, Chris Kelty’s “The Internet and its Parasites: Freedom and Participation” and our own Jakub Steiner’s “Localized Animation with Blender”.

This year’s LGM was a big success. The venue – Medialab Prado – was fantastic, and there was also a good level of participation; Madrid seems like a place where there is a lot of interest in libre graphics. If this year’s LGM is anything to go by, open graphics and design are in good shape. It was rewarding to participate in a general event around free graphics and design, something which I hope that the GNOME project can contribute towards.

Big thanks to the conference organisers, Medialab Prado for being such a great host, and to Red Hat for allowing me to attend.

[Credit: thanks to Jakub for the photo]

It’s that time again: 3.8, the latest GNOME release, has just gone out of the door.

This is the strongest release of the 3.x series, in my opinion. We’ve not just got a lot of really nice features, like the new application view, the updated window selector and the new Clocks app. There’s also major technical accomplishments, like Owen’s frame sync work, Jasper’s pointer barriers and Web’s switch to WebKit2. Many of the existing applications have also received some very nice enhancements.

Go read the release notes, if you haven’t already: they’re pretty impressive.

As ever, this release is the result of the hard work and dedication of everyone who contributed, and I know that some people really pushed hard to make this release as good as it is. To all of you: thank you. I continue to be blown away by the dedication of the GNOME community.

Now, roll on GNOME 3.10!

The pace of change that we are managing to achieve within the 3.x series is impressive, and is a credit to the hard work and dedication of the GNOME community. In this post I’m going to describe some of the new GNOME 3.8 features that I’m particularly excited about, with a bias towards things that I’ve been involved in. I’ll also try to give a bit of background on the designs of each of these features. As always, you’ll have to wait for the release notes to find out everything that has been improved.

New applications view

This is one of the most noticeably changes included in GNOME 3.8. With previous versions, if you wanted to launch an application from the Activities Overview, you were confronted with a big grid containing all your application launchers. This could often be a bit overwhelming, and finding the application that you wanted was difficult.

The new design seeks to overcome previous limitations and to take the work out of browsing for an application. It has a few elements. First, the frequent applications tab seeks to provide a fast and easy way to launch those applications that you use a lot. One of the really nice things about this is that it is all automatic: the user does not have to do anything to enable it or to update it to changes in how they work.

The second part of the new applications view is the “All” part, which includes a couple of predefined application folders. These folders contain some of the less interesting applications (such as accessories or system utilities) and helps to lower the number of applications that are in the top-level grid. Finding applications and exploring the system for the first time is made much easier as a result.

Improved window selection

This isn’t a big new feature, but it is something that makes a huge difference to the overall GNOME 3 experience. It’s actually something that I’ve been pushing for a while, and which took a lot of work to refine the layout logic. The original bug report that we used to track this work closed with 204 comments! There were also plenty of other bugs that were fixed through the effort to improve this part of the user interface.

So what have we done? First and most importantly, we have made the window thumbnails in the Activities Overview much, much bigger. This sounds like a small change but the effect is dramatic, and it makes this part of GNOME 3 massively more effective and useful. The other thing we have done is scaled the window thumbnails so they reflect the actual size of the windows themselves. Before, all the thumbnails were roughly the same size, and this made it difficult to identify some windows. If you use a lot of unmaximised windows of different shapes and sizes, the new behaviour will be especially welcome.

Search

Search has long been one of GNOME 3′s strongest features. Pressing the super (aka windows) key and typing is an incredibly effective way to access applications and content. Since 3.6 it has also been possible for 3rd party applications to provide their own search results, and this is used by Files, Contacts, Boxes and Documents to allow you to access a range of content using a single search.

For 3.8 we have reworked GNOME 3′s integrated search functionality to make extensibility much more central. The new search results view looks great and is much better suited to aggregated results from multiple sources. We have also added a search section to Settings, which allows you to control which applications provide results, as well as the order that they appear in.

These changes are pretty important, in that they will allow applications to integrate with GNOME 3′s integrated search functionality. We’re expecting more and more applications to start using this, so that search becomes an increasingly powerful way to access content.

Input Methods

Last cycle we introduced integrated Input Methods into GNOME (using the iBus framework). One of the goals for this was to make it easy for newcomers to set up input methods, and to provide an overall better experience when inputting different languages. Since it was the first iteration for this work, the emphasis was on basic integration.

Since then, we’ve been listening to feedback, and we’ve been taking the opportunity provided by having a single integrated input methods framework to make a number of enhancements. There’s a lot of nice new features and lots of polish that have gone into this area for 3.8: we have a new input method switcher OSD (pictured above) and new character selection popups, and there’s a new Region & Language settings panel which makes adding and removing input methods easier. It’s really satisfying to see input method integration starting to pay off.

Massive amounts bug fixing and polish

Another reason to be excited about 3.8 is the sheer quantity of bug fixing that has happened this cycle. The effort to track and resolve the most serious bugs and to add that extra level of polish has been pretty impressive this cycle, and we have been pushing to get the quality level as high as possible for the release.

Every Detail Matters had its most successful round for 3.8. I was blown away by the number of fixes and small enhancements that were committed. Right now I count a total of 56 bugs fixed through that initiative alone. Some of these include some of the most obvious bugs we’ve had in GNOME 3 since it was first released.

Some of the fixes included in 3.8 are really nice usability enhancements. One area that deserves special mention is the use of pressure sensitivity for the hot corner and for triggering the Message Tray. This required a decent chunk of work in the X Server, which was undertaken by Jasper St Pierre. The result is fewer accidental triggers and a faster way to open the tray using a pointing device.

One of the things I’ve found when testing 3.8 is that it feels much more satisfying to use. Little things like the new hover effect for window thumbnails, or the nice new transitions we have in the Activities Overview simply make the experience much more enjoyable. I find myself wanting to use features just because they look so great.

Roll on release day!

There is obviously much more to 3.8 than what I have described here (such as all the Settings work which I blogged about recently). Nevertheless, this post should hopefully make it clear how much work has gone into this release and how much GNOME 3 is improving.

The high attendance at the event meant that we were able to break into four groups, each of which focused on a different area of the developer experience: application definition, toolkit, documentation, and tools. A discussion at the beginning of the event and regular catch-up sessions ensured that we were all on the same page and working towards a common vision.

I spent most of my time as a part of the documentation group. Together we worked on a number of aspects of developer documentation.

Fred Peters, Aleksander Morgado and Thomas Bechtold hacked on DevHelp and made good progress modernising its user interface. The new version should be easier to use and should look much nicer.

Jasper St Pierre worked hard updating our automated documentation generation tools, and seemed to make some excellent progress towards extending their coverage for introspectable languages, especially JavaScript.

Me, Meg Ford, Federico Mena Quintero and Jakub Steiner looked at the GNOME developer website. We created an updated design and identified documentation that was missing or needed updating. Our decision to focus on JavaScript really helped with this and enabled us to effectively update the website design, as well as write new tutorials for first time GNOME application developers.

The new website design that we developed had a few goals:

• Provide an effective interface for browsing and searching API documentation.
• Include introductory guides that lay out the basic process involved in creating a GNOME application.
• Include a space for the new version of the HIG (this is currently under development).
• Be responsive, so that it can be viewed on tablets and phones.

Me and Meg created a couple of new tutorials that will go on the site, and Meg updated some of the tutorials for JavaScript. Federico started updating the existing platform overview. Jakub gave the site a new responsive layout and created some artwork for the homepage. Together, we started rearranging the content and the pages. There’s a couple of development branches on git.gnome.org where this work will continue and we hope to relaunch in the not too distant future.

I will also be reaching out to existing documentation contributors to get their advice and to figure out what additional documentation we will need. It would be great if they want to help with this work too, of course.

In general, the hackfest felt like a significant event. If we can push forward with the agenda that we have set, then the future looks extremely bright. If anybody who wasn’t at the hackfest wants to get involved, there is no shortage of things to do, and I would encourage you to get in touch.

Big thanks to the GNOME Foundation for supporting the event and to BetaGroup Coworking for being such generous hosts.

The new panels are things we’ve wanted to do for a while. They represent an effort to allow applications to integrate better with GNOME 3: hence panels for configuring search and notifications. The new panels also reflect a long held goal to give users control over privacy, whether that is through controls over how much personal information is displayed on screen, how your identity is exposed over the network, or what content you are sharing.

We’ve also been working to improve the overall experience provided by GNOME Settings. Some of our existing settings panels weren’t (and still aren’t) as good as they could be, and we want them all to be easy to use and to look great.

Since so much work has been done for these settings panels, I thought it would be useful to show some mockups and give bit of background on the design for each panel. One thing you might notice here is a new set of design patterns around settings in GNOME, which has been made possible by the new list widget developed by Alex Larsson.

Network

The new network designs have been in progress for some time. They currently exist in a development branch, which will hopefully be merged in time for GNOME 3.8. The main aims here are refinement and expansion. We’re making the existing UI easier to interact with and better looking, and we’re replacing the old settings dialogs with new ones. We’re also adding new features, such as the ability to have multiple configurations for wired interfaces (not a common thing, but some people need to be able to manually switch between static IP and DHCP, for example).

Power

Although this is a mockup and not a screenshot, the redesigned power panel has actually landed. It has a new layout using the new list widget, and looks much better. One goal behind the new design was to try and make the power settings useful, so we’re including controls which will allow you to control how much power you’re using.

Date & Time

I did this redesign a little while ago, and got plenty of contributions from others along the way. There’s not much in the way of new functionality here: it’s mostly about making the panel nicer. One thing that the new design does is make the relationship between the automatic and the manual modes much clearer. It also has a big dialog for selecting a time zone, which means that the world map is displayed at an effective size.

This design still needs implementing, if anyone fancies taking it on.

Privacy

This is a new panel that was mainly designed by Jon. It is part of the effort to allow people to control how much information about them could be revealed, through things like location services, the lock screen, recent files, or even how your device is advertised over the network.

Privacy controls are especially important for GNOME nowadays, since recently used content is become a more prominent part of our applications, like Files. Privacy settings are also a good place to host options relating to the new lock screen that was introduced last cycle.

Search

We now have settings for configuring how search works in the Activities Overview. These complement the new search results view which has also landed this cycle. The search settings give control over which applications are able to display results, as well as the order in which results are displayed. This is useful if there is an application you’re not interested in or, on the other hand, if you are mostly interested in the results from one or two applications.

Notifications

This new settings panel controls which applications are able to display notifications and what kind of information is displayed in the notifications. Allowing people to hide private information is a key motivation behind this panel. It can sometimes be uncomfortable if you are at work or in public, and notifications are popping up on screen that contain personal information, for example. These settings will let users deal with these situations, by either letting them turn off certain types of notification, or by restricting the amount of information that they contain.

Displays

These mockups are still very new, and will probably go through a few more iterations before development work starts. The aim is to produce something more refined than the current panel, and that is more focused on the specific use cases in which multiple displays are used. We want to provide a nicer experience when doing presentations in particular.

Sharing

This new panel (which is currently being implemented) is largely a house keeping exercise. We currently have a range of standalone sharing tools, including preference dialogs for Vino, Rygel and file sharing via bluetooth and samba. Integrating these dialogs into system settings will clean up the application launcher space and provide a single place where you can control the various sharing settings on your machine.

I ♥ settings

So there you have it: lots of settings work! I’m personally really happy to see the control centre becoming much more refined and, hopefully, more interesting to users. It’s a lot of work to get all of these different settings panels in good shape, but I’m sure that the result will be a better overall experience.

As with all our designs, more information and mockups can be found on the wiki as well as in the GNOME Design Team Git repositories. Everything, including all our mockups, is freely available.

This Christmas, Every Detail Matters brings you…

Crisp menu separators. The old ones were fuzzy; now you have a clear line.

Corner synergy. The rounded corners of popup bubbles and scrollbars have been aligned.

Login process indication. This has been the subject of a few different fixes. We now have proper insensitive states in the login screen, and a spinner is displayed if login is taking a while.

A “No messages” label when the tray is empty.

A hover effect for window thumbnails. A border is displayed around window thumbnails when you hover over them; it’s a small thing, but it’s really satisfying.

A transparent top bar in the lock screen. I featured this in my last Every Detail Matters blog post; it has now properly landed, and has had some nice polish work done on it.

An icon to remind you when you have headphones plugged in. This bug wasn’t actually part of Every Detail Matters, it goes to show that there is plenty more happening in GNOME to get the details right.

We hope you like what we’ve been working on. If you’re looking for a hacking project for the holiday, check out the Every Detail Matters wiki page. GNOME Shell is a lot of fun to work on, and we’ve got some nice bugs just waiting for someone to fix them.

However, the core UX isn’t just about the Activities Overview or System Settings. There is another, crucial aspect of the new experience that we are in the process of building: core applications. And there’s one type of application that is especially important for the GNOME 3 user experience: the content application.

Content is one of the most important parts of a user experience. People care about content. Software is often just a means to get at and do something with it, whether it is the means to share holiday photos with your family, create documents for work, or play that new album you just bought. If we are going to provide a competitive, first-class user experience, we have to do content well.

Those of us who work on GNOME design have been thinking about content for some time. (Creating a new way to access content has actually been one of the goals of GNOME 3 from the very beginning.) If you’ve been following the development of GNOME 3, you might remember Jon’s blog post on the subject and some of the early mockups we had for presenting content in the shell.

The designs have moved on since then, but the goal remains the same: to provide a better way to access and work with content. We are aiming to make it quicker and less laborious for people to find content, and we want to provide effective tools for people to organise it. We also want to create content tools that are in tune with today’s users, with things like fast search and cloud integration. This new approach to content is also designed to be complementary to the file browser rather than a replacement for it.

To this end, we’re aiming to build a suite of new GNOME content applications: Music, Documents, Photos, Videos and Transfers. Each of these applications aims to provide a quick and easy way to access content, and will seamlessly integrate with the cloud. Through these applications, we want content to become a key part of the GNOME 3 experience.

The design of the new content applications follows some key principles:

• Provide fast and effective search.
• Tailor the view to the type of content. Music doesn’t need to look exactly the same as my documents, for example: we can optimise for each content type.
• In most cases (there are a few exceptions) order content according to what was used last. Among other things, this provides a useful reminding function for content that you might be interested in.
• Use a separate view for browsing and viewing. This uses screen space effectively and allows the UI to be focused on the task in hand.
• Automatically access content that is stored online (through GNOME Online Accounts). One of the goals behind these applications is that a new user should be able to enter their online account details during initial setup, and immediately have access to all their cloud content.
• Enable people to manually tag or organise their content, but don’t let that organisation become restrictive or burdensome.
• Include functionality that is relevant to the content type. You want to be able to play music and videos, share photos, print documents, and so on.
• Let users open their content using specialised applications. While the content applications will provide some basic functionality, there will be many cases where someone wants to use a specialist application to work with that content.
• Integrate application search into the Activities Overview, so that a single search can simultaneously tap into all of the content applications.

Mockups and designs for the new GNOME 3 content applications can be found on the wiki.

Documents

Music

Photos

Videos

We are making good progress towards the creation of these applications. Documents has been with us for a while, and is getting better with each release. (It has also enabled us to create a set of interface components that can be reused in other applications.) Totem is on its way to becoming Videos. Photos is in the early stages of development. There has even been a bit of activity around Music. Transfers is still only on paper, but there has been some interest in it.

This is the current state of Documents:

Making these five new applications a reality is the next step for GNOME, in my opinion. Once we have them and they are integrated with Activities Overview search, GNOME 3 will be much more compelling. If you want to help GNOME take its next step and get involved in the development of a shiny new GNOME application, just get in touch. We’d love to have you involved, and there is plenty of work to do.

We managed to fix 20 Every Detail Matters bugs for GNOME 3.4. That target has already been blown out of the water for the 3.8 cycle. At the time of writing, I count 27 bugs fixed by 9 different contributors. We’ve got some really great fixes in there, like improving animations in the lock screen and making the login experience smoother. There’s also been some nice usability enhancements to the Message Tray and Activities Overview.

We’re not done yet though: there are 14 bugs that are currently being worked on, and many more that we want to tackle. I’m adding items to the list all the time, including new features as well as smaller tasks for newcomers. If you want to help make GNOME 3.8 awesome, check out the Every Detail Matters wiki page. If there isn’t something that appeals straight away, come back and check again: we’re updating the page all the time. There’s plenty of time to get involved.

Everyone who has contributed to Every Detail Matters has done a fantastic job so far. A special mention has to go out to Stéphane Démurget, who only recently started contributing, but who has been doing a brilliant job. Stéphane hasn’t just been fixing lots of bugs, but he has been fixing them with style, and has been a real pleasure to work with.

I’d also like to give big thanks to Giovanni Campanga, Florian Muellner and Jasper St. Pierre, who are regular contributors who have been busy fixing bugs and reviewing patches. And now for some screenshots of the work done so far.

Yes, it’s a detail. But then, details matter: we have a nicer looking run dialog now. The most important feature of this is that it now has a close button, which means that people have an escape route if they accidentally open it. Another thing that this screenshot shows is our new background shade, which is used for modal dialogs and the overview. It used to be a flat transparency, but it has now been updated to use a radial gradient. This gives added depth and atmosphere.

I’m cheating with this one, because it hasn’t actually landed yet. It is cool though: Florian has updated the lock screen to use a translucent top bar, which fits better with the overlaid screen shield metaphor that we’re using here. It also looks awesome.

Finally, another detail (which, like all details, matters): the login screen now has properly styled insensitive buttons, and we make sure that the Unlock button is insensitive until the password entry field contains some text.

Expect more updates in the future.

Details matter. Small aspects of a user interface make a huge difference. Get them right, and the experience becomes beautiful, satisfying and easy. Get them wrong, and it can be clunky, awkward and ugly. It’s only by paying attention to the details that we can raise the quality of the GNOME 3 user experience and make it fantastic.

Every Detail Matters was first run in the GNOME 3.4 development cycle, with the aim of getting the details right. We assembled an awesome crew of contributors who fixed, polished and enhanced the GNOME 3 experience, and who made a big difference to the quality of the 3.4 release.

Now Every Detail Matters is back. We’re going to be working hard through the 3.8 cycle to improve as many details as possible. Together, we’re aiming to make GNOME 3.8 the most polished version yet.

Every Detail Matters is a really good opportunity to make a contribution to GNOME. For the 3.8 cycle, we are targeting a whole range of bugs. Some are easy and good for beginners, and some are a bit trickier and will need a more experienced hand to fix. There’s something in there for everyone. If you fix just one bug, you can make a real difference to GNOME 3.

There’s a list of bugs that we are targetting on the Every Detail Matters wiki page. Thanks to the efforts of our developers, a bunch of them have already been fixed while I have been putting the list together. But we want to fix more of them. Like last time, we are aiming to resolve 20 of these issues before the end of the cycle.

We’re monitoring the Every Detail Matters bugs, and we’ll make sure that you get feedback and code review as fast as possible. So, pick a bug, and get hacking!