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!

I will talk about their mobile ad strategy though. Or the lack of it.

Browsing mashable.com on my iPad today, I spotted an intriguing ad for something related to Usability Testing (my favorite topic). I clicked the ad… and reached the CA website, to my dismay.

Photo of my iPad with the landing page on ca.com

Now, you might think that if a company purchases ads that show on mobile devices, they’d direct the user to a mobile-appropriate page. Not CA! There were all sorts of problem with the landing page:

• The font was tiny, and used white text on an orange background. It was impossible to read even on an iPad.
• Four boxes at the bottom of the page looked like a mistake. I thought it was a broken plugin image, or video that wasn’t able to play on my iPad. It wasn’t. It was just how these boxes appear.  Another tiny box on the right was intended to… do something. I’ve no idea what.
• The call to action begged me to “Download Now.” It didn’t bother telling me what I’m downloading though or explain what use it might have for my iPad.
• The page also suggested that I “Please disable all pop-up  blockers.” First, if you expect people to disabled their pop up blocker just so that they can download your stuff, you are asking too much, surely you can find a better way, if not, maybe you’re in the wrong business. Second,  I can’t even do that   at all on an iPad, but again, you don’t really know I’m on my iPad, do you.
• And as for the copy writing — the one title that I was actually able to read – Read it for yourself and let me know if you understand what it means and what exactly they are selling.

For CA, the whole ad was a waste of money. For the rest of us it’s a useful lesson. If you’re investing in mobile traffic:

• Create a special landing page just for your mobile traffic.
• Make sure that the page is easy to read ON a mobile device and communicates what you’re selling.
• Give a “call to action” that makes sense for that mobile device.

What’s your mobile ad traffic strategy?

500 Internal Server Error

Sorry, something went wrong.
A team of highly trained monkeys has been dispatched to deal with this situation.
If you see them, show them this information

Who are the YouTube monkeys?

I didn’t see any monkeys, but I did get to see my video in the end. The problem didn’t last long and I was able to find a very cool remake of “Rivers of Babylon” by Sublime,  a great band from Long Beach, CA, a place I used to call home.

Next time your site is giving you grief though, remember that it happens to everyone, including the biggest boys on the Web. Don’t panic. Learn from it, move on, and keep an eye out for the monkeys.

That’s really bad news. For developers like me, the toolbar has been a huge timesaver. This is what it does:

• Reveals the CSS of any web page. Click anything on the page and you can see the CSS behind it. That’s extremely useful if you need to make changes to the CSS and don’t want to waste time plowing through the code. The toolbar shows you the CSS file name, the row and the code itself.
• Displays your form password. I do recommend you use Splash ID to store your password information but the toolbar has been great for those of us with memories like sieves.
• Shows locations of any images on the page. So no searching if you need to replace an image or modify it – like your Joomla template’s logo, for example.
• Displays the source code of a specific element on the page.
• Shows the cookies so that you can edit them.
• Lets you disable different elements on the page including CSS, JavaScript and many others.
• And a whole lot more!

So when I saw that my Web Developer toolbar was missing, I was less than happy!

The weird thing was that I could see it on my list of add-ons. When I went to Tools-> Add-Ons in the top menu, there it was. I uninstalled and reinstalled but nothing helped.

So I searched on Google… and found that I could access the toolbar by going to Tools->Web Developer. But now instead of having to click twice, I have to click four times! That’s not very user-friendly. The good news is that this issue can easily be fixed.

Here’s how you fix it:

1. Right-click anywhere Firefox top area.
2. Choose “customize.”
3. Click “Restore Default Set.”
4. Choose “Show Icons & Text”  (That’s the settings I use because it’s easier to both read and see the icon; you might prefer just icons).

Or

1. Right-click anywhere Firefox top area.
2. Select Web Developer from the drop down menu to check it

And that’s it! Your Web Developer Toolbar will be back where it belongs. Well…at least until the next Firefox upgrade.

I am not sure how Facebook is making these decisions, but I seriously doubt it involves Usability Testing. Any reasonable tester would have been able to catch these snafus.

Here are some of the most annoying features of Facebook with suggestions of how they can fix them. I just hope someone at Facebook is reading this…

1. I Don’t Care Who You’re Friends With

Facebook’s home page tells me everything that happens to my friends.

But I don’t want to know everything that happens to my friends.

Do I need to know if my friend is now friends with someone I’ve never heard of? Do I need to know if they’ve joined a group of fondue-dipping chocolate lovers? Maybe, especially if they’re sharing the chocolate, but I want to choose what I see on the home page — and what I leave out.

A couple of versions ago, Facebook only showed the status update of friends. Those were the days…

Suggestion: On the Settings page, add a list of all the possible status types and let me choose the ones I want to see.

2. Comment Spam

Sometimes I’ll see a status update that makes me want to comment or mark as “like.” That’s fine. That sort of easy contact is part of what makes Facebook fun. But once I’ve done that, I receive a notification every time another comment comes in after me. I can turn off the email notifications but not the site notifications.

Hit “like” or make a quick comment and it haunts you for days and sometimes weeks. I now find myself thinking twice about responding to friends’ posts for fear of being over-notified.

Suggestion: Forum software got this one right. Forums allow users to unsubscribe from a thread so that they no longer receive notifications. Facebook can implement the same thing easily. Just let me choose whether I want to unsubscribe after I post or “like” a status update, or allow me to unsubscribe from all future notifications of this post.

3. Chain Emails

Chain emails sent to dozens of people at a time have become a thing on Facebook. It’s not always a terrible thing — I don’t always mind it — even if it does increase the chances that I’ll eliminate this “friend” from my Facebook contacts. The problem though is that whenever someone responds to the message, it goes to everyone on the list. So now I have to read all the personal exchange between people on the list even if it’s not directed to me. Even if I delete the email, I still can’t get away from it.

Suggestion: When replying to a chain email sent to more than one person, let the sender ask whether they want everybody to receive the reply or just the sender. Or let me “unsubscribe” from this email thread.

4. Unstoppable Friend Suggestions

Facebook wants us to take every opportunity to make new friends. The site suggests new people based on common contacts. Sometimes though, these people are not my friends for a good reason. Do I really need to see their face every time I log in?

The Close button helps but only for that session. The face is back next time I log in. It’s distracting, annoying and not necessary. Frankly, I’d rather see an ad in that spot.

Suggestion: Allow me to completely turn this feature off on the Settings page, and when I close a suggestion, Facebook should never offer me that contact again.

5. Chat Duplicates

I’ve placed my Facebook friends on different lists so that I can manage them better. That was a nice touch. But some friends are on more than one list. When chatting, I can find myself talking to the same person in three places. Talk about confusion! Friend lists are a good thing. Friend lists on chat, not so much.

Suggestion: Allow users to turn off grouping on chat.

6. Every Road Leads To Home

This is probably the biggest mistake in Facebook’s latest revision. On previous versions, a bar at the bottom of the page allowed me direct access to groups, marketplace, and other pages. This bar is gone. Now if I want to access any of these pages I have to return to the Home page first and look for it on the left. Instead of clicking once to get where I want, I need to click twice.

When you use an application this much, all those unnecessary clicks quickly build up to unnecessary frustrations.

Suggestion: Return that navigation bar or add menu items to access all pages from anywhere.

7. No Notifications On Business Pages

I’ve created pages on Facebook for both my businesses, and I post news about them there for my customers. However, when someone places a comment or asks me a question, I don’t receive a notification. I have no idea that anything has happened. The customer thinks that I’m ignoring them or that I don’t care about their question.

I receive a huge number of useless notifications on Facebook, but this one is important  — and it’s missing.

Suggestion: Add notifications on pages I own or admin, and let me turn them off on the Settings page if I want to.

8. Guess The Icon

Another bad new feature is those strange icons at the top left of the screen. Not only are they hard to see but the icons themselves don’t represent the pages they take us to. The messages icon looks like a chat icon. The notifications icon looks like… a glob? The friends request icon looks like it leads to a list of friends — which it should do but the only way to get to that page is through the Home page.

In fact, what are the chances I really need to access a “friends request” page? I can approve/ignore friends requests by clicking on the link in the email notification. Someone at Facebook though has decided that this one feature is important enough to have its own real estate — and more important than the actual friends page. That someone is very odd.

Suggestion: Make these icons easier to read with more relevant graphics, and replace the “Friends request” icon with “Friends.” If you really want, Odd Someone, you can show me the friends requests on the friends page.

9. Idle Friends Still Chatting

When I click on Chat to see who’s available, I can see many friends marked with a gray dot, indicating that they’re not currently active online. So why do I need to see them? Why not only show me the people that are actually available to talk?

Suggestion: Let me choose whether I want to see idle friends by picking an option on Chat settings.

10. “Go on, make friends. Don’t be shy!”

Facebook doesn’t think it’s enough to give me a tool to manage my social life. It thinks it should manage my social life for me as well by prompting me to talk to friends with whom I have little interaction. “Say Hello, write something on their wall,” Facebook tells me. But I don’t want to! If I wanted to write something, I would. Stop bugging me, Facebook!

Suggestion: Allow me to completely turn this feature off.

11. Where Did My Friends Go?

Clicking on the “Friends” link to see my list of friends is always disappointing. What I see instead of my friends are links to:

• Find friends
• Friend suggestions
• Search for people
• Find people you IM

But I don’t want any those things. I want to see my friends.

Facebook’s priority is to grow by allowing the user every possible way to find and add new friends. But what about what the user wants? Isn’t that a priority?

In fact, clicking the Friends menu item opens options to see “recently updated” friends and “Status update.” Friends are grouped under those options… but I still can’t find a full list of all my friends.

Suggestion: Allow direct access to a full list of friends.

12. The Neverending Page

This is obviously a new trend: Twitter does it and now Facebook does it too. We used to have pagination on pages with a lot of content. Some content would show on page one, older content on page two, and so on. If you wanted to access the last page, you just clicked “Last.” The new, trendy way is to allow users to click a link marked “older posts” which then show up magically under the newer posts.

There are advantages. In particular, you don’t have to wait for a new page to load to keep reading. But if you happen to navigate to a different page, perhaps to look at a linked image, when you return to the long page, you’re right back at the beginning.

And what if I want to access very old posts? Pagination lets me head straight to the last page. With “older posts,” I could be clicking for hours.

Suggestion: Improve technology to remember my last place. Or just bring back pagination!

13. A Video Is Not A Link

When I want to add a video from YouTube, intuition tells me to click the “video” icon then choose “video from external site.” Not on Facebook. To add a YouTube video I have to click the link icon. It makes no sense at all.

Suggestion: Do the obvious thing: let me add a video by clicking the video icon!

14. Bouncing News

Facebook’s home page offers two options: “Top News” and “Most Recent.” I really don’t know how Facebook determines top news, or even why they call it “news.” To me — and to everyone else, I think — they’re “status updates.”

Whatever Facebook calls it though, I just want to see the most recent posts by my friends. I can do that by clicking the “Most recent” link but whenever I return to the home page, the option bounces back to “Top News.” Does Facebook really want us to see what they think we should see?

Suggestion: Get rid of this duplicity and just show me the most recent status updates. Or let me keep the option I choose.

——————–

Because Facebook is used frequently, it’s very important to get the user experience right. But it does give the company a little room to add features that require learning. The “hide” or “delete” buttons that only show when the user hovers over the stream, for example, is not user-friendly but users have learnt it.

Facebook has to get out of its own head and start doing some serious usability testing. The company needs to think about what we want rather than what it wants. The suggestions I made here are not that hard to implement, and all they do is give users the options to make their experience better.

Are there any other facebook features you find annoying? Please comment below…

Visit UsabilityTesting.tv for “Expert Usability Testing”. To watch the Usability Testing video of JoomSuite click here.

Joomla’s new login module though is HUGE. In fact, at 159px X 258px, it’s about 43 percent taller than the old version! Yes, I know there are a bunch of new links to “forgot password” and “forgot username” etc., but making this module so big shows little understanding of usability and web optimization.

The premium real estate on your website should be about getting people to convert… to subscribers, to customers, or to whatever else you want them to become (you do know what that is, right?) So save your space and don’t waste it on a login module bigger than your house.

Fortunately, there are a few login alternatives out there. The one I found to be the most elegant was the Wow Login Box from Wow Joomla. It’s tiny — only about 37 px high — it’s free to download and they also have a Pro version… but I haven’t tried it. The only weakness I found on this little module is that the “Submit” button is hidden. You may need to tweak the CSS to make it work.

There are many ways though that Joomla can optimize this module and make the size more reasonable. My proposed layout is only about 90 px and it has exactly the same elements:

• Place the text box label inside the box, so that when users click on it, it disappears;
• Place the username, password and button next to each other on the same row;
• On the button, change “login” to “go.”

As for usability, one more suggestion:

• Place the “remember me” check box on the left. It’s just good practice and makes more sense.