UX Considerations for Web Sharing

From simple news sites to sophisticated online publications, share buttons are a common sight. However, their necessity is debatable. Modern mobile browsers (Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet) offer built-in sharing functionality via a "share sheet," eliminating the need for custom buttons in many cases. You can even share text excerpts alongside links.

Given this native functionality, do custom share buttons merely clutter the interface and distract users? Do people even use them?

Surveys suggest otherwise. A 2014 CSS-Tricks poll indicated 60% of respondents never used custom share buttons. Later Smashing Magazine polls revealed similar results. Native sharing methods have only improved since then.

However, user tech proficiency varies. Some may struggle to locate the native share button. Desktop sharing is also a factor; most desktop browsers (except Safari) lack built-in sharing, requiring manual copy-pasting.

While click-through rates on share buttons are low, this isn't the best metric. For tech-savvy users, the buttons act as a visual reminder to share. Even if users utilize the browser's share sheet instead, the custom button serves as a prompt. A better metric would be whether overall shares increase after adding share buttons, regardless of the sharing method.

Therefore, share buttons are likely beneficial. Traditionally, websites included buttons for a few popular social networks. The Web Share API offers a more elegant solution. Though currently limited to Chrome for Android and Safari (covering a significant portion of web traffic), it leverages the native share sheet. Only the user's installed apps appear, avoiding irrelevant options.

This is excellent, but it has a drawback: users accessing social media via websites (not apps) won't see those options. Currently, only native apps are supported, but PWAs will be included later.

websharebutton.addEventListener("click", function() {
  navigator.share({
    url: document.URL,
    title: document.title,
    text: "lorem ipsum..."
  });
});

The API requires user interaction (like a button click) to activate the share sheet, preventing automatic pop-ups. The "text" parameter can be an excerpt or summary; the "title" is used for email but ignored by social networks.

Desktop implementation is currently limited and less satisfactory. Safari offers limited options (Mail, Message, Airdrop, Notes, Reminders), omitting social networks. Chrome plans to add support, but the timeline is unclear.

For desktop, a modal with multiple sharing options is common (as seen on YouTube, Instagram, Pinterest). Focusing on Facebook and Twitter (the most popular) seems sufficient. Instagram sharing isn't currently possible from websites. Email is often included, but problematic for users of web-based email clients (gmail.com, outlook.com). These users are better served by a "copy link" button.

Forcing users to configure an unused email application is more cumbersome than simply copying and pasting a URL.

Choosing a share icon presents another challenge. There's no universal standard. The Android and iOS icons are not universally recognized, and some icons are easily confused (e.g., the iOS share icon resembles the download icon). At giffgaff, internal testing showed the Android icon was overwhelmingly preferred. Contextual icons (like Twitter's platform-specific icons) or clear labels alongside icons are recommended.

The above is the detailed content of UX Considerations for Web Sharing. For more information, please follow other related articles on the PHP Chinese website!