Personnalisation d'une connexion Joomla pour une meilleure expérience utilisateur (redirections et plus)

Comment créer une expérience de connexion personnalisée pour les utilisateurs Joomla

L'expérience utilisateur est devenue un objectif majeur dans de nombreuses applications et sites Web. Joomla vous permet de créer une meilleure expérience utilisateur en personnalisant l'écran de connexion pour offrir une expérience spécifique à différents types d'utilisateurs. 

Dans cet article, nous discuterons de différentes façons d'effectuer une redirection de connexion Joomla pour diriger des types d'utilisateurs spécifiques vers des pages spécifiques.

Redirection de connexion Joomla

Le module de connexion Joomla est disponible sur la page d'accueil d'un site Joomla, que les exemples de données soient installés ou non. Lorsque vous vous connectez à l'aide de la boîte de connexion, le module de connexion vous dirigera par défaut vers la page d'accueil de votre site.

Cependant, vous pouvez changer cela en éditant les paramètres du module.

Cliquez sur Extensions> Modules et ensuite cherchez Connexion. 

Regardez les options de configuration ci-dessous. Vous pouvez voir que l'une des options est une page de redirection de connexion.

Nous vous expliquerons comment l'utiliser pour personnaliser l'expérience utilisateur.

configuration de connexion joomla

À l'aide de l'option Page de redirection de connexion ci-dessus, vous pouvez définir la page que la boîte de connexion doit envoyer à un utilisateur après sa connexion au site. À partir du bouton Sélectionner, vous pouvez choisir n'importe quelle page connectée à un élément de menu de votre site Web.

Si vous conservez l'option "Par défaut", l'utilisateur sera redirigé vers la page par défaut du site Web (généralement la page d'accueil).

Si la boîte de connexion est située très bas vers le bas d'une page, suffisamment loin pour qu'un utilisateur doive faire défiler, et si la boîte se trouve uniquement sur la page d'accueil du site (qui est l'endroit où le module de connexion redirige par défaut lors de la connexion ), alors il y a un risque de confusion.

L'utilisateur se connecte et voit ensuite le même écran sur lequel il se trouvait.

Les modifications suivantes peuvent être apportées pour améliorer l'expérience utilisateur:

  • déplacez la boîte de connexion en haut de la page autant que possible
  • effectuer une redirection vers une autre page en utilisant les paramètres ci-dessus afin que l'utilisateur sache que la connexion a réussi

Vous pouvez également créer un menu lien vers une page contenant un formulaire de connexion, si cela a du sens pour l'UX de votre site Web.

Pour ce faire, allez dans Menu - Menu principal (ou votre choix de menu) et Ajouter un nouvel élément de menu. Cliquez sur Sélectionner à côté de Type d'élément de menu et choisissez Utilisateurs> Formulaire de connexion situé. à droite L'écran de l'onglet Options contiendra les éléments ci-dessous:

Options des éléments du menu de connexion joomla

Cet écran de connexion redirige les utilisateurs vers leur profil par défaut, plutôt que vers une page spécifique du site Web.

Pour configurer la redirection vers une page spécifique du site, choisissez URL interne et entrez l'URL de cette page dans la zone Redirection de connexion. Vous pouvez également sélectionner un élément de menu vers lequel rediriger un utilisateur après sa connexion.

Lors de la connexion avec l'écran de connexion ci-dessus, voici ce que l'utilisateur voit avec les paramètres par défaut:

profil de l'utilisateur

3 façons d'améliorer l'expérience utilisateur de connexion / déconnexion Joomla

1.Utiliser systématiquement les redirections

Utilisez-vous à la fois le module de connexion et un lien de connexion sur votre site?

Assurez-vous que les deux connexions redirigent vers la même page, offrant la même expérience utilisateur quel que soit l'endroit où les gens se connectent. Vous pouvez également proposer le module de connexion ou un lien de connexion pour vous connecter au site, et assurez-vous qu'il redirige vers une page qui a du sens . Assurez-vous également que le module de connexion et le lien de connexion redirigent vers la même page lors de la déconnexion.

Même si vous n'utilisez qu'une seule option de connexion sur votre site, assurez-vous d'utiliser des redirections pour améliorer l'expérience utilisateur et indiquer clairement qu'une personne s'est connectée ou déconnectée du site Web.

Si votre site est un site d'adhésion, vous pouvez rediriger vers les cours disponibles. Si votre site est une boutique et que vous demandez à un utilisateur de s'inscrire, redirigez-le vers son panier ou vers la caisse.

2. Personnalisez la page d'accueil de connexion au groupe qui est connecté

Que faire si vous souhaitez que certains groupes d'utilisateurs voient différents messages lorsqu'ils se connectent? Et si les administrateurs devaient voir des messages spécifiques pour les administrateurs ainsi que leurs propres messages de connexion?

Joomla n'autorise qu'une seule page pour une redirection depuis le module ou la page de connexion. Dans cette interface, il n'y a aucun moyen d'indiquer spécifiquement que ceux qui sont étudiants devraient voir une page, tandis que les enseignants devraient en voir une autre.

Tout le monde voit la même page lors de la connexion.

Mais vous pouvez améliorer l'expérience en utilisant l'ACL de Joomla.

Voici comment nous avons mis en place une page de destination de connexion qui pourrait répondre à différents publics (par exemple, étudiant, enseignant, administrateur):

  • Configurez une catégorie pour la page de connexion et définissez le niveau d'accès sur Enregistré (c'est-à-dire que les trois audiences peuvent voir le contenu de la catégorie)
  • Maintenant, créez un article dans la catégorie. À l'intérieur de l'article, plutôt que d'entrer du contenu, entrez trois positions de module à l'aide de [loadposition]. Par exemple: [loadposition student], [loadposition teacher], [loadposition admin] (N'oubliez pas de changer les crochets par des accolades {}.)
  • Créez des modules pour chaque niveau d'accès, avec des postes d'étudiant, d'enseignant et d'administrateur (ou correspondant à votre code loadposition). Il peut s'agir de modules HTML personnalisés, qui peuvent contenir du contenu personnalisé pour chaque niveau d'accès.
  • Lorsqu'un visiteur arrive sur place, il verra le (s) module (s) personnalisé (s) selon le niveau d'accès de l'utilisateur.

Voici des instructions plus détaillées pour faire ce travail.

Assurez-vous que les utilisateurs font partie du groupe d'utilisateurs enregistrés.

Les utilisateurs de votre site se voient attribuer un ou plusieurs groupes d'utilisateurs.

Assurez-vous que l'un d'entre eux est le groupe d'utilisateurs enregistré, afin que tous les utilisateurs connectés puissent voir du contenu en commun. Les utilisateurs publics, qui sont des utilisateurs non connectés au site, ne pourront pas voir le contenu des utilisateurs enregistrés. 

Créez une catégorie, un article et un élément de menu pour la page de destination de connexion.

Créez une catégorie pour votre page de destination de connexion, peut-être avec un nom tel que Page de destination de connexion. Réglez le niveau d'accès de la catégorie sur Enregistré. (Les groupes d'utilisateurs étudiants et enseignants doivent faire partie du niveau d'accès Enregistré.)

Créez un article dans la catégorie. L'article doit contenir une position de module pour chaque niveau d'accès.

Créez un lien vers le menu dans le gestionnaire de menus, en choisissant Article unique comme type et en créant un lien vers l'article de votre page de destination de connexion. Réglez également le niveau d'accès de l'élément de menu sur Enregistré.

Si vous ne souhaitez pas qu'un lien vers la page de connexion apparaisse dans votre navigation, vous pouvez toujours utiliser la technique du menu caché pour masquer le lien.

Créez des modules avec différents niveaux d'accès

Créez des modules HTML personnalisés individuels dans le gestionnaire de modules. Pour chaque module, attribuez-lui un niveau d'accès et une position de module appropriés. Par exemple, créez un module pour le niveau d'accès étudiant avec une position d'étudiant, un pour le niveau d'accès enseignant avec un poste d'enseignant et un pour le niveau d'accès enregistré avec un poste inscrit.

Lorsqu'une personne se connecte ensuite au site, elle voit l'article, car elle fait partie du niveau d'accès Enregistré. Les modules qu'ils voient seront déterminés par le niveau d'accès du module. Dans ce cas, les étudiants peuvent voir uniquement le module étudiant, les enseignants peuvent voir les modules enseignants et étudiants, et les administrateurs peuvent voir les trois modules.

3. Créez un bouton de déconnexion facile à trouver

Lorsque vous vous connectez à votre site Web Joomla, le module de connexion se transforme en bouton de déconnexion. C'est génial si le module est affiché sur chaque page du site, mais souvent, le module ne peut être affiché que sur une page (ou une poignée de pages).

Cela signifie qu'un utilisateur devra revenir sur cette page pour se déconnecter du site. De même, s'il y a un lien de connexion sur le site, l'utilisateur doit revenir à la page de connexion (qui peut dire "connexion" dans la navigation, même s'il souhaite se déconnecter).

Ne serait-il pas génial d'avoir un bouton "déconnexion" sur chaque page du site?

Ou ne serait-ce pas génial si vous pouviez avoir un lien "déconnexion" dans la navigation?

Avec ACL, vous pouvez avoir les deux et vous devez les mettre en place pour une meilleure expérience utilisateur.

Changer le module de connexion pour qu'il fonctionne pour la déconnexion

Si vous souhaitez qu'un bouton "Déconnexion" apparaisse sur chaque page de votre site Web lorsqu'un utilisateur est connecté, mais que vous ne souhaitez pas afficher une zone de connexion sur chaque page du site, voici comment vous pouvez y parvenir .

Créez un deuxième module de connexion. Attribuez le niveau d'accès à Enregistré et faites-le apparaître sur chaque page du site.

Ce deuxième module de connexion n'apparaîtra que si quelqu'un est déjà connecté au site. Et lorsqu'ils sont déjà connectés, le module s'affiche sous la forme d'un bouton de déconnexion.

S'ils cliquent sur le bouton de déconnexion, le module ne s'affiche plus - car vous vous êtes déconnecté et vous ne faites plus partie du niveau d'accès Enregistré!

Si vous souhaitez qu'un lien de "déconnexion" apparaisse dans votre navigation, mais qu'il n'apparaisse que lorsque quelqu'un est connecté au site, voici comment y parvenir.

Créez un élément de menu du type de connexion. Le titre de l'élément de menu peut être Déconnexion. Définissez le niveau d'accès pour ce lien sur Enregistré.

Désormais, cet élément de menu n'apparaîtra que lorsque quelqu'un est connecté au site. Lorsqu'ils cliquent sur le lien Déconnexion, ils obtiennent une page avec un bouton de déconnexion sur lequel ils peuvent cliquer. Il s'agit d'un clic supplémentaire par rapport à la technique de module décrite ci-dessus, mais il peut être plus intuitif pour certains utilisateurs ou mieux fonctionner avec certaines conceptions de site. Vous n'aurez plus qu'à tester et voir ce qui fonctionne le mieux pour vous!

 

Personnalisation de la connexion Joomla pour différents utilisateurs

Afficher un module de connexion Joomla uniquement dans une page

Un dilemme récent que nous avons eu était de savoir comment faciliter la connexion des utilisateurs d'un site Joomla, sans avoir à utiliser le module de connexion Joomla.

Parfois, le module de connexion peut se perdre dans votre contenu, de sorte que les utilisateurs peuvent être confus, et vous souhaitez créer une page de connexion qui ne contient que le formulaire de connexion. 

Heureusement, c'est encore une fois très facile à faire une fois que vous savez comment faire. Il vous suffit de créer un lien vers l'adresse suivante:

/index.php?option=com_users&view=login

C'est le composant Joomla qui gère la connexion / déconnexion, et le lien direct vers vous amènera à une page qui contient le composant de connexion. Le module de connexion rend simplement ce composant disponible via un module Joomla, pour vous permettre de mettre une boîte de connexion.

Récapitulation

Comme nous pouvons le voir, la connexion Joomla est une fonctionnalité assez polyvalente. En utilisant la connexion Joomla avec ACL et les réglages ci-dessus, vous pouvez créer une expérience utilisateur riche et meilleure pour vos utilisateurs.

 

À propos de l’auteure
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

 

qui sommes nous?

CollectiveRay est dirigé par David Attard - travaillant dans et autour du créneau de la conception de sites Web depuis plus de 12 ans, nous fournissons des conseils pratiques aux personnes qui travaillent avec et sur des sites Web. Nous gérons également DronesBuy.net - un site Web pour les amateurs de drones.

David Attard

 

 

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...