launchpad-dev team mailing list archive

[Martin Albisetti <argentina@xxxxxxxxx>]

On Mon, Dec 14, 2009 at 12:58 PM, Martin Pilkington <pilky@xxxxxxxxxxxx> wrote:
> Hey all,
> First a little bit of background. I'm a Mac software developer by trade and
> use and love Bazaar for managing my code. I'm also working on quite a few
> open source projects and so I'd like to use Launchpad for hosting them.

Hi Martin, thanks for sending this in, it's great to see people
propose solutions to UI problems.
I've been Launchpad's UI guy for a bit over a year, so at this stage
I'm to blame for most of the problems.


> Unfortunately, while it is an incredibly powerful website with lots of great
> tools, the user interface is rather... lacking. It has made quite a few
> improvements over the time I've known about Launchpad but it still leaves
> something to be desired.

Completely agreed.


> Obviously I'm not wanting to be someone just coming in and say "you're doing
> it wrong, this is how you should be doing things", you guys are the experts
> as you're the ones coding Launchpad.

We may be "experts", but we're also always way busier than we would like  ;)


> But I do want to help out with the UI side of things however I can.

Wooo!  Looking forward to it.


> But first I want to give three key themes running through my mockups:
> 1. Clarity: At the moment some pages are quite cluttered, so I've employed a
> strict grid for the pages to improve clarity.
>
> 2. Consistency: I've chosen a few UI concepts and used them constantly. A
> few consistently used concepts helps improve understanding

Both of those would be great. In our 3.0 cycle, we did a *lot* better
in this regard, but 25 developers spanning 9 timezones and 400
different pages makes it hard to do it thoroughly in a reasonable
amount of time and work,

> 3. Target users: This is the area I may be most wrong in but I feel that
> there are 3 main groups of users. The first group is those wanting to find
> info about, get a project and get help. This includes pretty much everyone
> visiting the site. A subgroup of this is people wanting to contribute to
> projects with code, bug reports, translations etc. And then a subgroup of
> that is people wanting to create and manage projects.

We have yet to break down each page into this detail of target
audience, but we have developed a few Personas:
https://dev.launchpad.net/Personas



> Homepage: http://dropbox.mcubedsw.com/launchpad/homepage.png
> First, I feel that launchpad needs a bar at the top for performing site wide
> tasks. I've put the links to the home page, blog and user manual in there,
> as well as the existing account settings. I've simplified the footer to just
> be plain grey to help border the page.

So, the reason why we dropped that top bar after 4 years, is because
we wanted to bring projects to the foreground. The fact that you are
in Launchpad is secondary, and we wanted the design to reflect that.
It has created some confusion to the people that span cross multiple
projects, although there is a change in the navigation that may
address this to a certain level by letting you jump between projects
from the breadcrumbs.
We also chose to start dropping the coloring scheme for each
application, as most users we tested on didn't really understand the
difference.


> As for the main content, I feel the current homepage puts too much emphasis
> on the blog. A better user of the home page would be to direct people to
> look for projects. This is why the most prominent item on the page is now
> the search field. The Featured Projects section is now moved to the left of
> the page to give it priority over the blog list.
> Get Started is moved to the bottom and reduced to 4 items, each with a
> description. I may be wrong but it doesn't make sense to me that people
> would choose to look for bugs, translations or answers and THEN choose a
> project, it makes more sense they'd choose a project and then look at these
> items, so I've left them off. I also feel that creating a team isn't
> something best suited to the home page. I've limited it to the 4 items that
> seem to make most sense for getting people going with Launchpad: creating a
> project, finding out why they should create a project, play around with a
> demo and reading about all the features.

The homepage was something we left for last, and did not really excel
at it. We're in the process of finishing up some re-branding
discussions internally, and the home page will be the first thing we
tackle.
That said, I think this design is much cleaner than the current one
and I'd support such a change. If you're interested in getting your
hands dirty with Launchpad's code, I'd be happy to help you out.
Note that the home page has different content depending of whether
you're logged in or not.


> ------------------
> Project overview: http://dropbox.mcubedsw.com/launchpad/overview.png
> The current project overview page seems to typify both what is wrong with
> the Launchpad UI and the potential it has. It is very cluttered, with lots
> of different styles of displaying information and, in my opinion at least,
> puts the wrong emphasis on elements.

I agree that this is one of the most significant pages. In fact, this
was the page we used to kick-start our 3.0 re-design.


> I've moved the project navigation into a series of tabs, providing a border
> between the branding/navigation and the content.

In our first roll-out we had a line that separated them as well, but
the page felt even more cluttered so we dropped it.


> Below this I have 3 columns
> running down the page. The two left most are for content (and as you can see
> content can span both columns) and the 3rd is for the sidebar.

Looking at the differences between your design and the existing one,
it seems that one of the big problems is the project's history
visualization crammed into a column. I think your design reflects
better what we should do with it: have it use up the full width of the
main content.


> The main description is given more white space around it and is separated
> from the info 'boxes' by the Get Involved box. I feel that this deserves a
> more prominent position on the page, which is why I've moved it up.

The get involved boxes where actually placed on one of the most
prominent places on the page. The bazaar page is a pretty extreme
example in the sense that it has so many files for download and really
pushed down that content. The problem is really limiting the number of
files to something sane and usable.
In one of the iterations I placed those links in the exact same place,
but since descriptions vary a lot in size I ended up placing it in a
more consistent place where you could learn to go to when jumping
around prokects.


> The info 'boxes' are split into 4 rows. The first is information about the
> project (info/announcements), the second is support (FAQs/latest questions)
> and the 3rd and 4th are development related (bugs, packages and series). The
> series graph always looks cramped in the current design so I've given it
> much more horizontal space by letting it span two columns. I also feel it
> had too much prominence at the top of the page, hence it being moved to the
> bottom and replaced by announcements, which I feel are more important to
> more people.
> For the sidebar I've used the boxes already used for some parts of the site.
> Besides looking very nice, they provide consistency.

I *love* the fact that you placed "get the source" beneath downloads.
We should totally do this.
Not so sure about the other two boxes.


> The current downloads
> links are, to be frank, hideous and match nothing else on the entire site.

That is because it hasn't been rolled out to more places  ;)
The primary action on that page is to download the software, that's
why it's so prominent. The implementation for multiple files I agree,
it's not great. Originally, we wanted to detect your OS and offer
accordingly. That feature dropped off the radar but I still miss it.


> ------------------
> Individual Answer: http://dropbox.mcubedsw.com/launchpad/answer.png
> I've put the bread crumb above the header and below the tabs as this is more
> akin to where people expect a breadcrumb to be. The "Asked by" section has
> been moved below the question title as it just seemed a bit random out on
> the right, it has more context on the left.

The reason why breadcrumbs are where they are, is because they are
related to the title.
We've had a few different iterations on this and the current situation
seemed to balance out best in all pages. I'll try and dig up some of
the wireframes.


> The question info section has be compacted into two rows with no gaps (when
> it hasn't be solved there will still be 4 columns). The related bugs/FAQs
> sections are split to separate columns to give them more room. The replies
> answers are put in boxes to give more consistency.

The "answers" part of Launchpad doesn't really have a team assigned to
it, so there was no design here.


> All the options are moved to the sidebar. Rather than being scattered all
> over the page, it makes more sense for them to be in once place as they
> refer to the whole question, not just part of it.

So we used to have an "actions portlet" in previous versions of
Launchpad, and like you can see in your design, it just became a
christmas tree of options.
The rule we decided to follow was: if it can be done inline, the
action should be where the content is.


> ------------------
> Individual Bug: http://dropbox.mcubedsw.com/launchpad/bug.png
> I've used the same template as for the answer with this page. The bug report
> gets much more focus than in the current design with the bug information
> moved down. I'm not 100% sure about the options for bug information where
> they are and the might be better in the regular options section. I've left
> related branches off this design as I haven't yet come up with a way of
> tidying them up, but they should appear somewhere.

Moving the "bugtask table" below the description has been talked about
many many times.
The problem with doing so is that for first time visits to bugs, it
makes sense, but subsequent visits, where you change statuses, assign
people, etc, it doesn't. It complicates finding the information and
interacting with it. Having it on top seemed like a fair trade off for
people using the application heavily and one-time users.


> Anyway, that's all I've come up with so far. Sorry for the long winded post,
> but hopefully you get an idea of what I'm aiming for and agree that the
> mockups help clean up the page quite a bit. In my opinion the designs help
> make Launchpad look a lot easier to use, despite not removing any features.

Please continue to be encouraged to send in such detailed emails.
Slightly related, you may be interested in a mailing list about
usability in open source: https://edge.launchpad.net/~ayatana


Thanks!

-- 
Martin