Design Goings On

The GNOME 3.8 release kept me pretty busy. In the run up to UI freeze I was focusing on tracking bugs, providing guidance and testing. Then it was marketing time, and I was spending all my time writing the release notes as well as some of the website. (Kudos to the marketing team for a great 3.8 release, btw.)

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.

LGM 2013

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]

3.8 is out!

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!

Taking GNOME 3 to the next level (again)

GNOME 3 is making major progress with each and every release. Six months ago, when 3.6 was close to release, I wrote about how excited I was about the improvements that were on their way. That release was a big step up from the previous version in terms of user experience. Now we’re on the cusp of GNOME 3.8, and I find myself in exactly the same position. Testing GNOME 3.8, it is a huge improvement on 3.6. It’s more effective, satisfying and polished. Basic operations like selecting a window or launching an application have seen major improvements and the overall experience feels like yet another upgrade.

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.

DX Hackfest: Developer Documentation

The GNOME Developer Experience hackfest wrapped up a couple of days ago. It was definitely one of the best GNOME hackfests that I have attended. There were lots of people there with diverse affiliations (Canonical, Suse, Lanedo, Collabora, Red Hat, the Linux Foundation…), who were all extremely focused and keen to work together.

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.

Settings!

Those of us who work on GNOME design have been busy with all kinds of things recently. One major area of activity has been settings (aka System Settings, aka GNOME Control Center). In total, we have produced designs for four new panels (search, notifications, privacy, and sharing) and we have redesigned four of the existing panels (power, network, display, and date & time). Some of these have already been implemented, some are being developed on, and a few more are waiting for coders to get involved.

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.

Give a detail this Christmas

When I last posted about Every Detail Matters, 27 detail bugs had been fixed by 9 contributors. About two and a half months later, 43 bugs have been fixed by a total of 12 contributors. We’ve made impressive progress, and the results are already making themselves felt. Testing the latest and greatest GNOME Shell, things definitely feel more polished and better executed.

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.