[NativeUI GA] Share icons + graphic for Snippets

RESOLVED FIXED

Status

Marketing
Design
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: Jaclyn Fu, Assigned: Lee Tom)

Tracking

Details

(Whiteboard: Due: 4/30)

Attachments

(13 attachments)

(Reporter)

Description

6 years ago
Hi Tara and Matej,

For the FF11 Android Snippets, we are planning on creating "share buttons" for Twitter and Facebook so that users can share the re-launch message directly to their social media channels.

Design: 
-We will be re-using either the Android logo guy or the Android logo+phone icon
-Will need Twitter and Facebook share buttons/icons

Copy: Something along the lines of....
The all new faster, sleeker Firefox for Android is here! Learn how Firefox can upgrade your Android browsing experience _link_ #wittyhashtag [Twitter button][FB button]

Deadline: March 1 

Thank you!

Comment 1

6 years ago
Thanks Jaclyn

When you say "share buttons", do you mean links from the Snippet?  I'm a little confused as to what this is... a Snippet or a Share button... perhaps you mean the same thing :)  

Hopefully we can repurpose an existing phone + droid graphic we already have vs. creating something new.  Let me know.

Turning this into a copy bug for Snippets.
cc-ing Lee for design.

Thanks!
Assignee: tshahian → Mnovak
Status: NEW → ASSIGNED
Component: Design → Copy
QA Contact: design → copy

Updated

6 years ago
Whiteboard: Due: 3/1
(Reporter)

Comment 2

6 years ago
Hey Tara,

We're trying something different with these Snippets...so below the snippet message we're going to have "share buttons" so users can share the snippet message directly to their Facebook or Twitter. So we would need tiny Facebook and Twitter icons. See https://bugzilla.mozilla.org/show_bug.cgi?id=724107#c8 for a bit more background on what we're going for. 

Yup, I was thinking we could re-purpose the phone+droid graphic...maybe something like adding explosive confetti around it to make it more celebratory? Or a glow around it?

Thanks!

Comment 3

6 years ago
Thanks Jaclyn. I'll review the other bug for background, that helps.  But it would be great if you can simply let us know the general direction that has been agreed upon for this... are there mockups or any references for us to go off of?  Trying to understand the space we have to work with and if we're keeping to the 40x50 icons or changing the layout completely.  A little more direction will help when figuring out copy/design.  Thanks.
(Reporter)

Comment 4

6 years ago
Here's an example:

https://developer.mozilla.org/en-US/demos/detail/rob-in-soundland

Click on the "Share it" link and a pop up bubble with Twitter and Facebook icons comes up. Those links are what we're going for

Comment 5

6 years ago
ok thanks.  So, is the snippet the standard format, except that we're adding a 'share it' button?  meaning,  standard snippet graphic copy, and then a "share it" cta/link/button that they reveal the twitter/facebook buttons? 

Forgot to cc Lee.  doing it now :)

Comment 6

6 years ago
Here you go, plus a few alternate hashtag options (though #wittyhashtag is my favorite):

The all new, faster, sleeker Firefox for Android is here. Upgrade your Android browsing experience today! _link_ #browsebetter

#firefoxforandroid
#newfirefox
#awesomefox
#browsingupgrade
(Reporter)

Comment 7

6 years ago
(In reply to Tara (musingt) from comment #5)
> ok thanks.  So, is the snippet the standard format, except that we're adding
> a 'share it' button?  meaning,  standard snippet graphic copy, and then a
> "share it" cta/link/button that they reveal the twitter/facebook buttons? 
> 
> Forgot to cc Lee.  doing it now :)

Tara - Correct! Would it be possible to get a version that has a general "Share it" button that opens up to Twitter/Facebook, and another version that has stand alone FB and Twitter buttons? Not sure which would work best yet.

Comment 8

6 years ago
My only hesitation with the FB Twitter buttons is that it might suggest that we're pointing people to those properties... vs. a CTA to share.  I guess we could do a "share on" and include those icons.. but I also worry that the space might start to look rather cluttered.   Either way, will let Lee figure it out.
(Reporter)

Comment 9

6 years ago
Hi all - final release for native UI is getting pushed back, but we're going to repurpose this snippet for beta (we already have the copy, so just designs are needed for march)

Matej - I'll open a different bug for copy and we can continue the conversation there for GA release

Thanks!
Summary: [FF11] Design+Copy Snippets → [NativeUI Beta] Design for Snippets
(Reporter)

Updated

6 years ago
Summary: [NativeUI Beta] Design for Snippets → [NativeUI Beta] Share icons for Snippets
(Reporter)

Comment 10

6 years ago
Updated the due date for this bug to 4/30 - set on a low key beta launch, so will be saving the shareable snippet for GA launch in late May/early June. 

Copy portion is now complete, going forward this will be a design bug for the share icons. 

Thanks everyone, thanks for being flexible with the time frame changes!
Assignee: Mnovak → tshahian
Component: Copy → Design
QA Contact: copy → design
Summary: [NativeUI Beta] Share icons for Snippets → [NativeUI GA] Share icons for Snippets
Whiteboard: Due: 3/1 → Due: 4/30

Updated

6 years ago
Assignee: tshahian → ltom
(Reporter)

Comment 11

6 years ago
Final copy:

Fast, fast, fast. Firefox for Android just got a big upgrade. Help us spread the word. _link_ #hooraynewfirefox

Design request:
1) Share icons/buttons (Facebook, Twitter) 
2) Snippet graphic: Can we make the androidguy+phone image we have look fast/shiny/new? 

Thanks!
(Reporter)

Comment 12

6 years ago
There are some details we need to keep in mind regarding design that Ben mentioned. Lee - mkelly will brief you on these details
(Reporter)

Comment 13

6 years ago
Tara - would it be possible to bump up the design hand off to April 13? Webdev would like to complete this project earlier to make room for more complex projects coming in the pipeline

Comment 14

6 years ago
Lee, please advise.  I know you're heads down on other things right now.  If this is something that you can help with, great.  Otherwise, I'll need your help to do an information / asset transfer to either Matt (or perhaps Ty) or someone else who might be able to turn this around by then.
(Reporter)

Comment 15

6 years ago
Ping Lee - Would you be able to get this out of the way earlier?
(Assignee)

Comment 16

6 years ago
Hey Jaclyn, I'm looking at the example you linked to:
https://developer.mozilla.org/en-US/demos/detail/rob-in-soundland

and I'm a bit unclear at what you need exactly. Can you confirm that you need:

- Facebook button (any particular size? Should I use the MDN buttons as a standard?)
- Twitter button (any particular size? Should I use the MDN buttons as a standard?)
- Android snippet graphic (40x50px)

Let me know if you're available to have a quick chat. Thanks! L
(Reporter)

Comment 17

6 years ago
Hi Lee, the example on the demo site is about the same size I was imagining. Maybe something this? http://screencast.com/t/wUIEu4Da61oX But with the copy of "share it" and "like it"

Comment 18

6 years ago
Folks:

Two items I wanted to chime in on.

1. Jaclyn we had discussed that since this is going on about:home... you can't really share or like this (it's not a page in the traditional sense). The twitter and facebook links would be hard-coded, for example this: http://dl.dropbox.com/u/59169312/snippet-social-test.html I think this is covered above but I want to be sure this is in the bug.


2. Will this content be localized?
(Reporter)

Comment 19

6 years ago
Thanks for the detail Ben

And yes, the content will be localized. Is that a problem?

Comment 20

6 years ago
Localized content is OK. 

If the button text will be localized best to have this as HTML text (if possible).

Do you know how many languages you will be supporting?
(Reporter)

Comment 21

6 years ago
9 languages are planned as of now
(Assignee)

Comment 22

6 years ago
Created attachment 616289 [details]
about:home share snippet 01a

Hi guys, 
I wanted to post some mockups for context. I'm basing this interaction on the links that Jaclyn had referred to above.
(Assignee)

Comment 23

6 years ago
Created attachment 616291 [details]
about:home share snippet 01b
(Reporter)

Comment 24

6 years ago
Thanks Lee - I was thinking without the pop up box, how about just the "Share on Twitter" and "Share on Facebook" links+icon?
(Assignee)

Comment 25

6 years ago
Created attachment 616297 [details]
about:home share snippet 02

I agree with this simpler approach.
Hey guys, looking at the latest mockup, I'm not sure "like this" is the right terminology there. Don't we actually want them to post this on Twitter and Facebook to share with their followers/friends? In that case, what if it just said "Share this on:" followed by the two buttons below?

Otherwise, looking great!
(Assignee)

Comment 27

6 years ago
Erp - good point, Matej. It's my goof that I had those reversed. Would this work if they were reversed? 

Twitter - Share this 
Facebook - Like this

?
I'm still not sure about "like this" — unless I'm misunderstanding the intent here. I thought we wanted them to actually post this line on their Twitter or Facebook account with a link back to the mobile download page. If that's true, I think asking them to like it is misleading.
(Reporter)

Comment 29

6 years ago
How about "Tweet this" for Twitter and "Share this" for Facebook?

Comment 30

6 years ago
Great work Lee!  

Thoughts...

I think "Like this" *could* work... since you can "like" certain articles and content on the web and have it show up on your feed.  The "like" isn't strictly tied to liking pages and so forth...but a generic "share this" + the icons would probably be better, and cleaner.

That said...

To be honest I'm not a huge fan of this approach in general.  Feels like we're splitting the actions when the Snippet generally aims to drive clicks to a single/focused point.  I was wondering what the primary goal here is?  is it to drive clicks to the landing page "Firefox for Android" ? or is it to share? It feels like people would land here, see the snippet and click on the primary link to learn more vs. going straight to the share widgets.  

It would seem better (to me) to approach it this way:

* Standard snippet icon and text but two hyperlinks:  one for the main landing pae, and one on the "spread the word" -> perhaps with something like a hover state that would then reveal the twitter/fb icons.

* Or, focus it on the Primary message and drive the "share" action on the landing page.


To be clear, I'm a *huge* fan of adding more juice to this page, but am just not sure if this is the best use case for it...
(Assignee)

Comment 31

6 years ago
Created attachment 616351 [details]
about:home share snippet 03a

I like Tara's suggestion of keeping the UI simple and keeping users' focus on the snippet content. Attaching mockups in 2 states:

3a - snippet in singular box, as we know it. hyperlinking to main page and offering a share action.

3b - when users role over "spread the word," the raised button background extends, revealing both ways to share. This keeps the sharing action relative to the snippet vs. introducing a new layer/box/UI for user to interact with. 

Is this interaction something that webdev can easily implement? I'm not sure about the technical challenges it could introduce.
(Assignee)

Comment 32

6 years ago
Created attachment 616352 [details]
about:home share snippet 03b
As long as the share links are normal links and don't require any special Javascript, this is possible.
Tara, great points. I think this is working a lot better now, but I wonder if we'd consider taking it even further and removing the link to the mobile download altogether. I know that might sound crazy, but if we want to get people to share this and then get the people they share it with to click, it might be worth making the snippet really laser-focused. Or could we do two versions and test?
(Reporter)

Comment 35

6 years ago
Good points about the the two CTAs. 

What if we had something like this:

Help us _spread the word_: 

Fast, fast fast. _Firefox for Android_ just got a big upgrade. 

Since the share buttons don't redirect the page, I'm wondering if we show that CTA first if they would share then install
I think that makes for a pretty choppy sentence. We could do something like this:


Help us _spread the word_: 

_Firefox for Android_ just got a big upgrade and it's fast, fast, fast!


Though I still prefer the original in terms of flow.

Comment 37

6 years ago
Hey guys, lets make a decision here and move forward :)  I think historically we've tried a few different versions of a Snippet, tested and pursued the one that performed best.  Can we just do that here?

I think it's a little weird to have the "share" CTA first and then the "learn more"... but I can also see how that could work.  Either way, it's just one of those things were unlike normal snippets which have laser-focus... this one is split and we need to prioritize the actions to make the best use of our snippet :)

I think the latest mockup from Lee is good.  The interaction there is that on hover/click the snippet box expands and reveals the share widgets. I'm honestly not entirely sure how this behavior works across screen/browser sizes since I know that snippet box is fluid.  So, any thoughts on that from webdev would be helpful before we finalize.  But otherwise I think it's a solid approach.

wrt copy, I think we can pick two and test both.
Created attachment 616712 [details]
Snippet Minimum Width

Snippets have a minimum width, but it's rather small (see attachment). The above mockup would look very cramped at that size.

I'd recommend changing the links to appear below the snippet text rather than to the side. Then the box can just expand downwards. Also, keep in mind that the upcoming new about:home page has no box and has a static width that is longer than the minimum shown above.

Comment 39

6 years ago
Thanks, very helpful.  

Jaclyn, can you please advise / confirm the actual about:home version that we should be designing for? (box vs. no box, etc)  that all impacts design...
(Reporter)

Comment 40

6 years ago
When these Snippets launch, they will be on the new about:home page that does not have a box (screenshot for reference http://screencast.com/t/7UpMiipiD)

Comment 41

6 years ago
Ok.  Thanks Jaclyn. Very helpful.  Would have been nice to know that earlier :) 
Lee, thoughts on next steps wrt to design given this new bit of info?  I think it will help make the space a lot cleaner and the presentation of the icons stronger.
(Assignee)

Comment 42

6 years ago
Created attachment 616743 [details]
about:home share snippet 04

Since there's no bg box/button on the newer about:home page, maybe we can move back to the overlay box, when user rolls over the "spread the word" CTA.

Comment 43

6 years ago
Looks great to me.  Though I also think that we don't need those CTAs "tweet this / share this" since people will recognize the icons and the context of social sharing automatically.  That makes the design even crisper (and requires less l10n)

Comment 44

6 years ago
Adding a bug to design a Droid-focused Snippet graphic (not related to this bug, but something to keep in mind for the mockups) Bug #747203
(Reporter)

Updated

6 years ago
Summary: [NativeUI GA] Share icons for Snippets → [NativeUI GA] Share icons + graphic for Snippets

Comment 45

6 years ago
hmm, okay thanks.  I'll close out the other bug then.

Updated

6 years ago
Duplicate of this bug: 747203
(Assignee)

Comment 47

6 years ago
Created attachment 617535 [details]
about:home share snippet 05

Hi Jaclyn, 
Attaching a new mockup here with a fast-fast-fast Android snippet graphic. Also showing here, the copy/link-less share icons in the hover state. I'm not sure if the localization of the text is an issue here, but I think these icons seem rather abstract or blank without a text CTA. I would suggest leaving them in the hover.

Comment 48

6 years ago
Looking great. Thanks Lee.

Would you hate me if I ask to un-"italicize"The Droid character? The tilt is meant to emphasize speed, I see that... but I feel like it looks a tiny bit odd in that position.  I was wondering if him standing upright + the blur effect would be enough / look better?

I love the hover state with the icons.  It works vertically, I could also see it work horizontally (unless we want to prioritize twitter shares of facebook which the vertical layout does better).

Seems like we're almost done though, it's looking great.
Jaclyn/others, thoughts?

Comment 49

6 years ago
Since the design is looking final-ish...adding a note here for mkelly to take a look and see if there are any implementation issues.
Looks good to me.

I've heard that Facebook and/or Twitter have guidelines about how to use their logos for share widgets, are we sure this doesn't violate that?
(Reporter)

Comment 51

6 years ago
Cool Lee! Looks great to me (if the widgets do meet guidelines)
(Assignee)

Comment 52

6 years ago
It looks like the Facebook guides allow for the icon with, or without icon link as we have it: http://developers.facebook.com/docs/share/
Positioning the 2 icons horizontally seems a bit linear to me, as if we're prioritizing one over the other. Placing them stacked seems to suggest more equal footing, to me. 

Tara, regarding the Android logo - the Android in it's upright position reads a bit static to me, not so fast-fast-fast so I'd prefer to leave it tilted forward. With most every other logo I would normally not change it, but the Android style guide is rare in that they allow (almost encourage) modifications and I think this works.
(Assignee)

Comment 53

6 years ago
Checking back in with this bug... If there are no other changes, I can provide the PSD asap. Jaclyn, let me know.
(Reporter)

Comment 54

6 years ago
Let's PSD this!
(Assignee)

Comment 55

6 years ago
Created attachment 618456 [details]
share icon - facebook
(Assignee)

Comment 56

6 years ago
Created attachment 618457 [details]
share icon - twitter
(Assignee)

Comment 57

6 years ago
Created attachment 618458 [details]
snippet - Android FastFastFast!

Attaching the snippet and share buttons here. Let me know if you need the PSD for the hover bg. Thanks! L
(Reporter)

Comment 58

6 years ago
Hey mkelly - what is the preferred format for these snippets, and what would be the best way to implement the rollover hover box?

Comment 59

6 years ago
FYI mkelly is PTO until 4/30
PSDs are fine (I'll have someone else export them as PNGs, and also make a note to file for a copy of Photoshop so I can stop relying on others for that). 

As for the rollover box, I'm pretty sure most if not all of it can be done with CSS and JS, but a PSD of the box with a transparent background might be helpful as well (if the point is hard to replicate with CSS, for example).

(Goes back to PTO :P)
(Assignee)

Comment 61

6 years ago
Here's the PSD mkelly:
http://cl.ly/2F0Y2F1X162p3m071w0s
Created attachment 619611 [details]
hover bubble background

Comment 63

6 years ago
Created attachment 619615 [details]
4 cut pngs

Mkelly, attached are 4 images from the PSD. If you need these cut in a different way please let me know.

Comment 64

6 years ago
Can you add the final share urls and the url for the link as a comment to this bug.
(Reporter)

Comment 65

6 years ago
We're still working on the Website/tracking side of things, we probably won't have the final URL until a couple weeks later. Will update the bug as soon as we get it

Comment 66

6 years ago
OK, the dev is done except for the urls.

Comment 68

6 years ago
I wanted to add an update here on timing:

Latest from Jaclyn:

"live-date we're thinking of later in August now instead of right at release."

Comment 69

6 years ago
Hey guys the design portion of this bug is done, right?  can we close this out? what is the status?

Comment 70

6 years ago
Tara:

The design portion of this is complete. As per an update from Jaclyn this would be launched in August instead of right at this release.

Give that, I would like to close this design bug and open a new "snippet" bug to track the actual release.

Sound OK?

Comment 71

6 years ago
yes please. :)
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.