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 – especially for new users – and we want to make it feel snappy and responsive when making small changes to your project data.

In the design discussions, we spent a lot of time working on a new approach to “dialog boxes, wizards and workflows”, 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.

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’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’s the problem we set out to solve.

We came up with a nifty approach, which we call morphing dialogs, 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.

The key ideas behind morphing dialogs are:

  • Only show one primary decision at a time, 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.
  • Give users a sense of how far they are in the process, but don’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.

Here’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’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.

You can see a couple of the key ideas coming through in the movie.

Note the “progress bar” – the green line – is not particular large or obtrusive. It’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.

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’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.

In particular, we wanted to unify the web service API’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’s we publish for developers who are integrating with Launchpad. That’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.

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’re focusing on pieces that don’t depend on complex widgets – those will only start to fall into place next year as YUI 3 emerges from development.

Over the next couple of months you will see pieces of this puzzle land in successive Launchpad monthly releases (or daily, if you’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’s web front-end will also be open source.

23 comments:

  1. Dominic Evans says: (permalink)
    December 18th, 2008 at 2:09 pm

    Mark, very interesting post, I’ll be keeping an eye on edge.launchpad.net to see the changes.

    [ot] did you use open source software to record the flash video example and, if so, what software did you use?

    Cheers in advance.

  2. Wim says: (permalink)
    December 18th, 2008 at 2:41 pm

    Just curious… why did you choose YUI3?

  3. Joran says: (permalink)
    December 18th, 2008 at 2:45 pm

    Thanks for the pointer to YUI 3, does it provide help with enumerable methods etc? From what I’ve seen, YUI 3 seems more focused on the sugar-sprinkle-things like DOM manipulation, animation. Perhaps a better win would be the more boring assistance given by Prototype with things like Classes, inheritance, enumerable etc.

    Many of the Javascript libraries out there are optimized towards bringing desktop-like experience to the web, i.e. Cappuccino, GWT, YUI. But perhaps, in our haste to explain the idea of a rich web app, we settle for “just like a desktop app”, when in fact we should be wary of applying the metaphor. Perhaps web apps can have different and better and more usable characteristics than desktop apps. Just because we can reinvent the desktop on the web, doesn’t mean we should. Then again, of course there’s no such word as “should”.

  4. Andrew Fenn says: (permalink)
    December 18th, 2008 at 6:40 pm

    This sounds great, I can’t wait to see the finial implementation. I’ve always found launchpad to be superior to similar solutions such as SourceForge and I am happy that efforts continue to make it even easier to use.

    When I set up my own project, team, etc and had to link them all together from different parts of the site, it was a real pain so it’s good to see some effort going into making this all seamless.

  5. Thorsten Wilms says: (permalink)
    December 18th, 2008 at 6:54 pm

    Hmm, I actually perceived the step of adding GNOME to the list of projects to search within as a bit disorienting. It’s like you leave the room and close the door to then affect something in the first room. I’d rather have a new floating panel for it. There would be more reason to replace the main page with the dialog then to morph the dialog into a sub-dialog.

    Also, the dialog on that step lacks context in it’s description. Taken alone, it would seem like it is about adding a Project … in the context of linking a Blueprint?!

  6. Michele Renda says: (permalink)
    December 18th, 2008 at 7:41 pm

    I am a developer and I have two little project on Launchpad. I really felt the problem you described: the first time I lost a lot of time to understand how to prepare a release.
    I think is a very good idea to use YUI. In this way your developers have not to re-invent the week.

    About the new Launchpad, remember only that it must to be: simple & sexy.

    Thank you to release it as open source, I don’t understand what you have is your mint, it seem to go against every market logic, but I like it.

  7. Udo M. says: (permalink)
    December 18th, 2008 at 10:55 pm

    Hello Mark, looks great but let’s hope it will also relief the Launchpad servers from some heavy load. They weren’t the fastest as off late.
    I think digg.com might be a good inspiration on how to implement a fast AJAX heavy site the right way. Maybe you should ring up Kevin and arrange for the Launchpad engineers to meet with the digg techs. They might learn from each other or did something similar already happen?

  8. juancarlospaco says: (permalink)
    December 19th, 2008 at 3:43 am

    Nice User Interface!!!, good work,
    keep on that way, best regards from Argentina.

  9. Dread Knight says: (permalink)
    December 19th, 2008 at 4:46 am

    That video seems even nicer than the experience in desktop applications overall. hmm

    Would be nice if you could cut a deal with http://www.getdropbox.com and offer a real innovative alternative to old-school VCS’s integrated with LaunchPad, since it seems people rather adopt Git rather than Bazaar anyway. I am developing a game and it’s not really cool to tell artists about VCS’s since they are a bit 80′s imo. Dropbox is going in the right direction. Please look into it.

  10. Pedro says: (permalink)
    December 19th, 2008 at 8:11 am

    It is a very nice idea. I have some experience in the development of web sites using Ajax to improve the user experience and this video shows exactly what it should be done.
    I have applied for the web development jobs at Canonical and I really would like to help developing all these nice ideas.

  11. Dominic Evans says: (permalink)
    December 19th, 2008 at 9:39 am

    Mark, did you use open source software to record the flash video example and, if so, what software did you use?

  12. BUGabundo says: (permalink)
    December 19th, 2008 at 9:44 am

    I would really like to see the Subscribe button simplified to a single step/click like “affects me” does.

    Also the search engine needs to be improved (when I dont find there what I’m looking for, a search on Google with the same terms usually finds it faster/better), and add the ability to insert directly the bug number, when filling bugs via apport.

  13. Daniel Tiecher says: (permalink)
    December 19th, 2008 at 10:07 am

    Some nice thoughts on UX you guys have put on the subject. For a web developer like myself reading through it and seeing the mockup got me thinking; deep. I’m now anxious for the release of Launchpad’s source code to dig into what will be implemented.

    Can we expect to see such improvements happening on the Desktop side for Jaunty now that you have committed to bring more usability to the Linux world, Mark? Maybe when LP goes open source some folks responsible for UI in Launchpad will then work on Ubuntu, eh? ;-)

    Thanks for the mind twist and props to everyone involved on LP.

  14. Ubuntu Look » Mark Shuttleworth talks about Launchpad’s AJAX redesign says: (permalink)
    December 19th, 2008 at 4:32 pm

    [...] In the design discussions, we spent a lot of time working on a new approach to “dialog boxes, wizards and workflows”, 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. Read more at Shuttleworth Blog [...]

  15. Andreas Schildbach says: (permalink)
    December 20th, 2008 at 6:38 pm

    I could not find your example video when I suddenly realized that you used Adobe Flash. Why do you chose a closed format rather than OGG for example?

    Mark Shuttleworth says: You could also try Gnash, the free software flash player and plugin. We use Flash because it’s the most powerful tool for rendering the movies. We do render to Ogg, but I wanted to preserve the ability to control the flow of execution, and that’s not possible with Ogg.

  16. Paolo says: (permalink)
    December 20th, 2008 at 7:37 pm

    Mark,
    would you be so kind to share the name of the software you used to create the screencast?

  17. Matthew Tylee Atkinson says: (permalink)
    December 21st, 2008 at 5:34 pm

    I’m using Launchpad to manage several projects; the most notable of these so far is a version of Quake for blind gamers. We switched to Launchpad due to the integration and hosting it offers and were very impressed at the accessibility of the Launchpad web application for our users — it was, and remains, way ahead of the competition. However, I am concerned that AJAX is still largely implemented in ways that exclude blind people, because the standards for AJAX accessibility are immature and have not really adopted yet.

    I would like to know if there will be a conscious effort to ensure this new functionality will be accessible, as the current version of Launchpad is exemplary in this matter. If so then it sounds great and I look forward to it!

    Mark Shuttleworth says: Yes, I believe the plan is to ensure that there are keyboard shortcuts to keep LP usable with keyboard and screen readers.

  18. James says: (permalink)
    December 30th, 2008 at 8:59 pm

    Mark said:
    “… since we can just get what we need in highly optimized way.”

    Dropping your articles, man? That time in Russia does seem to have had an impact. ;-)

    Mark Shuttleworth says: Wuz very hard landing!

  19. In the Wild for January 26, 2009 » Yahoo! User Interface Blog says: (permalink)
    January 26th, 2009 at 10:33 pm

    [...] YUI3 on the Roadmap for Launchpad: Our friends at Canonical have chosen YUI 3 as the Ajax framework for Launchpad. Writes Mark Shuttleworth: “We picked YUI 3, the next version of Yahoo’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. In particular, we wanted to unify the web service APIs 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’s we publish for developers who are integrating with Launchpad. That’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. Thanks to the awesomeness of YUI 3, the team is now hard at work turning those ideas into reality.”  We’re thrilled to have this savvy team building on YUI 3 and we’re looking forward to the great feedback that will result from that process. [...]

  20. Eric says: (permalink)
    February 4th, 2009 at 8:44 pm

    Just like the second poster, I am curious why you picked YUI. There is certainly a lot of effort and emotion manifested in a lot of great javascript toolkits. Nearly all have a place, and mostly none are one-size-fits-all. What strengths of YUI keyed you in to using it? I am tempted to ask you why you didn’t use toolkit “X” but I am actually more interested in why you _are_ using YUI.

    Having an API that works equally well for web apps and desktop apps is awesome. There is certainly a place for some applications on the web, and this one seems like a great fit. Great work!

  21. Russell Harrison says: (permalink)
    February 9th, 2009 at 7:27 am

    Those are some very nice looking use cases. I’d be much more excited about them if launchpad was Open Source. Where do things stand on accomplishing this?

  22. Launchpad Blog says: (permalink)
    February 20th, 2009 at 11:23 am

    [...] changes needed to start deploying AJAX on Launchpad, we are now ready to start developing the mockups we’ve been working on for the past months in the User Experience team. To make sure we [...]

  23. Launchpad News: AJAX in Launchpad | Christian eBuddy Blog says: (permalink)
    February 20th, 2009 at 1:32 pm

    [...] changes needed to start deploying AJAX on Launchpad, we are now ready to start developing the mockups we’ve been working on for the past months in the User Experience team. To make sure we [...]