The Joomla! ® Community Magazine

12 Usability Guidelines Every Joomla! Template Should Follow

Written by Merav Knafo | Wednesday, 01 December 2010 11:54 | Published in 2010 December
Level of Difficulty:Beginner Over the years I've been involved in Joomla!, I’ve seen some great improvements in templates. Many templates are now very sophisticated, slick and beautiful. Just compare the early work of any of the veteran template providers with their recent efforts to see the quantum leaps they’ve all made.

But while looks have improved, front-end usability — hasn't. Many Joomla! templates don't take usage into consideration. They’re missing some of the most basic features, making it difficult for novice developers to create a user-friendly site. I know I’m constantly hacking templates to make them do what I want.

Now that template providers have figured out how to create great templates with amazing backends, a gazillion module positions and sophisticated menus, it's time to pay attention to usability. The template providers who take that step will differentiate themselves from the crowd and stand out in the marketplace. Here are some simple guidelines that should be standard for every template.

  1. Add a Utilities Menu
    This is probably the biggest problem I find on almost every template. A utilities menu links to the features that every site needs but which aren’t the site’s main functions. They might include "About Us", "Contact Us", "Archive" etc. The menu should be located at the top of the site and a module position for it should be included in every template as standard.
  2. Put the Call to Action on the Right
    Usability experts agree: the "call to action" should be on the top right side of the screen. That could be a “Buy Now” button, a newsletter registration form, contact information, or any other important action you want people to take on the site. So, place a module position on the top right side to make adding that call to action simple.
  3. Add Search to the Top Right
    Did you know that 30 percent of users reach a site and immediately look for a search box? They don't like to browse to find content; they want to search. The search box on the top right of a website is becoming standard — it’s where users expect to find it. Every template then should have a module position at that location to insert a search box.
  4. Include a Site Intro Box
    Do your visitors know what your site is about? You only have a few seconds to communicate your site’s main message — so get it in early, and clearly. A module position somewhere on the top is perfect. It can even be a "teaser" position like JoomlaShack’s Inspiration template. Just don’t make the position too high. You want to keep that prime space above the fold for your most valuable content.
  5. Add a Footer Menu
    The footer menu is vital for items that need to be on the site, such as the "Privacy Policy" and "Terms & Conditions," but which shouldn’t take up the important space at the top of the page. Even though a footer module position is available on many templates, when used as a menu, they rarely look good. The footer module position should allow users to add a footer menu that looks inviting.
  6. Make the logo image bigger. Too many times the space allocated for the logo is very small. Template providers need to remember that rarely nowadays, website domains are-one word short. Many times, they are 2-3 words long! Which means, more width is needed for the longer logo. Yes, I know that people can modify the CSS and make the changes, but many users don't know how, so why not make their lives easier? Recommended dimensions: 300 x 100 px.
  7. Allow Banners!
    Banners and Google ads are almost standard for every site nowadays, so I am constantly surprised that templates don't include a position for a banner. There should be room for a standard 468x60 banner on the page.
  8. Links Should Look Like Links
    Even in the most stunningly original templates, visitors should still be able to see the links. Some templates though have page elements (such as article titles) that are not links but which look like them. Make the links one color and the other elements a different color.
  9. Get the Text Size Right
    Some templates have text so small, you have to squint to read it. Template providers should set the default text size to be large enough to read and in a color that is easy on the eyes (so no light grays, please!). Go for a 12 px text size and you should be fine.
  10. Make the Navigation Clear
    In Joomla!, the navigation is the “Next >>” and “<< Back” links at the bottom of the page. On some templates these links are so small that they are hard to see. Make them look more like clickable buttons than links, and users will find them easy to click.
  11. Use Both Sides of the Screen
    Some template providers have figured this one out already. Some haven't. Joomla! users want flexibility in choosing whether to use the left position, the right position or both. Give them the choice. Give them both.
  12. Free the Width of the Right and Left Positions
    As templates have become increasingly sophisticated, so it’s become increasingly important to allow users the ability to control the width of the right/left positions. Give them the freedom to design their sites.

Before you buy a club subscription or an individual template, make sure that the templates on offer follow these guidelines. If they don't, ask your template provider to make a few changes. Hopefully, in time, these suggestions will become standard in the Joomla! world and we will all have more usable Joomla! websites.

Read 22250 times
Tagged under Designers
Merav Knafo

Merav Knafo

Merav Knafo is the founder of iJoomla.com and usabilitytesting.tv, she specializes in creating high-end Joomla extensions and she is passionate about usability.

Leave a comment

Make sure you enter the (*) required information where indicated.

[b] [i] [u] [s] [url] [quote] [code] [img]   

Comments (24)

  • avatar
    • 0
    • 0
    saurabh shah

    Good tips Merav ...

  • avatar
    • 0
    • 0
    Mark Simpson

    Great post, Merav. Thank you for all the excellent work you've done spreading the usability gospel in the J! community.

    BTW I reckon your font size recommendation (no. 9, above) is too small. 12px isn't easy to read on current generation monitors. I suggest 13px-15px, depending on the purpose of the site (larger for blogs) and overall design direction.

    To anyone else, I strongly recommend Merav's http://usabilitytesting.tv service. Even if you've read all the books by the experts and think you know Usability, there is nothing like having an independent third party analyze your site for you.

  • avatar
    • 0
    • 0
    Jo snow

    Excellent piece,

    even the article itself is a great example of usability

  • avatar
    • 0
    • 0
    Cédric KEIFLIN

    Thanks for this, it is really usefull and is a great way to follow for template making.

  • avatar
    • 1
    • 0
    Merav Knafo

    Mark and the rest, thanks for the kind words. @Mark, recently I've been using a 14 px font size. I want my readers to enjoy the experience without having to quint to read.

  • avatar
    • 2
    • 0
    Steph

    I think your apps are awesome :) and you've made great points here thanks and am checking out.

  • avatar
    • 0
    • 0
    Ryan Pfleger

    Indeed... You Rock :P

  • avatar
    • 0
    • 0
    Scott

    as a new joomla use and template designer this artiacl has been a very very handy ready and im gunna keep on these points in mind when i start putting out new templates.

    Thank you Merav :)

  • avatar
    • 1
    • 0
    Chris

    Great advice! Totally agree with customizable templates.

  • avatar
    • 0
    • 0
    Eden Orion

    Kol Hakavod
    Or
    Very good post that should be delivered to every client before beginning of work.

  • avatar
    • 0
    • 0
    ahmed elshemy

    At first i'm new in joomla user,so Thank you for this advices.

  • avatar
    • 0
    • 0
    tim

    Great tips but I believe that it's better to use ems rather than px as font units.

  • avatar
    • 0
    • 0
    Derek Joe

    Yeah, good tips. It's better if there's more explanation about the 12th. :)

  • avatar
    • 0
    • 0
    Renato Salvatore

    me gustaria saber el comcepto de usabiliad que ud manejan, acá en CL al parecer nos referimos a otra cosa

  • avatar
    • 0
    • 0
    gommbang

    Good work, your service is very helpful........... ^_^ thank' all

  • avatar
    • 0
    • 0
    Erzen

    Thank you for your precious advices.

    Keep it on!

  • avatar
    • 0
    • 0
    Pete

    Great Post - now off to implement....

  • avatar
    • 0
    • 0
    Muhammad Eid

    my first time when learn joomla i was say it's very difficult to make template but when i make my first template i say it's very easy hhhhhhhhhhh i love joomla and Zoo 2

  • avatar
    • 0
    • 0
    erix

    Nice article, I'll try to translate it in french ASAP and put it on joomla.fr because french people would like to read it as I do.

  • avatar
    • 0
    • 0
    Paul Orwig

    Hi erix,

    Thank you for your comment. Please contact the author Merav (her website address is in her profile above) and request her permission before translating her article!

  • avatar
    • 0
    • 0
    Jón Ragnar Björnsson

    Thank you so much for your excelent article. My Soil Conservation Service of Iceland is going to make a new template for our website when we go over to Joomla 1.6 next year. We will take notice of your good advice.

  • avatar
    • 0
    • 0
    Scotty

    BOOKMARKED!

  • avatar
    • 0
    • 0
    Eng.Khaled

    good tips

  • avatar
    • 0
    • 0
    Kamrul

    Do you have such an empty template to share, please?