I had the pleasure of meeting founder Chris Rault at the 2008 CMS Expo. He is a very bright guy with some fantastic ideas for Joomla, and he’s determined to change the way we see and use Joomla templates. Chris asked me to perform usability testing on Morph BETA and I was very excited to do so.

I didn’t read any of the template’s documentations because I wanted my experience to be “fresh.”
That led to one unpleasant surprise. In this limited beta version, Morph wipes out the site’s entire data, replacing it with template information. Chris assures me that this will not be an issue in stable
releases. Users will be able to choose whether to keep their content or to install the Morph content.

There were a few other issues but they were very minor and as you will see in this usability testing video and in the summary below, I was very impressed with this template’s breadth. You can control every aspect of your site’s design: logo, colors, width of different elements and so
on. I tested only a few features but I am sure I will be testing and
using all of them in the future.

Morph is going to change the way template developers and users see templates. It will also allow users to create user-friendly sites easily. I’m really looking forward to seeing how it evolves!

Usability Testing Video:

Usability Testing Video Summary:

• A good start! The template and components are easily installed…
• Butwhere’s my information? Everything’s gone! This beta version is
  currently being used by only a few developers. When it’s released,
  users will be able to choose to keep their data.
• Template settings are unclear.

  Component backend:

• My first reaction is that the backend is very slick and easy on the eyes.
• But it’s hard to read the field label. The dark gray on black background makes text difficult to see.
• Selectingthe color is a little fiddly. Once, I’ve made my selection, I can’t see
  the color I’ve chosen, and I’m not sure what the “secondary color” is. The popup doesn’t explain.
• The text in the drop down menus is too small.
• The logo options are great. I can easily upload my logo image and set my logo width and height.
• There’s a huge number of menu settings. I haven’t been able to test them all yet.
• I’m not clear what the Toolbar block is. That should be made clearer.

Installer:

• I’m not clear what the Themelet is.
• Where’s my logo? That I can upload it is great – but I’d like to see it, and it should become the default automatically.
• Most importantly, when I upload anything, all the other settings are gone. It would be best to save everything upon upload.
• I’m not clear how I can change the module colors.

On the whole, I found Morph very promising, slick and beautifully designed.

Suggestions:

• Color selection should indicate which color is currently selected.
• The background of tabs should white or light gray to make the text easy to read.
• The drop down menus should also be bigger.
• Everything should be saved when the user uploads a logo, favicon, or anything else.

To learn more about Morph click here! For more usability testing reports, click here.

Here are the 3 tasks Scott has asked me to perform:

• Sign up to trial and then login and listen to meditation
• Get to sonia choquettes page and listen to an audio and make it to the signup page for one of her events
• Search for law of attraction and attempt to buy a product

Usability Test Video:

Overall look and feel:

• Nice design
• Logo can be improved
• Login on the top right is good
• Search on the right place
• Video has a non-standard shape, and is too low on the page
• Video can be more professional
• Try now – what does it mean?

Trial page

• Page doesn’t look like a part of the site
• Video is good but should be on the front page, so that I can know what it’s about before I go to the trial page
• Not a free trial? May as well make it free
• Image of the house, what is it doing there? seems out of place
• Text that is underlined it looks like a link, don’t make it underlined unless it’s a link
• Don’t make anything blue unless it’s a link
• Too much going on on the page, too many options
• Better focus and simplify the page
• Newsletter shouldn’t be there
• The orange button should be there as the only option to click

Registration

• Asterisks should be red and on the right
• It would be nice to have a paypal option
• I get an error after I purchase
• Logged in or not? one place says I am logged in, and another says I am not

After login

• Upcoming – shows items that already happened
• Download meditation – wasn’t possible
• Listening to second meditation wasn’t successful

Scroller

• Images don’t click

Search

• Search results don’t show the right results
• The search results page are broken
• The second search doesn’t work either
• Search by drop down of teachers works
• Tabs look good
• When I click on event I get a page that’s not very attractive with no styling
• On products tab the icon is broken
• Audio players don’t work on audio tab

Store:

• There is a link on the top that takes to the same page
• Frame on law of attraction category is not necessary.

1. There are empty fields on the profile page. Empty fields on the front end is neither attractive nor necessary. It’s best to show only the populated fields.

   

2. My links appear on other people’s profiles. If I am logged in and looking at someone’s profile, all my tabs appear at the top of the page. But it makes little sense to mix my stuff with theirs. When looking at someone else’s profile, I should only see the buttons and links that concern them.

   

3. The username on the mini profile that appears in the search results does not link to the profile. The link should lead to the profile. The image links, but that’s not enough.

   

4. On the date, only the month field is a drop-down menu.The site would be more user-friendly if all the fields were drop-downs. I should also be able to select the date format.

   

5. Some of the profile default values are unusual. The default values on an application should always be those that people are most likely to use. On a social site, few people will want to post their cell phone number on their profile, for example, so that shouldn’t be mandatory.
6. Mandatory fields are not marked with a red asterisk.Mandatory fields on the profile are marked with a black asterisk on the left but it would be better if the asterisk was red, and on the right. It’s not a biggie but it would be better.
7. Mandatory fields on the photo album are confusing.It’s not clear which fields on the photo album are mandatory. It turns out that the description field box is mandatory, but why should it be? Only the album name is really necessary. Every time users are forced to enter unnecessary data, they become frustrated and have a poor experience.

   

8. The email “To” field is confusing.When composing a message, it’s not clear whether I should enter a username or an email address. Nor is there any indication of which fields are mandatory. For example, I can’t send a message with no body, but I’m not told of an error.

   

9. There’s a Reset button for the Search field. I discussed this issue on “10 Top Button Usability Mistakes.” Reset buttons are always wrong. People click them by mistake and find they have to enter all their information again. In this case, they’d only have to rewrite one field, but it’s still unnecessary.

   

10. Group numbers should link to the members list.When looking at the list of groups, the number of the group’s members should link to the list of members. And the image of the group should link to the group’s home page.

    

And that’s it. It wasn’t easy to find these mistakes, which is a good sign, but fixing them will be easy too and take JomSocial to the next level. It is a great community extension for Joomla and I can’t wait to see how it evolves and improves.

It still has some minor bugs and even more minor usability issues, but over all it’s a great start!This is certainly one of the best Joomla Extensions I’ve ever encountered, and I am proud to be the usability partner of Azrul, the creator of JomSocial.

Installation

It would be better if I could un-install ONE file and have all the extensions organized there in folders, rather than have to uninstall a file, and then un-install 2 other files, and then all files are together in one place and not organized by groups (modules, apps).

Configuration Tab

• Hints explain everything – good
• Walls – what are they?
• Notifications of what? Maybe move it to the other email notifications area
• Some variables are missing from hints
• Terms & conditions, maybe allow to use an article ID
• SEO layout – a bit confusing.
• Templates – a preview of the different templates would be nice

Apps

• It would be good to have all the apps listed here
• It’s incorrect to say that apps can be installed on Joomla’s plugin manager

Custom Profiles

• Very intuitive
• “Select” – what does it mean? Drop down? Check boxes?
• It would be nice if I could choose which fields show on registration
• Buttons are hard to see on the editing pop up.
• Cancel button should be on the left or removed (you have the x on top to close the pop up).
• There is a bug when adding a group, it assigns the fields of another group to his new group
• New group should show last

Templates

Very techie, it would be nice to see HTML templates I can easily edit, even if I am not a programmer

You’re using the word template twice: on the look and feel but also as far as the functionality and page layout. Maybe you should find a different word.

Groups:

You’re using the word “group” twice to describe two different things. First- for profile creation, and second, for members groups, maybe find a different word for the profile creation.

Mail Queue

Not sure what it means? When I go to documentation it’s pretty advanced stuff.

Profile: front end

It would be nice if I could set it up so that empty fields don’t show.

]]> http://www.usabilitytesting.tv/usability/jomsocial-usability-testing-report/feed/ 1 http://www.usabilitytesting.tv/usability/alledia-usability-testing-report/ http://www.usabilitytesting.tv/usability/alledia-usability-testing-report/#comments Wed, 19 Nov 2008 02:41:38 +0000 merav http://www.usabilitytesting.tv/usability/alledia-usability-testing-report/ Alledia.com are the leading Joomla SEO experts. They have a great blog with a lot of content and offer some much-needed SEO services to the growing Joomla community. I am familiar with their site, but was still able to find some very major problems and point them in the right direction.

Steve Burge of Alledia.com took the test results very seriously and immediately fixed many of the problems. That’s exactly the right reaction to a usability test. The criticism isn’t personal; it’s intended to help fix the “low hanging fruits” and improve your site quickly.

Tasks:

• Read and subscribe to the blog.
• Buy SEO club membership.
• Make a purchase from the store.

Watch the usability test video:

I apologize for the bad sound quality and the size of the screen. This video had some technical difficulties.

Video summary and suggestions:

1. Instead of “People Friendly Website”, the tagline should be “The Joomla SEO Experts.” It’s more accurate and user-friendly.
2. In general, if you want people to perform an action or a task, give them a reason and make it easy. If you want them to register to a blog, explain what they get out of it. A clear button with bullet points of the benefits would do the trick here.
3. Stick to the standards: the “required” field indicator should look like this –>* and not like an info icon.
4. Make action buttons much bigger and place them in locations that suit the “direction” of where you want the user to “go.”
5. After registering/activating my account, I expect to have easy access to what I’ve registered to receive. At the very least, a link to the blog should be present as soon as I login.
6. Keep the menu consistent.  Different menu items after login are confusing.
7. The service icons of services are GREAT, but make sure users can understand what each icon means. Either add a small pop-up or place a key at the top of the page. Also, use the correct terms: a downloadable publication is an “e-book,” not a “book.”
8. After purchasing a service, I expect to see the same icons and to be able to these icons to receive the service.
9. I’d like to see a demo before I purchase a template.
10. Show me products on other sites in a new window so that I don’t lose my original location.
11. After purchase, I expect to see a list of orders or some indication of my purchase — and no bugs.

What’s good:

1. Great content.
2. Active blog with a lot of comments.
3. Clean look.
4. Good branding.

Tasks:

1. Obtain information about a product.
2. Find and read the FAQ of the product.
3. Purchase the product.
4. Download the product.

Watch the usability test video:

Video summary and suggestions:

• The site’s overall look and feel is good: it has solid branding and a clean look.
• The tagline is a bit hard to read and suggests that the products are only for businesses.
• I would recommend having a native English speaker edit the entire site. Tighter language would make a better impression.
• It’s good that the login area is at the top.
• The search box should have a submit button.
• The promotion area is a bit confusing; consider removing it.
• The icons are well-designed and match the list of products.
• The names of the different products should link to the product page. They are also blue and can be mistaken easily for a link.
• The English on the title of the Analytics product is poor.
• The copy on the product name is not clear and needs to be improved.
• Screen shots on some product pages are missing.
• A “Call to action” (Buy Now Button) should be placed at the bottom of all product pages.
• A link to the demo is missing from the product page; it should be placed at the bottom (and maybe on the top too).
• Print, email and PDF icons are not necessary and can hurt your SEO.
• “Powered by JoomSuite Resource” is distracting and should be removed.
• The product FAQ is hard to find and is missing from some products. It should appear at the bottom of the page.
• The logo should always link to the home page.
• A “home” menu item is missing. It really should be there.
• “Free download” would be better expressed as “Download Free.” The first is a description; the second is a call to action.
• When I click on “Free Download” I expect to see only the download of that product. Instead, I receive the whole tree again and it’s not clear that what I want is at the bottom. Only show me only my download.
• Typo: “nor” should be “not.”
• After I activate the account, I need to find my download again
• When I click the”purchase” button I expect to be taken to the payment page, not to a subscription page.
• “Free upgrades” sounds more tempting than “lifetime license.”
• I wonder how much am I going to have to pay for this and whether I need to upgrade each year…
• The prices I see are not the 19 Euro I was going to pay. Instead, I’m shown ALL the subscriptions. Only show me what I want to purchase. At the very minimum put my purchase at the top and the rest at the bottom.
• 2CO was a bad user experience. Try switching to something else!
• 2CO won’t let me purchase because I have a “#” on my address!
• I can’t find how to download my product. There are no instructions in the subscription area.
• What is “base domain”? Most people won’t know.
• I was surprised to find that the downloaded file was a text file with a license, and not the actual product. What am I supposed to do with this? Provide instructions to the next steps.

John asked me to perform three tasks.

Tasks:

1. Find the agenda.

2. Purchase a ticket to the CMS expo.

3. Learn about the sponsors.

Watch the usability test video:

Video summary and suggestions:

1. The site is beautiful and well organized.
2. The tag line is hard to read.
3. The text on the agenda is too small.
4. A call to action is missing at the end of session details.
5. A link to the speaker’s website is missing.
6. Some of the photos could look better.
7. The Terms & Conditions pop up shows an error.
8. After the registration confirmation, I receive the registration page. It would be best to remove the “Continue” button or give me other options.

Barrie has asked me to perform two tasks.

Tasks:

1. Receive a free template.
2. Register and post a comment.

Watch the usability test video:

Video summary and suggestions:

1. Because the site is not a “.com,” it would be a good idea to show the “.net” at the end of the name. That would make it easier for me to return later.

Downloading a template

1. Finding the download area is easy.
2. Asterisks should be on the left, not on the right, and should be red if possible
3. Submit button should also be on the right.
4. After I registered, I was shown the registration page for a second time.
5. On activating my account, I was asked to log in but the site doesn’t show me the login form nor is there a link to the form. It would be a good idea to place the login area on the activation page.
6. After logging in, the site asks me “Register or login for free downloads,” two actions already completed.
7. The links under the login forms look like regular text; maybe they should be blue or underlined.
8. When I am ready to download the template, there is no link to a demo so that I can see what I’m receiving.

Posting on the blog

1. The blog itself is hard to find. It might be a good idea to add a menu item that links to it directly.
2. The modules on the top show on every page of the blog, which can be confusing.
3. The comment box is hard to find. It should be open by default.

NinjaForge is a popular extensions provider for Joomla. I had seen their site before, but had never purchased anything there nor was I very familiar with it. Their brand is well-known though, something that’s generally missing in the Joomla world. Founder Daniel Chapman asked me to test his site and perform the following tasks.

Tasks

1. Buy products.
2. Participate on the forum.
3. Get help/support
   Video.

Watch the usability test video:

Video summary and suggestions:

• I didn’t mention it on the video, but the tagline doesn’t represent what the site does very well. “Get on the cutting edge” is cute and clever, considering the name, but it’s also meaningless. “Cutting Edge Joomla Extensions” is simpler but clearer.
• Under the top testimonials, some icons are confusing; I didn’t understand what they meant. Use icons only when it’s an application people use frequently and are familiar with, or make the icons very clear.
• The wording under the “Extensions” menu item — “why you came right?” — is unnecessary and confusing. At the very least, it needs a comma after the word “came”.
• The extensions list is overwhelming. Categories would make searching much easier.
• The “view demo” link is too small and not easy to see; make it a big button. Also place a “Join the club” button on these pages.
• I receive error pages when I try to view demos of the extensions.
• The demo sites open in the same window instead of a new window, causing me to lose my original location.
• The demo site page doesn’t have a “call to action” on the extension page. If I like the extension, I’ll want to join so a big button marked “Join the club” would be very helpful.

Buying a membership

• The membership menu item “Bug your way in” is cute but unclear. Just call it “Join now” or “View details”.
• Don’t ask me to join without showing me how much it costs because I am not yet ready to purchase. Display a button marked “Memberships and Prices” so that I can decide if I want to join.
• The membership page is missing a link to all of the extensions that I am due to receive for each type of membership. The levels of the forums are unclear too.
• On the registration page, replace the star icon with a regular asterisk and make the remainder of the icons clearer.
• Make sure the terms and conditions open in a small pop-up window and not in a whole new window. The current set-up  takes people outside the purchasing process.
• Move the “Register” button; users are moving forwards, not backwards.
• The Paypal Subscription image looks too much like a button.
• The “Apply” button should be smaller and on the right side of the coupon box.
• After making a payment through Paypal, it would be nice to be taken automatically back to the site without having to click another button.
• After payment, I’m told to check my email but actually I can simply download, which is what I’d prefer to do. Take the user to the login page so that he can receive his purchase immediately.
• In the member area, I expect to see only extensions that I can actually download, or at least an indication of which extensions I can download and which I can’t.
• The “Download” button should look like a real button and not a cute image of a ninja.
• If I can’t download, place a button to send me to the upgrade page.

Forum

• Finding the forum is difficult; maybe the forum deserves its own menu item.
• The “New Thread” icon is hard to read; make the text black or change it to a regular button.
• When I submit a forum post, the three buttons are in the wrong order: “Submit” should be on the right, “Cancel” on the left and “Preview” in the middle.

Support

• Add another sub-menu that takes me directly to the support system; it’s not obvious that I can click on “Support.”
• Is the “Due Date” necessary? Which fields are mandatory?
• The Attachment option should look like a button.
• Support buttons are very “joomla style” but not very clear. Why do I need an “Apply” button? Replace the support buttons with buttons that have clear labels.
• A bug suggests that a support ticket wasn’t submitted even though the submission was successful.
• Change “New Activity” to “Enter a Reply” or something clear.
• Remove the Print, PDF and Bookmark icons; no one wants to turn a support ticket into a PDF.

Azrul asked me to complete four tasks:

1. Purchase JomComment.
2. Receive support.
3. Download a product.
4. Visit JomSocial website, Azrul’s new community extension for Joomla.

Some of the purchasing process has been cut from the video where it displayed credit card information.

Watch the usability test video:

Video summary and suggestions:

1. The home page design is too simple. It needs to be more exciting, with images placed next to the products.
2. The sole purpose of the home page is to sell so avoid loading it with unnecessary content. News, for example, should have its own page.
3. The design is narrow; increasing the width will create more room to work with.
4. Clearly define the difference between the different product versions. A comparison table would be helpful.
5. The price of the product should be consistent. Taxes and other fees should be specified before payment.
6. Sending people outside the purchase page to discover their website path is a big mistake. Ask them to do this AFTER they’ve purchased.
7. After purchase, I want to see a clear “Download” button. Currently, it’s hard to understand how to download.
8. Remove “Reset” buttons from ticket submission process.
9. The products’ download buttons should be clear. Even a line of text that says “Download (Joomla 1.0)” is better than a button that’s hard to understand.
10. The link to JomSocial is hard to find; consider making it more prominent.