Est-ce que "user-select: none" est une mauvaise UX?
J'avais une discussion aujourd'hui avec un collègue. Je lui ai montré "user-select: none" - une propriété CSS qui empêche un utilisateur de sélectionner du texte.
Pour moi, cette propriété a permis de créer une expérience plus semblable à une application sur une page - en veillant à ce que des événements comme le double-clic ne provoquent pas de sélection de texte sur des zones qui ne seraient pas sélectionnables dans une application (comme les options d'une barre de navigation) , éléments de sélection personnalisés, étiquettes, etc.).
Mon collègue n'était pas d'accord sur le fait qu'il ajoutait du poli et a suggéré que les utilisateurs devraient pouvoir sélectionner et copier n'importe quel texte dans une application Web.
Quel est le consensus à ce sujet dans une perspective UX. Devrions-nous essayer de faire en sorte que les sites ressemblent davantage à des applications? Ou le Web devrait-il ressembler au Web - ce qui signifie que nous ne changeons pas les comportements par défaut comme celui-ci?
Il existe un moyen simple d'approcher user-select: none, et c'est de poser une seule question:
La sélection du texte serait-elle l'interaction principale/secondaire qu'un utilisateur aurait l'intention de toucher à l'écran, ou serait-ce un obstacle à la tâche qu'il tentait d'accomplir?
Les carrousels d'image (aimez-les ou détestez-les) en sont un exemple fantastique. Dans une interface tactile, que voulez-vous, en tant que personne essayant d'interagir avec le carrousel, que vous souhaitiez lorsque vous appuyez votre doigt au-dessus de l'un et que vous faites glisser vers la droite ou la gauche? Souhaitez-vous que le carrousel pivote ou souhaitez-vous sélectionner l'image sous votre doigt?
Si un élément d'image de carrousel individuel est sélectionné par accident lors du défilement, pouvez-vous même le désélectionner, ou vous est-il maintenant présenté un élément sélectionné qui peut faire autre chose si vous essayez de le toucher pour le désélectionner (comme la navigation de page, si le img élément est enfermé dans un a élément)? Ou, en fonction de la disposition des divs qui composent la structure du carrousel, avez-vous maintenant sélectionné en quelque sorte un calque supérieur qui laisse un surlignage de sélection sur chaque image? (J'ai vu tout cela se produire dans des implémentations de carrousel mal codées)
De manière générale, il s'agit d'un cas où vous souhaitez que l'ensemble d'objets présenté fonctionne comme un contrôle de navigation (liste glissante d'images) et si le navigateur interprète le toucher comme une commande de sélection, il interférerait avec ce rôle et rendrait l'interaction avec votre contrôle frustrant.
L'objectif de l'emploi de user-select: none doit toujours se limiter à réduire la frustration de l'utilisateur à l'égard de involontaires sélections résultant d'interactions qui peuvent facilement les provoquer lors de la tentative de réaliser la tâche principale d'un contrôle sur lequel il est utilisé.
"Qu'en est-il de la protection de mon contenu contre les personnes qui le copieront en le sélectionnant!?" vous pourriez être enclin à demander. La réponse à cela sera toujours: non. Non seulement ce pauvre UX, mais il est aussi absurdement inutile. Quiconque souhaite vraiment copier votre contenu y a toujours accès; vous venez de rendre plus frustrant l'accès, ce qui les rendra moins enclins à se soucier de savoir si ce qu'ils font est éthique: vous encouragez essentiellement le désengagement moral et permettez à leur schéma d'évaluation d'équilibrer leurs schémas d'éthique normaux contre leur frustration avec vous, en réduisant le seuil de la dissonance cognitive dans l'auto-justification d'un acte comme la copie de votre contenu.
user:select none n'est jamais un facteur de sécurité. Ne l'utilisez jamais en espérant atteindre un niveau de sécurité plus élevé contre la violation du droit d'auteur/etc. Votre contenu est toujours là dans la source (et il est toujours assez facile de prendre des captures d'écran, ce qui serait encore plus difficile à trouver si vous tentiez de détecter une infraction).
Vous ne devez jamais utiliser user-select: none pour empêcher la sélection du texte du contenu. Le navigateur lui-même est chargé de décider entre le défilement et la sélection dans ce cas et doit être invoqué pour faire son travail correctement en discernant l'intention de l'utilisateur entre les deux actions potentielles (sélection ou défilement). Bien qu'il y aura toujours des exceptions, gardez à l'esprit que ces deux actions sont des interactions attendues globalement cohérentes. En interférant avec eux, votre application ne se comportera probablement pas de la manière attendue, ce qui est une source principale de frustration.
Personnellement, je dirais que vous êtes sur la bonne voie avec vos exemples d'utilisation.
Je voudrais seulement mettre en garde que user-select: none est un instrument très tranchant à utiliser uniquement en fonction de besoins précis. Bien que cela puisse ajouter du raffinement, veillez à ne pas l'utiliser quelque part où votre sélection de contexte semble inutile, mais qui pourrait en fait être quelque chose qu'une personne utilisant votre application voudrait pouvoir sélectionner pour une raison donnée, et où être capable de le sélectionner n'interférera pas autrement gravement avec l'interaction prévue en tentant d'exécuter la tâche principale exposée par le contrôle.
Les dialogues d'erreur modaux en sont un bon exemple. Il peut être tentant de les rendre non sélectionnables afin que toute interaction les supprime, ou une justification similaire pour ce qui est censé être une expérience simplifiée d'une certaine sorte, mais cela peut être extrêmement frustrant si quelqu'un est confronté à une erreur et veut regarder il ou le signaler au support, mais ne peut pas facilement le copier pour le faire. Toujours pécher par excès de prudence et une légère touche lors de l'affectation et en particulier lors de la suppression des modes d'interaction standard fournis dans un environnement donné.
En général, je dirais que chaque fois que quelque chose est (ou inclut) du contenu informatif - comme l'exemple de message d'erreur - plutôt qu'une action de contrôle qui ne contient aucune nouvelle information, dans presque tous les cas, elle ne devrait pas avoir user-select: none s'y est appliqué. Cela est particulièrement vrai lorsque ce contenu n'est pas présenté sous une forme sélectionnable ailleurs sur le même écran ou sur un écran étroitement lié. Il y aura toujours des exceptions, mais je vous préviens qu'il est généralement préférable de réévaluer la façon dont vous implémentez quelque chose et de trouver une méthode de contrôle différente de celle d'appliquer user-select: none où le contenu est présenté au lieu de simples mots d'action/termes génériques/etc.
Certaines personnes diraient que (certaines) applications mobiles ont supprimé le degré auquel il s'agit d'une interaction standard. Je dirais que dans le contexte le plus large et le plus global, il s'agit toujours d'une interaction standard et bon nombre de ces applications ont probablement dégradé leur expérience utilisateur en le faisant, ou ont simplement été bâclées dans leur programmation en ne leur permettant pas de faire des sélections (comme est parfois le cas, au lieu de les désactiver spécifiquement).
En particulier, lorsque nous présentons une application via un autre agent (tel qu'un navigateur Web), il est important de laisser l'agent utilisateur préserver autant que possible ses propres méthodes d'interaction de contenu. Non seulement cela accroît la conformité et la cohérence de l'expérience utilisateur, mais il améliore également la compatibilité multiplateforme/agent, et aide même à assurer la vérification et la fonctionnalité futures dans des cas d'utilisation ou des environnements que vous n'avez peut-être pas prévus personnellement.
En général, vous ne devriez pas l'utiliser globalement.
Souvent, les utilisateurs sélectionnent du texte, peut-être pour mettre en surbrillance quelque chose pour montrer une partie du texte à un ami, pour copier du texte ou pour marquer le texte juste pour pouvoir mieux le lire (ce que je fais quand le texte est assez large et c'est difficile de suivre l'habillage du texte dans la phrase).
Cependant, il existe de très bons exemples où c'est une bonne option.
Un bouton
Si vous autorisez un utilisateur à sélectionner le texte d'un bouton, il peut penser qu'il a cliqué sur le bouton, désactivez donc l'effet de surbrillance de la sélection sur le bouton.
règle CSS pour désactiver la mise en surbrillance de la sélection de texte pour une meilleure UXUne page avec du code dessus
Vous souhaitez copier le code, mais pas les numéros de ligne, désactivez donc la mise en surbrillance uniquement sur les numéros de ligne.
Un site où vous pouvez faire glisser les pages horizontalement pour naviguer.
Si vous autorisez l'utilisateur à sélectionner le texte, la navigation devient vraiment délicate.
Cependant, si vous avez un tel site, ne mettez pas de contenu dessus. Parce qu'un contenu en texte riche doit être sélectionnable.
Une bonne solution ici serait de créer un site de titre qui peut être glissé horizontalement vers la page de titre suivante. Pour afficher le contenu, vous devez appuyer sur un bouton et passer à la page de contenu.
Vous avez également parlé de "l'expérience de l'application", et oui c'est vrai, vous pouvez rarement copier du texte. Ce que je trouve personnellement vraiment ennuyeux, c'est lorsqu'une application ne vous permet pas de copier ou de mettre en évidence du contenu; par exemple, les publications dans l'application Facebook — cela vous permet de copier un commentaire entier répondant à une publication, mais encore une fois, ne vous permettra pas de mettre en évidence des mots individuels.
Vous devez décider si vous souhaitez désactiver la mise en évidence. Si la mise en surbrillance du texte ne nuit pas à la convivialité (par exemple, le déplacement horizontal), je ne la désactiverais pas, d'autant plus que les utilisateurs de bureau sont habitués à pouvoir copier du texte.
Mieux: améliorez l'expérience de la mise en évidence du texte.
Medium.com vous donne plusieurs options, ce que vous pouvez faire avec le texte en surbrillance:
Pensez simplement à ce que l'utilisateur fera de votre texte. Soutenez l'utilisateur avec ses besoins.
Cependant, vous pouvez également l'aggraver, comme Google Fonts:
Il y a des gens comme les "lecteurs de sélection". Je suis l'un d'eux. J'ai (pour une raison que je ne connais pas consciemment) tendance à sélectionner du texte pendant que je le lis. Les sites qui m'en empêchent me rendent très triste et gâchent mon expérience utilisateur.
Je suis également totalement en désaccord avec le point de savoir quelle est actuellement la meilleure réponse. Ces choses qui apparaissent chaque fois que vous sélectionnez quelque chose ennuient également sérieusement les lecteurs de sélection.
Arrêtez d'essayer de faire des choses comme des applications! Mon ordinateur n'est pas un téléphone! Je ne veux pas me limiter aux seules actions que je peux effectuer sur un téléphone lors de l'utilisation de votre site!
Pour en savoir plus: http://blogs.msdn.com/b/oldnewthing/archive/2015/05/28/10617693.aspx
Ne pas être en mesure de sélectionner du texte est la propriété CSS la plus ennuyeuse et la moins conviviale qui existe actuellement sur les sites Web modernes.
Les raisons:
- N'essayons pas de faire comme si notre site Web ne l'était pas. Ce n'est pas une application mobile et la raison pour laquelle vous ne pouvez pas sélectionner de texte dans une application est qu'il n'est pas dans une zone de texte et n'est donc pas censé être sélectionné pour une raison.
- L'écosystème mobile est complètement différent du système PC "power user". La plupart des gens qui utilisent des sites Web sur leur ordinateur veulent faire du travail - ou faire pratiquement tout ce qu'ils ne pouvaient pas faire sur leur appareil mobile en raison de la LIBERTÉ la souris et le clavier leur donne.
- Je ne vois aucune raison pour laquelle quelqu'un empêcherait quelqu'un de copier du texte. Si vous allez être si ennuyeux et m'empêcher de le faire au niveau utilisateur, je vais simplement plonger un peu dans le code HTML, copier ce dont j'ai besoin et NE JAMAIS UTILISER VOTRE SITE WEB ENCORE.
Je sais que c'est un peu trop dramatisé - mais s'il vous plaît ne le faites pas.
edit: Cela ne signifie pas que le fait d'avoir des boutons ou des étiquettes avec du texte qui n'a aucune raison réelle d'être copié avec cette propriété est faux, c'est en fait souhaitable.
Il y a beaucoup de contextes dans lesquels c'est bon UX, et beaucoup où c'est mauvais UX - il n'y a pas de réponse universelle.
Lorsque vous signalez dans votre question un bouton ou une action qui, lorsque vous cliquez dessus, met le texte en surbrillance, n'est pas une bonne expérience utilisateur, et il y aura probablement très peu de circonstances où un utilisateur devrait avoir besoin de mettre ce texte en surbrillance.
Cependant, les corps de texte ne doivent pas être désactivés - s'il y a une interaction qui met ce texte en surbrillance, il peut être nécessaire de le reconsidérer - car il n'est clairement pas approprié pour le support.
Et comme indiqué ailleurs, vous ne devez jamais désactiver la mise en évidence de tous le texte. Si vous allez le faire, cela devrait être très sélectif (boutons, essentiellement).
Jouer avec des fonctionnalités d'application standard (par exemple, sélectionner du texte dans un navigateur) est une mauvaise idée dans presque tous les cas ... l'utilisateur s'attend à effectuer n'importe quelle action qu'il a effectuée. Ils ne peuvent pas, car vous l'avez cassé - ergo, vous n'avez pas répondu aux attentes des utilisateurs. Aussi simple que cela.
Règle de base personnelle:
- Dans tous les cas, la désactivation de la mise en surbrillance du texte est incroyablement stupide. Même si vous pensez que personne ne voudra jamais le mettre en évidence, vous ne savez jamais. Vous seriez surpris de ce que les gens font.
- La désactivation de la mise en surbrillance lors de la mise en surbrillance d'une manière ou d'une autre rompt l'interface utilisateur est une bonne chose. Rare, mais cela peut arriver. "Casse l'interface utilisateur" pourrait être des choses comme
- vous permet de faire défiler lorsque vous ne devriez pas pouvoir
- donne à l'utilisateur une fausse impression (par exemple qu'il peut faire quelque chose d'impossible)
Il n'y a qu'un seul contexte où j'ai trouvé cette fonctionnalité utile, et c'était dans le contexte de n je.
J'avais une zone de jeu avec laquelle le joueur interagissait avec la souris. Sur cette aire de jeu se trouvaient des objets avec des étiquettes de texte. Parfois, le joueur voulait cliquer sur un objet, mais marquait le texte dans l'étiquette à la place. C'était mauvais car ce n'était pas ce que l'utilisateur voulait faire. Réglage user-select: none sur les étiquettes de texte a résolu le problème. C'était une bonne idée.
Si je travaille seul, j'aime le désactiver par défaut et l'activer de manière sélective.
Je pense que la sélection du texte d'un élément de menu ou du titre d'un bouton n'ajoute pas beaucoup de valeur au produit final et parfois les interactions des utilisateurs peuvent corrompre la conception en ajoutant des arrière-plans étranges aux nœuds de texte. (Peut-être y a-t-il un côté de l'utilisabilité que je ne connais pas?)
Le seul cas où je pense que la sélection de texte pourrait être utile est quand il y a du texte informatif, comme sur un document ou un magazine, ou que le but de la page est de présenter du texte.
Cependant, lorsque je travaille sur une équipe, je pense que ce n'est pas correct, car cela remplace la manière par défaut qu'un navigateur délivre une page, et les nouveaux membres de l'équipe doivent savoir à l'avance des informations inutiles qui pourraient provoquer des bogues? (Je ne peux pas penser en ce moment aux bugs qui pourraient être causés par cette propriété).
Comme chaque fonctionnalité, si vous en prenez soin et que vous savez ce que vous faites, il ne devrait pas y avoir de problèmes insolubles et critiques.