{"id":295666,"date":"2019-09-20T07:17:47","date_gmt":"2019-09-20T14:17:47","guid":{"rendered":"https:\/\/css-tricks.com\/?p=295666"},"modified":"2019-09-20T07:17:47","modified_gmt":"2019-09-20T14:17:47","slug":"ux-considerations-for-web-sharing","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/ux-considerations-for-web-sharing\/","title":{"rendered":"UX Considerations for Web Sharing"},"content":{"rendered":"<p>From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these buttons aren\u2019t needed. All mobile browsers \u2014 Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet \u2014 make it easy to share content directly from their native platforms. They all feature a built-in button to bring up a &#8220;share sheet&#8221; \u2014 a native dialog for sharing content. You can also highlight text to share an excerpt along with the link.<\/p>\n<p><!--more--><\/p>\n<figure id=\"post-295675\" class=\"align-left media-295675\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/share-button-collage.png?ssl=1\" alt=\"A collage of various share buttons from sites across the web.\" data-recalc-dims=\"1\" \/><figcaption>The ubiquitous share button, as seen at the BBC, Wired, BuzzFeed, PBS, The Wall Street Journal and elsewhere.<\/figcaption><\/figure>\n<p>Given that users can share by default, are custom buttons taking up unnecessary space and potentially distracting users from more important actions? And do people actually use them? <\/p>\n<p>A (unscientific) poll of 12,500 <a href=\"https:\/\/css-tricks.com\/poll-results-sharing-buttons\/\">CSS-Tricks readers<\/a> found that 60% of its readers <em>never used custom share buttons<\/em>. That was in 2014 and native methods for sharing have only improved since then. A more recent poll from Smashing Magazine found much the same thing.<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">How often do you use social sharing buttons on your mobile device?<\/p>\n<p>&mdash; Smashing Magazine (@smashingmag) <a href=\"https:\/\/twitter.com\/smashingmag\/status\/1164825977987297282?ref_src=twsrc%5Etfw\" rel=\"noopener\">August 23, 2019<\/a><\/p><\/blockquote>\n<p> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script> <\/p>\n<p>Users come with varying technological proficiency. Not everybody knows their way around there own mobile phone or browser meaning some users would struggle to find the native share button. It\u2019s also worth thinking about what happens on desktop. Desktop browsers generally (with Safari as one exception) offer no built-in sharing functionality \u2014 users are left to copy and paste the link into their social network of choice.<\/p>\n<p>Some data suggests that <a href=\"https:\/\/www.lukew.com\/ff\/entry.asp?1852\" rel=\"noopener\">clickthrough rates are relatively low<\/a>. However, clickthrough rates aren\u2019t the best metric. For technically savvy users aware of how to share without assistance, the buttons can still act as a prompt \u2014 a visual reminder to share the content. Regardless of how the link is ultimately shared, a custom share button can still provide a cue, or a little nudge to elicit the share. For this reason, measuring click rates on the buttons themselves may not be entirely fair \u2014 people may see the button, feel encouraged to share the content, but then use the browsers built-in share button. A better metric would be whether shares increase after the addition of share buttons, regardless of how they\u2019re shared. <\/p>\n<p>We\u2019ve established that having a share button is <em>probably<\/em> useful. Websites have traditionally featured separate buttons for two or three of the most popular social networks. With a new-ish <abbr>API<\/abbr>, we can do better. While <a href=\"https:\/\/caniuse.com\/#feat=web-share\" rel=\"noopener\">browser support<\/a> is currently limited to Chrome for Android and Safari, those two browsers alone make up the vast majority of web traffic.<\/p>\n<h3>The Web Share <abbr>API<\/abbr><\/h3>\n<p>The Web Share <abbr>API<\/abbr> offers a simple way to bring up a <em>share sheet<\/em> \u2014 the native bit of UI that\u2019s used for sharing. Rather than offering a standard list of popular social networks to share to (which the user may or may not be a member of), the options of the share sheet are catered to the individual. Only applications they have installed on their phone will be shown. Rather than a uniform list, the user will be shown only the option to share on networks they actually use \u2014 whether that be Twitter and Facebook or something more esoteric. <\/p>\n<p>Not showing the user irrelevant networks is obviously a good thing. Unfortunately, this is counterbalanced by the fact that some users visit social media websites rather than downloading them as apps. If you use twitter.com, for example, but haven\u2019t installed the Twitter application natively, then Twitter will not be listed as a sharing option.  Currently, only native apps are listed but <abbr title= \"Progressive Web App\">PWA<\/abbr>s will be supported in the future.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">websharebutton.addEventListener(\"click\", function() {\r\n  navigator.share({\r\n    url: document.URL,\r\n    title: document.title,\r\n    text: \"lorem ipsum...\"\r\n  });\r\n});<\/code><\/pre>\n<p>The <abbr>API<\/abbr> requires user interaction (such as a button click as shown in the above code) to bring up the share sheet. This means you can\u2019t do something obnoxious like bring up the share sheet on page load.<\/p>\n<p>The text might be a short excerpt or a summation of the page. The title is used when sharing via email but will be ignored when sharing to social networks. <\/p>\n<figure id=\"post-295676\" class=\"align-left media-295676\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/share-button-android-ios.png?ssl=1\" alt=\"Comparing the share sheets of Android and iPhone.\" data-recalc-dims=\"1\" \/><figcaption>Native sharesheet dialog on Android (left) and iOS (right). The apps listed here are dependent on which apps you have installed on your device.<\/figcaption><\/figure>\n<h3>Sharing on desktop<\/h3>\n<p>While we are pretty happy with the Web Share API for mobile, its implementation for desktop is currently limited to Safari and leaves a lot to be desired. (Chrome is planning to ship support eventually, but there is no clear timescale).<\/p>\n<figure><video src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/09\/share.mp4\" controls><\/figure>\n<p>The provided options \u2014 Mail, Message, Airdrop, Notes, Reminders \u2014 omit social networks. Native apps for Twitter and Facebook are common on phones, but rare on other devices. <\/p>\n<p>Instead of relying on the Web Share API for desktop, its relatively common to have a generic share button that opens a modal that offers more multiple sharing options. This is the approach adopted by YouTube, Instagram and Pinterest, among others. <\/p>\n<figure id=\"post-295678\" class=\"align-left media-295678\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/share-youtube-instagram.png?ssl=1\" alt=\"Comparing Instagram and YouTube share options on desktop.\" data-recalc-dims=\"1\" \/><figcaption>Instagram (left) compared to YouTube (right)<\/figcaption><\/figure>\n<p>Facebook and Twitter account for the vast majority of sharing online, so offering an exhaustive list of social networks to choose from doesn\u2019t feel necessary. (An option for Instagram would be ideal, but it is currently not technically possible to share to Instagram from a website.) It is also relatively common to include an email option. For anyone using a web-based email client like gmail.com or outlook.com rather than the operating system\u2019s default email application, this is problematic. <\/p>\n<p>Many people make use of web-based email client\u2019s gmail.com or outlook.com. A share-by-email button will open the operating system\u2019s default email application. Users will be greeted by a prompt to set this up, which is far more effort than simply copy and pasting the URL. It is therefore advisable to omit the email option and instead include a button to copy the link to the clipboard, which is only infinitesimally easier than doing a copy in the address bar with the keyboard.<\/p>\n<figure id=\"post-295679\" class=\"align-left media-295679\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/share-mac-email.png?ssl=1\" alt=\"Screenshot of the share options offered by Mac's email application, including iCloud, Exchange, Google, Yahoo and AOL.\" data-recalc-dims=\"1\" \/><figcaption>A prompt to set up the default email application on Mac<\/figcaption><\/figure>\n<p>Prompting the user to set up an application they never use is far more effort than simply copy and pasting a URL into my preferred email client.  <\/p>\n<h3>Choosing a share icon<\/h3>\n<figure id=\"post-295680\" class=\"align-left media-295680\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/share-icons.png?ssl=1\" alt=\"Grid of various share icons in different variations.\" data-recalc-dims=\"1\" \/><figcaption>There have been plenty of other share icons over the years.<\/figcaption><\/figure>\n<p>There is no universal standardized share icon \u2014 far from it. While the Android symbol might not be recognizable to long-term iPhone users, the iOS icon is problematic. It is identical to the download icon \u2014 but with the arrow in the opposite direction, which would imply uploading, <em>not sharing<\/em>. <\/p>\n<p>Where I work at giffgaff, we polled 69 of our colleagues on whether they recognized the current <abbr>iOS<\/abbr> icon or the current Android icon as representing sharing. The Android icon was an overwhelming winner with 58 votes. While our sample did include iPhone users, some long-term iPhone users may not be familiar with this symbol (even though it has been adopted by some websites). Then there is the forward arrow, an icon that was abandoned by Apple, but adopted elsewhere. Reminiscent of the icon for forwarding an email, this symbol has been made recognizable by its usage on youtube.com. The icon was <a href=\"https:\/\/medium.com\/microsoft-design\/the-iconography-of-sharing-183a1ad9c6f1\" rel=\"noopener\">adopted by Microsoft<\/a> in 2017 after A\/B testing found a high level of familiarity.<\/p>\n<p>It\u2019s also possible to take a contextual approach. Twitter will change the icon used depending on the platform of the user. This approach is also taken by the icon library <a href=\"https:\/\/ionicons.com\/usage\/\" rel=\"noopener\">Ionicons<\/a>.<\/p>\n<figure id=\"post-295681\" class=\"align-left media-295681\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/share-twitter-variations.jpg?ssl=1\" alt=\"Showing the same tweet on both Android and iOS\" data-recalc-dims=\"1\" \/><figcaption>Android (left) and Mac\/iOS (right)<\/figcaption><\/figure>\n<hr>\n<p>Given the lack of a universally understood icon, this seems like a good approach. Alternatively, make sure to include a label alongside the icon to really spell things out to the user.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these buttons aren\u2019t needed. All mobile browsers \u2014 Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet \u2014 make it easy to share content directly from their native platforms. [&hellip;]<\/p>\n","protected":false},"author":245300,"featured_media":295687,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[932,1660],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/sharing-icons.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":15072,"url":"https:\/\/css-tricks.com\/sharing\/","url_meta":{"origin":295666,"position":0},"title":"Sharing","date":"November 17, 2011","format":false,"excerpt":"I just added \"The Big Three\" sharing buttons to articles on this site: Twitter, Google Plus, and Facebook. I've shared my thoughts on sharing buttons like this in the past. I essentially decided that I didn't like them for this site. So before anybody skewers me for hypocrisy, I thought\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288685,"url":"https:\/\/css-tricks.com\/how-to-use-the-web-share-api\/","url_meta":{"origin":295666,"position":1},"title":"How to Use the Web Share API","date":"June 6, 2019","format":false,"excerpt":"The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content \u2014 say a link\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-share-api.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":172208,"url":"https:\/\/css-tricks.com\/poll-results-sharing-buttons\/","url_meta":{"origin":295666,"position":2},"title":"Poll Results: Sharing Buttons","date":"June 9, 2014","format":false,"excerpt":"A poll has been running here regarding sharing buttons. We asked it this way: This best describes how I share links on my social media site(s) of choice: 12.5 thousand CSS-Tricks visitors voted. The results are in! Here are the choices and results: 60% I don't ever use sharing buttons.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":166456,"url":"https:\/\/css-tricks.com\/new-poll-sharing-buttons\/","url_meta":{"origin":295666,"position":3},"title":"New Poll: Sharing Buttons","date":"March 21, 2014","format":false,"excerpt":"Throughout the life of this site, I've flipflopped (nope, yep) on whether or not I show social sharing buttons on articles. As anything, there are arguments in either direction. We can cover that briefly, but I also want to gather a bit of data on the subject, so that will\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311116,"url":"https:\/\/css-tricks.com\/radio-buttons-are-like-selects-checkboxes-are-like-multiple-selects\/","url_meta":{"origin":295666,"position":4},"title":"Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects","date":"May 20, 2020","format":false,"excerpt":"I was reading Anna Kaley's \"Listboxes vs. Dropdown Lists\" post the other day. It's a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons (single select) or checkboxes (multiple select) if you're showing five\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/radio-checkbox-select.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345404,"url":"https:\/\/css-tricks.com\/safari-15-opinions\/","url_meta":{"origin":295666,"position":5},"title":"Safari 15 Opinions","date":"July 28, 2021","format":false,"excerpt":"It was interesting that when Safari 15 was dropping at this last WWDC, in my circles at least, I mostly heard enthusiasm. Like the colors-in-the-browser-controls stuff was a neat trick and fun to play with. And there were other more serious features, like iCloud Private Relay, which were near-universally applauded\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/safari-15-tabs.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/sharing-icons.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295666"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/245300"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=295666"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295666\/revisions"}],"predecessor-version":[{"id":295737,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295666\/revisions\/295737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/295687"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=295666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=295666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=295666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}