Launchpad’s UI is evolving

We are updating the UI over several iterations over the next few weeks for several reasons:

  • Launchpad should apply the Canonical guidelines for websites to take advantage of the research done for other sites. Being consistent with other Ubuntu and Canonical sites means there is less for users to learn about what the presentation means.
  • Launchpad has 730 style rules. Most are dedicated to defining exceptions, not standards. 730 rules is too much, too much for developers to maintain, too much for users to understand.

Many users have remarked about Launchpad’s recent the loss of colour.  We did this because:

  • It is hard to learn the meaning of so many colours.
  • It is confusing to see headings of different colour that have the same meaning.
  • Answers and Blueprints used blue, the same colour as links.
  • There were inappropriate uses of green that confused users who know that green means “perform an action without leaving the page”.
  • The were uses of orange and purple that users might mistake for Canonical’s aubergine and Ubuntu’s orange.

We appreciate your feedback, and we would like to hear more. There are also legitimate concerns being raised and we are not surprised because they are the same concerns we discussed.

1. Headers are harder to identify

Indeed they are. The old colours were hiding the font-size and whitespace issues that are still present in Launchpad. I am working on this issue right now. Launchpad uses many font sizes, and the percentage mechanism used does not render the size developers intend (font size smaller than default creates accessibility and usability difficulties). I think headers will be easier to understand when there are fewer, but distinct, font-sizes being used.

2. Buttons, callout actions, are hard to find

The links to report a bug for example look like normal links. They are hard to see. These important actions are no longer callouts. The only action that users can still find is the green download button…but that green does not mean “perform an action without leaving the page”. This is bad. We do know what to do about this yet. Maybe you can help. I think they need colour, they may need iconography. Look at to see an example button and callout links. Launchpad does not have a colour at this moment. Launchpad does not have an obvious position along the axis described in the website guidelines (Canonical, corporate, aubergine)..(Ubuntu, community, orange). Launchpad definitely has both aspects; Canonical created Launchpad to build Ubuntu. I think there is a second axis for upstream projects (corporate and community, hosted and mirrored, Ubuntu and other OSes) that might need a colour. Most of the links that I think of are about participation in community, so I favour orange. But is this right? Does the orange also mean Ubuntu to non-Ubuntu users? Will the use of orange stop users from reporting a bug in the OpenStack project?

6 Responses to “Launchpad’s UI is evolving”

  1. Anon Says:

    I’ve always found frustrating how many clicks are needed to see the source of a projects.
    Let’s start on the homepage of the project:
    1. Code
    2. lp:project
    3. View the branch content

    on github the code is right there, on the home of the project.

    And yes, I’ve just noticed, after years of using launchpad, that there is a tiny link called “View the branch content” in the home of the project, with an “i” inside a blue circle. That icon doesn’t really screams “view the code”, it says to me something like “read more about something”. The fact I’ve never noticed that link should tell you something.

  2. Charlie Kravetz Says:

    While I definitely applaud any effort to make things easier, I have to question following the guidelines presented. You do realize that for those with visual problems, only part of is readable? The links across the bottom are mostly invisible if the text is grown using Ctrl+, and some of the text disappears. Using these same “guidelines” for launchpad is going to reduce the ability of visually impaired users. Most of us already already the main website because we can not read it.

  3. Curtis Hovey Says:

    My inner Eyore does not think invisible links caused by the page layout would be a regression; Launchpad already has unreadable text cause by stupid layouts. However, that kind of issue is a bug that needs fixing. These are guidelines, not rules, so we will adopt them when they improve the user experience. Launchpad is not planning to adopt the layout. The guidelines describe a publication. Launchpad is an application with different needs.

  4. John Says:

    Probably my biggest complaint I still see on this blog post. Which is using grey as the primary text color.

    At least for me, “gray on white” means “this is text that you don’t actually have to read”. So for fine print that gets into details rather than the primary focus of a page.

  5. Curtis Hovey Says:

    We do intended to have keep the heading dark grey (#333333). I do not think that is the problem. It is not a problem for other sites. The current headings have the wrong size and wrong whitespace to make them prominent.

    Launchpad is text heavy. It often shows more information that you need, or want to know. Launchpad engineers are very good at adding to pages, but we also need to remove unneeded information when the use case is not relevant. eg. Why do project pages show me bugs, answers, and blueprints that months or years old? Why isn’t Launchpad showing me what is happening NOW? Why do bugs and questions list hundreds of subscribers? What action am I supposed to take with the subscribers, contact them individually? Pages that make you search for information have diverged from Launchpads intent to be a Web application; the pages have become historical documents.

  6. Tony Says:

    While some of the color concerns cited are valid, that doesn’t change the fact that color (together with shape) are some of the lowest-level (and therefore the most important) processes by which our brain interprets visual information. They’re just hardwired that way.

    Rather than noting those concerns and just “giving up” on color, how about exploring alternative solutions and make use of this wonderful tool for visual identity?

    While you’re at it, use some more icons. (Or bring back the ones from LP’s early days, perhaps smaller.) Color’s best friend is shape, and that’s what icons are are for.

    Repeat after me:

    Color is my friend! Shape is my friend!
    Color is my friend! Shape is my friend!
    Color is my friend! Shape is my friend!

Leave a Reply