Improve user experience by customizing login modules, menu items, and other content to provide a consistent, tailored experience for your users.

Thank you to Lo Jen-Chih for translating this article to Traditional Chinese.

Thank you to Katerina Vorobyova for translating this article to Russian.

In my previous article, I walked through an example where we created some content on the front end of the website for students and teachers. Students saw student information when logged in, which teachers saw both student and teacher information.

This worked great and gave the behavior we wanted, but the user experience is definitely lacking. What if I want a different login welcome depending on which user group has logged into the website? Also, depending on whether you log into your Joomla site via a module or a menu link, you'll get a different default experience.

The Login Module

The login module is available on the home page of a Joomla 2.5 site, with or without the sample data installed. When you log in using this box, the login module will direct you to your site's home page by default.

You can change this by editing the module. Go to Extensions - Module Manager - Login (you'll need to find the right login box for the site, located in position-7). Look at the configuration options on the right side of the screen:

Under the Login Redirection Page option above, this is where you set which page the login box should send you when you log into the site. From the dropdown, you can choose any page that's connected via menu to your website. "Default" indicates the default page of the website (typically the home page).

If the login box is located far down toward the bottom of a page, far enough that a user has to scroll, and if the box is located only on the home page of the site (which is where the login module redirects by default on login), then there is potential for confusion. The user logs in and then sees the same screen they were just on. They have to scroll down the page to find the login box has changed to a logout button to be sure the login worked. Unfortunately, this is the default behavior for a user on a 1024x768 monitor using a Joomla site with the sample data.

The Login Menu Link

You can also create a menu link to a page which contains a login form. To do this, go to Menu - Main Menu (or your choice of menu) - Add New Menu Item. Click on Select next to Menu Item Type and choose Login Form located under Users Manager. Look at the right side of the configuration screen, and you will see this:

This login configuration screen does not redirect the user to a page by default. Instead, it redirects users to their profile by default, rather than to a specific page on the website. To configure redirection to a specific page on the site, enter that page's URL in the Login Redirection box.

When logging in with the above login screen, this is what the user sees with the default settings:

Three ways to improve the login/logout user experience

1. Make consistent use of redirects

Are you using both the login module and a login link on your site? Make sure both logins redirect to the same page, providing the same user experience no matter where people log in. Alternatively, offer the login module or a login link to log into the site, and make sure it redirects to a page that makes sense. Likewise, make sure the login module and the login link redirect to the same page on logout.

Even if you're only using one login option on your site, make sure you make use of redirects to improve user experience and make it clear that someone has logged into or out of the website.

2. Customize the login landing page to the group which is logged in

What if you want students to see one message when they log in, but teachers should see another? And what if school administrators should see messages for teachers and students as well as their own login messages?

Joomla allows only one page for a redirect from the login module or page. In that interface, there is no way to specifically state that those who are students should see one page, while teachers should see another. Everyone sees the same page on login.

How can you improve the experience when you only have one page to work with? By making that a very hard-working page, and making use of Joomla's ACL.

Here's how I would set up a login landing page which could cater to three audiences:

• Set up a category for the login page, and set the access level to Registered (i.e. all three audiences can see content within the category)
• Now set up an article within the category. Inside of the article, rather than entering content, enter three module positions using [loadposition]. For example: [loadposition student], [loadposition teacher], [loadposition admin] (Substitute curly braces for the square brackets.)
• Create modules for each access level, with positions of student, teacher, and admin (or corresponding to your loadposition code). These can be custom HTML modules, which can contain content customized to each access level.
• When a visitor arrives on site, they will see the modules(s) customized to the user's access level.

Here's more detailed instructions for making this work.

Step 1: Make sure users are part of the Registered user group.

Users to your site are assigned one or several user groups. Make sure one of them is the registered user group, so that all users who are logged in can see some content in common. Public users, which are users not logged into the site, will not be able to see the content for Registered users. (See earlier ACL articles to learn about how to configure this.)

Step 2: Create a category, an article, and a menu item for the login landing page.

Create a category for your login landing page, perhaps with a name like Login Landing Page. Set the access level on the category to Registered. (Student and Teacher user groups should be part of the Registered access level.)

Create an article within the category. The article should contain a module position for each access level.

Make a link to the menu in the Menu Manager, choosing Single Article as your type and linking to your login landing page article. Set the menu item's access level to Registered as well.

If you don't want a link to the login page showing up in your navigation, you can always use the hidden menu technique to hide the link.

Step 3: Create modules.

Create individual custom HTML modules within the Module Manager. For each module, assign it an appropriate access level and module position. For example, make a module for the student access level with a position of student, one for the teacher access level with a position of teacher, and one for the registered access level with a position of registered.

When someone then logs into the site, they will see the article, because they are part of the Registered access level. The modules they see will be determined by the access level of the module. In this case, students may see only the student module, teachers see the teachers and student modules, and administrators may see all three modules.

3. Create an easy-to-find logout button

When you log into your Joomla website, the login module converts to a logout button. That's great if the module is displayed on each page of the site, but frequently, the module may only be displayed on one page (or a handful of pages). This means a user will need to go back to that page to log out of the site. Likewise, if there's a login link on the site, the user must return to the login page (which might say "login" in the navigation, even when they want to log out).

Wouldn't it be nice to have a "logout" button on every page of the site?

Or wouldn't it be great if you could have a "logout" link in the navigation?

With ACL, you can have both of these, and you should put them in place for better user experience.

Making the login module work for logging out

If you'd like to have a "logout" button appear on each page of your website when a user is logged in, but you would not like to display a login box on every page of the site, here's how you can make this happen.

Create a second login module. Assign the access level to Registered, and have it appear on each page of the site.

This second login module will only appear when someone is already logged into the site.And when they're already logged in, the module displays as a logout button. If they click the logout button, the module no longer displays — because you've logged out, and you're no longer part of the Registered access level!

Making a "logout" link in the navigation

If you'd like a "logout" link to appear in your navigation, but have it only appear when someone is logged into the site, here's the way to make that happen.

Create a menu item of the type of login. The menu item title can be Logout. Set the access level for this link to Registered.

Now this menu item will only appear when someone is logged into the site. When they click on the Logout link, they will get a page with a logout button on it they can click. This is an extra click relative to the module technique described above, but it may be more intuitive for some users, or it may work better with some site designs. You'll just have to test and see what works best for you!