Dans les menus de hamburgers, la «déconnexion» devrait-elle toujours être en bas et pourquoi?
Je l'ai remarqué lors de l'utilisation de sites Web qui nécessitent une connexion/déconnexion - je m'habitue à accéder au bouton "Déconnexion" en bas du menu. Par exemple:
Dans le menu burger, l'option de déconnexion sera toujours en bas, et généralement la ligne supérieure du menu est principalement "Détails" ou "Informations sur le compte". "
Hier soir, j'ai ouvert le site Web Steam et j'ai cliqué sur le bouton ">" pour étendre le menu. La mise en page est un peu différente, et j'ai accidentellement cliqué sur le bouton "Déconnexion" par réflexe, car (par habitude) je pensais que c'était un menu "Détails" car le lien est sur la première ligne. Voici une capture d'écran:
Donc oui, je n'ai pas l'habitude que le bouton/lien "Déconnexion" soit tout en haut de ce type de menu. Cela m'a fait me demander, ma question est:
Quelle est la théorie de base pour cette position du bouton "Déconnexion" dans les menus avec des lignes? Doit-il toujours être à la "fin" car il montre (techniquement) le panneau de sortie? Et pourquoi, par exemple, le site Web Steam place-t-il le bouton "Déconnexion" dans la position opposée? Est-ce lié à d'autres habitudes ou tendances?
PS: Excusez mon anglais, j'essaie d'articuler mes pensées dans une grammaire limitée.
Je pense que Steam n'a tout simplement pas remarqué ce problème.
Voici quelques raisons de placer le bouton de déconnexion au bas de la liste déroulante:
- Évitez les déconnexions accidentelles - comme vous l'avez souligné, le fait de placer la déconnexion en haut de la liste pourrait créer des déconnexions accidentelles pour les utilisateurs qui ont l'habitude de double-cliquer sur les éléments.
- Suivez les normes - lorsque vous naviguez sur Internet, les utilisateurs commencent à avoir quelque chose, comme une mémoire musculaire, pour les différents éléments d'une page Web. Dans votre cas, vous avez développé une attente (mémoire musculaire) que la déconnexion réside au bas de la liste des contrôles utilisateur. Étant donné que la plupart des sites ont adopté cette norme, vous devez la suivre afin d'éviter les déconnexions accidentelles.
- Le haut et le bas d'une liste sont les plus visibles - lorsque vous avez une liste, les éléments les plus visibles sont le haut et le bas (- voir ici ).
- Signification - lorsqu'une personne s'est connectée, il est logique de répertorier l'option de déconnexion comme dernière, car la déconnexion est généralement la fin d'une certaine tâche.
Rendre plus difficile la recherche de boutons destructeurs
Si vous avez besoin d'inclure des boutons destructeurs, vous devriez certainement trouver un moyen de les rendre plus difficiles à trouver que le bouton d'action principal Meilleures pratiques pour les boutons
Il est très important pour les entreprises de maintenir l'intérêt des utilisateurs pour leurs produits et personne ne veut leur donner un accès facile aux utilisateurs pour quitter leur application ou cesser d'utiliser leur produit.
Voici un exemple parfait de Pinterest qu'ils ont vraiment rendu plus difficile à trouver sur leur site Web:
Flux utilisateur
Considérez chaque élément de menu comme une tâche. Vous pouvez effectuer des tâches de manière séquentielle, comme task1, task2, task3.... taskN. Quelle serait la toute dernière tâche que vous puissiez effectuer? La réponse est simple: déconnexion.
Ergonomie de l'application
En ajoutant le lien de déconnexion en bas du menu, il est plus difficile de cliquer accidentellement sur cet élément. Voir le graphique ci-dessous:
Une fois que vous ouvrez le menu, si vous ajoutez la déconnexion en haut et double-cliquez par accident, vous cliquerez sur le lien de déconnexion.
Cependant, si vous l'ajoutez en bas, chaque élément de menu réduira les chances de les rendre négligeables . De plus: entre le deuxième et le septième élément, il faudra un effort supplémentaire de l'utilisateur pour atteindre la déconnexion , ce qui bien sûr réduit les chances de toucher ce bouton en accident presque à 0. Ainsi, il est recommandé que la déconnexion ne dépasse pas le 6ème ou le 7ème élément. Plus que cela, il y aura des compromis: les pouces atteindront l'élément plus facilement qu'auparavant et les utilisateurs peuvent oublier de se déconnecter en cas de besoin.
Bien sûr, la taille (hauteur) dépendra des tests en fonction de votre choix de polices, du remplissage, etc. Mais aussi de la destination de votre application: vous ne voudrez pas toujours que les utilisateurs se déconnectent après la fin d'une session. Mais vous devez quand même offrir l'option
Conclusion
C'est fait de cette façon parce que c'est une norme acceptée qui apporte des avantages à peu près sans frais
À ma connaissance, le bouton de déconnexion est le bouton dans la liste déroulante qui a une action différente du reste.
Le reste des détails de votre compte de menu, les préférences, le profil d'affichage, etc. sont des éléments de navigation pour l'utilisateur, mais le bouton de déconnexion est une action qui obligerait l'utilisateur à se déconnecter du système.
Ce qui est sûr, c'est que les éléments de déconnexion et de navigation doivent être séparés, car ils ont un comportement différent.
En plaçant la déconnexion au bouton, je dirais que c'est un moyen de les séparer mais aussi une convention car beaucoup d'applications l'utilisent de cette façon.
J'ai aussi trouvé cette question qui est aussi très intéressante: Placement du bouton/lien de déconnexion? qui est très bien connecté à celui-ci Pourquoi un site web cacherait-il le bouton de déconnexion?
En masquant la fonctionnalité de déconnexion, vous êtes plus susceptible de simplement fermer le navigateur ou l'onglet, mais de rester effectivement connecté à un service. Cela permet à Facebook de suivre ouvertement vos allées et venues en ligne via des partenariats publicitaires qui font tous rapport à Facebook.
Enfin, j'aime vraiment la séparation claire de l'option Déconnexion, par rapport au reste, comme par exemple Jira. Je pense que c'est beaucoup plus clair que de simplement l'afficher au bas de la liste déroulante.
Meilleure expérience utilisateur: suivez les clics et commandez les articles de la liste en fonction des préférences des visiteurs.
Résultat: le bouton de déconnexion peut venir en premier.
Meilleure expérience d'entreprise: Commandez les articles selon le meilleur intérêt de l'entreprise.
Résultat: le bouton de déconnexion doit être difficile à atteindre.
Tout dépend de l'importance de la déconnexion pour votre solution et des objectifs des utilisateurs.
Lorsque vous disposez d'une liste de fonctionnalités, vous pouvez les évaluer en fonction de leur pertinence par rapport aux tâches que l'utilisateur effectue.
La déconnexion est rarement liée aux tâches principales de la solution, c'est pourquoi la position de déconnexion est souvent placée vers la fin de la hiérarchie des informations, donc si vous avez un menu vertical, vous le voyez souvent placé en bas, et si vous avez un menu horizontal, il est souvent placé à la fin (à droite dans la culture occidentale).
Cependant, certaines solutions peuvent considérer la déconnexion comme un cas spécial digne de le placer dans un endroit bien en vue, par exemple persiste dans le coin supérieur droit (les coins de l'écran sont des emplacements bien visibles).
En fin de compte, la position variera en fonction de l'importance pour l'utilisateur de se déconnecter explicitement.
Vous pourriez faire valoir que la déconnexion est si différente de toutes les autres fonctionnalités qu'elle ne devrait pas être placée dans un menu à côté des autres fonctionnalités de la solution.
Placer le bouton de déconnexion au bon endroit est contextuel. Pour les applications sécurisées, il doit être visible dans l'en-tête à l'extérieur du menu hamburger. Pour d'autres, il peut être dans le menu hamburger. Probablement en haut si l'utilisateur préfère se déconnecter à chaque fois, et en bas s'il est moins utilisé.