Amener les utilisateurs à utiliser le bouton de téléchargement au lieu de cliquer avec le bouton droit sur enregistrer
Dans le cadre de notre système, une application Web, nous avons une visionneuse d'images. Auparavant, nous avions toujours affiché l'image en pleine résolution mais réduite avec CSS pour s'adapter à la page. Pour des raisons de performances, nous affichons maintenant une version correctement mise à l'échelle de l'image avec la possibilité de télécharger l'image en pleine résolution avec un bouton sous l'image.
Dans le cadre du flux de travail des utilisateurs, ils doivent parfois télécharger cette image en pleine résolution pour la soumettre à un autre système. Le problème est que de nombreux utilisateurs font simplement un clic droit sur l'image et appuyez sur "enregistrer l'image sous". Cela fonctionnait bien, mais maintenant, il leur fournira à la place une image basse résolution. Les utilisateurs ne le remarquent pas et cela cause des problèmes plus tard. Comment pouvons-nous éloigner les utilisateurs de ce comportement? Bien sûr, nous pourrions leur dire de ne pas le faire, mais cela ne semble pas très évolutif. Jusqu'à présent, ma moins mauvaise idée est de détourner le clic droit dans le navigateur, mais c'est A) pas super sympa et B) pas sûr de couvrir tous les cas.
En bref: comment pouvons-nous amener les utilisateurs à utiliser le bouton de téléchargement au lieu d'enregistrer la vignette basse résolution?
Dès que l'utilisateur survole l'image, ajoutez une superposition qui lui permet d'appuyer sur le bouton de téléchargement.
Ceci est juste un exemple, vous pouvez rendre cela plus subtil mais je pense que cela fonctionnera bien avec le comportement actuel de vos utilisateurs. Puisqu'ils survolent l'image pour commencer leur "solution de clic droit" et verront l'option de téléchargement.
Vous devriez toujours avoir un bouton de téléchargement qui est visible sans avoir à survoler l'image juste pour être sûr.
Ne faites rien au clic droit. C'est un comportement attendu au niveau du navigateur. Vous savez que vous ne devriez pas "détourner" le clic droit ou vous ne l'appelleriez pas détournement.
Fournir aux utilisateurs un meilleur outil.
Si vos utilisateurs enregistrent eux-mêmes essentiellement des images en dehors de votre application, votre application ne doit pas les aider à enregistrer ces images. Personne ne veut enregistrer les images une par une.
Donnez-leur un moyen de sélectionner toutes les images qu'ils souhaitent et de télécharger toutes les images à la fois. Donnez aux utilisateurs un bon outil et montrez-leur comment cela fonctionne avant de vouloir enregistrer la première image. Donnez-leur une liste de téléchargement, facilitez l'ajout d'images, montrez-leur leurs images dans la liste et donnez-leur un moyen facile de les télécharger toutes dans un seul fichier à la fin.
Rendre les noms de fichiers image descriptifs
Rendez les noms de fichiers d'image informatifs. Vous pouvez communiquer avec les utilisateurs dans le nom de fichier. Mettez les dimensions dans le nom de fichier et incluez des catégorisations ou tout ce qui indique à l'utilisateur la taille de l'image dans votre système. Donc, si un utilisateur clique avec le bouton droit sur une image, le nom de fichier indiquera qu'il existe un meilleur fichier.
Nom du produit-miniature-petit-recadrée-basse-résolution-400x400.jpg
Product-Name-site-example-image-not-for-save.jpg
Les fichiers téléchargés correctement peuvent être nommés différemment.
Il y a une raison pour laquelle votre utilisateur ne sélectionne pas le bouton de téléchargement et les tests d'utilisabilité sont le meilleur moyen de déterminer pourquoi. Cependant, dans le cas où il s'agit de positionner le bouton de téléchargement à un endroit où un utilisateur pourrait sembler ou caché dans l'interface utilisateur, les options/exemples suivants peuvent aider:
- Vous pouvez ajouter une image de superposition de bouton de téléchargement (dans le coin inférieur droit) qui fournirait un repère visuel au bouton de téléchargement.
Icône par Freepik via Flaticon et image sélectionnée au hasard dans Unsplash.
- Et si vous souhaitez ajouter plusieurs résolutions à télécharger, vous pouvez adopter une approche similaire à ce que fait Flickr en affichant un popover avec une liste de résolution ( par exemple 600x400, 1200x600) options que l'utilisateur peut télécharger en cliquant sur le bouton de téléchargement.
Capture d'écran de Flickr.
En tant qu'utilisateur dédié au clic droit, je peux dire que je ne m'embêterais pas avec un bouton de téléchargement normalement, et je suppose que j'ai enregistré la version complète (et être légèrement ennuyé sur le site Web si je constatais que je ne l'avais pas fait). ).
Il y a deux problèmes ici. La première est que votre image n'est pas étiquetée (ou ne s'identifie pas) comme miniature. Si ce n'est pas le cas, alors je vais m'attendre à ce que ce soit l'image complète, et mon attente ne sera pas satisfaite. Mauvaise UX.
La seconde est que le correctif correct n'est jamais de détourner le clic droit. C'est encore plus ennuyeux.
Les suggestions de survol sont les plus proches ici. Dites à l'utilisateur qu'il s'agit d'une miniature, et permet de visualiser et/ou de télécharger (ou les deux) l'image complète.
Vous pouvez le faire subtilement, avec un symbole de pouce semi-transparent ou une flèche de rupture dans le coin de l'image, un symbole "vue complète" ou plein écran, ou en faisant n'importe quel clic sur l'image superposer une vue d'image de l'image complète avec les deux clic droit fonctionne et un bouton DL. Il existe de nombreuses façons de faire fonctionner ce système, comme en témoignent de nombreux sites Web.
Je voudrais montrer comment Wikipedia le fait.
Lorsque vous agrandissez une photo en cliquant dessus sur Wikipédia, vous êtes présenté avec la photo, quelques détails à son sujet et un bouton de téléchargement discret.
Lorsque vous faites un clic droit sur la photo affichée, le bouton "télécharger" est pressé pour vous, montrant "Télécharger le fichier original". 
Bien que ce ne soit pas la meilleure façon de le faire, cela montre un exemple de la façon dont vous pourriez le faire dans un autre scénario.
Beaucoup de bonnes réponses, mais voici une réponse KISS. Vous obtenez le meilleur des deux mondes - des temps de chargement et de rendu rapides et le comportement attendu.
<div style='background-image:url("/path/01-thumb.jpg");display:inline-block;'>
<img width=99 height=99 onmousedown='load(this,"/path/01.jpg")' ontouchstart='load(this,"/path/01.jpg")'>
</div>
<noscript>
<a href="/path/01.jpg">
<img title="click to get full image" src="download-button.png">
</a>
</noscript>
<script>
function load(o,s){
if (!o.src){
o.src=s;
/* todo: fix busy loop*/
while (!o.complete) /* act busy */;
}
}
</script>
Explication:
- Cela utilisera une miniature comme image background qui ne vous donnera pas de menu contextuel pour télécharger la miniature.
- La balise img vide (no src =) remplira la largeur et la hauteur spécifiées (n'hésitez pas à utiliser css à la place si elles sont toutes de la même dimension)
- L'événement onmousedown définit l'attribut src sur l'image en taille réelle avant que le menu contextuel n'apparaisse de sorte qu'il se comporte comme si l'image en taille réelle était chargée. (Notez que cela peut affecter la qualité d'image perçue en fonction de la mise à l'échelle du navigateur par rapport à la vôtre) J'ai ajouté l'événement ontouchstart pour gérer le mobile.
La balise noscript permet aux utilisateurs dont javascript est désactivé d'obtenir l'image complète sans déranger les autres utilisateurs. (Inspiré par réponse de MonkeyZeus )
Edit: J'ai ajouté une boucle occupée au javascript pour (essayer de?) Tenir compte des connexions lentes, mais il existe de bien meilleures façons d'attendre en fonction des bibliothèques que vous utilisez.
Il est difficile de répondre à cela sans un contexte visuel de ce à quoi ressemble le flux en ce moment, mais une façon de contourner cela est peut-être de fournir une fonction de zoom avant sur votre image. Lorsque l'utilisateur survole l'image, affichez le curseur de zoom avant pour invoquer l'utilisateur pour afficher l'image en pleine résolution (dans une superposition, chargez une nouvelle page ou un nouvel onglet, peut-être testez-le).
Une autre façon de procéder est d'avoir une superposition de liens sur l'image, qui en survol indique "télécharger l'image" et d'utiliser l'attribut de téléchargement du lien pour télécharger l'image source:
<a href="/images/myimage.jpg" download="MyImage">
J'espère que cela a suscité quelques idées. Sinon, vous pourriez peut-être fournir un peu plus de contexte sur la situation actuelle.
Une option consiste à redimensionner un div à la même taille que la miniature et à utiliser la propriété CSS background-image pour fournir l'image au lieu d'utiliser le traditionnel <img> tag. Cela rendra le clic droit impossible sans quoi que ce soit.
De plus, rendez le bouton de téléchargement visible et facilement cliquable.
Après quelques épisodes de "Oups, je suppose que je dois cliquer sur le bouton de téléchargement." vos utilisateurs apprendront à accepter que le bouton de téléchargement soit utilisé.
<div style="width:272px; height:92px; background-image:url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');">
<!-- pretend this is the thumbnail -->
</div>
<a href="#">Download full resolution image!</a> <!-- pretend this is a link to the full resolution image download -->
Exemple: https://jsfiddle.net/jryd5ubf/3/
Vous pouvez simplement essayer de renommer le bouton de téléchargement en quelque chose qui permet à l'utilisateur de savoir qu'il obtiendra une meilleure version:
- "Télécharger en haute résolution"
- "Télécharger l'image HD"
- "Télécharger l'image en pleine résolution"
- "Télécharger l'image en taille réelle"
- "Télécharger l'image originale" (bien que celle-ci puisse avoir une connotation négative, ils peuvent penser que c'est l'image avant les ajustements).
Vous pouvez ajouter la résolution et/ou la taille de l'image, comme "Télécharger l'image en pleine résolution (4000 x 3000 pixels, 5 Mo)"
Bien sûr, le bouton doit être clairement visible (c'est-à-dire pas besoin de faire défiler pour le voir, par exemple).
Si cela ne suffit pas, vous pouvez ajouter une superposition qui spécifie la taille de l'image actuellement affichée et indique à l'utilisateur qu'il y en a une meilleure:
Taille de l'aperçu: 1600 x 900. [Télécharger en taille réelle (4000 x 3000)]
ou
Affichage actuel: 1600 x 900. [Télécharger en taille réelle (4000 x 3000)]
Combien de sites Web avez-vous consultés pour télécharger un programme et avez-vous dû prendre un moment pour trouver le véritable bouton de téléchargement en raison d'annonces le mimant pour appâter vos clics?
Le clic droit/enregistrer l'image est commun à presque tous les navigateurs et sites Web, c'est un plan d'action fiable et digne de confiance. c'est le choix par défaut pour de nombreuses personnes, car vous savez ce que vous obtenez.
ne bonne UX est obtenue en fournissant le service que l'utilisateur attend quand il regarde votre interface utilisateur.
Si un clic droit/enregistrer l'image donnera le même résultat, ou un résultat "assez bon", alors ils continueront à le faire si c'est ce à quoi ils sont habitués.
Détourner leurs attentes en bloquant ou en subvertissant le menu contextuel du clic droit ne fera qu'affaiblir leur confiance dans votre site Web.
Ce que vous voulez faire, c'est fournir une raison tangible pour qu'ils appuient sur votre bouton.
S'il dit simplement "Télécharger", alors le processus de réflexion de l'utilisateur est "Télécharger quoi? Peu importe, peu m'importe, Clic droit/enregistrer l'image "
Si votre image est une vignette et que le bouton de téléchargement donne une version en pleine résolution, indiquez-le clairement et bien en évidence avec "Télécharger l'image HD" ou un texte similaire, car c'est la seule raison pour laquelle l'utilisateur se souciera de la façon dont vous voulez qu'ils utilisez votre site.
Du point de vue de la facilité d'utilisation, vos deux meilleurs choix sont:
- Revenez à ce que les images soient en pleine résolution, ou
- Détournez le bouton droit de la souris.
Aucune de ces options ne nécessite de recycler vos utilisateurs. Et vous êtes dans une situation où il est quelque part entre impraticable et impossible de recycler vos utilisateurs. Même si la plupart du temps, vos utilisateurs ont du mal à cliquer sur le bouton de téléchargement, ils glissent parfois. Les dérapages provoqueront de la frustration ou entraîneront la sauvegarde d'images de résolution inadéquate.
Vous avez formé vos utilisateurs à traiter l'image comme un bouton de téléchargement. Il s'agit d'un énorme bouton pratique à l'emplacement le plus évident possible - l'image elle-même. De plus, vous avez formé vos utilisateurs à s'attendre à ce que l'image soit la résolution nécessaire pour les processus suivants.
Il est peu probable que vos utilisateurs veuillent penser à la résolution de l'image, et encore moins penser à la résolution de l'image.
Pouvez-vous même imaginer un scénario où vos utilisateurs voudraient télécharger l'image à résolution réduite? Sinon, il importe peu que le détournement du bouton droit de la souris remplace la fonctionnalité du navigateur qui, par défaut, télécharge l'image à résolution réduite.
Si vous écriviez cette application en tant qu'application de bureau, que feriez-vous? Vous implémenteriez cette fonctionnalité sur l'événement de clic gauche de l'image ou sur l'événement de clic droit de l'image.
Nous retomberons toujours sur le détournement du clic droit, mais avec style.
Un visiteur/utilisateur qui clique avec le bouton droit sur une image veut certainement faire un "Enregistrer sous", pour limiter cela, au lieu d'un détournement qui implique une fonction complexe à exécuter, une simple courte durée info-bulle lors d'un clic droit en disant à l'utilisateur de "cliquer sur le bouton de téléchargement" va un long chemin pour encourager davantage l'utilisation de ce bouton pour télécharger des images . 
Ma recommandation est similaire à quelques autres - par exemple 120326 de Pectoralis Major , - dans ce il propose l'utilisation d'une superposition semi-transparente.
Cependant, la superposition n'est pas une fenêtre contextuelle affichée lorsque vous cliquez sur l'image ou lorsque le pointeur, le curseur ou le stylet survole l'image:
Afficher initialement la superposition semi-transparente lors du premier chargement de la page.
Derrière la superposition se trouve l'aperçu - si, d'une manière ou d'une autre, la superposition ne peut pas être semi-transparente, alors elle est opaque et masque partiellement l'aperçu.
Sur la superposition, vous pouvez avoir ces boutons:
- voir l'aperçu
- télécharger en taille réelle
Chaque bouton doit offrir un lien href, de sorte que vous puissiez accueillir tous les cliqueurs droit.
Cela devrait rendre vos dispositions évidentes et évidentes.
Comment demander à l'utilisateur de télécharger l'image en pleine résolution car le menu contextuel télécharge la miniature en basse résolution
a) Laisser l'utilisateur télécharger l'aperçu basse résolution, mais fournir un lien clair et visible vers l'image en pleine résolution
+ ------------------------------- + | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXX L'IMAGE XXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | + ----------------------------- - + [télécharger la pleine résolution]
b) Pour les utilisateurs inexpérimentés: évitez les icônes et les symboles. Soyez textuel, clair, simple et direct.
Les icônes et les symboles ne sont pas universellement compris. Ils rendent l'interface plus difficile à apprendre. Pour que l'utilisateur inexpérimenté comprenne ce que vous voulez dire, faites un lien avec une expression simple écrite et mettez en surbrillance les mots clés.
Les conceptions très artistiques peuvent être très néfastes pour la productivité et le travail. La plupart des sites orientés contenu ont une interface minimaliste. Prenons le stackoverflow comme exemple: il y a des icônes et des symboles, mais ils ne sont pas nécessaires pour lire les réponses, naviguer et répondre à une question.
c) Vous pouvez limiter les instructions pour apparaître sur l'image uniquement lorsque l'utilisateur sélectionne
Vous pouvez choisir d'afficher le lien de téléchargement uniquement lorsque l'utilisateur sélectionne l'image. Comme il apparaîtra près de l'endroit où l'utilisateur regarde, il attirera probablement son attention. Cela peut rendre la conception plus propre, mais l'inconvénient est que l'utilisateur doit sélectionner l'image pour savoir qu'elle peut être téléchargée en résolution plus élevée.
Ordinaire
+ ------------------------------- + | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | + ------------------------------- +
survol | mousedown | sélectionné | touché | concentrer
+ ------------------------------- + | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | | XXXX Cliquez pour télécharger la version complète | + ---------------------------- --- +
N'oubliez pas que les smartphones et les tablettes ne disposent pas de "onmouseover" et que les navigateurs ont différents ensembles d'événements pour la souris et l'écran tactile comme décrit par Coebergh . En utilisant onmousedown, pointerdown, touchstart, ondragstart et onfocus, vous allez probablement attraper l'utilisateur avant qu'il ne voie le menu contextuel. Mais je ne sais pas à quel point c'est stable. Je n'ai jamais implémenté cela parce que dans ma ligne de travail, les petits écrans ne sont pas une option.
d) remplacer le menu contextuel
Je vous conseillerais de ne pas remplacer le menu contextuel. Une interface de navigation standard est confortable pour l'utilisateur. Il permet à de nombreux utilisateurs d'effectuer certaines actions automatiquement sans réfléchir à cause de "mémoire musculaire" . Mais c'est une option. Si vous vous limitez uniquement à l'image, cela peut ne pas trop casser la navigation.
Lorsque l'utilisateur clique avec le bouton droit sur l'image , invitez-le à télécharger l'image dans différentes résolutions. Alors que normalement détourner le clic droit est une mauvaise idée, je pense que c'est la situation parfaite où c'est en fait une bonne idée!
De ma réponse StackOverflow la plus populaire , je voudrais suggérer cet extrait modifié (Remarque : exécutez-le localement, en dehors de JSFiddle pour le <a download> travailler):
