It’s been a long time coming, but we’ve finally done it: the Design Blog has a new look!

Let me take you through the main aspects we wanted to improve on.

Why change?

The last blog design was nearly four years old. With its small font sizes and crammed pages, the text was difficult to read and the images didn’t have space to breathe.

In updating it, we wanted it to appear lighter and cleaner. We wanted to move the visual design forward and let the living and breathing parts of the site — the articles and images themselves — take centre stage.

The new Team page

A focus on content and flexibility

One of the main objectives of this new design was to make the reading experience more pleasurable, losing unnecessary details that were crowding the page, so our readers can focus on the content.

We needed a design that could accommodate not just the content we have now, but also the kind of content we expect to see in the future. So we’ve introduced a grid that’s flexible as well as strong. It makes the article pages look more balanced and harmonious, making it easier for the reader to focus on the text and the images.

Speaking of images, we also wanted to make it easier for authors (and encourage them) to include large images in their articles, if available, to really show off the work.

It all comes down to flexibility: an article page should look great when it has no images at all, but the grid and the design should be flexible enough that, when images exist, they are allowed to shine.

The Ubuntu font

Our font is beautiful, but we weren’t using it to its full potential before. One of the goals of this design is to show off the Ubuntu font, its different weights and how great it works at different sizes.

This an example of a block quote, showing the flexibility of the Ubuntu font.

We increased the baseline font size and started applying a new typographic scale (based on a modular scale) which we will introduce to the main websites soon.

Small screens

Although we have taken steps to improve the way content displays on small screens, there are still a few more things we can do to improve the browsing experience on mobile devices.

Because the new design is so clean, it reads well on smaller screens, especially the article pages, which are the most important part of the blog. Other elements, like the footer and navigation, have been tweaked slightly for easier access on smaller screens.

What’s next

As with most projects, we’re not done yet. There are a few things that we’d like to improve further — like the small-screen experience — and some more functionality we’d like to add, but we believe this is a good first step.

As you can see now, the URL for this blog remains associated with Canonical. Another important point we need to address is the relationship between this blog and the Ubuntu Brand Guidelines site, as they are in fact just two aspects of the overarching Ubuntu design concept.

Now let’s hear your thoughts! What do you think of this updated design? And what would you like to see us writing about in the future — what would make interesting articles for you?

Ubuntu is the world’s most popular open-source PC operating system. It is used by more than 20 million people in over 240 countries  – and it has been translated into more than 80 languages. From schools in Andalusia to the French police force and rural communities in India, everyone who uses it loves it.

The main goals of the Ubuntu design team are to make Ubuntu appealing, usable and accessible on PCs, mobile devices and, both through these devices and through our web and cloud solutions, to make technology available for everybody.

<h2>Access to technology is a human right</h2>

On September 22, 2012, respected British newspaper The Guardian warned that, due to bank closures, many people in the UK will soon struggle to access basic financial services. Altogether, around 1,200 communities are likely to be affected by the coming closures, with many more expected to follow in the next five years. As their populations grow older, travelling to the next town will become impractical for many of these people. Instead, they will have  to go online.

Communication technologies play crucial roles elsewhere, too. In 2010, the Arab Spring led to revolutions in several North African countries, the protests spreading fast, as ordinary people were mobilised through social networks. And mobile phones play an important role in rural Africa, providing basic services like healthcare information and weather forecasts.

We believe access to technology is not just a luxury. It is, as these examples demonstrate, essential for satisfying basic human needs today. That’s why we consider it a human right.

<h2>Designing amazing experiences</h2>

Working in or with the Ubuntu design team means creating engaging and impactful products. We design experiences for mobile devices, desktop PCs, laptops and TVs, alongside web and cloud-based services. Fundamentally, we believe that these technologies do not need to expensive to be useful, usable, beautiful and accessible.

Designing for Ubuntu involves  many things. But above all, designing for Ubuntu means enabling basic human rights. Designing for Ubuntu is designing for a good purpose.

One week to go! We’re looking forward to UDS. For me personally it will be my first and I’m thrilled to check out all the interesting sessions and hear your stories about Ubuntu and design. There will also be a very exciting design track in which we hope to work together on many cool topics, such as fonts, Juju GUI, Danish toys, the theater and many more!

For example, we will run some very interesting sessions on Ubuntu font guidelines and error states. We will organize real user-testing with the brand new Juju GUI. According to tradition, we will again organize the design theater. And we also invited two external speakers – one from LEGO and one from a design company – to talk about their experience with co-creation and their work with communities.

We’ll send out a more detailed schedule later this week.

Hope to see you at the Bella Center in Copenhagen next week!

On behalf of the design team,

Ivo

I have now worked at Canonical, ‘The company behind Ubuntu,’ for almost 4 months. The time has flown by, and I am finally getting up to speed with the working environment, the people and the atmosphere.

So what differences have I noticed between the academic setting and the industrial setting?

My biggest fear of moving into a commercial environment was losing the ‘freedom’ of academia, having to sit in a shirt and trousers all day and work in a 2 by 2, high walled cubicle, doing work that is given to you rather than work that you choose and drive in a direction that excites you.

I’m glad to say that I had nothing to worry about!

At Canonical, there is no requirement for a shirt and trousers (not to say people don’t wear them). There is desk space aplenty, and the teams all sit close enough together to have a conversation, whether that be about work, or just general banter. There is a nice overall tone to the whole working environment. ‘Shit gets done,’ but not at the expense of enjoyment in the environment. That brings me onto the actual work…

Canonical Office in London (you can see my desk!)

The main reason I wanted to step away from academia was that the pace was getting a bit too slow for me. Countless times I have been told over the last five years, academia is about adding your small grain of knowledge to the bigger picture of your chosen field. This frustrated me.

Even though some of the projects I worked on while in academia were extremely rewarding and really made a difference in people’s lives within a short period of time, it can be considered rare for this to happen in academia. Back to life at Canonical, it is really cool and rewarding to see something that you have spent hours working on go live on the website. It gives you that sense of achievement. The pace of work is also much quicker, and I find myself working on several projects and speaking to different people, while at the same time always learning. One of the most interesting aspects of the work is finding a balance between giving the user the best possible experience of using the Ubuntu website and meeting the business and marketing goals of the company.

An example of this are forms. At all costs, from a user’s point of view, you want to avoid forms and especially forms with hundreds of fields in them! But over the last few months, I’ve been able to understand better why the company needs these forms, and I’ve been able to balance out where forms are and how they are implemented.

An example of (part) of one of the forms I’ve been working on

I also thought that leaving academia would see the end of my visits to conferences. This was one of the more enjoyable aspects of academia, a place to go and see what other people are working on, networking and being impressed (as well as hopefully impressing others). To my joy, conferences in industry are just as common. The content however is completely different to what I’ve been used.

During talks at academic conferences, the focus is on results and statistics. In industry, the focus is on experiences, what worked and what didn’t. There are pros and cons to both approaches. I feel that at academic conferences, the quantitative data can sometimes obscure what is actually found by studies, where a user’s thoughts and feelings aren’t taken into account. There is no doubt that the measures are mostly accurate, but just because a button is quickly clicked by each participant with no errors, does it matter that the participants don’t like where the button positioned on the screen? The statistics will usually win over. However, this is an approach that industrial conference speakers could learn a bit more from. The thoughts and feelings of a speaker are all very well, and as they regale stories of their work (or a lot of the time completely unrelated to their work), then I have found myself asking ‘so what?’ If I ever do a talk at an industrial conference, I hope I can find the middle ground between these two approaches, where statistics aren’t the be all and end all, but that I can couple these with qualitative information that I have learnt. Don’t get me wrong, I have read papers and seen presentations, both academically and in industry, that do a great job of doing this already. I hope that I will be able to follow in these footsteps.

The main stage at Reasons to be Creative in Brighton

So, that’s my story 4 months in. I’ve learnt a lot in those 4 months, and it will be interesting to write back in 4 months more to let you know what else I have learnt… and I’m sure there will be loads!

Today the group closed on submissions for the 12.10 wallpaper selection. The team of us involved are still working to add/ remove and refine this collection before the 30th. We’ve got a few more than our 10 target, we’ll review this number tomorrow based on quality and what we can include.

Join us on #1210wallpaper on freenode to chat through this selection with us!

To everyone who has given up their evening to go through this, thanks!

Speak to you all tomorrow

I wondered if I could make an easily updateable, prototype site in order to test a number of different IA’s using an XML file to represent the sitemap. This post is about what I did and how to get some sample code if you want to use or extend it for yourself.

The XML

The goal is to be able to simply edit, delete or add a section in the XML and refresh the site. There you have it. The navigation menu has changed.

Each <page> child of <sitemap> is top level navigation. You add children to that by placing <page> nodes inside each other.

<page title="Contact" url="contact-me">

• title – The name of the menu item and the title of the page
• url – The permalink for that page, this is added to the parents name if a child

Below is an example navigation to build a personal website:

<sitemap>
   <page title="Work" url="work">
       <page title="Develop" url="develop">
           <page title="Web development" url="web-development"></page>
           <page title="Apps" url="apps"></page>
       </page>
       <page title="Design" url="design">
           <page title="Web design" url="web-design"></page>
           <page title="Magazines" url="magazines"></page>
           <page title="Cartoons" url="cartoons"></page>
       </page>
       <page title="Videos" url="videos">
           <page title="Animation" url="animation"></page>
           <page title="Live footage" url="live-footage"></page>
           <page title="Showreel" url="showreel"></page>
       </page>
   </page>
   <page title="About Me" url="about-me">
       <page title="Life" url="life">
           <page title="Photos" url="photos"></page>
           <page title="Videos" url="videos"></page>
           <page title="Inspiration" url="inspiration"></page>
       </page>
           <page title="Socal" url="social">
           <page title="Friends" url="friends"></page>
           <page title="Family" url="family"></page>
           <page title="Things I've done" url="done"></page>
           <page title="Bucket list" url="bucket-list"></page>
       </page>
   </page>
   <page title="Contact" url="contact-me"></page>
</sitemap>

The system has only been developed to navigate three levels deep.

Adverts

I also wanted to have little ads in the corner of some of the mega menu dropdowns. To do this, there is an promo.xml in the XML folder. Simply wrap a title, img, p and link, if you would like, in the url of the top level link. This will result in an advert style banner on the right side of the menu. You can restyle this banner with CSS.

Here is the example of promo.xml:

<adverts>
    <work>
        <title>Latest website</title>
        <img>assets/images/200x150-b8b8b8-fff.jpg</img>
        <link url="#work/develop/web-development">See more</link>
    </work>
    <about-me>
        <title>My picture</title>
        <img>assets/images//200x150-b8b8b8-fff.jpg</img>
        <p>This is a little blarb all about what I do and where I am.</p>
    </about-me>
</adverts>

This is a little blarb all about what I do and where I am.

Hash bang

Using hash bangs, the site does not reload the page when a menu item is clicked. The JavaScript takes the updated hash value and updates the page values to mimic a new page. There are even three different page contents that are changed to reinforce to the user the fact we have changed page.

Demo

Check out the demo: http://www.anthonydillon.com/navigation-prototyping

The Result

The results were good. We were able to use this code to test three potential IAs and the mega menu itself with ten users. The XML allowed the me to easily tweak the menus between tests and it looked real enough that the users weren’t distracted by the lack of content behind the pages.

The Code

Feel free to use the code for quick navigation prototyping at: https://launchpad.net/navigation-prototyping

If you would like contribute to this project all your help is appreciated!

We are blogging a lot of cakes, so to economise on space, I’ve paired Mika and I’s latest baking attempts.

Last week was my turn to bake a cake. I was nervous. There’s a lot of pressure, and it is no easy task! So I chose to bake a loaf (but relying on one design seemed to be too much of a case of “putting all your eggs in one basket” so I went for two). A blueberry and apple loaf, and a pistachio loaf (recipes from Hummingbird Bakery).

This week was Mika’s turn, and he didn’t disappoint. A beautiful New York cheesecake (and he had to buy cake baking equipment especially). Go team!

Quantal is well on the way to being the great release we’ve come to expect from Ubuntu so it’s time to add to that sheen with a set of quality wallpapers from our fantastic community. This cycle we’re going to try to make the process better than before by setting out a clearer vision for what we think will make a great set.

Firstly we’re interested in quality not quantity so we’re going to limit ourselves to 10 images on the final CD. We’ll take submissions in the Flickr group as before and don’t forget we need your image licensed as CC by SA. Each Flickr user will be limited to 1 submission to the group so choose carefully!

Secondly I’ve been speaking to Otto, the Lead visual designer at Canonical, to help ensure that what we get feels at home on the desktop. The guidance we’ll follow when selecting images to go into the release is as follows:

1. Images shouldn’t be busy and filled with too many shapes and colours, a similar tone throughout is a good rule of thumb
2. They should have a single point of focus, a single area that draws the eye in
3. We should avoid having anything on the left and top edges as this will clash with the interface elements of the Launcher and Panel
4. Try your image at different aspect ratios to make sure something important isn’t cropped out on smaller/ larger screens

To shortlist from this collection, as usual, we’ll be going to the people whose images were selected last time around to help us choose the final 10. In doing this we’ll hold a series of public IRC meetings on #1210wallpaper to discuss the selection and in those sessions we’ll get the selection team to try out the images on their own Ubuntu machines to see what they look like on a range of displays and resolutions. Anyone’s welcome to come to these sessions but please bear in mind that an outcome is needed from the time that people are volunteering and there’s usually a lot of images to get through so we’d appreciate it if there isn’t too much additional debate.

The group’s open for submissions now and we’ll close it at 5pm on the 28th August 2012 to start going through the images.

So, get all your great summer photos out and as always ping me if you have any questions. I’ll be lurking in #1210wallpaper on freenode. I hope it’s been sunnier in places other than the UK!

The design team was (mostly) on the Isle of Man last week so we missed a cake day, but this week everything is back to normal (phew). As Matthew couldn’t join us on the island, and to keep him busy, he was nominated for this weeks cake duty –  Let’s hope the Olympic’s brand police don’t catch him!

Matthew used edible glitter and fruit for the colouring of the Olympic rings, on top of five mini Genoese sponges.

The release schedule of Ubuntu is tied to a 6 month cycle, also called cadence. Similarly, a lot of our work and planning falls onto our diaries like country festivals on farmer’s calendar.

Ubuntu Developer Summits are obviously the main events. However, if you work on Canonical Design Team, there are plenty of other events to attend to as well.

Last week we were in the Isle of Man having a work sprint with the Product Strategy group. Obviously we took an advantage of the setting and embarked on some off-piste activities in our free time. Here’s a little gallery:

Similar, if not better scenes have also taken place in Florida, California, South Africa…

We realise that changing Operating System (OS) is a big thing for anyone thinking of testing something out. That becomes a huge barrier for people trying out Ubuntu for the first time and seeing if they like it. As a member of the web team I decided to take on the challenge as a cool way to testing out some HTML5 and jQuery. The purpose of this blog is to talk about some of the challenges and thought processes I went through during the build.

Getting started

I started by breaking down the Ubuntu interface into DOM elements, similar to developing a web page from a design. So I took on the background first, each part of the build brought different challenges. In the case of the background, I needed it to stretch full width and height of the viewport.

The launcher

Once I had that nailed, I moved onto the launcher on the left of the screen. At the time of building (11.10) the menu would slide out of view when a window was fullscreen. By creating a DIV with a list of icons and styled with CSS to replicate the menu in the OS. Now I needed to add the interactive slide to the menu, which I decided to apply with jQuery because I wanted the animation to work on older browsers and not just browsers with CSS3. When a window is fullscreened I would trigger the menu system to slide the menu out of the viewport. Then binds a mouseover event to slide the menu back into view when the user needs it again.

The global menu bar

All that was left to make the web page look like the static Ubuntu interface was to add the global menu bar at the top for settings and window controls. This was again a simple DIV with a window control DIV floated to the left and a list of settings icons floated to the right.

Building applications

Now the interface looked like the initial Ubuntu screen. I turned to focus on applying the functionality to the menu icons, beginning with the folder icon. Created a Folder class and a File class, Folder class below:

Both of these classes are used by the file system class that created them and stored them in an array to access and modify them later.
Now that we have a file system, the fun part comes when you connect it all up and see if it comes to life. This is how the connections happened:





When the folder icon on the menu is clicked it tells Base which triggers the open function in the folder system. I built the Folder and File classes with the aim to give the folder system full functionality, like rename, drag and drop to move, etc. But that was descoped to finish the tour in time for the release of 11.10.

Seeing this work I felt the buzz to jump to the next application, then the next, until all the applications I set out to develop were finished and working.

Have a go for yourself: Ubuntu Online Tour

Conclusion

One of the questions I was asked is `how long did it take you?’ In total it took about 4 months, from what started as a quick test to being given the time to bring the development to fruition. It was crucial that all elements of the demo looked and felt exactly like the OS as this will be most people first try of Ubuntu so we didn’t want it to be different if they install Ubuntu.

I plan to keep the tour up-to-date with the latest version of Ubuntu every six months. With every update I try to add features and application which I haven’t managed yet. A few features that come to mind would be to progressive enhance the movie player to use HTML5 video if available rather than Flash. I would also like to see the music player (Rhythmbox) be developed.

If you have HTML, CSS and jQuery skills and time to spare. Please feel free to contribute. The code can be forked from: Ubuntu Online Tour Launchpad Page.

As you might have heard from the blogosphere, we are going to start to ship our take on web apps. Let me take the opportunity to explain to you some of the reasoning behind them and some of their characteristics.

Why

I would split the why question in more parts.

Is the Web relevant? Today, the Web, besides being the best source for information, is also a major component in how we relate to one another. There are very few applications that don’t use the Web in one way or another.

Are web applications relevant on the Desktop? If you look at the first tabs of your browser window, chances are that these are tabs you keep open and glance at every now and then to check if a change has occurred. This is not optimal! Facebook and your webmail could (and should) be more integrated in your experience. Browsers acknowledged this problem a while ago by introducing desktop notifications and more compact tabs, but the shell itself is in the best position to provide such capabilities.

Are web applications also relevant to other form factors? It is true that in recent years there has been quite some hype about native applications for mobile platforms. While using a native toolkit can provide the developer some initial edge, the advantages quickly fade when more form factors or platforms need to be supported. The speed of how you can globally test changes, and the accessibility of the technology, made the web a very fast paced environment for innovation. Despite having evolved mainly through a consortium, web technologies, with their separation of content and representation, are in a very good position to support multiple screens.
Because of these reasons, it shouldn’t surprise you if the Facebook native application for iOS is rated with just 2 stars whereas the web version for mobile, in many aspects, works much better. The share-ability of the techniques will also make it so that compelling experiences will become more and more common outside of the native space.

Not just web links

One of the major critics about this project has been the comparison to simple web links. Web apps will be far from being simple web links. As a matter of fact, it has been our priority, from UX perspective, to blur the line between native applications and web apps. In fact, if we consider native applications heavily dependent on the Internet connection and web applications which can work offline, there is an obvious overlap. The demo you see today shows the current state of the project, which is already impressive, but in the coming months you will see how these will beautifully blend in the user app mental model.

Conclusions

Unity, thanks to its components (e.g.: Sound Menu, Notify OSD), offers a unique opportunity for web applications to integrate with the shell user experience. There will be design, technological and political challenges, but web technologies are here to stay!

More information is available in the official release post and in the detailed coverage from OMGUbuntu.

Every weekly team meeting someone is tasked with baking a cake. Ivanka baked for this week’s cake day – check out her cheesecake! So you know, this is not going to become a culinary blog, but cake day is a good reason to post! Being a designer is not (always) a piece of cake.

In the past few weeks I’ve been trying to catch up with all the reading that I haven’t been doing in the past few months. One of the books in my to-read pile that I was particularly eager to read was Mike Monteiro’s “Design Is a Job”, published by A Book Apart. I was not disappointed.

Mike writes about what he has learned throughout his career, running his own design studio, and giving precious insight on subjects such as giving feedback, client interaction, getting paid, and working with other people.

I think this is a book of particular relevance to any designer as it explains in a very clear and concise way why and how we should stand up for ourselves, stop blaming everyone else around us for the things that are our responsibility and, in the process, do better work.

Here are a few of my favourite quotes:

“You can roll your eyes at how much they don’t understand about design or you can roll up your sleeves and begin practicing your craft by helping them clarify what they need.”

“When people get anxious they fall back into the terrible habits that make up their comfort places. And, by definition, problem solving and innovation don’t happen in our comfort places.”

“Being scared is generally a good sign that you’re doing the right thing.”

At the risk of copying and pasting the entire book into this post, I’ll stop now and let you find out more for yourself.

Normally the Ubuntu/Canonical Design Team are busy working on our own projects, but it makes a really good change to work on other Free Software design problems for a change. Starting at 22:00 UTC (15:00 PDT) on Monday 7 May 2012, you can join us for the next Ubuntu Design Theatre at the Ubuntu Developer Summit in Oakland, California:

• Live audio-only stream from Room 201
• Freenode #ubuntu-uds-room-201
• Live notes from Room 201

Bring your design issues along and lets see how we can improve them! There should be visual designers, user interface designers, brand designers, … and the many other people who try and work to make users’ lives better with Free Software.

In the year 2000 IBM showed off the WatchPad, a computer on your wrist, but one perhaps ahead of its time and still needing a little bit of design-love. Of course, we love highlighting beautiful design when it does finally come along, and in the last few days the beautiful Pebble smartwatch has appeared over the horizon.

As well as being “just a watch” with a long-lasting e-paper display it has a Bluetooth wireless connection, opening up all sorts of possibilities for expansion; particularly showing notifications, SMS messages, or status and calendar updates without having to check a mobile phone directly. Once it’s on your wrist the possibilites are there for all sorts of apps (not just fancy clocks!).

In under one week they’ve raised $5 million in pre-orders from 35,000 individuals—taking the Kickstarter record for the largest amount raised through crowd-funding. A finished product does not just happen by itself, it requires lots of expertise; industrial design for the water-tight casing, ergonomics to make sure it fits on your wrist, electronics layout design for the battery, buttons and e-ink screen …and some firmware (embedded computer software) to make it all work.

Andrew Witte (second from the left in the dream team) is the Lead Engineer working on the firmware and an Ubuntu fan. Andrew’s desk on a typical day has a sprawl of cables, a Lego car, some low-level JTAG programmers, USB prototyping cables, several half-finished Pebble boards …and, in the middle is Xubuntu (Ubuntu running with an XFCE desktop) for the development and debugging.

Lots of open source is also being used to make the watch tick. The firmware development toolchain is CodeSourcery GCC for compiling, OpenOCD for working with the JTAG, and GDB (the GNU debugger) for finding all hard to solve bugs. One of the main parts of the Pebble is the Bluetooth interface for talking to smart phones, for which many hours have been spent testing with Ben Lam’s Python-based ‘LightBlue’ framework and utilities like hcitool. If that’s all getting a bit technical, Andrew notes that The Gimp and ImageMagick (both in the Ubuntu Software Centre) are used for processing the bitmaps and pictures before they are sent to the Pebble watch prototypes.

The race is on for the first person who can get a prototype in August 2012 and integrate Ubuntu’s libnotify-osd work with the Pebble watch, in time for Ubuntu 12.10 in six months time! For those with a pre-order, it will be possible to vote on additional-colour in addition to Artic White, Cherry Red and Jet Black. We’re hoping that Ubuntu Orange wins!

The Pebble Kickstarter campaign runs until 18 May 2012. To vote later for a colour (such as Ubuntu Orange!) you need to pre-order in the colour-Pebble category ($125+shipping).

Some of original sketches for Ubuntu Arabic are about to go on display in Berlin! We’ve talked before about the work done by Rayan Abdullah on drawing and designing the original calligraphy behind the Ubuntu Arabic for the Ubuntu Font Family and from tomorrow you will be able to see that work for yourself.

Until 27 May 2012 you can see some of those original sketches and designs featuring in the Typobau exhbition at the Körnerpark Gallery in Neukölln, Berlin,

It includes many of Rayan’s design projects from the last decade, including the Bundesadler (the Federal Eagle of Germany) and his many Arabic graphic design and typography projects including the logos and typefaces for Burberry, McDonalds, Nokia Pure Arabic and the Ubuntu Font Family Arabic script coverage.

For keen visitors, the grand opening is this week, at 19:00 on Friday 20 April 2012. Or for anyone visiting Messe Berlin in May 2012 for Linuxtag 2012 you will still be able to catch the exhibition. Just take the S-Bahn ring anti-clockwise to S-Neukölln and see Ubuntu and Rayan’s exhibition at the same time as Linuxtag!

The “Typobau” exhibition runs between 21 April 2012 and 27 May 2012, 10:00–20:00, Tuesday—Sunday, at Körnerpark Galerie, Schierker Strasse 8, Berlin-Neukölln

Over the past two years, Ubuntu has introduced a suite of status menus — known to Ubuntu geeks as “indicators” — in the top corner of the screen.

In Ubuntu 12.10, we plan to refine these menus to address several long-standing problems. If you’re a programmer, tester, or visual designer, there are plenty of opportunities for you to help out.

In updating the design, our general theme has been improving relevance — showing menus, and items in menus, only when they are relevant to you. For example, if you never use a VPN, it shouldn’t take up space in the network menu. If you never use Gwibber, it shouldn’t take up space in the messaging menu. If you never use a Bluetooth device, you shouldn’t need to see the Bluetooth menu. And so on.

System menu

The biggest change to the structure, though, is a straightforward simplification. The two menus at the end of the menu bar, the user and system menus, will merge. As well as saving space, this will fix three main problems:

• “Switch User Account” and “Log Out” were in different menus, despite being closely related. Now, they’ll be in the same menu. (“Lock Screen” and “Switch User Account” will become one and the same command.)
• It’s been hard to find which version of Ubuntu you are using. This will now have a dedicated menu item.
• Finding the Ubuntu Help has also been difficult. That will now have an always-present menu item too.

One more detail. When Ubuntu used a home icon to represent the Nautilus file manager, usability testing found that people thought it was a launcher or starting point. (This isn’t surprising, given the strong connotations of Home in other applications.) The Unity Dash, meanwhile, is exactly that kind of starting point. So one possibility under discussion is changing the Dash launcher icon to a home icon — which the Dash already uses for internal navigation anyway.

How is that relevant to the status menus? It raises the possibility that we could use the Ubuntu logo, if it won’t be in the launcher, as the title of the system menu instead. We plan to test this against the powercog icon, and see which works better.

Clock menu

Many improvements can be made to the clock menu, but the design will remain much the same.

We’d like to add the ability to set a basic alarm, and if it’s set, this will be shown using an icon in the menu title.

If you’re a programmer and know your way around C and GObject, another simple enhancement would be populating the coming events section of the menu from a Web calendar, such as Google Calendar.

Sound menu

The sound menu design will remain unchanged in 12.10. As with the clock menu, though, there are plenty of minor improvements to work on.

Network menu

Ubuntu’s network menu is powered by Network Manager, and our design is a visual presentation of where we’d like to take it in future. It simplifies the current menu by using consistent on/off switches for connection types, removing needless separators, and showing less common functions — mobile broadband and VPNs — only if you have set them up in the Network settings.

Bluetooth menu

As with the network menu, we’d like to simplify the Bluetooth menu by using on/off switches and reducing separators.

Battery menu

The battery menu design will stay the same.

Messaging menu

We plan to simplify the messaging menu by removing the default Chat, Mail, and Broadcast items. Instead, messaging programs will show up only if you have set them up, and will show up under their own names. As well as shortening the menu, this will solve the problem that nobody knows what “Broadcast” means.

In Ubuntu for Android, the messaging menu will naturally expand to show missed calls, voicemail, and SMS messages.

And finally, Ubuntu One will at long last be banished from the messaging menu, moving instead to the menu next door…

Sync menu

The new Sync menu will be present if you use any services such as Ubuntu One, SparkleShare, or Dropbox, that carry out non-urgent synchronization over the network. (Continuing the relevance theme, the menu won’t be present at all if you haven’t signed up for any of those services yet.)

From this menu, you’ll be able to turn each service off and on — turning them off if you’re trying to download something in a hurry, for example. You’ll also be able to access their settings, if they have any.

Keyboard menu

We’d like to make two main improvements to the keyboard menu.

First, combining it with the input method menu. So that if you use input methods (such as for Chinese, Japanese, or Korean), you don’t have two separate menus for controlling your keyboard.

And second, making the menu title an icon that represents the current input method or keyboard layout, instead of a generic keyboard icon with added text. (Visual designers could help us here, in finding an elegant way to generate an icon based on the letter code for each layout.)

So long, printing menu, we hardly knew you

In Ubuntu 12.04, a printing status menu appears whenever any print jobs are in progress. Unfortunately, it’s not that noticeable.

So in 12.10, we plan to replace it with a temporary printing item in the launcher. This will correspond to a minimized window listing your recent print jobs. You can close it when done, or just ignore it, as you see fit.

What’s next

As these designs are fleshed out, the individual specifications will be updated in the ‘Unity Application and System Indicators’ section of The Toolkit.

This is a lot of work, and you’re welcome to help out if you can. Pop in to the #ubuntu-unity channel on IRC, or get in touch on the unity-dev@ mailing list.

In the open source community, we celebrate having pieces that “do one thing well”, with lots of orthogonal tools compounding to give great flexibility. But that same philosophy leads to shortcomings on the GUI / UX front, where we want all the pieces to be aware of each other in a deeper way.

For example, we consciously place the notifications in the top right of the screen, avoiding space that is particularly precious (like new tab titles, and search boxes). But the indicators are also in the top right, and they make menus, which drop down into the same space a notification might occupy.

Since we know that notifications are queued, no notification is guaranteed to be displayed instantly, so a smarter notification experience would stay out of the way while you were using indicator menus, or get out of the way when you invoke them. The design story of focusayatana, where we balance the need for focus with the need for awareness, would suggest that we should suppress awareness-oriented things in favour of focus things. So when you’re interacting with an indicator menu, we shouldn’t pop up the notification. Since the notification system, and the indicator menu system, are separate parts, the UNIX philosophy sells us short in designing a smart, smooth experience because it says they should each do their thing individually.

Going further, it’s silly that the sound menu next/previous track buttons pop up a notification, because the same menu shows the new track immediately anyway. So the notification, which is purely for background awareness, is distracting from your focus, which is conveying exactly the same information!

But it’s not just the system menus. Apps can play in that space too, and we could be better about shaping the relationship between them. For example, if I’m moving the mouse around in the area of a notification, we should be willing to defer it a few seconds to stay out of the focus. When I stop moving the mouse, or typing in a window in that region, then it’s OK to pop up the notification.

It’s only by looking at the whole, that we can design great experiences. And only by building a community of both system and application developers that care about the whole, that we can make those designs real. So, thank you to all of you who approach things this way, we’ve made huge progress, and hopefully there are some ideas here for low-hanging improvements too