This phenomenon is called banner blindness. Your labeling looks like a banner advertisement and is therefore subconsciously skipped. Users have been conditioned to ignore complete sections of content if their previous experience taught them that it always contains irrelevant stuff. The more attention the banner tries to pull, the more it's ignored. If you ...
The banner is beautiful but the style does not match the rest of the page.
You know what is everywhere on the Internet with unmatching graphic styles? Ads.
As others have said, the problem is that users are not considering it as part of the content. It appears to be an ad, so they skip it.
I think the crucial action to be taken is to integrate it deeply ...
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 ...
It's the design. Visually it's not part of the site or page. It's a square of content that doesn't belong to the site visually which indicates it's an advertisement to users.
Design the banner to be part of the site visually.
The most simple way is to design it out of its surrounding design. This makes it part of the site visually. Below is an example.
The fact that it's a GIF is really a technical detail and not relevant (or even comprehensible) for most users. What you need to convey to them is that there is more data available. Technically, it would probably even make more sense to use actual video rather than GIFs, depending on the size and content of the animation.
One option is indeed to overlay a "...
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 ...
As previously said, the banner is inducing banner blindness not despite but because it is so enormous, prominent, clear and contrasting purple. Also, its placement just above the content makes it easy to ignore. The reader starts reading at the headline. Anything above it is easily ignored.
Put all the "Homebrew" content into an own ...
It's called Cover Flow.
It's used by Apple in OS X (among others).
Cover Flow is an animated, three-dimensional graphical user interface
element that is integrated within the Macintosh Finder and other Apple
Inc. products for visually flipping through snapshots of documents,
website bookmarks, album artwork, or photographs.
See: Cover Flow
It's an ordinary Carousel with a fancy 3D touch to it.
Image source: Yahoo design pattern library
Carousels are often used on webpages, in this context a carousel often shows a single item at any given time and offers some sort of auto rotation function. Many think that using carousels on webpages (as header) is considered bad practice, for various reasons ...
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) ...
Yes your solution is good and will work, but it gets problematic if someday you introduce videos to your site.
Also if people see the Play-Button they expect a video (longer then a gif) which usually also provides sound and better quality.
You could use a facebook style approach for this.
If you want it more obvious for your user you could use "Play GIF" ...
Stacks are an effective user interface method to indicate additional content behind what's currently visible.
Some examples of stacks in different applications:
Most likely closest to what you're looking for. Additional thumbnails are hidden below, but with the edges visible to indicate their presence.
Similar to ...
I think your specification is already misguided:
that they MUST be on a desktop (or laptop) to properly use the system
Such classifications aren't what you actually care about. What matters are specific properties that make your site work well with the device or work badly/not at all.
If the properties are understandable for the end user, I'd mention ...
I think @Alan George approach is correct, I'll just add two possibilities thay could help the user to get the message easily:
Label + number: Because sometimes there's nothing better than being explicit
download bmml source – Wireframes created with Balsamiq Mockups
Showing quantity in the same place where "there are more pictures" is expressed ...
If you look at a Wikipedia article with a banner that's functionally not unlike yours (this article needs improving), you'll see there are a number of design differences. Namely:
The banner is part of the article, placed directly under the article's title
The banner is not as wide as the article, it's centered but slightly smaller than the article text.
You should use an empty alt attribute for images that are purely decorative. I'd argue that in the example you gave it is worth supplying an alt attribute that describes the image e.g. alt="Portrait of Jane Doe". @KitGrose mentions that including this text will also make the image searchable to image search engines such as Google Image.
I reserve empty alt ...
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 ...
Readability is hard to get right
Great question. It's always good to question the point at which style destroys function.
Example scrim formats
I've done quite a lot of user testing on scrim-based image captions (where there is a partial or complete semi-transparent overlay on the image and contrasting text).
Here's what I've found, in no particular ...
I would use the following layout:
For uneven amount of pictures (5, for example), I would display like this
For situations when only 4 pictures exist, I would display like this
For situations when only 2 pictures exist, I would display like this
The reason to choose this layout is based on the fact that the images are centered in relationship with other ...
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, ...
To create connection between image and description use the proximity principle from the set of Gestalt principles, giving less space to connect the elements and more space between chunks of information to separate. This gives good results both for above or below description placement.
To support information consumption flow, exploiting human's percertion, I'...
Why do they need to know what the server does? All they should need to know, is that the picture is ready soon. They should not have to press reload themselves, you could handle that for them.
You say there is an empty thumbnail while processing. That is a great start. All you need to do is to explain why it is empty, for example with a loading bar or ...
Have a default face to put instead of the 'blurred' person.
That way you could have actual faces, thus leaving the overall visual of the image, whereas a blur or pixelation would make it more obviously edited.
Note: I'm only half-serious about the solution, but if you do this you should obviously use a more neutral face like these.
Your current design may be lacking in a few areas. Generally, using icons alone leave a lot up to user interpretation and personal experience, even if it is as globally recognizable as the photo icon, or the pencil icon.
Here is an excerpt from the NN Group on Icon Usability;
Icons Need a Text Label
To help overcome the ambiguity that almost all ...
I would recommend using a broader term like "animation" instead of "GIF", which might be too technical and unnecessarily specific, especially for your target user base.
I think the appearance will depend on what you want. Maybe play the GIF automatically on mouse hover, or have a small "play animation" label in a corner of the product picture.
From a UX perspective - KEEP the bad images.
The user will want to know what they're buying and if the image is bad/stretched it still gives a certain % of the total information available. This gives the user an improved holistic view of their order. You may lose sales by removing the images if user's won't order without knowing, for example, what shade of ...
There a few common practices to consider:
Make the image appear button-like by giving it a raised appearance with drop-shadows. This helps imply the button can be depressed.
Alternatively, create the button effect by framing the image in a border (this can be hard to pull off aesthetically)
Ensure the image has a hover state that implies it can be ...
The zoom feature mainly came into the picture to allow users to examine a product in detail and overcome the challenges involved in actually being able to handle the merchandise before buying it.This is especially common in sites which sell products like clothes or products where users might want to get a closer look at the product before making a purchase. ...