Comment : copier dans le presse-papiers sur le Web
Comme j'écrirai de nombreux guides de code et articles contenant des extraits de code sur cette application Web progressive, il est essentiel que les tâches suivantes soient couvertes par l'utilisateur :
- grande lisibilité du code
- action simple et claire pour copier le code encapsulé
C'est la ligne de fond qui est requise pour des exemples de code utiles. Mais puis-je l'améliorer?
Améliorer l'engagement
Pour améliorer la fonctionnalité de copie dans le presse-papiers de mon application, j'ai réfléchi à la manière de rendre le clic sur le bouton de copie plus amusant, car une expérience utilisateur agréable (UX) a pour effet secondaire de stimuler l'engagement.
J'ai proposé ce qui suit : et si l'application "répondait" de manière similaire à un chat chaque fois que l'utilisateur copie dans le presse-papiers ? L'expérience serait instantanément plus personnelle. Utilisant un langage arrogant et sarcastique, les messages fournis ont également un caractère unique.
Voyons le résultat final :
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
Comme vous pouvez le voir, la hiérarchie est ainsi de haut en bas :
- Imiter une fenêtre native avec des contrôles de fenêtre
- contenu
- actions (au moment de l'écriture, uniquement la copie dans le presse-papiers)
La mise en oeuvre
Chaque fois que l'utilisateur copie le code dans le presse-papiers, une sélection aléatoire à partir d'un tableau prédéfini d'extraits de texte s'affiche pendant une courte période. Le choix aléatoire est généré pour chaque exemple de code. Pour réduire la complexité, il n'est pas garanti que le texte soit unique dans la portée de l'article. Pourtant, parce qu'il y a beaucoup de chaînes parmi lesquelles choisir, les collisions ont une faible probabilité.
Et c'est à peu près tout ! J'espère que vous aimez cette petite amélioration UX pour les actions de copie dans le presse-papiers, peut-être qu'elle vous a également inspiré pour les changements UX dans votre propre application !
- Tom
