Suggestions for Joomla.org improvements - Part 1

Written by Jeremy Wilken 30 Mar2010

A few comments here and there, on blogs or twitter, have pushed me to do this post. I previous compared Wordpress, Drupal and Joomla's project hompages, and you'll see I was pretty easy on my comments and suggestions at the time, but I have always felt I did an injustice by not going deeper.

This time I'm going to give Joomla's homepage an unsolicited usability review. I hope that my comments can be taken as intended, which are not to tear down the project or its website. They are intended to help point out some areas of improvements that I believe to be extremely important to the project.

I will be referencing Steve Krug's wonderful book Don't Make Me Think!, and a quote that sums up what I have come to feel about the website says it very well.

"Given everything the Home page has to accomplish, if a site is at all complex even the best Home page design can't do it all. Designing a Home page inevitably involves compromise. And as the compromises are worked out and the pressure mounts to squeeze in just one more thing, some things inevitably get lost in the shuffle.

The one thing you can't afford to lose in the shuffle - and the thing that most often gets lost - is conveying the big picture. Whenever someone hands me a Home page design to look at, there's one thing I can almost always count on: They haven't made it clear enough what the site is."

Steve Krug - Chapter 7: The Home Page is Beyond Your Control - Don't Make Me Think!

This will be the first in a four part series about the Joomla.org homepage, and it will cover many general issues or topics. The other three posts will cover how the homepage should cater to different types of visitors, which is outlined below.

Finally, I'm not a usability expert. I welcome additions to my thoughts or further suggestions for things I haven't seen. Its a community effort really, I'm just trying to get the ball rolling.

Where is the focus?

Before I get to deep into things, I want to point out what I believe the focus of the home page should be, which influences my comments greatly. The home page has a lot of expectations, as it is used by all kinds of users. Unlike the Developer section, which caters to people with an express interest and knowledge with Joomla, the main site has to be useful to the entire range of people from those who can program to those who don't know what CMS stands for.

The home page needs to focus on these key items, and they will be the basis for my analysis.

1. Clear and basic information for visitors with no idea what Joomla is
2. Provide a gateway into the Joomla Community, specifically the
   
   1. development community (People following project codebase)
   2. project leadership community (People following project management)
   3. user base community (People using the Joomla and engaged in the forums or docs)
3. Provide quick access to all important information and downloads

General layout and functionality

The other three posts will go into more depth on these topics, but I want to begin with looking at the current choice of content.

The very top features the logo and menu listing. They do a good job of branding and providing quick access to the top level sites for Joomla. There are no active states, and you can't really tell until you click where it will take you (to a subpage of the site, or to another website entirely). Krug mentions that surfing the web is a light experience for the user, with little to grasp onto (He goes into how users have no sense of site scale, direction, or location but we perceive websites to have these elements). The navigation tell us the basics of what is available to us, but doesn't tell us where we are, how much each link provides, or where it will take us.

Below the navigation is a fairly large 3 column banner telling you you can 'Get started with', 'Learn and Extend', and 'Download' Joomla. I see a few possible problems with this section, and would be very curious to know how many clicks they receive. The icons are quite large, pushing the real page content down significantly. I see this is a major drawback. The icons associated with the links don't seem very accurate with the 'learn and extend' and 'download' links, where as the 'get started' image (not an icon like the other two...inconsistent) does somewhat portray what it means to get started.

Then you'll see a bit of white space, with a search bar on the far right. It just doesn't flow with the content or the design, as it seems to have been added after the design. The folks over at Smashing Design have posted an article about designing the search box. They say for users, the placement is key: "The most convenient spot for users would be the top left or top right of every page on your website, where users could easily find [the search box]". I would suggestion moving it to the top right, above the navigation.

Next we see three columns, no four, no two. I'm not sure exactly whats going on, but it feels cluttered. It lacks a good grid or structure. Krug says, "Dividing the page into clearly defined areas is important because it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore." (Chapter 3: Billboard Design 101) However on the left you'll find mostly information related to the Joomla project and the leadership of it, and on the right you'll find information about the community and how to download it.

Then there is a two column section about 'What are you looking for?' and 'Developer News'. The former provides a bit of a dizzying list of action items, 'to do this, go here' kinds of things. The later shows very little information at all. It is like a structure was partially implemented, and time has caused it to get diluted. I won't spoil my other posts, but this is where most of my suggestions will take place.

Lastly we get the major footer navigation chart added recently. Its a nice addition, but a user has to scroll a bit to find it. The list of links is somewhat of a bear to navigate, with about 130 links, I struggle to read the links at such a small font size and relatively low contrast. It makes me think more than it seems to help, contrary to the title of Krug's book.

Design element changes

I think the website is fairly pleasant to look at. I like the colors specifically. I've already mentioned a few changes, and I'll recap them now.

The search bar is floating out of context, I'd put it in the blue void above the navigation, and pull the page content up 40-50px.

The large banner icons are too large, and don't seem to really benefit the page enough to take up so much space. They are also the heaviest images. They could be reworked to match the content better, or removed.

The homepage loads mootools, yet it does not seem to use it. Lets take it off, lighten the page by 70 kb. Also the slimbox code can go too.

I like the footer concept, but its at the bottom making it inconvenient to use as well as being hard to read. Perhaps it could be incorporated into the top of the page in a major dropdown (like on NBC).

Final general comments

This is where I close off the general comments and prepare for the other posts. I would also be very interested in seeing some usability studies done, but I do not have the resources to do that myself.

Stay tuned for the following posts about different visitors to Joomla.org, and what the site should do for them.