7 minutes reading time (1451 words)

Creating an Article in Joomla! Has Never Been This Easy!

Creating an Article in Joomla! Has Never Been This Easy!

Joomla is very flexible and has many possibilities. A disadvantage is that working with Joomla can seem complex because of all of the setting and navigation choices. For a Joomla specialist this is usually not an issue, but for many end users it can be a stumbling block. Adding new articles via the Joomla frontend is often one of the first things end users face. This should be a simple operation, but many experience this as very complex.

End User Testcase

I wanted to see and test what end users experience. So I setup a simple Joomla 3 website and asked my girlfriend Julianne for help. She knew what Joomla was, but never used it before. I provided her login information and asked her to perform the following exercise:

  1. Login with the provided details
  2. Publish an article on the homepage with a title, text, image and tag
  3. Logout

The next video played at 2x speed reveals how Julianne is trying to perform the exercise. Adding a title and text is easy. Adding the image and tag is a bit more difficult, but she succeeds.

However, saving the article creates the biggest confusion. The article is not on the homepage, where did it go? After clicking around, where she even managed to get into the backend of Joomla, she noticed that the category was not selected.

In total Julianne needed 8 minutes and 22 seconds to publish the article. Not bad, but that should be possible in less time.

Video after usability improvements

The next video is also played at 2x speed. The same exercise is performed, but this time on an optimized Joomla 3 installation where I improved the usability.

This time Julianne only needed 1 minute and 29 seconds. Of course, its no longer her first encounter with Joomla, but thanks to the improvements she is able to perform the exercise a lot easier and quicker.

10 tips to improve the usability of Joomla

Something can be quite logical for us as Joomla experts, but might be incomprehensible to an end user. Therefore it is good to think from the end user perspective. You can also look over the shoulders while someone uses the website. This gave me the inspiration for the following enhancements for this testcase.

1. Redirect to relevant page after login

Redirect to relevant page after login

By default a user is redirected to their profile page after logging in to a Joomla website. On this page a lot of different user settings are visible, but mainly raise questions.

Instead it is better to set a relevant redirect URL in the settings of the login menu-item. For example directly to the page to create a new article if this is the main reason to login on the website.

2. KISS; Keep it simple, stupid

KISS; Keep it simple, stupid

Try to hide or disable everything that is not relevant for a website. The less choices a user has to make, the more clear it is. Make sure that what remains visible doesn’t lead to confusion.

Do you have a “Login” menu-item on your website? Make sure that this menu-item is no longer visible after login, and show a menu-item “Logout” instead.

You can easily achieve this by using access level “Guest” in Joomla. If set for a menu-item, article or module it will only be visible for users that are not logged in on the website.

3. Make use of the Joomla settings

Make use of the Joomla settings

The many settings in Joomla might be a disadvantage, but you can also use them to improve the usability for the end user. The “Session Lifetime” setting can cause a lot of frustration. Imagine a user is working on an article for a longer time, finally saved it and receives the error “Please login first” because the session time expired. Increase this setting to 60 minutes for example.

Another example is to configure a default category for new articles submitted in the frontend. Is a user only allowed to publish articles in the category “Blog”? Then set this category as default in the menu-item settings. In this way you prevent articles being added to (non visible) areas of your website.

4. Reduce the text editor options

Reduce the text editor options

TinyMCE editor is the default text editor in Joomla and has many options to format the article, often too many. To solve this, many use one of the available 3rd-party text editors.

But did you know that the TinyMCE editor in Joomla has several options as well? The TinyMCE editor is a plugin, if you open this in the plugin manager you can set the “Functionality” setting to “Simple”. In that way only a few basic options for text formatting are available.

5. Make the User Groups and Access Levels understandable

Make the User Groups and Access Levels understandable

Every Joomla website contains several default user groups and access levels after installation. Often most of these are useless and can be removed safely.

For the user groups and access levels left it can be useful to rename them to something more understandable. “Administrator” is more clear then “Super users”, “Bloggers” instead of “Special”. Especially if non-Joomla people are working on the website. After all it is much clearer if an article is visible for “Bloggers” instead of “Special”.

6. Avoid confusion, do not provide unnecessary access

Avoid confusing, do not provide unnecessary access

Joomla has an advanced permission system (ACL) which allows you to configure exactly what actions each user group can perform. For the default Joomla user groups these actions are already configured, but fully customizable.

Thanks to this ACL system you can allow someone to acces only the areas needed to perform certain tasks. On one hand this prevents unwanted changes and secondly that the user is flooded with irrelevant options that are mainly confusing.

7. Use Language Overrides to make it more clear

Use Language Overrides to make it more clear

A very simple, but powerful way to improve the usability of Joomla is Language Overrides. All system texts and labels are stored in language files. Via the Joomla Language Manager you can easily override these language constants with a text that is more relevant for the website.

Is label “Access” at an article not clear enough? Change this into “Visible for”. Or change the status option “Unpublished” into “Concept”, easier to understand for many people if they want to save their progress on an article. You can even add your own custom language constants if needed.

8. Change the website output with Template Overrides

Change the website output with Template Overrides

Template overrides are more complex then language overrides, but allow you to fully customize the output of Joomla, without changing the Joomla core code. In this way you can remove unnecessary functionality, or extend the functionality instead.

Since Joomla 3 creating a template override is much easier. When editing a template in the Template Manager a new tab is available “Create Overrides”. In this screen you click on the file you want to override and automatically an override file will be created for further adjustments.

9. Optimize with CSS and JavaScript

Optimize with CSS and JavaScript

With CSS and JavaScript you can also improve the usability. Pretty much all elements in the Joomla output have their own class, so you can apply styles of effects to each of those elements.

So you can use CSS to display the title input field of the new article submission form larger and add a placeholder with JavaScript. Or simply hide certain labels and fields with CSS.

10. Divide article input fields

Divide article input fields

Those using Joomla for a longer time will recognize the issue: images that are added in articles by users. Before you know it a 2000 pixels wide image is included and even aligned totally wrong. Causing the website to look horrible and out of context.

Fortunately the user can now select the image via a separate field. As long as your template supports this functionality the image will be displayed in a consistent manner and place. Much easier for the user and the website remains neat.

Don’t make me think

The starting point of all usability optimizations tips is "Don't make me think” (also a book suggestion, author Steve Krug); prevents users from doubting, searching, and working with inconsistent structures causing them to make unnecessary choices.

Template override for the Create Article view

In this testcase a template override for the view to create or edit an article is used as example. All tips mentioned in this article are combined into this template override.

Template override for the Create Article view

Can I use that override?

Sure! The complete code of this template override can be found here: https://gist.github.com/sanderpotjer/5488c2a10dceeee7db7d.

Create a new template override via the template manager for com_content -> form or create a new file in your template override directory: templates/template-name/html/com_content/form/edit.php. Copy and paste the template override code in this file and customize it further as desired.

Enjoy improving the usability of your websites!

Joomla! 3 - The Book for Everyone


Already Registered? Login Here
No comments made yet. Be the first to submit a comment

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/