Design share interaction

@jenniferthibault commented on Fri Aug 12 2016

Since we are advancing the data visualization and the Missives pages, the "coming soon" share interaction is a common missing link. @onezerojeremy and I discussed this week that it's time to determine what this interaction should be.

Relevant open issues:

Completion criteria:

[ ] Figure out if there is a single "share" interaction for all instances or if it varies
[ ] Low- or medium-fidelity interaction design for each step of all interactions
[ ] Design for both desktop and mobile

@noahmanger commented on Mon Aug 15 2016

Just updated the first comment with completion criteria. Also, to catalogue all instances where we've thought about adding share interactions:

On data table pages:

With visualizations:

On the missives pages:

The task here really is to figure out if these all share the same interaction, and what those interaction(s) should be. When designing, think about:

The different ways to share: embedding image, embedding iframe, sharing a link
Different aspects of a shared link, such as the preview image that shows up on facebook and twitter
Whether the current state of something is preserved when sharing

@nickykrause commented on Thu Aug 25 2016

I'm not yet used to GitHub and don't know if sharing my notes makes sense in this context, but I will do so anyway:

Some research & reflection: (Caveats: perhaps not the best sources, and not at all comprehensive…)

How often are social share buttons used, anyway?

Depends...but some gov folks say that it’s not very often, for them:

e.g., GOV.UK: “During the time period we analysed, GOV.UK URLs were shared a total of 14,078 times to Facebook and Twitter using our sharing buttons - that’s 0.2% of the total of 6.8 million pageviews.”

e.g., digital.gov: “On our main website, GAO.gov, we have sharing buttons on the summary pages of our reports and testimonies, as well as on our topics pages. Similar to our neighbors in the U.K., we found these sharing rates were generally low.”

http://www.lukew.com/ff/entry.asp?1852

Low on mobile:

“Moovweb studied 61 million mobile sessions and discovered that 99.8 percent of mobile users never engage with social share buttons. In fact, mobile users are 11.5 times more likely to click ads than they are to click social share buttons...”

What makes share features the most useful?

Good placement
Available when relevant - beginning of content, end of content, sticky alongside content
Particularly share-able content -- Some ppl recommended separating out “quotable” or “tweetable” statements or statistics from whole articles, in order to encourage sharing. (This seems like an editorial that would be tricky or even inappropriate in our context?) -- From GOV.UK:

“It’s interesting to see, by the way, that these most popular stories are straightforward, factual explanations of changes to government schemes, or report significant data releases”

When the content to be shared can help users accomplish sharing goals: (a) To look smart / informed, (b) To entertain others, (c) To establish /communicate a certain identity or personality (d) To be useful to their peers, (e) To look cool -- Seems like A, C, D are perhaps most relevant for us

When there is well-designed meta info so that a useful image is included

What are some of the downsides of share features?

There’s some evidence that offering too many share options makes shares go down -- Limit to most-used...Facebook, Twitter, probably, unless your niche calls for others (e.g., recipe sites use Pinterest)
Users might be uncomfortable with “branded” share experience (Facebook, Twitter, etc.) -- Not much evidence for this, but it was inspired by this comment on a discussion thread: “@iA We noticed in usability testing that even novice users were uncomfortable with branded share buttons: ‘I don’t want to be followed.’ ”
Sharing experience on mobile can be difficult due to login process (users logged in via native apps, not web browser). Often it is easier for mobile users to just to copy a link & paste it into native app, where the user is already logged in.
Share features that display the number of shares are a double-edged sword: can look desperate/sad, or can be encouraging
Some share features can slow down site performance (depends on implementation)

Google Analytics:

In past year: Shares are incoming from: Twitter (the most by far), Hacker News, Facebook, Reddit, Disqus

@jenniferthibault commented on Thu Aug 25 2016

Thank you for sharing this! I enjoyed reading through. When in doubt, I find oversharing helps on distributed teams :) (No puns intended)

This: In fact, mobile users are 11.5 times more likely to click ads than they are to click social share buttons... Yikes!

What are you thinking for next steps?

@nickykrause commented on Thu Aug 25 2016

I was planning to sketch some options. I started trying to do that in Sketch, but mostly just found myself distracted by the fact that I don't know how to use Sketch, so I am now thinking I will just draw something on paper in order to keep things moving

@jenniferthibault commented on Thu Aug 25 2016

Awesome. I'm glad to help with sketch at any point if you want to walk through some stuff! I'm not an expert, but glad to try and help ease the learning curve. There's also a slack channel called #sketch-tips with lots of people willing to help!

@nickykrause commented on Thu Aug 25 2016

@jenniferthibault, @onezerojeremy, @noahmanger
I have recently learned that I should be sharing my work in GitHub for others on the team to review and comment on, so here I am, participating in the GitHub community! (I am still getting used to this wonderful, agile world...)

Anyway, I have put some thoughts into Sketch (which I don't really know how to use), and so I am sharing screenshots here. To accompany the screenshots, I am also providing the following:

(A) some things that happened in my brain while creating the images
(B) some more coherent thoughts resulting from a helpful sync with Jen
(C) some specific questions for the team

Part A: Things that went through my brain

The research that I posted previously (and some research done since then) suggests that a low percentage of users (often < 1%) click social share buttons. This of course leads me to wonder if we need a share button at all, but I also wonder why we would take an otherwise "harmless" feature (assuming it is harmless) away from the few people who do use it.
There was some debate in the research about whether users actually want packaged "share" experiences, as opposed to the ability to just copy the link and paste it in the location of their choice. I didn't find a definitive answer. Perhaps we could just offer a "copy link" option and see how people react? Does something that simple meet their needs? When presented with a "copy link" option, do users express a desire for more standard "share" functionality? If so, what are their expectations for that share functionality?
If we do offer "share" functionality, the nytimes has a nice/standard way of handling it for both desktop and mobile, although we probably don't need to include all of the social outlets they offer. Their "share" experience includes a "copy link" option, too. However, the copy link experience there seems to expect users to copy/paste a shortened link from a form field. Our URLs might be much longer than theirs (especially if the URL contains info on a filtered search string?), so we may need a different solution.
Our analytics suggested that we have incoming social referrals from Facebook, Reddit, and Twitter, so there is reason to believe that people are copying/pasting links to those sites. If we do offer specific "share" experiences, we should probably include those social outlets as options
With meta tags, I know that we can create specific titles, descriptions, and images for our URLs (which can then be picked up by Facebook, Twitter to create "previews" or "cards" when the link is pasted to those outlets). What I don't know, from a technical standpoint, is, (a) whether or not it is possible to include meta tags/images for specific sections of specific pages (e.g., a graph halfway down the page), or (b) whether or not it is possible to use "dynamic" meta-images that would capture a screenshot, for example, of an interactive graph in a specific "state." The answers to these questions would have an impact on both a possible "copy link" experience and the "share" experiences.

Screenshots:

Part B: More coherent thoughts after creating these & chatting with Jen

Although we do know that some people are sharing our content on social media (since we have incoming referrals from certain sites), we don't seem to have enough information about what users want out of a "share" feature, if they want a "share" feature at all.
I am lacking knowledge about certain technical capabilities associated with sharing, which may constrain what is possible. If we assume that users do want to share page sub-components, or interactive components that are held in a specific state, then we need to know what our options are for accomplishing that.

Part C: Specific questions for the team

From a technical standpoint, is it possible to "share" specific sub-sections of a page, such that (a) the shared link will go directly to that point (anchor?) and (b) the meta image will correspond to that specific sub-item? (Or, perhaps only A is possible?)
From a technical standpoint, is it possible to "share" interactive elements and have them held in a specific state? The answer to this may be different for the two cases in question, so, more specifically: (A) For the interactive graphs, can we allow users to "share" a link to that specific graph in a specific, manipulated state, and (B) For filtered search results, as in the data sections, can we allow users to "share" a link to those unique results? (I feel confident that B is possible, but I am really unsure about A.)
Does anyone have information or insight that could help me to understand what our users expect from a "share" or "copy link" feature, so that we can determine whether or not such a feature is necessary, and, if so, what form it should take?
In the absence of any other insights about users' expectations and preferences re: sharing our content, I wonder: How strongly do we feel about implementing a "share," versus implementing something more limited at first (like "copy link," or similar) and evaluating users' responses?
Any other feedback/thoughts (including anything on how I approached this, or how I chose to share this info, or whether or not a synchronous meeting with a certain group of us might be wise?)

fecgov / fec-pattern-library

Design share interaction #17

455