Hot answers tagged

651 votes
Accepted

Why do people not notice our enormous, prominent, clear and contrasting purple banner?

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 ...
291 votes

Why do people not notice our enormous, prominent, clear and contrasting purple banner?

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 ...
  • 1,718
185 votes
Accepted

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

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 ...
131 votes

Why do people not notice our enormous, prominent, clear and contrasting purple banner?

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 ...
  • 5,231
96 votes
Accepted

How to let a user know that an image is actually an animated GIF

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 ...
  • 2,566
73 votes

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

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 ...
  • 5,231
62 votes

Why do people not notice our enormous, prominent, clear and contrasting purple banner?

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 ...
  • 1,170
49 votes
Accepted

What is such a presentation of music cover art images called?

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 ...
47 votes

What is such a presentation of music cover art images called?

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 ...
  • 1,649
47 votes

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

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 ...
39 votes

How to let a user know that an image is actually an animated GIF

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 ...
36 votes

How to show user there's more photos behind a thumbnail image?

Stacks are an effective user interface method to indicate additional content behind what's currently visible. Some examples of stacks in different applications: Thumbnail Stacks Most likely closest ...
  • 3,868
34 votes

How to let a user know that an image is actually an animated GIF

From the non-technical users standpoint, it is a video. The lack of sound does not change that. No need to explain the difference - just say it will play a video when you press the button.
33 votes

Why do people not notice our enormous, prominent, clear and contrasting purple banner?

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 ...
  • 483
30 votes
Accepted

How to show user there's more photos behind a thumbnail image?

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 ...
26 votes

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

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'...
  • 369
24 votes

Readability of overlaid text on images

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 ...
  • 40.6k
24 votes
Accepted

How to arrange 3x2 thumbnails when their number is less than 6?

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 ...
24 votes
Accepted

Is alt text required for an image if the information is present elsewhere on the page?

Update to answer (original further down under "original answer" heading) - I title this amendment "Oh dear I goofed!" This question and answer has had a lot of traffic for some ...
  • 2,528
22 votes

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

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" ...
20 votes

Why do people not notice our enormous, prominent, clear and contrasting purple banner?

Can I suggest trying the Github ribbons. This is remarkably noticable and doesn't take away from the rest of the content. Have a ribbon for 'official' and 'homebrew' with differing colours.
  • 7,228
18 votes
Accepted

How to make perfectly clear that a user can interact with an avatar image?

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, ...
17 votes

Aesthetic way to hide ones face

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 ...
  • 8,281
17 votes

How to let a user know that an image is actually an animated GIF

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 ...
13 votes

How to make a button look disabled

I often make use of opacity to make the buttons like as disabled: button.buttonClassName:disabled { opacity: 0.3; } An example with your button pasted on stackoverflow and the same button with ...
  • 231
12 votes

Progressive vs. Optimized jpegs

Let's start with the difference between progressive and non-progressive JPEG files. Non-progressive JPG files ar not by definition smallers than progressive JPEG files. A rule of thumb found by Stoyan ...
12 votes
Accepted

Images look bad with perfect paragraph width

It's not easy to propose an answer without seeing all the visual page content. These are some general concepts. The design problem is not the text, in fact the statement of the question says that it ...
  • 16.2k
11 votes

Spinner vs Blur for image loading in 2017?

You should use the same approach in every one of the 3 cases. Using multiple approaches just confuses the user, so choose one feedback for image loading, not multiple feedbacks for different events. ...
10 votes

How to represent a translated formula in an accessible and visually clear way?

Your question reminded me of Math.Stackexchange You can go through different Q/A over there, you will find what exactly you are looking for. The solution to this is from both point of view, i.e. ...
  • 1,598
9 votes

Readability of overlaid text on images

It is hard to provide more legible information than black text on a white background but not all things are black and white so let's look at an example... 1. Images provide emotion Choosing anything ...
  • 15.8k

Only top scored, non community-wiki answers of a minimum length are eligible