Because inspiration can come in many ways… I thought you might enjoy this peculiar installation. The fact that it is situated in a public place, and still attracts people after 5 years, makes it worth while.

Some pictures.

Some videos.

Details about the installation.

(via Chris O’Shea)

Ubuntu Brand Guidelines homepage

You can learn more about the Ubuntu brand values and the brand assets, such as our logos, colour palette and pictograms, and how to use them. You can also consult some of our Web-specific guidelines, look at examples of design work that has been done, and download assets like the logos and pictograms.

Brand assets section on the Brand Guidelines site

This is the first iteration of the site: lots of content is being prepared and will be added later on, and we will also work on some refinements to the asset download process, as well as adding many more useful downloads, such as templates and photography.

Among the more frequently requested assets are HTML and CSS snippets and templates that can simply be copied and pasted on internal and external projects, so the designer or developer can be certain everything looks as it should. This is in the works, but it’s something that takes a little bit more time to get just right, so please bear with us.

For now, we’d be delighted to get your feedback on this first version: have you found anything particularly useful on the site? What would you like to see there that you think it’s missing? How do you think it can be improved?

We hope we enjoy the online Ubuntu Brand Guidelines!

The brand guidelines specify that warm grey (hex value: #AEA79F) can be used for: backgrounds, graphics, pictograms, dot patterns, charts and diagrams, and large size text.

Even though its use has been tried and tested on some of our print design materials, we are still finding the best way of applying it on the screen, with accessibility considerations in particular being something we want to get right.

Warm grey used in a brochure spread and diagrams

I made a quick example of warm grey text on white and buttons with white text on warm grey and showed it to the Ubuntu accessibility team, who promptly gave me some feedback.

Example used to showcase warm grey text on white and white text on warm grey

Here are the conclusions of this discussion, and what we will now try to follow as a rule:

• Warm grey is easier to read on white and at larger sizes, such as 24-36px
• It can be used for short, less important pieces of information (for example the date or author of a post or news piece below the main title)
• It can also be used in buttons that are deactivated and therefore less relevant

Guidelines can change though. If something doesn’t evolve, or is at least reassessed at certain intervals of time, it can very easily stagnate. So we will test these conclusions and follow these simple rules for now, knowing that later on we may decide there is a better way of achieving the same results.

This work grows out of observations of new and established / sophisticated users making extensive use of the broader set of capabilities in their applications. We noticed that both groups of users spent a lot of time, relatively speaking, navigating the menus of their applications, either to learn about the capabilities of the app, or to take a specific action. We were also conscious of the broader theme in Unity design of leading from user intent. And that set us on a course which lead to today’s first public milestone on what we expect will  be a long, fruitful and exciting journey.

The menu has been a central part of the GUI since Xerox PARC invented ‘em in the 70′s. It’s the M in WIMP and has been there, essentially unchanged, for 30 years.

The original Macintosh desktop, circa 1984, courtesy of Wikipedia

We can do much better!

Say hello to the Head-Up Display, or HUD, which will ultimately replace menus in Unity applications. Here’s what we hope you’ll see in 12.04 when you invoke the HUD from any standard Ubuntu app that supports the global menu:

Snapshot of the HUD in Ubuntu 12.04

The intenterface – it maps your intent to the interface

This is the HUD. It’s a way for you to express your intent and have the application respond appropriately. We think of it as “beyond interface”, it’s the “intenterface”.  This concept of “intent-driven interface” has been a primary theme of our work in the Unity shell, with dash search as a first class experience pioneered in Unity. Now we are bringing the same vision to the application, in a way which is completely compatible with existing applications and menus.

The HUD concept has been the driver for all the work we’ve done in unifying menu systems across Gtk, Qt and other toolkit apps in the past two years. So far, that’s shown up as the global menu. In 12.04, it also gives us the first cut of the HUD.

Menus serve two purposes. They act as a standard way to invoke commands which are too infrequently used to warrant a dedicated piece of UI real-estate, like a toolbar button, and they serve as a map of the app’s functionality, almost like a table of contents that one can scan to get a feel for ‘what the app does’. It’s command invocation that we think can be improved upon, and that’s where we are focusing our design exploration.

As a means of invoking commands, menus have some advantages. They are always in the same place (top of the window or screen). They are organised in a way that’s quite easy to describe over the phone, or in a text book (“click the Edit->Preferences menu”), they are pretty fast to read since they are generally arranged in tight vertical columns. They also have some disadvantages: when they get nested, navigating the tree can become fragile. They require you to read a lot when you probably already know what you want. They are more difficult to use from the keyboard than they should be, since they generally require you to remember something special (hotkeys) or use a very limited subset of the keyboard (arrow navigation). They force developers to make often arbitrary choices about the menu tree (“should Preferences be in Edit or in Tools or in Options?”), and then they force users to make equally arbitrary effort to memorise and navigate that tree.

The HUD solves many of these issues, by connecting users directly to what they want. Check out the video, based on a current prototype. It’s a “vocabulary UI”, or VUI, and closer to the way users think. “I told the application to…” is common user paraphrasing for “I clicked the menu to…”. The tree is no longer important, what’s important is the efficiency of the match between what the user says, and the commands we offer up for invocation.

In 12.04 LTS, the HUD is a smart look-ahead search through the app and system (indicator) menus. The image is showing Inkscape, but of course it works everywhere the global menu works. No app modifications are needed to get this level of experience. And you don’t have to adopt the HUD immediately, it’s there if you want it, supplementing the existing menu mechanism.

It’s smart, because it can do things like fuzzy matching, and it can learn what you usually do so it can prioritise the things you use often. It covers the focused app (because that’s where you probably want to act) as well as system functionality; you can change IM state, or go offline in Skype, all through the HUD, without changing focus, because those apps all talk to the indicator system. When you’ve been using it for a little while it seems like it’s reading your mind, in a good way.

We’ll resurrect the  (boring) old ways of displaying the menu in 12.04, in the app and in the panel. In the past few releases of Ubuntu, we’ve actively diminished the visual presence of menus in anticipation of this landing. That proved controversial. In our defence, in user testing, every user finds the menu in the panel, every time, and it’s obviously a cleaner presentation of the interface. But hiding the menu before we had the replacement was overly aggressive. If the HUD lands in 12.04 LTS, we hope you’ll find yourself using the menu less and less, and be glad to have it hidden when you are not using it. You’ll definitely have that option, alongside more traditional menu styles.

Voice is the natural next step

Searching is fast and familiar, especially once we integrate voice recognition, gesture and touch. We want to make it easy to talk to any application, and for any application to respond to your voice. The full integration of voice into applications will take some time. We can start by mapping voice onto the existing menu structures of your apps. And it will only get better from there.

But even without voice input, the HUD is faster than mousing through a menu, and easier to use than hotkeys since you just have to know what you want, not remember a specific key combination. We can search through everything we know about the menu, including descriptive help text, so pretty soon you will be able to find a menu entry using only vaguely related text (imagine finding an entry called Preferences when you search for “settings”).

There is lots to discover, refine and implement. I have a feeling this will be a lot of fun in the next two years

Even better for the power user

The results so far are rather interesting: power users say things like “every GUI app now feels as powerful as VIM”. EMACS users just grunt and… nevermind . Another comment was “it works so well that the rare occasions when it can’t read my mind are annoying!”. We’re doing a lot of user testing on heavy multitaskers, developers and all-day-at-the-workstation personas for Unity in 12.04, polishing off loose ends in the experience that frustrated some in this audience in 11.04-10. If that describes you, the results should be delightful. And the HUD should be particularly empowering.

Even casual users find typing faster than mousing. So while there are modes of interaction where it’s nice to sit back and drive around with the mouse, we observe people staying more engaged and more focused on their task when they can keep their hands on the keyboard all the time. Hotkeys are a sort of mental gymnastics, the HUD is a continuation of mental flow.

Ahead of the competition

There are other teams interested in a similar problem space. Perhaps the best-known new alternative to the traditional menu is Microsoft’s Ribbon. Introduced first as part of a series of changes called Fluent UX in Office, the ribbon is now making its way to a wider set of Windows components and applications. It looks like this:

You can read about the ribbon from a supporter (like any UX change, it has its supporters and detractors ) and if you’ve used it yourself, you will have your own opinion about it. The ribbon is highly visual, making options and commands very visible. It is however also a hog of space (I’m told it can be minimised). Our goal in much of the Unity design has been to return screen real estate to the content with which the user is working; the HUD meets that goal by appearing only when invoked.

Instead of cluttering up the interface ALL the time, let’s clear out the chrome, and show users just what they want, when they want it.

Time will tell whether users prefer the ribbon, or the HUD, but we think it’s exciting enough to pursue and invest in, both in R&D and in supporting developers who want to take advantage of it.

Other relevant efforts include Enso and Ubiquity from the original Humanized team (hi Aza &co), then at Mozilla.

Our thinking is inspired by many works of science, art and entertainment; from Minority Report to Modern Warfare and Jef Raskin’s Humane Interface. We hope others will join us and accelerate the shift from pointy-clicky interfaces to natural and efficient ones.

Roadmap for the HUD

There’s still a lot of design and code still to do. For a start, we haven’t addressed the secondary aspect of the menu, as a visible map of the functionality in an app. That discoverability is of course entirely absent from the HUD; the old menu is still there for now, but we’d like to replace it altogether not just supplement it. And all the other patterns of interaction we expect in the HUD remain to be explored. Regardless, there is a great team working on this, including folk who understand Gtk and Qt such as Ted Gould, Ryan Lortie, Gord Allott and Aurelien Gateau, as well as designers Xi Zhu, Otto Greenslade, Oren Horev and John Lea. Thanks to all of them for getting this initial work to the point where we are confident it’s worthwhile for others to invest time in.

We’ll make sure it’s easy for developers working in any toolkit to take advantage of this and give their users a better experience. And we’ll promote the apps which do it best – it makes apps easier to use, it saves time and screen real-estate for users, and it creates a better impression of the free software platform when it’s done well.

From a code quality and testing perspective, even though we consider this first cut a prototype-grown-up, folk will be glad to see this:

Overall coverage rate:
   lines......: 87.1% (948 of 1089 lines)
   functions..: 97.7% (84 of 86 functions)
   branches...: 63.0% (407 of 646 branches)

Landing in 12.04  LTS is gated on more widespread testing.  You can of course try this out from a PPA or branch the code in Launchpad (you will need these two branches). Or dig deeper with blogs on the topic from Ted Gould, Olli Ries and Gord Allott. Welcome to 2012 everybody!

As developers all over the world sink their teeth into the new features for the next release of Ubuntu it’s time to get out our cameras, brushes and pencils out and start creating the images that will make up the wallpapers for the next release. 12.04 will be an LTS so the same super high quality that the teams delivering the desktop experience are working to should inspire us to make this the best wallpaper set we’ve released yet!

As usual there is a group on Flickr set up for your submissions – Precise Pangolin wallpaper submissions group. Simply upload your pictures to Flickr – accounts are free – and again as usual the contributors who were selected last time will be the ones asked to choose from the final selection of images. For guidance around what might make appropriate content, image resolutions to be used and the like check out the Ubuntu Artwork team wiki page on wallpapers.

You can see from the Pangolin Release Schedule that the development process is well under way so  we’ll be accepting entries until March 15th 18:00 UK time with a view to choosing the images and getting them into the release the following week as the Beta Freeze closes. Questions are welcome on my iain at ubuntu dot com address or on IRC in #ubuntu-design where you’ll find me, like-minded community members and Canonical’s designers.

So get snapping, sketching and painting!

Prezi is a presentation tool which will make your PowerPoint presentations look embarrassing.
The back-end of Prezi is unsurprisingly powered by Ubuntu but, regardless of what it is under the hood, Prezi deserves the spotlight in its own right.

We visited their offices with a delegation of designers and cloud engineers, not only to discuss our products, but also to exchange stories and ideas. We were welcomed very warmly with beers and pizzas in their office, which is, especially architecturally speaking, very inspiring (lots of indoor green).

Prezi is a web application and uses a zoom and pan metaphor to move from a slide to another, it basically produces a ZUI (Zoomable User Interface). This not only allows you to be more creative but gives your slides more “context”, making them part of a bigger picture.
While Prezi is not an open-source project as we know it, and still requires Flash Player, it encourages the sharing of your prezis source.
Some of the functionalities, e.g. the typography, can seem quite limiting but overall the editing is very straight forward and the result can be very, very, effective!

For the purpose of the meeting I quickly put together a prezi and shamefully showed it to the real experts!

This presentation is targeted at people who never heard about Ubuntu, taking advantage of our beautiful logo (font included).

If you want to see what Prezi is capable of, have a look to this presentation their team put together:

Internally we have other tools that we have to use for collaboration purposes, but it is clear that Prezi is definitely a powerful medium and, after having talked to the creators, I can guarantee you it will keep improving (and also moving to different platforms).

For the multi-monitor design project, we have been making use of prototypes to develop and test some of the finer interactions of the system. One such crucial element is the reveal of the Launcher, particularly as we are exploring having a Launcher on each display. The motivation for making the Launcher available from any display is to allow the user to launch and switch applications, without having to travel onto another display to do so.

Last cycle we started thinking about how to improve System Settings, and in Precise we hope some of these improvements can start landing.

After examining the current panels and a number of interesting and useful discussions with GNOME upstream, we have defined a small but useful set of changes that we hope will add another level of refinement.

Besides the usual detailed tweaks to options + related widgets, there were other areas we looked at. These are:

• layout consistency
• Unity customisation options
• simplified structure

Switch pattern consistency

With the introduction of the switch widget in GTK 3, and consequentially in GNOME System Settings, different layout patterns have emerged. However, unlike its use in mobile design patterns where it is aligned to the right of its label, in System Settings there were instances of it aligning to the bottom or left of its label.

Because this mobile pattern is here to stay, and it is also easily encapsulable (eg. in menus), made sense to bring consistency to its alignment. Also cognitively, the control should be “after” the label.

This is the result:

Where the description under the header is optional.

Simplified structure

While adding new options to some panels, also reported in some bugs, it became obvious that a bit of reordering was necessary. The biggest change has been the removal of the Screen Settings. Its options have been distributed across more panels.

Where to start

You can review all the details starting from this document. As usual, specs and code are meant to be fixed, so I would be very grateful if you could share your most constructive opinions!

Over the past few months we have been working on improving the multi-monitor experience in Ubuntu. We took the opportunity at UDS in November to get some feedback on a prototype, which shows how we are planning to develop the multi-monitor experience over the next few cycles:

Here is a short video of the prototype in action at UDS:

http://www.youtube.com/watch?v=lbwNMnNUGFA

We invested in a six monitor rig and the prototype to test a number of different display configurations and to ensure that our design ideas scale well. However, our main focus for Precise is to ensure that we deliver a reliable and supportive experience for the core use cases, such as connecting to a second display or projector, disconnecting displays and using a closed laptop with an external display.

So here is the Phase 1 specification, scoped for the next couple of cycles, incorporating the feedback we got from the prototype and sessions at UDS:

http://design.canonical.com/the-toolkit/unity-multi-monitor-interactions/

Work continues now on the prototype, which will be used to conduct usability testing on the launcher, spread, window management and workspace interactions for multiple monitor setups.  We will be publishing the prototype on this site (the Ubuntu prototype application, along with the Qt C++ source code) in the near future, so keep tuned for more Multiple Monitor news.