35

Now days there are multiple viable share icons available, but they are mostly mobile OS specific (iOS, WP, Android...). I wonder which icon should I use for the web that most of the users would recognize?

Multiple share icons

Image source: https://bold.pixelapse.com/minming/share-the-icon-no-one-agrees-on

Has anyone done any A/B tests on how users respond to different ones?

Its a simple album page where you can get links for each album/image and then share it with a friend, nothing special, just popup on click of an icon.

Improve this question
14
  • 27
    Sometimes the answer can also be none, but whatever icon you choose, adding the word Share will almost certainly help.
    – Roger Attrill
    Jan 12, 2015 at 14:41
  • 5
    Opinion of course, but I'd say the third one is the most recognizable.
    – Doorknob
    Jan 12, 2015 at 19:09
  • 5
    I can't recommend it, but I sure wish a clean version of the old Android icon (4th) would've caught on. It seems like the most intuitive option used to date. My least favorite is Apple's new one -- it looks more like 'export' to me.
    – plainclothes
    Jan 12, 2015 at 19:40
  • 1
    @Doorknob: I was about to write the third one is the least recognizeable, but that may be because I've just been working with a software today where more or less exactly that icon was used to mean "connections" (between nodes, in a graph drawing context).
    – O. R. Mapper
    Jan 12, 2015 at 20:26
  • 10
    Have you considered not annoying your users with those useless sharing options ? If the content is worth sharing, it's very easy to copy/paste the URL into whatever social media client the user is using.
    – user42730
    Jan 13, 2015 at 1:17

7 Answers 7

Reset to default
17

Use the second or third icon.

If you read the article you took that image from (https://bold.pixelapse.com/minming/share-the-icon-no-one-agrees-on) you'd see that the author recommends using the second icon, the "Outgoing Tray" over the third "Three Dots" icon because the arrow helps convey sharing even to users who haven't seen the icons before and haven't learned each icon's meaning.

In either case you will want a "Share" label on the icon to make the intent obvious.

Improve this answer
5
  • 2
    I disagree with using the mobile icons for a web platform. As a web user who doesn't share anything via my phone, if I saw either of those icons on a website, I'd be completely flabbergasted at what they could possibly do.
    – Chase Sandmann
    Jan 12, 2015 at 21:33
  • Agree with this answer. Anecdotal of course, but I'd instantly know what two or three is doing (similar icons are used all over the place), and I've never seen most of the others. The first icon confuses me whenever I pick up the iPad we use for testing here at work. Literally every time. I think the direction of the arrow connotes something different to me than a share.
    – Mordred
    Jan 12, 2015 at 22:46
  • I like your suggestion. Also, the 3rd icons represent a connection between your users. Which also simbolizes (as a side effect) the act of sharing something between them, and consequently to others. To me, the 3rd one is a better choice than the 2nd. The 2nd is more like "send" and ultimately can be somewhat confused with "download". The 4th one is also a good choice, but it isn't "pretty" like the 3rd.
    – Ismael Miguel
    Jan 13, 2015 at 2:21
  • Well, using the second which is already now an out of date icon doesn't sound like the wisest of plans. Choosing the Android icon might be the best choice indeed if you really need an icon as the same icon is used in the material design icon set which I have been seeing pop up online more and more.
    – David Mulder
    Jan 13, 2015 at 2:51
  • 1
    I used to think the iOS icon meant "Forward" since it looked like the icon you would see in an email app (which was close enough to the real function), and I never used the Android one until someone told me what it did because I thought it related to "networking" or something similar. Again, with a label either icon is acceptable. The article also points out that the first icon resembles the "upload" counterpart to a "download" icon.
    – Nathan Rabe
    Jan 13, 2015 at 13:04
13

For websites, most places tend to just use icons like the ones below.

Share icons

This reference is from this article talking about adding them to a Blogspot.

In your case, if you're just sharing between one person, I would just use the word "Share" or the phrase "Share with a friend". It's clear, to the point, and easy for your user to understand. If you do want an icon of some kind, there is also the idea of a +(plus) sign that most users universally understand as a website "Share" button.

Improve this answer
5
  • 16
    Personally, I would not interpret a plus sign as "share". I would assume it meant "add" something. That "something" would depend on context (add a comment at the end of an article, add an attachment to a comment box, etc.), and there are many contexts where a "share" button makes sense while an "add" button would completely befuddle me.
    – Brian S
    Jan 12, 2015 at 20:07
  • 1
    Sometimes these can be slow to load because they use an iFrame. If that's a concern there are other ways to do this other than what is specifically linked to here.
    – Brad
    Jan 12, 2015 at 20:08
  • 1
    I almost went to refresh the page/go to a new page the second I saw those icons. I'm so used to seeing it at the bottom of the page, or at least the main content, my brain recognizes them as more of an "end of the page" signal than anything for actually sharing content.
    – Tylor
    Jan 12, 2015 at 20:57
  • Don't forget there are also privacy concerns... all these social media buttons track all users and even though they promise to respect Do Not Track (or at least, that's what Twitter is telling me) I wouldn't trust them.
    – user42730
    Jan 13, 2015 at 12:33
  • When I see the Facebook icon, I never know what will happen when I click on it. Or at least I am surprised most of the time what happens. Sometimes I get sent to the company's Facebook page (least likely option that I would want.), I might end up liking a particular post for a company (somewhat likely) or I might be given the option to post "it" ("it" hopefully means a post on my timeline linking to the web page I'm viewing), or sometimes nothing happens! Or it says I posted it on my timeline and it never shows up.
    – Mark Stewart
    May 24, 2016 at 15:56
2

No tests here but I would choose the android one (quite often used on different websites no matter the OS) If its multi sharing, the best choice is to let appear some social icons that everybody knows and use a "+" icon if you don't have enough space.

Improve this answer
1
  • Just out of curiosity, do you primarily use Android devices?
    – zeethreepio
    Jan 7, 2020 at 16:41
2

The last one seems best, but it's not very popular, so you can't really use it.

The second looks confusing, reminds me of emails, reply, outbox.

Improve this answer
2

There's surprisingly little data on this out there that I could find.

The only study I read about was Microsoft's, which doesn't provide concrete data. Microsoft says:

We looked at the icons users were seeing out in the wild and tested similar variations to see which icons best represented what it meant to share. We A/B tested them against the old share icon in the Photos app, with and without labels... The best performing icon was our new icon, a rectangle housing a swooping arrow that indicates motion out of the rectangle.

I assume that, as both the three-dot icon that Google popularized and Apple's upward-pointing icon are widely used, Microsoft tested those metaphors out too. And given that the Photos app is on every Windows 10 computer by default, I assume that these tests were on quite a large audience.

The icon they found best represented sharing was icon #2, with a right-pointing arrow.

An opinion piece on Co.Design agrees, though it doesn't have any data to back up its claim. I also find the arrow to be the most representative. It might be because a right-pointing arrow is similar to the forward icon in email clients, which serves basically the same function.

It's also telling that, even though it's not used on iOS anymore, it's still used by Facebook and YouTube (Google's own property) as the share icon, even on Android (as of Dec. 2017). It's also the icon metaphor that FontAwesome, a popular web icon pack, uses.

Improve this answer
1
  • 1
    In a comment on Microsoft's article, the UX designer behind the study notes that "... even though most people were most familiar with their own platform’s icon, there was also a leading candidate regardless of platform, which is the icon we landed on. :)" that means that Microsoft DID test the respective Android and iOS icons
    – Tin Man
    Dec 17, 2017 at 1:44
1

My preference is Font Awesome's share icon, which is pretty close to the second one in your list.

The logic being that Font Awesome is a really popular library, and if we all use it's share icon then users will instantly know what it means when they come to our website/use our app etc.

Improve this answer
1
  • 1
    I think it would be good to note that popularity of a library may not necessarily mean it should be used. It should be based upon the most widely used icons on sites. This also does not answer the question, have you conducted any A/B tests on user responses to icons?
    – 80gm2
    Jan 13, 2015 at 9:48
0

Sharing something is a rather abstract concept which can't really be encapsulated in an icon (at least based on all the examples seen so far). That's where the problem with all of these icons comes in; if you can't get the point of sharing across to a user in an icon, the icon won't mean anything unless it's explained, and that is not good design. Despite having seen (and clicked on) all of those icons before, I had absolutely no clue any of them were supposed to mean share until I read your question.

The point is, with any of these icons, you're very likely to have people who don't understand what the icon means. I would just go with a button that says "share". It's simple and straightforward, and no one will be able to misconstrue it. None of the icons given will get the point across to the user quite as well as the word "share" will.

Improve this answer

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