Joomla.org Magazine

Joomla.org has a great magazine. Its editor, Paul Orwig, recently asked me to perform a usability test to find out whether it was suffering from any problems.

Paul identified three tasks:

1. How do I register as an author, and is it clear that community members are invited to become contributing authors?
2. How do I contribute an article?
3. How do I browse all the articles for a specific topic?

We ran out of time before we reached the third task but we did cover the first and second tasks — and more. (Although there were a few sound problems during the recording, for which I apologize.)

Steve Bickel, the organizer of a Joomla meetup in San Diego agreed to help me test the Joomla.org magazine. Steve is an experienced Joomla developer who uses Joomla.org “sometimes” when he is looking for information. He’s never heard of the magazine though, so he made a perfect subject.

Part 1 – Finding the magazine and signing up as an author.

[vimeo]http://vimeo.com/16775333[/vimeo]

I first asked Steve to find the magazine, which he did easily with the search box. Between 20-30 percent of users go first to search, without bothering with navigation.

Steve’s first impression was good. He liked the headlines and the images. He assumed that he could volunteer to be an author, which is great.

He found all the information about being an author and thought it was very well organized. However, he could not find the registration form to become an author “It’s confusing!” he said. He even thought he’d have to post a question on the forum. At this point we stopped the test in order to continue with the next task.

Recommendation: Add a “Sign Up Here” button on all the author information pages. The button should lead directly to the registration form.

Part 2 – Author registration

[vimeo]http://vimeo.com/16775389[/vimeo]

We discovered the registration link during the break and started the second test by trying to register as an author.

Steve filled out the form and tried to submit it, but nothing appeared to happen. He eventually discovered that his email had an error but the error message was very subtle and needed to be clearer.

Recommendation: Add a clear error message, such as an error prompt.

Part 3 – Submitting an article

[vimeo]http://vimeo.com/16775366[/vimeo]

I asked Steve to try to submit an article. He found the “Have an article to submit? Login” banner, and logged in easily.

Once he had logged in, he expected to see a form to submit his article, but reached his profile page instead.

He didn’t know what an “item” was, although he assumed it’s “probably not an article.” He did understand the term “bucket” however, so he clicked on the “article submission bucket” and reached something that “made no sense to me.”

He then clicked on “Add a new item” and finally reached the submit article form.

Steve and I during the usability test

I asked Steve about the purpose of the alias; he thought it was for SEO.

I asked him to add a picture. He clicked on an icon that he thought was for an image, but wasn’t. It took him a while to discover the image tab. He then clicked the browse button but there was no “Upload now” next to it, so he wasn’t sure how to finish uploading the picture. “I have no idea how to get this image there,” he said. Steve also couldn’t figure out the meaning of the image gallery or how it differed from the image itself.

He saw the “Select items” list, but couldn’t figure out what it was.

Next, Steve was ready to submit his article but couldn’t find a submit button. Even after removing the camtasia toolbar, Steve couldn’t find how to submit the form. He became frustrated and decided it was way too many “hoops” to jump. I noticed later that the save button was at the top of the screen.

Recommendations: Remove the alias field. It’s not the author’s job to do SEO and it’s unclear what they need to enter there.

Replace “item” with “Article.” Since we are asking authors to submit articles, call their submissions “articles.”

Place an “Upload image” field somewhere that’s easy to find.

Rename the “Save” button “Submit” and move it to the bottom of the article so that it follows the natural movement of the eye. I also recommend using a regular button rather than an image to make it clearer.

Conclusion:

Joomla.org  magazine is nicely done but has some usability issues that are probably preventing users signing up as authors and submitting articles. These are not big issues and can be fixed pretty easily.

The article submission form seems to be the main problem here. It’s too complicated and should be simplified to match what people want to do. The mockup below shows only the things the author really needs. The submit button is in its natural location: at the end of the form.

Submission Form Suggested Design

Here are some last words from Steve:

[vimeo]http://vimeo.com/16851706[/vimeo]

Thank you Steve Bickel and Joomla Meetup San Diego for your help! If you’re in the San Diego area, come and join us for great information and some more usability testing. Each tester gets a free iJoomla extension!

They’re all doing Usability Testing — and no wonder.

Usability Testing is probably the most underrated and overlooked method for improving the user experience of a site. It’s also the most powerful and the most cost-effective method.  You can do it for very little cost or even for no cost at all.

What is Usability Testing?

Usability Testing asks users to complete a number of set tasks on a website. The ease with which they complete those tasks, the time it takes to complete them, and the user’s perception of the experience all help the publisher to improve the site.

So what are the goals in a Usability Test for Joomla.org? I wanted to find out:

• Whether the Tester understands what Joomla is;
• Whether the tester understands that Joomla is free;
• What the tester wants to click on the home page.

Joomla Day West was a perfect opportunity to do some Usability Testing on both Joomla.org and Joomla 1.6 because it was full of, well… Joomla users! The results were fascinating and eye-opening.

In this post I’ll focus on the Joomla.org home page. Future posts will look at the Joomla 1.6 usability testing that I’ve done.

To ensure the integrity of the test, it was important to test the Joomla.org home page with someone who had never even heard of Joomla —not easy to find at a Joomla conference. So I had to do this test when I got back home. I found Aaron, a 20-something English major student. When I asked him if he’d ever heard of Joomla, his reply was “Huh?” Perfect! In return for a bottle of beer, he agreed to sit with me for a short usability test.

Here’s the video test, watch it first and then read on:

I first asked Aaron to tell me his initial impression of the site. His reaction was positive — he thought it had a “clean and modern” design. I then asked him to tell me what is “Joomla”? Here he had more difficulty. He figured it was software, but he couldn’t tell me what it does. “I have no idea,” he said. It took a visit to the “About” page to figure it out.

That’s a problem. A site has less than eight seconds to grab someone’s attention before they move on. Visitors need to understand what Joomla is right on the home page, and as quickly as possible.

Once Aaron understood that Joomla allowed him to create websites, he was interested in downloading it. Expecting to find an executable file, he was surprised to receive a bunch of files in a folder. He didn’t know what to do with them, but he was willing to read the manual, although he described it as “a pain.” He also decided to try the demo but didn’t expect it to take up to an hour. Finally, he concluded that the software was not free because it came with a 30-day trial.

The second tester, Will, had been using Joomla but wasn’t very familiar with the Joomla.org website, since he knew what Joomla was, we didn’t focus on the home page as much as the other tester, we focused mainly on the “Demo” feature. He was expecting to find an actual demo site that he could browse without having to create a site. He said he didn’t want to commit to something he wasn’t sure he needed. We also had a few problems with FireFox 2, the browser we used to conduct the test.

Note: sometimes it’s hard to understand the tester on this video because of the recording the typing sounds, my apologies.

My recommendations based on these tests are:

1. Include a clear explanation of Joomla right on the home page ;
2. Offer a live demo, without having to register or create a site;
3. Explain that Joomla is free and can be installed anywhere, and explain how to install it easily (with tools like Fantastico) ;
4. Explain what the 30-day trial does;
5. Explain what users are downloading and what they have to do with the downloaded file ;
6. Test with Firefox 2.0.

Here’s a mockup for the home page, click on the image to see it in full size:

Joomla.org Home Page Mockup

As you can see, the top of the page clearly says: “A free and powerful way to create websites (1).” “CMS,” or “Content Management System” might be a better description but most people are not familiar with the term.

Three sections then follow a user’s logical sequence. First, users want to know what Joomla is and what it can do for them(2); second, they want to see a live demo to figure out if they like it (3); and third, once they have plenty of information, they are ready to set up their site (4).

Notice I didn’t use the word “demo” on the third section because what Joomla.org offers is not really a demo. It allows them to set up their site easily — which is really cool — but it’s not a demo.

The power of Usability Testing is that it’s a very accurate insight into the tester experience. Let’s try to make it a great one!