Closed Bug 725697 Opened 12 years ago Closed 12 years ago

[NativeUI GA] Share icons + graphic for Snippets

Categories

(Marketing :: Design, task)

x86
macOS
task
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: jfu, Assigned: ltom)

References

Details

(Whiteboard: Due: 4/30)

Attachments

(13 files)

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!
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
Whiteboard: Due: 3/1
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!
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.
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
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 :)
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
(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.
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.
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
Summary: [NativeUI Beta] Design for Snippets → [NativeUI Beta] Share icons for Snippets
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
Assignee: tshahian → ltom
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!
There are some details we need to keep in mind regarding design that Ben mentioned. Lee - mkelly will brief you on these details
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
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.
Ping Lee - Would you be able to get this out of the way earlier?
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
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"
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?
Thanks for the detail Ben

And yes, the content will be localized. Is that a problem?
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?
9 languages are planned as of now
Hi guys, 
I wanted to post some mockups for context. I'm basing this interaction on the links that Jaclyn had referred to above.
Thanks Lee - I was thinking without the pop up box, how about just the "Share on Twitter" and "Share on Facebook" links+icon?
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!
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.
How about "Tweet this" for Twitter and "Share this" for Facebook?
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...
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.
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?
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.
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.
Attached image 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.
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...
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)
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.
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.
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)
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
Summary: [NativeUI GA] Share icons for Snippets → [NativeUI GA] Share icons + graphic for Snippets
hmm, okay thanks.  I'll close out the other bug then.
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.
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?
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?
Cool Lee! Looks great to me (if the widgets do meet guidelines)
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.
Checking back in with this bug... If there are no other changes, I can provide the PSD asap. Jaclyn, let me know.
Let's PSD this!
Attached image share icon - facebook
Attached image share icon - twitter
Attaching the snippet and share buttons here. Let me know if you need the PSD for the hover bg. Thanks! L
Hey mkelly - what is the preferred format for these snippets, and what would be the best way to implement the rollover hover box?
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)
Here's the PSD mkelly:
http://cl.ly/2F0Y2F1X162p3m071w0s
Attached file 4 cut pngs
Mkelly, attached are 4 images from the PSD. If you need these cut in a different way please let me know.
Can you add the final share urls and the url for the link as a comment to this bug.
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
OK, the dev is done except for the urls.
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."
Hey guys the design portion of this bug is done, right?  can we close this out? what is the status?
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?
yes please. :)
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: