Get users to use the download button instead of right-click save

Question

As part of our system, a web application, we have an image viewer. Previously we always displayed the full resolution image but scaled down with CSS to fit the page. For performance reasons we now display a properly scaled version of the image with the option to download the full resolution image with a button under the image.

As part of the users' workflow, they sometimes need to download this full resolution image to submit to another system. The problem is that many users just right-click the image and press "save image as". This used to work fine but now it will instead provide them with a low resolution image. The users don't notice this and this causes problems further down the line. How can we force users away from this behaviour? Sure, we could tell them not to do it but that doesn't feel very scalable. My least bad idea so far is to hijack the right-click in the browser but this is A) not super nice UI and B) not sure to cover all cases.

In short: How can we get users to use the download button instead of saving the low-res thumbnail?

Answer 1

As soon as the user hovers over the image add an overlay which enables him to hit the download button.

This is just an example, you can make this more subtle but I think it will work good with your users current behavior. Since they will hover over the image to start their "right-click-workaround" and will see the download option.

You should still have a download button which is visible without having to hover over the image just to be safe.

Answer 2

Do not do anything to the right-click. It's an expected behavior on the browser level. You know you shouldn't "hijack" the right-click or you wouldn't call it hijacking.

Provide users with a better tool.

If your users are essentially saving images themselves outside your app, your app must not be helping them save those images. Nobody wants to save images one-at-a-time.

Give them a way to select all the images they want and download all the images at once. Give users a good tool and show them how it works before they would want to save the first image. Give them a download list, make it easy to add images, show them their images in the list and give them easy way to download them all in one file at end.

Make the image filenames descriptive

Make the image filenames informative. You can communicate with users in the filename. Put the dimensions in the filename and include categorizations or whatever that tell the user the image's size within your system. So if a user right-clicks an image, the filename will indicate that there is a better file.

Product-Name-thumbnail-small-cropped-low-resolution-400x400.jpg

Product-Name-site-example-image-not-for-saving.jpg

The files that are downloaded properly can be named differently.

Answer 3

There is a reason why your user is not selecting download button and usability testing is the best way to determine why. However in case it's a matter of positioning the download button in a place a user might look vs hidden some where in the UI, the following options/examples may help:

• You could add a download button overlay image (in bottom right corner) which would provide a visual cue to download button.

^{Icon by Freepik via Flaticon and image randomly selected from Unsplash.}

• And if you'd like to add multiple resolutions to download you could a take a similar approach to what Flickr does showing a popover with a list of resolution (e.g. 600x400, 1200x600) options the user can download when the download button is clicked.

^{Screenshot from Flickr.}

Answer 4

As a dedicated right-click-save user, I can say that I wouldn't bother with a download button normally, and I'd assume I saved the full version (and be mildly annoyed at the website if I found I hadn't).

There are two issues here. The first is, your image isn't labelled (or doesn't identify itself) as a thumbnail. If it isn't, then I'm going to expect it is the full image, and my expectation won't be met. Bad UX.

The second is that the correct fix is never to hijack right-click. That's even more annoying.

The hover suggestions are closest here. Tell the user this is a thumbnail, and provide a way to view and/or download (or both) the full pic.

You can do this subtly, with a semitransparent thumb symbol or breakout arrow in the corner of the image, a "view full" or fullscreen symbol, or by having any click on the image overlay an image view of the full image with both right click working and a DL button. There are many ways to make this work, exemplified on many websites.

Answer 5

I'd like to point out how Wikipedia does it.

When you enlarge a photo by clicking on it on Wikipedia, you're presented with the photo, some details on it, and an unobtrusive "download" button.

When you right click on the displayed photo, the "download" button is pressed for you, showing "Download original file".

Though this isn't the best way to do it, it does show an example of how you might do it in another scenario.

Answer 6

Lots of good answers but here is a KISS answer. You get the best of both worlds - fast load and render times and expected behavior.

<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>

Explanation:

• This will use a thumbnail as the background image which will not give you a context menu to download the thumbnail.

• The empty img tag (no src=) will fill the width and height specified (feel free to use css instead if they are all the same dimension)

• The onmousedown event sets the src attribute to the full size image before context menu appears so it behaves as if the full size image was loaded. (Note that this may effect the perceived image quality depending on the browser's scaling vs. yours) I added the ontouchstart event to handle mobile.

• The noscript tag provides a way for users with javascript disabled to get the full image without bothering other users. (Inspired by MonkeyZeus's answer)

  Edit: I added a busy loop to the javascript to (try to?) account for slow connections, but there are much better ways to wait depending on what libraries you are using.

Answer 7

It's difficult to answer this without a visual context of what the flow looks like at the moment, but one way to maybe work around this is to provide a zoom-in function on your image. When the user hovers the image, display the zoom-in cursor to invoke the user to view the full resolution image (in an overlay, load in a new page, or a new tab, maybe test this out).

Another way to go about this is to have a link overlay on the image, which on hover says "download image" and use the download attribute of the link to download the source image:

<a href="/images/myimage.jpg" download="MyImage">

I hope this has sparked some ideas. If not, maybe you could provide some more context of the current situation.

Answer 8

One option is to size a div to the same size as the thumbnail and use the CSS property background-image to supply the image instead of using the traditional <img> tag. This will make right-clicking impossible without hi-jacking anything.

Additionally, make the download button prominent and easily click-able.

After a few bouts of "Whoops, guess I need to click the download button." your users will learn to accept that the download button should be used.

<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 -->

Example: https://jsfiddle.net/jryd5ubf/3/

Answer 9

You could try simply renaming the download button to something that lets the user know they will get a better version:

• "Download Hi-Res"
• "Download HD image"
• "Download full resolution image"
• "Download full size image"
• "Download original image" (though this one may have a negative connotation, they may think it's the image before adjustments).

You may add the resolution and/or picture size, like "Download full resolution image (4000 x 3000 pixels, 5 MB)"

Of course, the button needs to be clearly visible (i.e. no need to scroll to see it, for instance).

If that's not enough, you can add an overlay that specifies the size of the image currently being shown, and lets the user know there is a better one:

Preview size: 1600 x 900. [Download full-size (4000 x 3000)]

or

Currently displaying: 1600 x 900. [Download full-size (4000 x 3000)]

Answer 10

How many websites have you been to where you wanted to download a program and had to take a moment to find the real download button because of adverts mimicking it to bait your clicks?

Right-click/save-image is common across almost all browsers and websites, it's a reliable and trustworthy course of action. it's the default choice for many people explicitly because you know what you're getting.

Good UX is achieved by providing the service the user expects when they look at your UI.

If right click/save-image will achieve the same result, or a "good enough" result, then they'll continue doing that if that's what they're used to.

Hijacking their expectations by blocking or subverting the right-click context-menu will only ever weaken their trust in your website.
What you want to do is provide a tangible reason for them to press your button.

If it just says "Download", then the user's thought process is "Download what? Never mind, I don't care, Right-click/save-image"

If your image is a thumbnail and the download button gives a full-res version, then indicate that clearly and prominently with "Download HD image" or similar text, because that's the only reason the user is going to care about how you want them to use your site.

Answer 11

From an ease-of-use point of view, your two best choices are:

• Revert to having the images be the full resolution, or
• Hijack the right-click button.

Neither of these options requires retraining your users. And you are in a situation where it is somewhere between impractical and impossible to retrain your users. Even if you put your users to the trouble of clicking the download button most of the time, they will sometimes slip up. The slip-ups will either cause frustration, or will cause inadequate-resolution images to be saved.

You have trained your users to treat the image as a download button. It is a huge, convenient button in the most obvious possible location -- the picture itself. Furthermore, you have trained your users to expect that the image is the resolution needed for the subsequent processes.

It is unlikely that your users want to think about the image's resolution, let alone do think about the image's resolution.

Can you even imagine a scenario where your users would want to download the reduced-resolution image? If not, then it does not matter that hijacking the right-click button overrides the browser's functionality that defaults to downloading the reduced-resolution image.

---

If you were writing this application as a desktop application, what would you do? You would implement this feature on either the image's left-click event or on the image's right-click event.

Answer 12

We'll still fall back on hijacking the right-click, but in style.

A visitor/user who right-clicks on an image definitely wants to do a "Save As", to curb this, instead of a hijack that involves some complex function to be carried out, a simple short duration tooltip upon right click telling the user to "Click the Download Button" goes a long way to further encourage the use of this button for downloading images.

Answer 13

My recommendation is similar to a few others — e.g. 120326 from Pectoralis Major, — in that it features using a semitransparent overlay.

However, the overlay is not a popup shown when the image is clicked or when the pointer, cursor, or stylus hovers over the image:
Initially show the semitransparent overlay when the page is first loaded.
Behind the overlay is the preview — if, somehow, the overlay cannot be semitransparent, then it is opaque and partially obscures the preview.
On the overlay, you can have these buttons:

• view preview
• download full size

Each button should offer a href link, so that you fully accommodate any right–clickers.

This should make your provisions obvious and forefrontly.

Answer 14

How to direct the user to download the full-res image because the context-menu downloads the low-res thumbnail

a) Let the user download the low-res preview, but provide clear and visible link to the full resolution image

+-------------------------------+
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXX THE IMAGE XXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
+-------------------------------+
       [download full resolution]

b) For unexperienced users: Avoid icons and symbols. Be textual, plain, simple and direct.

Icons and symbols are not universally understood. They make the interface harder to learn. For the unexperienced user to understand what you mean, make a link with a written simple expression and highlight the key words.

Very artistic designs can be very bad for productivity and work. Most content oriented sites have a minimalistic interface. Take stackoverflow as an example: there is icons and symbols, but they are not needed to read the answers, navigate and answer a question.

c) You may limit the instructions to appear over the image only when the user selects

You may choose show the download link only when the user is selecting the image. Since it will appear close to where the user is looking it will probably will catch his o hers attention. This may make a cleaner design, but the down side is the user has to select the image to know it can be downloaded in higher resolution.

Normal

+-------------------------------+
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
+-------------------------------+

mouseover | mousedown | selected | touched | focus

+-------------------------------+
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXX Click to download fullres |
+-------------------------------+

Remember that smartphones and tablets doesn's not have "onmouseover" and browsers have different sets of events for mouse and touchscreen as described by Coebergh. Using onmousedown, pointerdown, touchstart, ondragstart and onfocus you probably will catch the user before he or she sees the context menu. But I don't know how stable this is. I never implemented that because in my line of work small screens are not an option.

d) override the context menu

I would advice you not to override the context menu. A standard browsing interface is comfortable to the user. It allows many users to do some actions automatically without thinking due to "muscle memory". But is an option. If you limit only to the image, it may not break the navigation too much.

Answer 15

When the user right clicks the image, prompt them to download the image in different resolutions. While normally hijacking the right click is a bad idea, I think this is the perfect situation where it is actually a good idea!

From my most popular StackOverflow answer, I'd like to suggest this modified snippet (Note: run it locally, outside JSFiddle for the <a download> to work):