How to create a custom login experience for Joomla users
User experience has become a major focus in many applications and websites. Joomla allows you to create a better User Experience by customising the login screen to provide a specific experience for different types of users.
In this article we will discuss various ways of performing a Joomla login redirect to take specific types of users to specific pages.
Joomla Login Redirect
The Joomla login module is available on the home page of a Joomla site, whether or not the sample data installed. When you log in using the login box, the login module will direct you to your site's home page by default.
However, you can change this by editing the parameters of the module.
Go to Extensions > Modules and search for Login.
Look at the configuration options as per below. You can see that one of the options is a Login Redirection Page.
We will explain how to use this to customise the user experience.
Using the Login Redirection Page option above, you can set which page the login box should send a user after they log into the site. From the Select button, you can choose any page that's connected to menu item on your website.
If you keep the "Default" option, the user will get redirected to the default page of the website (usually 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.
The following changes can be made to improve the user experience:
- move the login box to the top of the page as much as possible
- perform a redirection to a different page using as per the parameters above so that the user knows that the login was successful
How to Create a Login Menu Link
You can also create a menu link to a page that contains a login form, if this makes sense for the UX of your website.
To do this, go to Menu - Main Menu (or your choice of menu) and Add New Menu Item. Click on Select next to Menu Item Type and choose Users > Login Form located. right The Options tab screen will contain the below:
This login screen 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, choose Internal URL and enter that page's URL in the Login Redirection box. Alternatively, you can select a menu item to redirect a user to after they have logged in.
When logging in with the above login screen, this is what the user sees with the default settings:
3 Ways to Improve the Joomla 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 that 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. Also, make sure that 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.
If your site is a membership site, you could redirect to the courses available. If your site is a shop and you require a user to register, redirect them to their shopping basket or checkout.
2. Customize the login landing page to the group which is logged in
What if you want certain groups of users to see different messages when they login? And what if administrators should see specific messages for administrators 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.
But you can improve the experience making use of Joomla's ACL.
Here's how we set up a login landing page which could cater to for different audiences (e.g. student, teacher, admin):
- 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] (Remember to change the square brackets with curly 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 are more detailed instructions for making this work.
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.
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.
Create modules with different access levels
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 great 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.
Change the login module to 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!
Create 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!
Customizing the Joomla Login for different users
Show a Joomla login module only in a page
A recent dilemma we had was how to make it easier for users of a Joomla site to login, without having to use the Joomla Login module.
Sometimes, the Login module can get lost within your content such that users might get confused, and you'd want to create a Login page that only contains the Login form.
Fortunately, this is again very easy to do once you know how. You just need to create a link to the following address:
/index.php?option=com_users&view=login
This is the Joomla component that handles login / logout, and linking directly to will take you to a page that contains the Login Component. The Login module simply makes this component available through a Joomla module, to enable you to put a Login box.
Wrapping Up
As we can see the Joomla login is quite a versatile piece of functionality. Using the Joomla login together with ACL and the above tweaks you can create a rich and better user experience for your users.
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!
Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.
and many more ...