52

I was trying to download software from a website below (I white-outed the software name, etc.):

enter image description here

At first, I couldn't figure out which was the download button. The first button up top was painfully obvious as an ad. But the button on the bottom right corner was also somewhat suspicious and I did not dare click on it. There was a button on the button left under Reliability, but all it did was send some statistic to someone.

Eventually I figured out that the button on the bottom right was the download button. But it was much too hidden among the other ads on the server that it almost seemed to look like one of them.

Question is, is there a universally recognized "Download" button to put on websites that would not only be easily identifiable but easily distinguishable? If I do create a download page for any software I publish, is there a global icon I could use?

Clarification, universal means that people regardless of race, age, or gender, can easily identify and correlate the download icon with what it does, downloading something

Improve this question
13
  • 87
    If there were such a button, the advertisers would simply make their ads look like that.
    – user2357112
    Mar 20, 2014 at 5:31
  • 34
    Actually, these download-sites tend to be broken by design. The confusion you were describing is desired by them, because it raises the income via advertising.
    – Lars Ebert
    Mar 20, 2014 at 9:20
  • 32
    Ahh, life before I installed an ad blocker. Clicking on a download button was like playing minesweeper.
    – David
    Mar 20, 2014 at 15:09
  • 4
    @Vyger I disagree, and either way I'd argue that almost every question on here is opinion-based.
    – Jon
    Mar 20, 2014 at 19:10
  • 7
    The only way I can think to improve the UX for everyone is for people who understand these issues to act and report misleading adverts. The 'ad-choices' icon provides an opportunity to report misleading adverts back to some ad networks. This may impact the cost to the advertiser causing change. Also reporting back to the project team or website owner might cause change in project hosting service, advert selection or ad network selection. Reporting back to the project team or software developers about their choice of project hosting, might eventually cause change.
    – digitalsean
    Mar 21, 2014 at 12:58

9 Answers 9

Reset to default
58

There is no universal download button that, based on the language in your question, would make this particular situation any easier.

The first issue is that there simple is no "universal download" button, other that putting the word "download" (or some variation of) on the button. You can associate an icon with it, but any icon is at the mercy of the user's interpretation. Here are 3 perfectly valid icons from Font Awesome that can be associated with a download button, but none of them demand the user associate them with "download".

enter image description here enter image description here enter image description here

Absent the word "download" on the button, you are left to interpret the icons on the screen and take your best guess as to which one will do what you want.

The second issue is that the website in question has intentionally deceptive ads. This could be something the website is doing on purpose, or is not policing their ads well enough to prevent advertisers from including such deceptive ads.

The advertiser has looked at how the host page represents a file download and has deliberately created a deceptive button in an effort to get you click on it. Perhaps they have done a better job of actually creating a button affords a "download" action in your mind, in which case you'll click on it instead of the proper button.

The practice is generally known as a Dark Pattern. From the website DarkPatterns.org:

A Dark Pattern is a type of user interface that appears to have been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.

The website Malwarebytes has an article on the subject: Pick a Download, Any Download, in which they open with:

a new trend among these ads has emerged, adding an extra download button where there should not be one. Many users have been falling for this simple trick of putting in a big and shiny download button in ads as a method of tricking people into clicking it when they try to download the file they want. This trickery is not only annoying and confusing but also opens an avenue for redirects to malicious sites that can exploit your browser and infect you with malware.

So it is not a matter of the website not using a "universal" download icon, or there just not being a universal download button standard. It is advertisers purposefully attempting to confuse and lure the user into clicking on the ad, instead of the correct link.

Improve this answer
7
  • 11
    I can't express how much I hate the "cloud" as download button in the Apple app-store app. It's almost as stupid as how it was before (clicking the price)
    – Lovis
    Mar 20, 2014 at 11:56
  • 5
    The first button could be a "drop something in your cloud drive online", the second "build your source code" (like the icon in Visual Studio" and the third one simply a sign pointing downwards meaning "scroll down".
    – Ray
    Mar 20, 2014 at 12:09
  • 2
    @PacMani, indeed they are all relative to the user. The 2nd icon is Font Awesome's actual "download" icon, with the 1st being the "cloud download". But without the word "download", they have so many more meanings!
    – Nicholas Pappas
    Mar 20, 2014 at 14:40
  • 2
    @EvilClosetMonkey: Exactly! I wanted to point that out with my different understandings, but I think less experienced users may interprete the icons even more differently.
    – Ray
    Mar 20, 2014 at 15:32
  • 1
    The middle one seems the most common accurate representation to me, not saying it's not still open to misinterpretation.
    – Amicable
    Mar 21, 2014 at 15:56
17

The generic icon is just like you show – an arrow pointing downwards. Better context can be added by indicating that an item will be moved into something (a computer or hard drive on the more literal end, or a simple outlined box, are commonly used symbols). Conversely, you can add context by indicating that the file is coming from 'the cloud', a symbol that has become more popular recently to indicate a remote location (as opposed to a local one).

The problem you described though, seems like it's less about the appropriate representation of download indicators/icons, and more that the website you were on has what are referred to as 'dark patterns'. That is, the advertisers know you are on a file download site, and are dressing their ads up as download links to confuse you and get you to click on them. This is a wholly different issue, as they are intentionally trying to confuse you.

Improve this answer
3
  • 4
    "Dark Patterns" - I knew there was a word, when I was writing my reply, but could not think of it. That's it! Here is a website to go with it too: darkpatterns.org
    – Nicholas Pappas
    Mar 19, 2014 at 23:06
  • 1
    There are downward pointing arrows that aren't downvote buttons, now?
    – Joshua Taylor
    Mar 21, 2014 at 0:59
  • 2
    @JoshuaTaylor I was only trying to downvote that webpage, and it kept sending me files!
    – MarnixKlooster ReinstateMonica
    Mar 21, 2014 at 7:13
8

Although adverts can try and be deceptive, there are several way in which to make a download button seem more authentic:

  1. Keep the download button as far away from the advertisements you may have on your page, preferably amongst the download information, and with similar styled buttons.
  2. Make sure that your button is a scalable graphic. Adverts are usually just simple jpegs or pngs, which give you the opportunity to out-style them by looking like a uniform part of the website, rather than just your run-of-the-mill image/button.
  3. Add an onhover animation; again, this is to out-style the other buttons as they don't have the ability to hover just that one image (unless you happen to have very intrusive adverts in your site, in which case you have more pressing matters than just the button style).

As for the actual site that you're referring to, they are clearly doing this deliberately for ad-revenue:

  • The column between the download details and the actual download link are separated.
  • That whole column is dedicated to the download link, Yet it is place in an odd position, with a new font style.
  • It's of the same size as the advert, yet most of the size is taken up as filler text, giving the appearance of a competing (and failing) link, rather than a separate entity to the adverts.
  • A slightly different colour scheme for that button (the table is in a different shade of green, which is a mistake easily made by adverts too lazy to try and copy the real gradient).
Improve this answer
4
  • 6
    I would say: add the filename just below the button, and make it clickable as well. That's for me always the clearest seperation from ads.
    – yo'
    Mar 20, 2014 at 11:02
  • 1
    Agreed on filename, a simple icon next to the file name, all as one link. Gives unique contextual info that is difficult for the ad to mimick generically. Additionally, making the filename an actual <a> tag and leaving it styled as an a tag will allow it to be clicked even when the user has something like noscript installed. Experienced users will also look for these, as they will often want a real URL and a real link. An overly styled javascript enabled button that is not an actual link is going to be indiscernible from an ad phishing for clicks.
    – AaronLS
    Mar 20, 2014 at 21:44
  • 1
    +1 for trying to create an 'authentic' download button/option.
    – MarnixKlooster ReinstateMonica
    Mar 21, 2014 at 7:14
  • 1
    Proximity between the item a user wants to download and a download icon should be the most important factor here. There is no legitimate reason to separate out a download icon from the file name or description into a header or separate page element such as in the example. The designer was either incompetent or intentionally misleading users for revenue.
    – nvuono
    Mar 21, 2014 at 17:08
2

Less is more. If we ignore the terrible placement of the ads(a download page should probably be a place where ads are not allowed or should be text-only, but I realize that's a different topic), then the other problem IMO is the styling of the real download link, not the icon it is using. Regardless of what of the common icons you use for a download link, the text is not rendered using a font that is uncommon for links.

As you noticed, the actual download looks much like an ad image as well. The icon should be more minimal/utilitarian to avoid this. A simple icon and filename, with the whole thing as a real link with default styling is the most universally recognizable IMO, because you are using the styling universal to almost all browsers for a link. The filename will make it unique and make it more difficult for ads to mimick it as well. This also has the benefit of allowing savvy users to see the URL and still use the link even if they had noscript(as opposed to some link that's not a real link but responds via .click()) I think all of that will only appeal to more savvy users though.

For lay users, they are still likely to click the first "Download" they come to, regardless of how well you style the second link. You can style the real link all you want, but if your using a shady ad network and your ads are above your link, then IMO your putting revenue ahead of security. A lot of malware gets distributed through ad networks. You might see it very rarely, and instances of this might be shortlived, but a malicious ad doesn't have to be in circulation long to reach alot of users. Because the user was expecting to download an isntaller, they won't blink an eye when they run that installer and give it elevated admin permissions. Next thing you know it's set itself up as a service that runs on computer startup and does who knows what nefarious things.

Improve this answer
1

Despite using any recognizable download button, the Ad people are going to catch up with it and make it look as appealing as the one you use. I usually hover over the download button to make sure it doesn't lead to an ad. So I think it's a very good practice that the base URL for the file to be downloaded to be a familiar one(your website) - not some external server. That way users feel that the button downloads the content they want.

Please view @tohecz's suggestion on the comments above as well.

add the filename just below the button, and make it clickable as well

Improve this answer
2
  • 1
    Or, if it's just an icon "Download [FileName]".
    – Pierre Arlaud
    Mar 21, 2014 at 13:38
  • @ArlaudPierre good idea.
    – Alex
    Mar 21, 2014 at 15:00
1

What I would do is wrap the Download button close to my content. For example if you're downloading a software I would place the download button right after the product description so people can make that connection.

As for the icon an arrow pointing down is most commonly used to indicate "download".

Improve this answer
1

Semiotics is the study of signs and symbols and their use or interpretation. While the wiki entry relates to branding and not directly iconography, the same rules logically apply. "If the company is unaware of a culture’s codes, it runs the risk of failing"

Labeling the iconography should be based on the users' context NOT standards. While standards can help in general, its not a guarantee that users have a standard view or perception. So the ads are parasitically capitalizing on the users context.

Therefore, don't put ads on your software download page that might look like your own download button.

Also, buttons are frequently used to submit data to server (often via keyboard) so using a download link that reflects authenticity and quality would likely be your best bet.

Good luck, Ken

Improve this answer
-2

Over the years, the download icon has been simplified across various browsers and OS ranging from SmartPhones to Tablets and Desktops and other consoles.

Attached here is one of the most well known used designs for download icon.

enter image description here

Hope this helps in identifying the correct download icon.

Improve this answer
4
  • 9
    I wouldn't equate that example with download. It looks more like an arrow pointing at the price of something.
    – JonW ♦
    Mar 20, 2014 at 11:58
  • 3
    I apologize for being crass but that is an incredibly ugly (and outdated) download button. Glossy bevel and emboss lost its style 10 years ago. This looks like an Android 2.0 design language.
    – theGreenCabbage
    Mar 20, 2014 at 20:44
  • looks more like they all went down in the rankings of something...
    – jwenting
    Mar 21, 2014 at 15:16
  • Make that stem thinker. That'd do the trick
    – kBisla
    Mar 24, 2014 at 4:02
-2

well it seems logical... you fallow a decent and unique download button over your entire web site then users wont confuse

More specifically use a download button created by you and try to make it unique then users wont be confused (at least not in your web site ) with download button which is in the ads. and most of the advertiser use the most popular Download buttons which can be easily identified

as for newbie point of view it can't be helped they may not be able to detect the difference between the ads one and yours, but they will get along as they get experienced with the web ads...

Improve this answer
1
  • 3
    I don't agree that creating a unique download button won't confuse users. Quite the opposite actually- if they've never seen anything like it then they're not going to know what it does.
    – JonW ♦
    Mar 21, 2014 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.