<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mark Shuttleworth &#187; design</title>
	<atom:link href="http://www.markshuttleworth.com/archives/tag/design/feed" rel="self" type="application/rss+xml" />
	<link>http://www.markshuttleworth.com</link>
	<description>Planetary perspectives</description>
	<lastBuildDate>Mon, 05 Jul 2010 08:31:04 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Window indicators</title>
		<link>http://www.markshuttleworth.com/archives/333</link>
		<comments>http://www.markshuttleworth.com/archives/333#comments</comments>
		<pubDate>Mon, 03 May 2010 09:52:45 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[desktop]]></category>
		<category><![CDATA[indicators]]></category>
		<category><![CDATA[title bar]]></category>
		<category><![CDATA[window controls]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=333</guid>
		<description><![CDATA["Windicators" are window indicators, on the right of the title bar, which follow the same pattern as the Ayatana indicators that Ubuntu uses on in the panel.]]></description>
			<content:encoded><![CDATA[<p>The Ayatana Indicators work has given us a crisp, clean basis for indicators in the panel. We&#8217;ve said they will all look a particular way, and behave a particular way. And we&#8217;ve said they will be placed on the right of the panel.</p>
<p>But why limit indicators to the panel? Let&#8217;s make it possible for applications to use indicators themselves, for all the things that indicators are good at:</p>
<ul>
<li>Conveying a particular state, such as whether or not the application is connected,</li>
<li>Providing a handle for the indicator menu, to modify that state</li>
</ul>
<p>We&#8217;ll start with &#8220;window indicators&#8221;, or &#8220;windicators&#8221; for fun. <strong>Windicators are indicators displayed in the window title bar that behave just like the indicators in the panel: they have an icon which shows state, and clicking on the icon brings up a menu.</strong> Applications can create, update and remove window indicators using an API more or less like the AppIndicator framework first put to use in 10.04 LTS.</p>
<div id="attachment_375" class="wp-caption alignright" style="width: 701px"><a href="http://www.markshuttleworth.com/wp-content/uploads/2010/05/windicators-mockup.png"><img class="size-full wp-image-375" title="Mockup of WIndow Indicators" src="http://www.markshuttleworth.com/wp-content/uploads/2010/05/windicators-mockup.png" alt="Window indicators follow the standard Ayatana indicator pattern, but are specific to a particular window." width="691" height="524" /></a><p class="wp-caption-text">Window indicators, or &quot;windicators&quot;, shown in a sample application window.</p></div>
<p>We&#8217;ve carefully placed all the panel indicators on the right, and we&#8217;ve carefully put the window controls and window title on the left. So now we have all this space on the right. As a pattern, it would fit to put the window indicators there.</p>
<p>Cody Russell is leading some work in Canonical around the technology which actually draws the window title bar and borders. It&#8217;s called &#8220;client side window decorations&#8221;. We are moving the rendering of the window decorations into the app itself, so that you don&#8217;t have the window manager and application drawing those pieces separately. That simplifies certain things (of course it also makes some things harder).</p>
<p>One of the most interesting consequences of the client-side decorations work is that it means that the application could more easily draw into the titlebar (because the application is drawing the title bar). And that makes it even more natural for the application to control the right side of the window title bar as well.</p>
<p><b>Update:</b> Several commenters correctly pointed out that window indicators could just as easily be rendered by window managers in cases where the theme is not CSD-based. CSD provided the inspiration for giving that space to the application, it&#8217;s not essential to the implementation. It would be fantastic for window indicators to be available on <your favourite window manager> <img src='http://www.markshuttleworth.com/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
<h3>Less chrome, more content: banish the status bar</h3>
<p>I&#8217;m on a &#8220;less is more&#8221; kick with our design efforts, and one of the things I want to banish is wasted vertical space. For netbooks, that&#8217;s particularly important. And a lot of applications have status bars at the bottom, for no good reason other than it was that way in Windows 3.1.</p>
<p>Typically the application status bar has:</p>
<ul>
<li>Some status icons (&#8220;online&#8221;)</li>
<li>Some tools (&#8220;Yslow&#8221;)</li>
<li>A transient status message (&#8220;Saving draft&#8230;&#8221;)</li>
</ul>
<p>We can replace these with a combination of windicators and temporary, overlay status bars. I really liked the Chrome browser&#8217;s use of overlay status messages, so kudos and thanks to them for the inspiration. The net result of those two steps, in apps where we can, is to save about 5% of the vertical space for your stuff &#8211; real content.</p>
<h3>Prioritising examples for implementation</h3>
<p>If you&#8217;re interested in this idea, please join the Ayatana mailing list and participate in the design discussions there. We&#8217;d like to develop some patterns that are generic, so that we can use a common icon and possibly also common indicator menu entries for addressing the same issue in diverse applications. Of course, applications will be free to use the mechanism for things that are unique to them.</p>
<h3>Candidates for 10.10</h3>
<p>It would be fantastic to implement a few of these window indicators for 10.10. Please help us choose the most useful cases! Currently on the list are:</p>
<ul>
<li><strong>Online / offline</strong> status indicator and toggle options for the mail client, chat program or Gwibber, the broadcast messages application.</li>
<li>An &#8220;<strong>unsaved</strong>&#8221; indicator, that tells people that the contents of the file they are working on have changed and potentially lets them save it or set autosave properties.</li>
<li><strong>Progress indicators</strong>, which show that an action is in progress, and possibly also indicate the extent of the progress. The associated menu would enable one to pause or cancel the operation, and perhaps define the behaviour on completion of the action.</li>
<li>A &#8220;<strong>basket</strong>&#8221; indicator, which shows if any items have been selected for purchase,</li>
<li><strong>Sharing</strong> indicators, which would show if a document is shared with multiple people, and enable one to setup such a share.</li>
<li><strong>Volume</strong> indicators, which would show the loudness of application audio streams, and enable one to set the volume for that specific application.</li>
</ul>
<p>The key thing is that these indicators are entirely application-specific, and ideally only relevant to the window that you are actually looking at.</p>
<h3>Just like Panel Indicators&#8230;</h3>
<p>From a visual design point of view, again the goal would be to ensure that indicators are symbolic. They would follow the same styling as Ayatana indicators:</p>
<ul>
<li>Monochrome by default, with shape indicating the function of the indicator</li>
<li>Semantically colored: with red for critical problems, orange for alerts, green for positive status changes and blue for informative states that are not the default or usual state.</li>
</ul>
<h3>Integrated with the Netbook Edition Smart Panel</h3>
<p>Last week I blogged about our decision to adopt a single, global menu for all applications, in the panel. And I also said we would explore putting the window title *and* menu into the panel, when the window is maximised. Of course, that means that we need to accommodate the window indicators in the panel as well.</p>
<p>So: when the window is maximised, and we are using a smart which can include both indicators and window titles, the window indicators will be inserted into the panel as well. They will appear on the right of the panel, and be the leftmost indicators. For example, here is the application, maximised (note the dodgy Ubuntu logo in the top left &#8211; that&#8217;s the panel, not the window title bar you&#8217;re looking at):</p>
<p><a href="http://www.markshuttleworth.com/wp-content/uploads/2010/05/windicators-maximised-mockup.png"><img class="alignright size-full wp-image-377" title="Maximised window with window indicators" src="http://www.markshuttleworth.com/wp-content/uploads/2010/05/windicators-maximised-mockup.png" alt="Mockup of maximised window, with smart panel and window indicators." width="748" height="545" /></a></p>
<p>In this configuration, the system achieves &#8220;singular purpose&#8221;: the entire screen is devoted to a single application, yet the Ayatana elements continue to serve their purpose, either systemic (the battery indicator) or application specific. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/333/feed</wfw:commentRss>
		<slash:comments>281</slash:comments>
		</item>
		<item>
		<title>Ubuntu&#8217;s Indicator Menus &#8211; Ayatana bearing fruit</title>
		<link>http://www.markshuttleworth.com/archives/347</link>
		<comments>http://www.markshuttleworth.com/archives/347#comments</comments>
		<pubDate>Wed, 21 Apr 2010 14:43:16 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[ubuntu]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[desktop]]></category>
		<category><![CDATA[indicators]]></category>
		<category><![CDATA[status]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=347</guid>
		<description><![CDATA[The Ayatana Project at Canonical has been defining a new look and feel for indicators. The effort is cross-desktop, supporting both GNOME and KDE, and expected to be complete and ABI-stable in time for 12.04 LTS.]]></description>
			<content:encoded><![CDATA[<p>When we set up Project Ayatana to improve the usability of the whole desktop, we called it Ayatana because we were focused on the &#8220;sphere of consciousness&#8221;, one&#8217;s awareness of what&#8217;s going on <strong>outside</strong> of the current application. There are two key aspects to the work:</p>
<ol>
<li><strong>Notifications</strong> are &#8220;awareness distilled&#8221; in the sense that you cannot interact with them at all.  We designed them as ephemeral &#8220;click-transparent&#8221; messages, implemented in Notify-OSD. Their sole purpose is to notify you of transient events.</li>
<li><strong>Indicator Menus</strong> combine persistent awareness of a state with a set of options for modifying that state.</li>
</ol>
<p>In this blog I&#8217;ll outline the arc of our work on indicator menus to date, and the trajectory we expect it to follow. We&#8217;re about a year into the effort, all told, and I think it will take another 18 months before we can consider it baked. It should be done by 12.04 LTS. This is an iterative process, and things are in flux right now. I hope, when we are happy that we can commit to ABI stability, that Gnome and KDE will adopt the work too. For the moment, the rapid pace of evolution has meant that we&#8217;re depending on fantastic upstreams to keep up with us as things move.</p>
<h2>Goals of the Ayatana Indicators</h2>
<p>The indicators are designed to create a <strong>persistent awareness of state, or an awareness of a persistent state</strong>. They complement notifications: they are persistent, when notifications are ephemeral. You might miss a notification, but you should always be able to check your indicators. You can interact with indicators, using their menus, in contrast with the un-clickable notifications.</p>
<p>We value:</p>
<ul>
<li><strong>Support for both GNOME and KDE</strong>. Both desktop environments are important in Ubuntu. We encourage the teams to reflect a pure vision of each, but it&#8217;s also the case that users will want to run a GNOME application on Kubuntu occasionally, or vice versa. So we have to make sure the work is considered from the perspectives of developers on either side, and we have to provide APIs and libraries that work in both environments.</li>
<li><strong>Accessibility</strong>. Indicators are critical elements of awareness. Whether you are connected, what the time is, whether you are online, whether your battery will last long enough for you to finish your work, whether you have messages&#8230; these are all vital to a complete computing experience. We have to make sure that visual and other disabilities can be addressed.</li>
<li><strong>Familiarity and Innovation</strong>. As always, these are in tension with one another. Innovation helps us put free software at the front of the curve, but it creates the risk of breaking people&#8217;s habits and expectations.</li>
<li><strong>Consistency and Usability</strong>. We want the end result to be more usable in the whole, and we are willing to lose individual nuggets if that helps make the whole more valuable.</li>
<li><strong>Streamlining</strong>. There are too many indicators, that aren&#8217;t clear enough about their intent. There are also many indicators from different applications which do roughly the same thing, but in slightly different ways. The value of all the indicators is enhanced if there are fewer of them, and they are more obvious to discover and use.</li>
</ul>
<h2>Some firm decisions</h2>
<p>Those values lead us to some anchor decisions:</p>
<ol>
<li><strong>D-Bus for communications</strong>. A messaging approach makes it straightforward to adopt consistent patterns across different desktop environments. We will provide wrapper libraries for both Gtk and Qt applications to access the indicator capabilities. A Qt application running on Ubuntu should &#8220;feel native&#8221; when it&#8217;s using indicators correctly. And vice-versa. The messaging approach also lets us handle accessibility in a better way: we don&#8217;t have to accommodate every possible disability visually, because we can have agents that interpret the indicator messages and handle it in ways that are appropriate for a particular disability.</li>
<li><strong>Opinionated placement</strong>. We will place all indicators at the top right of the screen on GNOME. We&#8217;ll place them in a particular order, too, with the &#8220;most fundamental&#8221; indicator, which controls the overall session, in the top right. The order will not be random, but predictable between sessions and screen sizes. There will be no GUI support for users to reorder the indicators.</li>
<li><strong>Constrained behaviour</strong>. All the indicators will take the form of an indicator (icon or text), and a menu. Clicking on an indicator will open its menu. Keyboard navigation will always work, and left and right arrows will translate either into submenu navigation or flipping from indicator to indicator. The whole set of indicators on the panel will be navigable as a single menu, in essence. We won&#8217;t support &#8220;right click&#8221; on indicators differently from &#8220;left click&#8221;, and there&#8217;ll be no ability for arbitrary applications to define arbitrary behaviours to arbitrary events on indicators.</li>
<li><strong>Symbolic visuals</strong>. We want to pare back the visual representation of status presented by the icons. We don&#8217;t believe that visual accessibility for the disabled need drive the design of the standard icon set, as there will be both alternative icons, renderings, and entirely different options such as speech or custom devices to handle those. Colors on the indicators should have semantic purpose and be used mainly for alerts and awareness, while the shape of the icon should define its purpose.</li>
</ol>
<p>The first part of our work was pure housekeeping. The panel in Ubuntu is very generic, it lets you put all sorts of different gadgets in all sorts of different places, and those gadgets can behave in all sorts of different ways. The result has been to stimulate innovation, but it has also made the panel very inconsistent and ultimately less useful.</p>
<p>We reviewed the way Ubuntu-specific applications were using the panel, and set out to clean them up. Update-manager lost its persistent notification in favour of the more direct popup window. Others will follow.</p>
<p>We decided to introduce a new gadget on the panel which would be a container for all the indicators which follow our new Ubuntu Ayatana pattern. And we started work on a set of indicators that would fit inside that container. Thus far, we&#8217;ve done the session, &#8220;me&#8221;, and sound indicators.</p>
<p>We also created a framework for applications which want to display their own indicator. That&#8217;s the AppIndicators work, which has been fantastically lead in 10.04 LTS by Jorge Castro, coordinating with many upstreams to ensure that their applications feel tightly integrated into the panel.</p>
<p>The icon visual design turned into a conversation about &#8220;-symbolic&#8221; icons at UDS in Dallas, and is now being realised in the ubuntu-mono icon theme in 10.04 LTS. There is work under way to make symbolic icons a more formal and rigorous construct that can be themed, and we&#8217;ll participate in that effort or offer an alternative implementation.</p>
<h2>9 parts perspiration, 1 part innovation</h2>
<p>The detailed design of a large set of systemic indicators, together with the work to make them all look, feel and behave in a consistent fashion, has been substantial effort involving MPT, Ted Gould, Cody Russell and many others. There&#8217;s still a lot of work to do. Conor Curran and Kalle Valo joined the team in this latest cycle. There is a great deal that remains to be done.</p>
<p>We also aspire to introduce some new and innovative concepts.</p>
<h3>Category Indicators</h3>
<p>In order to reduce the number of indicators and improve the persistence and usefulness of the indicators that remain, we&#8217;ve introduced the idea of &#8220;category indicators&#8221;. These are indicators into which multiple, similar applications can embed themselves. Instead of having a different indicator each application, we have one indicator for the whole category.</p>
<p>The messaging indicator, which aggregates awareness about many different types of messages from real people, is an example. Instead of having three different icons for email, IM and Identi.ca or Twitter, Ubuntu has just one messaging indicator, which can make you aware of important messages in any of those applications.</p>
<p>The three default applications for those lines of communication all share the same indicator. They are part of the same category. There are custom API&#8217;s for messaging applications which let them:</p>
<ol>
<li>Insert entries in the messaging menu which are displayed even when the application is not running. Useful for helping people go straight to the activity. Instead of having to check if the email client is running, then switching to it or launching it, then going to the message composition window, I should *always* be able to compose a new message with just two clicks, regardless of whether or not the mail client is running initially.</li>
<li>Add custom menu entries to the messaging menu that are relevant to them. Each applications gets a &#8220;section&#8221; in the category indicator menu, and they can add custom menu entries to their section.</li>
<li>Register themselves as applications that should be shown in the messaging menu, or remove themselves from that menu. The default applications will show up there unless they are uninstalled or expressly configured not to use the messaging menu. Other applications will put themselves there by default when they are run by that user, who can also configure them not to display there.</li>
<li>Show whether they are running, a state which is indicated with a small &#8220;play&#8221; style triangle next to the application icon in the menu.</li>
</ol>
<p>There are also some behaviours which are collective across all the applications in the category. For example, any of the applications can set the messaging indicator to an alert state, signalling that it&#8217;s worth clicking on.</p>
<p>Each category indicator supports a unique API that&#8217;s relevant for that category. There are some common features, for example the ability of applications to register and de-register for the indicators and the ability to add menu entries, but the details might vary substantially from one category to another.</p>
<p>The underlying goal is to make it clearer to users &#8220;what all of those icons are about&#8221;. There are fewer of them, and the ones that are there are more persistent &#8211; they are always there, and they always do the same sort of thing. &#8220;You&#8217;ve got a message&#8221; is useful no matter which channel the message came through. The net result is that the whole set of indicators feels tighter and better defined.</p>
<p>The session indicator, which displays the shutdown / restart menu, has a similar capability that replaced the &#8220;restart required&#8221; panel icon in 10.04 LTS. Since the session menu already contains the &#8220;restart&#8221; menu option, the session menu will now be set into an alert state when you need to restart. The &#8220;Restart&#8230;&#8221; menu option is changed to &#8220;Restart Required&#8230;&#8221; (though I would now prefer something like &#8220;Restart, completing updates&#8230;&#8221;).</p>
<p>The battery indicator shows the status of all of your batteries, from laptop to UPS to mouse and wireless keyboard. Other applications and devices which have battery information should be able to insert themselves there appropriately.</p>
<p>Similarly, all the calendar and alarm applications might fit into the Clock Indicator. And perhaps all the applications which have downloads might use a single category for that &#8211; there&#8217;s some discussion along those lines on the Ayatana list at the moment.</p>
<h2>Timelines and iterations</h2>
<p>The basic &#8220;add an indicator with a menu&#8221; capability is there now, and was used for Application Indicators in 10.04 LTS.</p>
<p>What complicates the picture from a delivery perspective is our evolving understanding of how best to organise the category indicators. For example, at the moment we are aggregating received messages in the messaging indicator, but the send or broadcast elements of those same communications channels are accessed through the Me menu, where we track presence. That has been controversial &#8211; sensible folks think we should perhaps restructure that to bring the elements together.</p>
<p>Each arrangement of category indicators involves shaping the API&#8217;s in new ways, because the categories are fundamentally different from one another, and we want to design custom indicators for each category. Not only are the individual category indicator designs changing, but the arrangement of categories themselves is subject to active debate and experimentation, which is important to getting a crisp final result.</p>
<p>We can&#8217;t be certain that the current configuration is the best one, and want the flexibility to continue to evolve and reshape the APIs accordingly. We expect it will take at least three iterations of Ubuntu to be certain, and that we can commit to ABI stability for 12.04 LTS onwards.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/347/feed</wfw:commentRss>
		<slash:comments>61</slash:comments>
		</item>
		<item>
		<title>Less is more. But still less.</title>
		<link>http://www.markshuttleworth.com/archives/330</link>
		<comments>http://www.markshuttleworth.com/archives/330#comments</comments>
		<pubDate>Thu, 25 Mar 2010 16:12:32 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[canonical]]></category>
		<category><![CDATA[panel]]></category>
		<category><![CDATA[tooltips]]></category>
		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=330</guid>
		<description><![CDATA[We strive to improve the design of Ubuntu. Based on the principle that "less is more", that means removing things to which someone, somewhere, is deeply attached. The conversation is always difficult, it would help if we could form a rational view of what really is most used, or most valued, across a broad user base. Taking clutter away can make the important pieces come into focus, but it will inevitably make someone angry.]]></description>
			<content:encoded><![CDATA[<p>One of the driving mantras for us is &#8220;less is more&#8221;. I want us to &#8220;clean up, simplify, streamline, focus&#8221; the user experience work that we lead.  The idea is to recognize the cost of every bit of chrome, every gradient or animation or line or detail or option or gconf setting. It turns out that all of those extras add some value, but they also add clutter. There&#8217;s a real cost to them &#8211; in attention, in space, in code, in QA. So we&#8217;re looking for things to strip out, as much (or more) as things to put in.</p>
<p>I&#8217;m not sure we&#8217;ll go as far as Microsoft has with their <a title="Slides for the Metro UI overview" href="http://ecn.channel9.msdn.com/o9/mix/10/pptx/CL14.pptx">new Windows Phone 7 UI</a> (links to .PPTX), which uses a design language called Metro. It&#8217;s radically pared back, and very cool work. It will be interesting to see if they&#8217;ve gone too far, or if users take to the more abstract feel of it.</p>
<p>It&#8217;s not hard to get people enthusiastic about the idea that less is more. However, it&#8217;s quite hard to get people to agree on which bits can be less. It turns out that one person&#8217;s clutter is another person&#8217;s most useful and valued feature.</p>
<p>Less, it turns out, is still less.</p>
<p>So, for example, consider tooltips on the panel. In <a href="https://bugs.launchpad.net/indicator-application/+bug/527458">bug #527458</a>, there&#8217;s some discussion about a decision I made to deprecate tooltips on panel indicators. For quite a lot of people, that&#8217;s a little less too far.</p>
<p>On that particular decision, we&#8217;ll have to let time tell. For the moment, the decision stands. I&#8217;m the first to admit fallibility but I also know that it would be impossible to get consensus around a change like that. If those tooltips are, on balance, really just clutter, then unless someone is willing to take a decision that will be unpopular, they will be clutter forever. And it&#8217;s easier for me to make a decision like that in Ubuntu than for virtually anybody else. I apologise in advance for the mistakes that I will certainly make, and which others on the design team may make too, but I think it&#8217;s important to defend our willingness to pare things back and let the core, essential goodness shine through. We have to balance innovation and change with clarification and focus. We can&#8217;t *stop* innovating and changing, and we have to be willing to remove things that someone will miss.</p>
<p>The bug is a good place to continue the discussion about that particular issue. But I thought it would be useful to issue a call to arms, and invite suggestions from people on the Ayatana list as to what elements of the existing Ubuntu desktop can be trimmed back, on balance making the whole better.</p>
<p>There&#8217;s a growing awareness and excitement about the importance of  design in free software. A few years ago, folks laughed out loud when it was suggested that design is a good thing for the free software community to build expertise in.  And it&#8217;s been slow going, admittedly. It&#8217;s hard to bring clarity in a crowd. Or mob. We&#8217;ve been doing our part to lead that at  Canonical and in the Ubuntu community, both through internal work and  through public forums. If you&#8217;re interested in design and Free Software,  then Ubuntu and Ayatana and related forums are great places to  participate. And your participation is welcome!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/330/feed</wfw:commentRss>
		<slash:comments>100</slash:comments>
		</item>
		<item>
		<title>Light: the new look of Ubuntu</title>
		<link>http://www.markshuttleworth.com/archives/308</link>
		<comments>http://www.markshuttleworth.com/archives/308#comments</comments>
		<pubDate>Thu, 04 Mar 2010 19:26:13 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[ubuntu]]></category>
		<category><![CDATA[artwork]]></category>
		<category><![CDATA[canonical]]></category>
		<category><![CDATA[messaging]]></category>
		<category><![CDATA[visual language]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=308</guid>
		<description><![CDATA[The new visual language for Canonical and Ubuntu aims to communicate subtle blends of both corporate and community involvement in work that spans both consumer-to-enterprise, and user-to-developer audiences. Here's a peek behind the scenes as to how we framed the language, and how it turns out in practice.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.jonobacon.org/2010/03/03/refreshing-the-ubuntu-brand/">Jono Bacon</a>, <a title="Bye-bye Brown" href="http://popey.com/blog/2010/03/03/bye-bye-brown/">Alan Pope</a>, and many others have written, yesterday we published <a href="https://wiki.ubuntu.com/Brand">a new visual story and style for Ubuntu</a>. The core design work was lead by Marcus Haslam, Otto Greenslade and Dominic Edmunds, who are the three visual artists leading our efforts in the Canonical Design team. Once we had the base ideas in place we invited some anchor members of the Ubuntu Art community to a design sprint, to test that the concept had the legs to work with the full range of forums, websites, derivatives and other pieces of this huge and wonderful project. And apparently, it does!</p>
<p>Here are some additional thoughts.</p>
<p><strong>Embracing both Ubuntu and Canonical</strong></p>
<p>One of the real challenges for us has been to find a branding and design strategy which spans the spectrum of audiences, forums and dialogues that we cover.  With Ubuntu, it&#8217;s my specific dream to find a constructive blend of commercial and community interests, not only for Canonical but for other companies. That has made our design and branding work difficult &#8211; the distinctive look of Ubuntu lent itself well to pure community messaging, but it was hard to do a brochure for Canonical data center services for Ubuntu on servers. We have not only Ubuntu, but also Kubuntu and an important range of derivatives that all have a role in our ecosystem.</p>
<p>So we spent a lot of time trying to distill the requirements down into a set of three dimensions:</p>
<p><a href="http://www.markshuttleworth.com/wp-content/uploads/2010/03/design-dimensions.png"><img class="alignnone size-full wp-image-309" title="design-dimensions" src="http://www.markshuttleworth.com/wp-content/uploads/2010/03/design-dimensions.png" alt="Dimensions for our visual language" width="500" height="220" /></a></p>
<p>We found a set of ideas which each represent those spectrums, and which work together.</p>
<p>For example, we identified a palette which includes both a fresh, lively Orange, and a rich, mature Aubergine, which work together. The use of Aubergine indicates Commercial involvement of one form or another, while Orange is a signal of community engagement. The Forums will use the Orange elements more strongly, and a formal product brochure, with descriptions of supporting services, would use more of the Aubergine.</p>
<p>On the consumer/enterprise spectrum, we took inspiration from the aerospace industry, and identified a texture of closely spaced dots. When you see more of that, it means we&#8217;re signalling that the story is more about the enterprise, less of that, and it&#8217;s more about the consumer. Of course, there are cross-overs, for example when we are talking about the corporate desktop, where we&#8217;ll use that closely space dot texture as a boundary area, or separator. We also identified shades of Aubergine that are more consumer, or more enterprise &#8211; the darker shades mapping to a stronger emphasis on enterprise work.</p>
<p>And on the end-user / engineer spectrum, we took inspiration from graph paper and engineering blue prints. When you see widely spaced patterns of dots, or outline images and figures, that&#8217;s signalling that the content is more engineering-oriented than end-user oriented.</p>
<p>And finally, we found a number of themes which enhanced and echoed those ideas. We use a warm gray supporting colour to give shape to pages and documents, and we built on the dots and circles to create a whole style for figures, illustrations and pictograms.</p>
<p>The beauty of this is that we can now publish content that spans the full range, and we generally know when we start the design process what sorts of visual cues we want to be signalling. Instead of having these different mental domains fight with one another, we can now convey quite subtle collaboration between community and corporate, or work which is aimed at engineers and developers from enterprises as opposed to developers working with consumers. Time will tell how it shapes up, but for now I&#8217;m celebrating the milestone and the efforts of the team that pulled it together. There&#8217;s something there for everyone who wants to participate in the great hubbub of Ubuntuness that is our shared experience of free software.</p>
<p>So, for example, here&#8217;s a conference banner. The strong use of Aubergine suggests that it&#8217;s more corporate messaging (Canonical is heavily involved). Orange is used here more as a highlight. The Aubergine is darker, and there&#8217;s quite a lot of the fine dot pattern. Below the image is a set of scales showing where on those spectra this work is pitched.</p>
<p><a href="http://www.markshuttleworth.com/wp-content/uploads/2010/03/banner.png"><img class="alignnone size-full wp-image-310" title="Example conference banner for Canonical" src="http://www.markshuttleworth.com/wp-content/uploads/2010/03/banner.png" alt="Cloud Banner" width="630" height="900" /></a></p>
<p>As another example, here&#8217;s a brochure with an emphasis on end-users who are thinking about adopting Ubuntu&#8217;s cloud infrastructure. Again, the fine dot patterns suggests a more enterprise focus, as does the use of the dark aubergine. You can see the circle metaphor used in the quote callout.</p>
<p><a href="http://www.markshuttleworth.com/wp-content/uploads/2010/03/cloud-data-sheet.png"><img class="alignnone size-full wp-image-311" title="Cloud Brochure" src="http://www.markshuttleworth.com/wp-content/uploads/2010/03/cloud-data-sheet.png" alt="" width="630" height="900" /></a></p>
<p>And here&#8217;s a similar brochure, but with a more developer or engineering oriented focus: note the use of the graph-paper theme with wide spaced dots, and outline shapes.</p>
<p><a href="http://www.markshuttleworth.com/wp-content/uploads/2010/03/cloud-engineering.png"><img class="alignnone size-full wp-image-312" title="Cloud Engineering Brochure" src="http://www.markshuttleworth.com/wp-content/uploads/2010/03/cloud-engineering.png" alt="" width="630" height="900" /></a></p>
<p>Finally, here&#8217;s an example of a brochure and CD cover for Ubuntu:</p>
<p><a href="http://www.markshuttleworth.com/wp-content/uploads/2010/03/cd.png"><img class="alignnone size-full wp-image-313" title="Sample  CD styling with new Ubuntu visual treatments" src="http://www.markshuttleworth.com/wp-content/uploads/2010/03/cd.png" alt="" width="630" height="900" /></a></p>
<p>As you can see the idea is to signal a mix of both community and Canonical involvement in the message, addressing consumer audiences with a mix of developers and end-users.</p>
<p><strong>A new Ubuntu font</strong></p>
<p>We have commissioned a new font to be  developed both for the logo&#8217;s of Ubuntu and Canonical, and for use in  the interface. The font will be called Ubuntu, and will be a modern  humanist font that is optimised for screen legibility. It will be  published under an open font license, and considered part of the trade  dress of Ubuntu, which will limit its relevance for software interfaces  outside of Ubuntu but leave it free for use across the web and in  printed documents.</p>
<p>It will take a few months for the font to be  finalised, initial elements will be final in the next week which will be  sufficient for the logo and other bits and pieces, but I expect to see  that font widely used in 10.10. The work has been commissioned from  world-renowned fontographers <a href="http://en.wikipedia.org/wiki/Dalton_Maag">Dalton Maag</a>, who  have expressed excitement at the opportunity to publish an open font and  also a font that they know will be used daily by millions of people.</p>
<p>Initial  coverage will be Western, Arabic, Hebrew and Cyrillic character sets,  but over time we may be able to extend that to being a full Unicode  font, with great kerning and hinting for print and screen usage  globally.  We are considering an internship program, to support aspiring  fontographers from all corners of the world to visit London and work  with Dalton Maag to extend the font to their own regional glyph set.</p>
<p>The critical test of the font is screen efficiency and  legibility, and its character and personality are secondary to its  fitness for that purpose. Nevertheless, our hope is that the font has a  look that is elegant and expresses the full set of values for both  Canonical and Ubuntu: adroitness, accountability, precision,  reliability, freedom and collaboration. We&#8217;ll publish more as soon as we  have it.</p>
<p><strong>A good start</strong></p>
<p>It&#8217;s been an exciting process, but I have the sense that we are just getting started. The language will get richer, we will find new things that we want to communicate, and new treatments and visual themes that resonate well with these starting points. We&#8217;ll find new ways to integrate this on the web, and on the desktop (look out for the two new themes, Radiance and Ambiance).  I hope we&#8217;ll see the language being used to good effect across everything we do, both commercial and community oriented. There&#8217;s a range of expression here that should be useful to artists across the spectrum. Let me know how it works for you.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/308/feed</wfw:commentRss>
		<slash:comments>178</slash:comments>
		</item>
		<item>
		<title>New notification work lands in Jaunty</title>
		<link>http://www.markshuttleworth.com/archives/265</link>
		<comments>http://www.markshuttleworth.com/archives/265#comments</comments>
		<pubDate>Sat, 21 Feb 2009 12:03:00 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[free software]]></category>
		<category><![CDATA[ubuntu]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[jaunty]]></category>
		<category><![CDATA[notifications]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=265</guid>
		<description><![CDATA[Thanks to the concerted efforts of Martin Pitt, Sebastien Bacher and several others, notify-osd and several related components landed in Jaunty last week. Thanks very much to all involved! And thanks to David Barth, Mirco Muller and Ted Gould who lead the development of notify-osd and the related messaging indicator.
MPT has posted an overview of [...]]]></description>
			<content:encoded><![CDATA[<p>Thanks to the concerted efforts of Martin Pitt, Sebastien Bacher and several others, notify-osd and several related components landed in Jaunty last week. Thanks very much to all involved! And thanks to David Barth, Mirco Muller and Ted Gould who lead the development of notify-osd and the related messaging indicator.</p>
<div id="attachment_266" class="wp-caption alignnone" style="width: 510px"><a href="http://www.markshuttleworth.com/wp-content/uploads/2009/02/notify-osd-screenshot.png"><img class="size-full wp-image-266" title="Screenshot of notify-osd in action" src="http://www.markshuttleworth.com/wp-content/uploads/2009/02/notify-osd-screenshot.png" alt="Notify-OSD handles both application notifications and keyboard special keys like brightness and volume" width="500" height="260" /></a><p class="wp-caption-text">Notify-OSD handles both application notifications and keyboard special keys like brightness and volume</p></div>
<p>MPT has posted an overview of the conceptual framework for &#8220;attention management&#8221; at <a title="Canonical guidelines for application developers on notifications" href="https://wiki.ubuntu.com/NotificationDesignGuidelines">https://wiki.ubuntu.com/NotificationDesignGuidelines</a>, which puts ephemeral notification into context as just one of several distinct tools that applications can use when they don&#8217;t have the focus but need to make users aware of something. That&#8217;s a draft, and when it&#8217;s at 1.0 we&#8217;ll move it to a new site which will host design patterns on Canonical.com.</p>
<p>There is also a detailed specification for our implementation of the notification display agent, notify-osd, which can be found at <a title="The Notify-OSD specification" href="https://wiki.ubuntu.com/NotifyOSD">https://wiki.ubuntu.com/NotifyOSD</a> and which defines not only the expected behaviour of notify-osd but also all of the consequential updates we need to make across the packages in main an universe to ensure that those applications use notification and other techniques consistently.</p>
<p>There are at least 35 apps that need tweaking, and there may well be others! If you find an app that isn&#8217;t using notifications elegantly, please add it to the notification design guidelines page, and if you file a bug on the package, please tag it &#8220;notifications&#8221; so we can track these issues in a single consistent way.</p>
<p>Together with notify-osd, we&#8217;ve uploaded a new panel indicator which is used to provide a way to respond to messaging events, such as email and IRC pings. If someone IM&#8217;s you, then you should see an ephemeral notification, and the messaging indicator will give you a way to respond immediately. Same for email. Pidgin and Evolution are the primary focuses of the work, over time we&#8217;ll broaden that to the full complement of IM and email apps in the archive &#8211; patches welcome <img src='http://www.markshuttleworth.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>There will be rough patches. Apps which don&#8217;t comply with the FreeDesktop.org spec and send actions on notifications even when the display agent says it does not support them, will have their notifications translated into alerts. That&#8217;s the primary focus of the effort now, the find and fix those apps. Also, we know there are several cases where a persistent response framework is required. The messaging indicator gets most of them, we will have additional persistent tools in place for Karmic in October.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/265/feed</wfw:commentRss>
		<slash:comments>228</slash:comments>
		</item>
		<item>
		<title>Notifications, indicators and alerts</title>
		<link>http://www.markshuttleworth.com/archives/253</link>
		<comments>http://www.markshuttleworth.com/archives/253#comments</comments>
		<pubDate>Mon, 22 Dec 2008 11:06:18 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[free software]]></category>
		<category><![CDATA[ubuntu]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[notifications]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=253</guid>
		<description><![CDATA[Let&#8217;s talk about notifications! As Ryan Lortie mentioned, there was a lot of discussion across the Ubuntu, Kubuntu, GNOME, KDE and Mozilla communities represented at UDS about the proposals Canonical&#8217;s user experience design and desktop experience engineering teams have made for Ubuntu 9.04.

See the mockup as a Flash movie.
There are some fairly bold (read: controversial) [...]]]></description>
			<content:encoded><![CDATA[<p>Let&#8217;s talk about notifications! As <a href="http://blogs.gnome.org/desrt/2008/12/14/uds/">Ryan Lortie mentioned</a>, there was a lot of discussion across the Ubuntu, Kubuntu, GNOME, KDE and Mozilla communities represented at UDS about the proposals Canonical&#8217;s user experience design and desktop experience engineering teams have made for Ubuntu 9.04.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="600" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="quality" value="high" /><param name="src" value="/wp-content/uploads/2008/12/jaunty904_notifications_example1_web_092.swf" /><embed type="application/x-shockwave-flash" width="800" height="600" src="/wp-content/uploads/2008/12/jaunty904_notifications_example1_web_092.swf" quality="high"></embed></object><br />
<a href="/wp-content/uploads/2008/12/jaunty904_notifications_example1_web_092.swf">See the mockup as a Flash movie.</a></p>
<p>There are some fairly bold (read: controversial) ideas that we&#8217;d like to explore with, so the opportunity to discuss them with a broader cross-section of the community was fantastic. There were several rough edges and traps that I think we&#8217;ll avoid in the first round as a result, thanks to everyone who participated. Some of the things we work on in these teams are done directly with partners for their devices, so they don&#8217;t see this level of discussion before they ship, but it&#8217;s wonderful when we do get the opportunity to do so.</p>
<p>Some of these ideas are unproven, they boil down to matters of opinion, but since our commitment to them is based on a desire to learn more I think of them as constructive experiments. Experiments are just that &#8211; experiments. They may succeed and they may fail. We should judge them carefully, after we have data. We are putting new ideas into the free desktop without ego. We know those ideas could be better or worse than similar work being done in other communities, and we want to gather real user feedback to help find the best mix for everyone. The best ideas, and the best code, will ultimately form part of the digital free software commons and be shared by GNOME, KDE and every distribution. So, for those folks who were upset that we might ship something other than a GNOME or KDE default, I would ask for your patience and support &#8211; we want to contribute new ideas and new code, and that means having some delta which can be used as a basis for discussions about the future direction of upstream. In the past, we&#8217;ve had a few such delta&#8217;s in Ubuntu. Some, like the current panel layout, were widely embraced. Others, like the infamous &#8220;Ubuntu spacial mode&#8221;, were not. C&#8217;est la vie, and we all benefit from the evolution.</p>
<p>Experiments are also not something we should do lightly. The Ubuntu desktop is something I take very personally; I feel personally responsible for the productivity and happiness of every Ubuntu user, so when we bring new ideas and code to the desktop I believe we should do everything we can to make sure of success first time round. We should not inflict bad ideas on our users just because we&#8217;re curious or arrogant or stubborn or proud. Despite being occasionally curious, arrogant, stubborn and proud <img src='http://www.markshuttleworth.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>So, what are we proposing?</p>
<p>First, we are focusing some attention on desktop notifications in this cycle, as part of a broader interest in the &#8220;space between applications&#8221;.</p>
<p>I think Canonical and Ubuntu can best help the cause of free software by focusing on the cracks between the major components of the desktop. In other words, while there are already great upstreams for individual applications in the free software desktop (Novell for Evolution, Sun for OpenOffice, Mozilla for Firefox, Red Hat for NetworkManager), we think there is a lot of productive and useful work to be done in the gaps between them. Notifications are things that many apps do,  and if we can contribute new ideas there then we are helping improve the user experience of all of those applications. That&#8217;s a nice force multiplier &#8211; we&#8217;re hopefully doing work that makes the work of every other community even more valuable.</p>
<p>Nevertheless, expect bumps ahead. Ideas we are exploring may / will / do conflict with assumptions that are present today in various applications. We can address the relevant code in packages in main, but I&#8217;m more focused on addressing the potential social disruption that conflict can create, and that&#8217;s more a matter of conversation than code.</p>
<p>Notifications are interesting, subtle and complex. There are lots of different approaches on lots of different platforms. There are lots of different use cases. We&#8217;re trying to simplify and eliminate complexity, while still making it possible to meet the use cases we know about.</p>
<p>There has been good work in the freedesktop.org community on notifications, and even a spec that is *almost* at 1.0 in that community, with existing open source implementations. Our proposal is based on that specification, but it deprecates several capabilities and features in it. We will likely be compatible with the current API&#8217;s for sending notifications, but likely will not display all the notifications that might be sent, if they require features that we deprecate. If this experiment goes well, we would hope to help move that FD.o specification to 1.0, with or without our amendments.</p>
<p>The key proposals we are making are that:</p>
<ul>
<li>There should be <strong>no actions on notifications</strong>.</li>
<li>Notifications should not be displayed synchronously, but <strong>may be queued</strong>. Our implementation of the notification display daemon will display only one notification at a time, others may do it differently.</li>
</ul>
<p>That&#8217;s pretty much it. There are some subtleties and variations, but these are the key changes we are proposing, and which we will explore in a netbook device with a partner, as well as in the general Ubuntu 9.04 release, schedule gods being willing.</p>
<p>This work will show up as a new notification display agent, not as a fork or patch to the existing GNOME notification daemon. We don&#8217;t think the client API &#8211; libnotify &#8211; needs to be changed for this experiment, though we may not display notifications sent through that API that use capabilities we are suggesting be deprecated. We will try to ensure that packages in main are appropriately tuned, and hope MOTU will identify and update key packages in universe accordingly.</p>
<p>Why a completely new notification display agent? We are designing it to be built with Qt on KDE, and Gtk on GNOME. The idea is to have as much code in common as we can, but still take advantage of the appropriate text display framework on Ubuntu and Kubuntu. We hope to deliver both simultaneously, and have discussed this with both Ubuntu and Kubuntu community members. At the moment, there is some disagreement about the status of the FD.o specification between GNOME and KDE, and we hope our efforts will help build a bridge there. In Ubuntu 9.04, we would likely continue to package and publish the existing notification daemon in addition, to offer both options for users that have a particular preference. In general, where we invest in experimental new work, we plan to continue to offer a standard GNOME or KDE component / package set in the archive so that people can enjoy that experience too.</p>
<p>The most controversial part of the proposal is the idea that notifications should not have actions associated with them. In other words, <strong>no buttons, sliders, links, or even a dismissal [x]</strong>. When a notification pops up, you won&#8217;t be able to click on it, you won&#8217;t be able to make it go away, you won&#8217;t be able to follow it to another window, or to a web page. Are you loving this freedom? Hmmm? Madness, on the face of it, but there is method in this madness.</p>
<p>Our hypothesis is that the existence of ANY action creates a weighty obligation to act, or to THINK ABOUT ACTING. That make notifications turn from play into work. That makes them heavy responsibilities. That makes them an interruption, not a notification. And interruptions are a bag of hurt when you have things to do.</p>
<p>So, we have a three-prong line of attack.</p>
<ol>
<li><strong>We want to make notifications truly ephemeral.</strong> They are there, and then they are gone, and that&#8217;s life. If you are at your desktop when a notification comes by, <strong>you will sense it</strong>, and if you want you can LOOK at it, and it will be beautiful and clear and easy to parse. If you want to ignore it, you can safely do that and it will <strong>always go away without you having to dismiss it</strong>. If you miss it, that&#8217;s OK. Notifications are only for things which you can safely ignore or miss out on. If you went out for coffee and a notification flew by, you are no worse off. They don&#8217;t pile up like email, <strong>there is no journal of the ones you missed</strong>, you can&#8217;t scroll back and see them again, and therefor you are under no obligation to do so &#8211; they can&#8217;t become work while you are already busy with something else. They are <strong>gone like a mystery girl on the bus you didn&#8217;t get on</strong>, and they enrich your life in exactly the same way!</li>
<li>We think there should be <strong>persistent panel indicators for things which you really need to know about, even if you missed the notification</strong> because you urgently wanted that coffee. So we are making a list of those things, and plan to implement them.</li>
<li><strong>Everything else should be dealt with by having a window call for attention</strong>, while staying in the background, unless it&#8217;s critical in which case that window could come to the foreground.</li>
</ol>
<p>Since this is clearly the work of several releases, we may have glitches and inconsistencies along the way at interim checkpoints. I hope not, but it&#8217;s not unlikely, especially in the first iteration. Also, these ideas may turn out to be poor, and we should be ready to adjust our course based on feedback once we have an implementation in the wild.</p>
<p>We had a superb UXD and DEE (user experience design team, and desktop experience engineering team) sprint in San Francisco the week before UDS. Thanks to everyone who took part, especially those who came in from other teams. This notifications work may just be the tip of the iceberg, but it&#8217;s a very cool tip <img src='http://www.markshuttleworth.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>One or more of our early-access OEM partners (companies that we work with on new desktop features) will likely ship this feature as part of a netbook product during the 9.04 cycle. At that point, we would also drop the code into a PPA for testing with a wider set of applications. There are active discussions about updating the freedesktop.org specification based on this work. I think we should be cautious, and gather real user testing feedback and hard data, but if it goes well then we would propose simplifying the spec accordingly, and submit our notification display agent to FreeDesktop.org. Long term collaboration around the code would take place on Launchpad.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/253/feed</wfw:commentRss>
		<slash:comments>349</slash:comments>
		</item>
		<item>
		<title>Morphing dialogs and the AJAX roadmap for Launchpad</title>
		<link>http://www.markshuttleworth.com/archives/239</link>
		<comments>http://www.markshuttleworth.com/archives/239#comments</comments>
		<pubDate>Thu, 18 Dec 2008 13:15:44 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[launchpad]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[morphing dialogs]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=239</guid>
		<description><![CDATA[Launchpad 3.0 will use morphing dialogs to simplify complex processes and workflows for users new to the system. We'll use AJAX techniques to ensure responsiveness on small changes and YUI 3 as a framework for development.]]></description>
			<content:encoded><![CDATA[<p>The user experience and design team at Canonical includes a few folks dedicated to web technology. At the moment, there is a substantial effort under way to reshape the Launchpad UI now that we have the core capabilities for cross-project bug tracking, code publishing and translation in place. We want to make it more obvious how to get something done &#8211; especially for new users &#8211; and we want to make it feel snappy and responsive when making small changes to your project data.</p>
<p>In the design discussions, we spent a lot of time working on a new approach to &#8220;dialog boxes, wizards and workflows&#8221;, trying to solve a thorny problem in user interaction: how do you make it easy to do something complex? There are lots of cases in Launchpad where you need to get lots of ducks in a row before you can do something. For example, you might need to make sure there is a team with specific people in it before you subscribe that team to a bug. Or you might need to create a new milestone while triaging and scheduling work on bugs in your project.</p>
<p>Currently, that means jumping all around Launchpad in a way that assumes you know exactly how those pieces work. You need to go to one place to register a team, and a completely different place to setup a milestone. That means that lots of people don&#8217;t use capabilities in Launchpad, because they need to understand the whole system before they can get something small done. Every time someone bumps their head on that, we fail! And that&#8217;s the problem we set out to solve.</p>
<p>We came up with a nifty approach, which we call <strong>morphing dialogs</strong>, that ensures the user always has the minimum number of choices to make, and still allows for complex variations on a process in a way that feels quite natural for users.</p>
<p>The key ideas behind morphing dialogs are:</p>
<ul>
<li>Only <strong>show one primary decision at a time</strong>, and make it obvious what that is. Sometimes, there are several directions you could take in order to get something done, but there is usually a single normal path for users to follow, and we always want users to be able to do the easy things easily.</li>
<li>Give users a sense of <strong>how far they are in the process</strong>, but don&#8217;t be too dogmatic about that, since getting one thing done often involves stepping off to the side to take care of preliminary business and those detours can also require several steps.</li>
</ul>
<p>Here&#8217;s an example movie, which shows a person linking a blueprint to a bug. They need to search for the right blueprint, which they can do across a couple of projects simultaneously. In this mockup, they add GNOME to the list of projects that they look for the blueprint in, and when they can&#8217;t find it, they go to register a new blueprint for what they want. In the end he decides to go back and pick one from the search results. None of this involved a page load, and the round trips to the server are much cheaper than loading full pages, since we can just get what we need in highly optimized way.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="590" height="570" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" /><param name="src" value="/wp-content/uploads/2008/12/link-blueprint_web-version2.swf" /><embed type="application/x-shockwave-flash" width="590" height="570" src="/wp-content/uploads/2008/12/link-blueprint_web-version2.swf" bgcolor="#FFFFFF" quality="high"></embed></object></p>
<p>You can see a couple of the key ideas coming through in the movie.</p>
<p>Note the &#8220;progress bar&#8221; &#8211; the green line &#8211; is not particular large or obtrusive. It&#8217;s also not obviously a progress bar, until one has done a few multi-step processes. Note also that you can have detours; you can step off to one side to get something done, like register a team or register a new blueprint, and those detours get their own progress indicator which is separate from the main one.</p>
<p>We had a major sprint recently that brought the whole Launchpad team together for two weeks while we did a deep dive into JavaScript and AJAX. We picked YUI 3, the next version of Yahoo&#8217;s UI toolkit for the web, as a foundational layer for this AJAX effort, and we wanted to bring everyone up to speed on the processes for designing, building and testing web client apps. It was a lot of fun.</p>
<p>In particular, we wanted to unify the web service API&#8217;s that we already publish with this AJAX work, so that it would be easy to write web browser code that could talk to the exact same API&#8217;s we publish for developers who are integrating with Launchpad. That&#8217;s now possible, which means that any API we use for AJAX work will also be available to developers writing their own tools to access Launchpad directly through the web services.</p>
<p>Thanks to the awesomeness of YUI 3, the team is now hard at work turning those ideas into reality. Given that YUI 3 is right on the cutting edge (some would say bleeding edge!) we&#8217;re focusing on pieces that don&#8217;t depend on complex widgets &#8211; those will only start to fall into place next year as YUI 3 emerges from development.</p>
<p>Over the next couple of months you will see pieces of this puzzle land in successive Launchpad monthly releases (or daily, if you&#8217;re on edge.launchpad.net and a beta tester). Initially, the AJAX bling will just enable inline editing. In six to nine months, the more complex pieces should have land. And by then Launchpad&#8217;s web front-end will also be open source.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/239/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>Ibex design: user switching, presence and session termination</title>
		<link>http://www.markshuttleworth.com/archives/233</link>
		<comments>http://www.markshuttleworth.com/archives/233#comments</comments>
		<pubDate>Thu, 30 Oct 2008 11:52:30 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[free software]]></category>
		<category><![CDATA[ubuntu]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[fusa]]></category>
		<category><![CDATA[intrepid]]></category>
		<category><![CDATA[logout]]></category>
		<category><![CDATA[panel]]></category>
		<category><![CDATA[presence]]></category>
		<category><![CDATA[session management]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[user switching]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=233</guid>
		<description><![CDATA[The new presence, user switcher and session management tool in Ubuntu 8.10 is part of the work Canonical is doing to make Ubuntu, and Linux generally, more usable.]]></description>
			<content:encoded><![CDATA[<p>With Intrepid on track to hit the wires today I thought I&#8217;d blog a little on the process we followed in designing the new user switcher, presence manager and session management experience, and lessons learned along the way. Ted has been blogging about the work he did, and it&#8217;s been mentioned in a couple of different forums (briefly earning the memorable title &#8220;the new hotness&#8221;), but since it&#8217;s one of the first pieces of work to go through the user experience design process within Canonical I thought it would be interesting to write it up.</p>
<p>Here is a screenshot of the work itself in action:</p>
<div id="attachment_234" class="wp-caption aligncenter" style="width: 510px"><a href="http://www.markshuttleworth.com/wp-content/uploads/2008/10/fusa.png"><img class="size-full wp-image-234" title="New User Switcher and Presence Manager" src="http://www.markshuttleworth.com/wp-content/uploads/2008/10/fusa.png" alt="New FUSA applet allows you to manage your presence setting, as well as switch to a guest or other user, and logout" width="500" height="388" /></a><p class="wp-caption-text">New FUSA applet allows you to mange your presence setting, as well as switch to a guest or other user, and logout</p></div>
<p>In one of the first user experience sessions, we looked in more detail at the way people &#8220;stop working&#8221;. We thought it interesting to try and group those actions together in a way which would feel natural to users.</p>
<p>We have already done some work in Ubuntu around this &#8211; for a long time we have had a button in the top-right corner of the panel which brought up a system modal dialog that gave you the usual &#8220;end your session&#8221; options of logout, restart, shutdown, hibernate, suspend and switch user. That patch was always a bit controversial and had not been accepted upstream, so we looked at ways to solve the problem differently.</p>
<p>We decided to use the top-right location, because it&#8217;s one of the key places in the screen that&#8217;s quick and easy to get to (you can throw your mouse into a corner of the screen very easily and accurately) and because there was a strong precedent in the old Ubuntu logout button.</p>
<p>One key insight was that we wanted to make &#8220;switching user&#8221; less an exercise in guesswork and more direct &#8211; we wanted to let people switch directly to the specific user they were interested in rather than have an intermediate step where they login as that other user. So we started with the Fast User Switcher applet, or FUSA, as a base fr the design. Another key idea that emerged was that we wanted to integrate the &#8220;presence setting&#8221; into the same menu, because &#8220;going offline&#8221; or &#8220;I&#8217;m busy&#8221; are similar state-of-mind-and-work decisions to &#8220;log me off the system&#8221; or &#8220;shut down&#8221;.</p>
<p><strong>Menu order</strong><br />
We discussed at length the right order for the menu items. On the one hand, putting the &#8220;other users&#8221; at the top of the menu would mean that all the user names &#8211; yours and the ones you can switch to &#8211; would appear &#8220;in the same place&#8221; at the top of the menu. On the other, we strongly felt that things that would be used more casually and more easily should be at the top. In the end we settled on putting the presence management options at the top (Available, Away, Busy, Offline). Right next to those (in the same set) we put the &#8220;Lock screen&#8221; option, because it feels like a presence setting more than a session management setting &#8211; you are saying &#8220;Away&#8221; more than anything else.</p>
<p>Ted did a lot of work to make the presence menu elements work with both Pidgin and Empathy because there was some uncertainty as to which would be used by default in the release. Since it all uses dbus, it should be straightforward to make it work with KDE IM clients too.</p>
<p>We then put the user switching options &#8211; including the Guest Session which is a cool new feature in Intrepid that as been widely <a href="http://beginlinux.wordpress.com/2008/10/04/ubuntu-810-beta-video-using-guest-session/">blogged</a> (check out the <a href="http://www.youtube.com/watch?v=XutuGwcQ96g">YouTube demo</a>) and which uses AppArmor to enforce security.</p>
<p>And finally, the session termination options &#8211; log out, suspend, hibernate, restart and shutdown are at the bottom of the menu, because you&#8217;re only ever likely to use them once in a session, by definition!</p>
<p><strong>Styling<br />
</strong>The design of the menu is deliberately clean. We use very simple colours and shapes for the presence indicators, and replicate those colours and shapes in the actual GNOME panel so that you can see at a glance what your current presence setting is. Ted had to jump through some hoops, I think, to get the presence icons in the menu to line up with the current-presence-status indicator in the panel applet, but it worked out quite nicely. There&#8217;s some additional work to tighten up the layout which didn&#8217;t make it in time for the release but which might come in as a stable release update (SRU) or in Jaunty.</p>
<p>We decided not to put icons into the menu for each of the different statuses. Our design ethic is to aim for cleaner, less cluttered layouts with fewer icons and better choice of text. A couple of people have said that the menu looks &#8220;sparse&#8221; or &#8220;bare&#8221; but I think it sets the right direction and we&#8217;ll be continuing with this approach as we touch other parts of the system.</p>
<p><strong>Upstream<br />
</strong>This work was discussed at UDS in Prague with a number of members of the GNOME community. I was also very glad to see that there&#8217;s a lot of support for a tighter, simpler panel at the GNOME hackfest, an idea that we&#8217;ve championed. The FUSA applet itself is going through a bit of a transformation upstream as it&#8217;s been merged into the new GDM codebase and the old code &#8211; on which our work is based &#8211; is more or less EOL&#8217;d. But we&#8217;ll figure out how to update this work for Jaunty and hopefully it will be easier to get it upstreamed at that point.</p>
<p>In Jaunty, we&#8217;ll likely do some more work on the GNOME panel, building on the GNOME user experience discussions. There was a lot of discussion about locking down the panel more tightly, which we may pursue.</p>
<p><strong>Integration into Ubuntu</strong><br />
We realised rather late in the Ubuntu cycle that we hadn&#8217;t thought much about packaging. The Ubuntu team had kindly offered to help package and integrate the applet but we definitely learned the value of getting the packaging done earlier rather than later. We had the applet in a PPA for testing between developers fairly early, but we underestimated the difference between that and actual integration into the release.</p>
<p>The Ubuntu team rallied to the cause and helped to smooth the upgrade process for new users, so that we can try to get everyone onto the same footing when they start out with Intrepid whether as a new install or an upgrade. There are some challenges there, because the panel is so customisable, and we had to think hard about how we could ensure there was a consistent experience for something as important as logging out or shutting down while at the same time trying not to stomp on the preferences of folks who have customised their panels. Similarly, we were concerned that people who run different versions of Ubuntu, or different distributions entirely, with the same home directory, would have problems if those other OS&#8217;s didn&#8217;t have the same version of FUSA &#8211; we weren&#8217;t really able to address that satisfactorily.</p>
<p>We also realised (DOH!) that we hadn&#8217;t thought all the way through the process of integration, because we hadn&#8217;t figured out what to do with the old System menu options. It turned out that those were in a state of flux, with the Ubuntu folks having to choose between the current GNOME default which everyone said would change, the patches for the likely NEXT GNOME approach, and the old Ubuntu approach. Ted whipped up some patches to make the GNOME panel more dynamic with its menus, so that we could remove the System menu logout options when people have the same menu in the FUSA applet, but that landed too late for inclusion into Intrepid final.</p>
<p>All in all, I think it&#8217;s a neat piece of work and hope other distro&#8217;s find it useful too. It&#8217;s just a teaser of the work we plan to do around the desktop experience. I&#8217;m looking forward to seeing everyone at <a href="https://wiki.ubuntu.com/UDSJaunty">UDS Jaunty in Mountain View</a> in December, when we can talk about the next round! Thanks and well done to Ted, Martin, Scott, Sebastien and everyone else who helped to make this a reality.</p>
<p><strong>Well done to Team Ubuntu (thousands of people across Ubuntu, Debian and upstreams) who make the magic in 8.10 possible.</strong> Happy Release Day everyone!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/233/feed</wfw:commentRss>
		<slash:comments>112</slash:comments>
		</item>
		<item>
		<title>GNOME usability hackfest</title>
		<link>http://www.markshuttleworth.com/archives/223</link>
		<comments>http://www.markshuttleworth.com/archives/223#comments</comments>
		<pubDate>Sat, 25 Oct 2008 12:41:13 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[free software]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[file management]]></category>
		<category><![CDATA[filesystem]]></category>
		<category><![CDATA[gnome]]></category>
		<category><![CDATA[mockups]]></category>
		<category><![CDATA[rdf]]></category>
		<category><![CDATA[tags]]></category>
		<category><![CDATA[upstream]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=223</guid>
		<description><![CDATA[The GNOME usability hackfest in Boston was a great success. I thought the most insightful and transformational ideas centered on file management and organisation - moving beyond "folders containing files" to more semantic and meaningful representation of our digital stuff.]]></description>
			<content:encoded><![CDATA[<p>The GNOME user experience hackfest in Boston was a great way to spend the worst week in Wall St history!</p>
<p>Though there wasn&#8217;t a lot of hacking, there was a LOT of discussion, and we covered a lot of ground. There were at least 7 Canonical folks there, so it was a bit of a mini-sprint and a nice opportunity to meet the team at the same time. We had great participation from a number of organisations and free spirits, there&#8217;s a widespread desire to see GNOME stay on the forefront of usability.</p>
<p>Neil Patel of Canonical <a title="Neil Patel's mockups of GNOME hackfest ideas" href="http://live.gnome.org/Boston2008/GUIHackfest/WindowManagementAndMore">did a few mockups</a> to try and capture the spirit of what was discussed, but I think the most interesting piece wasn&#8217;t really possible to capture in a screenshot because it&#8217;s abstract and conceptual &#8211; <a title="Sebastian Faubel's paper on file organisation with tags and RDF" href="http://live.gnome.org/Boston2008/GUIHackfest?action=AttachFile&amp;do=view&amp;target=organise_presentation.pdf">file and content management</a>. There&#8217;s a revolution coming as we throw out the old &#8220;files and folders&#8221; metaphor and leap to something new, and it would be phenomenal if free software were leading the way.</p>
<p>I was struck by the number of different ways this meme cropped up. We had superb presentations of &#8220;real life support problems&#8221; from a large-scale user of desktop Linux, and a persistent theme was &#8220;where the hell did that file just go?&#8221; People save an attachment they receive in email, and an hour later have no idea where to find it. They import a picture into F-spot and then have no idea how to attach it to an email. They download a PDF from the web, then want to read it offline and can&#8217;t remember where they put it. Someone else pointed out that most people find it easier to find something on the Internet &#8211; through Google &#8211; than they do on their hard drives.</p>
<p>The <a href="http://www.codethink.co.uk/">Codethink</a> guys also showed off some prototype experience work with <a href="http://www.wizbit.org/">Wizbit</a>, which is a single-file version control system that draws on both Git and Bazaar for ideas about how you do efficient, transparent versioning of a file for online and offline editing.</p>
<p>We need to rearchitect the experience of &#8220;working with your content&#8221;, and we need to do it in a way that will work with the web and shared content as easily as it does locally.</p>
<p>My biggest concern on this front is that it be done in a way that every desktop environment can embrace. We need a consistent experience across GNOME, KDE, OpenOffice and Firefox so that content can flow from app to app in a seamless fashion and the user&#8217;s expectations can be met no matter which app or environment they happen to use. If someone sends a file to me over Empathy, and I want to open it in Amarok, then I shouldn&#8217;t have to work with two completely different mental models of content storage. Similarly, if I&#8217;ve downloaded something from the web with Firefox, and want to edit it in OpenOffice, I shouldn&#8217;t have to be super-aware or super-smart to be able to connect the apps to the content.</p>
<p>So, IMO this is work that should be championed in a forum like FreeDesktop.org, where it can rise above some of the existing rivalries of desktop linux. There&#8217;s a good tradition of practical collaboration in that forum, and this is a great candidate for similar treatment.</p>
<p>At the end of the day, bling is less transformational than a fundamental shift in content management. Kudos to the folks who are driving this!</p>
<p><strong>Update:</strong> thanks mjg59 for pointing out my thinko. The Collabora guys do great stuff, but Codethink does Wizbit.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/223/feed</wfw:commentRss>
		<slash:comments>104</slash:comments>
		</item>
		<item>
		<title>Design, user experience and development at Canonical</title>
		<link>http://www.markshuttleworth.com/archives/162</link>
		<comments>http://www.markshuttleworth.com/archives/162#comments</comments>
		<pubDate>Wed, 10 Sep 2008 15:29:06 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[canonical]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[free software]]></category>
		<category><![CDATA[upstream]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.markshuttleworth.com/?p=162</guid>
		<description><![CDATA[Canonical is building a design and user experience team, with engineering resources for upstream development to turn their ideas into code. ]]></description>
			<content:encoded><![CDATA[<p>When you present yourself on the web, you have 15 seconds to make an impression, so aspiring champions of the web 2.0 industry have converged on a good recipe for success:</p>
<ol>
<li>Make your site visually appealing,</li>
<li>Do something different and do it very, very well,</li>
<li>Call users to action and give them an immediate, rewarding experience.</li>
</ol>
<p>We need the same urgency, immediacy and elegance as part of the free software desktop experience, and that&#8217;s is an area where Canonical will, I hope, make a significant contribution. We are hiring designers, user experience champions and interaction design visionaries and challenging them to lead not only Canonical&#8217;s distinctive projects but also to participate in GNOME, KDE and other upstream efforts to improve FLOSS usability.</p>
<p>Fortunately, we won&#8217;t be working in a vacuum. This is an idea that is already being widely explored. It&#8217;s great to see that communities like GNOME and KDE have embraced user experience as a powerful driver of evolution in their platforms. Partly because of the web-2.0 phenomenon and the iPhone, there&#8217;s a widely held desire to see FLOSS leap forward in usability and design. We want to participate and help drive that forward.</p>
<p>There&#8217;s also recognition for the scale of the challenge that faces us. When I laid out the goal of &#8220;delivering a user experience that can compete with Apple in two years&#8221; at OSCON, I had many questions afterwards about how on earth we could achieve that. &#8220;Everyone scratches their own itch, how can you possibly make the UI consistent?&#8221; was a common theme. And it&#8217;s true &#8211; the free software desktop is often patchy and inconsistent. But I see the lack of consistency as both a weakness (GNOME, OpenOffice and Firefox all have different UI toolkits, and it&#8217;s very difficult to make them seamless) and as a strength &#8211; people are free to innovate, and the results are world-leading. Our challenge is to get the best of both of those worlds.</p>
<p>I don&#8217;t have answers to all of those questions. I do, however, have a deep belief in the power of the free software process to solve seemingly intractable problems, especially in the long tail. If we articulate a comprehensive design ethic, a next-generation HIG, we can harness the wisdom of crowds to find corner cases and inconsistencies across a much broader portfolio of applications than one person or company could do alone. That&#8217;s why it&#8217;s so important to me that Canonical&#8217;s design and user experience team also participate in upstream projects across the board.</p>
<p>In Ubuntu we have in general considered upstream to be &#8220;our ROCK&#8221;, by which we mean that we want upstream to be happy with the way we express their ideas and their work. More than happy &#8211; we want upstream to be delighted! We focus most of our effort on integration. Our competitors turn that into &#8220;Canonical doesn&#8217;t contribute&#8221; but it&#8217;s more accurate to say we measure our contribution in the effectiveness with which we get the latest stable work of upstream, with security maintenance, to the widest possible audience for testing and love. To my mind, that&#8217;s a huge contribution.</p>
<p>Increasingly, though, Canonical is in a position to drive real change in the software that is part of Ubuntu. If we just showed up with pictures and prototypes and asked people to shape their projects differently, I can&#8217;t imagine that being well received! So we are also hiring a team who will work on X, OpenGL, Gtk, Qt, GNOME and KDE, with a view to doing some of the heavy lifting required to turn those desktop experience ideas into reality. Those teams will publish their Bzr branches in Launchpad and of course submit their work upstream, and participate in upstream sprints and events. Some of the folks we have hired into those positions are familiar contributors in the FLOSS world, others will be developers with relevant technical expertise from other industries.</p>
<p>One strong meme we want to preserve is the idea that Ubuntu, the platform team, is still primarily focused on integration and distribution. We will keep that team and the upstream work distinct to minimise the conflict of interest inherent in choosing the patches and the changes and the applications that actually ship each six months as part of an Ubuntu release.</p>
<p>Of course, there&#8217;s a risk to participation, because you can&#8217;t easily participate without expressing opinions, visions, desires, goals, and those can clash with other participants. It&#8217;s hard to drive change, even when people agree that change is needed. I hope we can find ways to explore and experiment with new ideas without blocking on consensus across diverse and distributed teams. We have to play to our strengths, which include the ability to diverge for experimental purposes to see what really works before we commit everyone to a course of action. It will be a challenge, but I think it&#8217;s achievable.</p>
<p>All of this has me tapdancing to work in the mornings, because we&#8217;re sketching out really interesting ideas for user interaction in Launchpad and in the desktop. The team has come together very nicely, and I&#8217;m thoroughly enjoying the processes, brainstorming and prototyping. I can&#8217;t wait to see those ideas landing in production!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.markshuttleworth.com/archives/162/feed</wfw:commentRss>
		<slash:comments>192</slash:comments>
		</item>
	</channel>
</rss>
