Closed Bug 648894 Opened 14 years ago Closed 14 years ago

F1 logo

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
x86
Windows 7
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: mayumi, Assigned: smartell)

References

Details

Attachments

(11 files)

share icons by andy
7.67 KB, image/png
Details
mozilla share
63.06 KB, image/png
Details
Initial Share Mockup Glyph(s)
1.54 MB, application/x-photoshop
Details
Paper Plane Glyph Vector
50.26 KB, application/postscript
Details
Share Icon Sketches
348.20 KB, image/jpeg
Details
Share Icon Glyphs in Context
64.54 KB, image/png
Details
"Airplane" and "Node" concepts as logos
49.07 KB, image/png
Details
"Airplane" + "Sync" = <3
39.58 KB, image/png
Details
Share Plane Icon States
411.27 KB, image/jpeg
Details
Pulsing Share Icon APNG
50.14 KB, image/png
Details
Inline Progress Bar Concept APNG
116.70 KB, image/png
Details
Once name is finalized, need to finalize logo and icon for F1. Need in 4 weeks in order to meet the Fx6 Aurora deadline.
Looks like a great project for Sean !
Assignee: tshahian → smartell
Adding Andy and Stephen to this.
Attached image share icons by andy —
This was a share icon proposal, adding as an artifact
Attached image mozilla share —
This was a share identity proposal, adding as an artifact
I used a paper airplane in the mockups for Share/F1 because it is fun, a little whimsical and more tangible than some of the more abstract icons for sharing. Whatever we end up with needs to work really well as a simplified glyph at 16x16 :)
I liked the airplane icon a lot as well, unfortunately I think the similarities to Sparrow might be off-putting. http://www.sparrowmailapp.com/
The vast majority of users will be familiar with paper planes from physically creating them and throwing them, as opposed to a particular OS X app (which I myself had never heard of). I think the metaphor is general enough that there shouldn't be any concern over using it. Additionally it appears in the interface as purely a metaphor, like the gear for advanced settings, or mask for privacy, as opposed to itself being a product logo. With perhaps the exception of Panorama, we don't usually use strong branding for individual features (like Time Machine, Spotlight, etc.)
Blocks: 649851
So should we move ahead with a paper airplane? The glyph shown, does anyone have the original assets for that? perhaps in vector?
(In reply to comment #8) > So should we move ahead with a paper airplane? The glyph shown, does anyone > have the original assets for that? perhaps in vector? I agree with Alex's assessment in comment 7. Here is the Photoshop mockup with vector plane glyphs. Also attaching one exported to Illustrator.
Should we go with more of a white/wireframe look for the default state? Maybe I just didn't use enough colored paper to make planes as a kid, but it seems less recognizable to me for it to be dark.
I'm not totally sold on the paper airplane...would like to at least explore a couple of directions before we settle on one.
>I'm not totally sold on the paper airplane...would like to at least explore a >couple of directions before we settle on one. What are your concerns? It might not be the strongest logo, but in terms of an interface metaphor I think it captures the concept of sending a page extremely well (actually less of a metaphor, and really more literal).
Just that I think it's a best practice to brainstorm a few options before settling on one. If we do that and decide that the paper airplane is it then no complaints from me.
I'm not sure on the scope here. Sometimes we start with a well branded project (to draw attention to it and build excitement), and then move towards something that is more literal and descriptive for the interface itself. But at that stage, we are really just designing an icon instead of a logo. For instance the panorama grid glyph wasn't really used outside of the product for Firefox 4 (although perhaps it could have been). What's our intended context for this image? Definitely placement in the location bar, but where else will be using it?
(In reply to comment #15) > What's our intended context for this image? Definitely placement in the > location bar, but where else will be using it? I count about 3 locations (not included alternate sizes needed for per platform icons). * location bar (small) * preferences panel (medium) * landing page (large) bug 649851
This is similar to Sync, where we need an icon for the Firefox browser but also a more detailed and bigger logo for broader outbound initiatives e.g., the Sync page, marketing collateral, etc.
Makes sense, kind of off topic but should we source a sync style logo (more photo realistic and detailed) of the panorama grid? shorlander and I had some really cool ideas for how we could adapt it. How do you feel about a paper plane in marketing collateral? I believe shorlander and the rest of the UX team had a bunch of other options before people gravitating towards the paper plane being a good metaphor, but I wasn't in that meeting.
Attached image Share Icon Sketches —
(In reply to comment #18) > I believe shorlander and the rest of the UX team had a bunch of other options > before people gravitating towards the paper plane being a good metaphor, but I > wasn't in that meeting. Here are some other sketches I had. I don't feel particularly strong about any of them. I know F1 went through a few icons. Andy and Bryan might have other ideas :)
Above sketches as glyphs in LocationBar context.
Just to note that ShareThis ( http://shareicons.com/ ) and Shareaholic ( http://www.openshareicons.com/ ) have been fighting it out for the "standard share icon" to be used on the web. Chrome tends to use the Shareaholic version: http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=174566 Android uses their own version: http://www.linuxtopia.org/online_books/android/devguide/images/icon_design/ic_menu_share.png iOS uses the 3/4 box w/ arrow: http://www.stumbleupon.com/wp-content/uploads/2010/09/iphone_info.gif F1 in the past used a variant of the ShareThis version for a little while but our user testing found that people had no idea what that icon meant or did. We eventually went with an "F1" text icon because of the relationship to the install of a product. i.e. people installed F1 and then an F1 icon appeared, very simple. I think a more integrated icon wants to focus on the sending/pushing/giving of the sharing activity.
Love the icons in comment #20. I think the dot with 2 arrows pointing up is strong and plays nicely with the sync glyph: http://mozilla.seanmartell.com/share/share.png It also reflects the style used on android as pointed out in comment #21. I took some of shorlander's glyphs and put them in that image in the order I like currently. if we can name some favs out of those, I can have a go at turning them into a more detailed logo we can use at larger sizes.
My 2c: the megaphone is too biased towards broadcast communications -- one of the aspects of F1/share that I think differentiates it from much of the ongoing memes around sharing is that it allows targeted, 1-1 sharing. Hence a -1 on the megaphone. I'd also suggest that the second one in sean's favorite list with the star-pattern to me feels like a noun ("social graph") rather than a verb ("share"). I'm assuming the down-arrows are download-manager type things, not actually intended for sharing.
Regarding Comment 22 my only concern with the 2 arrows pointing up reminds me of the symbol for "Male" with an extra arrow and thus doesn't convey "Share" to me. I like the star pattern, airplane and megaphone. Also, FYI, just spoke with the dev team and ideally we have the icon and logo done by may 10th so they can merge into the UI and in Mozilla-Central. Is this realistic?
This seemed like the most likely bug to ask about this... Services ops will need be setting up app keys with the various services in bug 651555. When you do that you have the option to set an application icon/logo. For facebook, 75x75, no format defined in docs For twitter, no size defined, but no larger than 700k google does not provide an icon option
Since we have a usability study set for Sharing with 12 users in May 3-5th, we will let users go through these icons and see which one they think/feel that presents Sharing the most. If there are any new designs, please let me know by May 1st, so I can plan it in the study.
That's great, thanks Jinghua. Sean will be working on a couple of options based on the comments above...he'll have those ready by May 1, so please plan on including them in your survey.
Note that we are also doing actual sound design over in bug 647128. If we change the metaphor than that will effect the work over in that bug as well. I'm (as always) looking forward to seeing the results of the user testing, but from the current set I think the paper plane is the strongest option. It is a metaphor instead of a new ideogram, its easily recognizable, and it is slightly playful. A few other thoughts: -We just removed a unique ideogram from the location bar, so I'm not really eager for us to reintroduce a new one. -Imagine one user trying to describe the feature to another user. If we go with a unique symbol then the conversation is "click on the sharing button, it's the [thing attached to the other thing pointing in multiple directions and such]" versus "it's the paper plane"
Some more general thoughts: I really like the notion of us developing logos for our main features (private browsing, panorama, etc.) but I think we need to approach these first from a UI perspective, especially if they are going to be onscreen in primary UI nonstop for 400 million people. UX objectives are sometimes a bit different, focused more on recognition than uniqueness, literal meaning as opposed to style. I'm ready to ui-review+ the paper plane that shorlander created as the location bar icon (especially since we have some sound design and a possible animation that fits into the overall idea). Sean: do you have a more compelling option that we should also consider? There's also a mixed approach, were we use a simple paper plane glyph in the UI, but elaborate on that in a more dramatic full sized logo for the feature (jet contrail? :)
Quick update on this. I'm in the process of building out some options, will have something to post relatively soon (next few days) Stay tuned!
Sean, can we have them by Friday? (No later than May 1st please so I can put them into the user test.)
built out two of the concepts as full logos. I think the node concept is a bit harder to visualize as a fully rendered logo (the continents would need to change per orbital body or they could be moons) but the airplane one seems spot on and looks sexy (I build it with Hammermill 10lb in mind. sturdy. sleek.) I vote airplane. :)
these two are made for each other. just lookit those services! d'aw.
Definite +1 for the airplane.
(In reply to comment #32) > Created attachment 529191 [details] > "Airplane" and "Node" concepts as logos > > built out two of the concepts as full logos. I think the node concept is a bit > harder to visualize as a fully rendered logo (the continents would need to > change per orbital body or they could be moons) but the airplane one seems spot > on and looks sexy (I build it with Hammermill 10lb in mind. sturdy. sleek.) > > I vote airplane. :) Airplane gets my vote as well! Looks awesome btw :)
Thanks Sean for the update. Are there different use scenarios between "airplane" (or "node") and "airplane + sync"? I agree with Faaborg that icons need to be focused more on recognition than uniqueness, literal meaning as opposed to style. To help on this part, we plan to test them with users in the following way (will still be refined): 1. Use the sketches to understand which logo convey idea of sharing in a clear and positive way: - (before trying out F1) What do these logo mean to you? Based on your understanding, what actions do they indicate or suggest you to do if you click on them? - (before trying out F1) What do these logo make you feel? Happy, confusing, abstract, warmth, cold, or not sure? - (after trying out F1) Which logo do you think that represents the function you tried (sharing function) the best? 2. Use the in-context logos to understand if the modes are clear enough to inform users the progress of sharing.
(In reply to comment #36) > Thanks Sean for the update. Are there different use scenarios between > "airplane" (or "node") and "airplane + sync"? Answering on behalf of Sean here, the two options are airplane & node. The airplane + sync image was just produced to show that the two icons fit together well, visually. No different use scenarios though.
Got it. Thanks, John!
>Definite +1 for the airplane. Coming back from my time off just long enough to give the airplane a very enthusiastic +1, good real world metaphor, visually unique, appears streamlined and fast, and placed at the end of the location bar it points off into space conveying (take this URL and send it somewhere).
I'd like to hear back from Jinghua b/c in passing she mentioned that all of the other icons were picked except the airplane.
Just from the first 4 users, 2 picked the megaphone, 1 picked the node+arrow and 1 picked the heart. A couple of people mentioned that "airplane" doesn't mean anything to them and "stamp" reminds them about contact list. " The interview is done yet, I will get back to you with the quick results by tomorrow.
Hi Jinghua, can you send the results today so we can get the final logo/icon to the dev team ASAP? I think they are trying to lock down the UI code this wek. Thanks!
Hi all, there is the quick summary of the user study from AnswerLab, let me know if you want to review more details: ==Potential F1 icons== Before exposure to F1, most participants did not associate the potential icons with online sharing activities. In fact, the paper airplane and distributed nodes confused many participants before their use of F1. Additionally, some participants had previous associations with some of the potential graphics – for example, some noted that they’d seen heart and gift icons on Facebook (for relationship status or gifts, respectively). After experiencing F1, participants’ opinions were split almost evenly amongst the plane(4), share arrows(3), arrow stamp(3), and megaphone(4) as to which best conveyed the feature. Participants did not favor the heart, gift, distributed nodes, or bubbles icons – many felt that these did not appropriately get at the sharing aspect of F1, were too ambiguous, or were too muddled by other associations with the images. Participants indicated that they would prefer the icon to change color or animate within the navigation bar to call their attention to it once they’d shared a link. This would help them feel sure that F1 had successfully shared their content.
Thanks Jinghua. I'm still +1 for the airplane. What are the rest of you thinking?
I'm still +1 for the plane as well
+2 Plane [Mayumi & Jay]
Excellent! Sounds like we're set on the plane then. Alex, what sizes (and other details, if applicable) do you need for the in-product implementation? Let us know so Sean can create those files and get this finished up.
2c: The current f1 icon has a couple of animations used to indicate sending (pulsing) and successful sent (one big glow) and IIRC failure to send. For the plane, there are a variety of obvious possibilities there that come to mind to indicate the same states and transitions (motion lines, plane moving, etc.)
Good call - I'm sure we'll want a few different states of the logo at least. I'd like to get that figured out soon so we can determine what Sean needs to do and what the UX team needs to do.
>Alex, what sizes (and other details, if applicable) do you need for the >in-product implementation? Let us know so Sean can create those files and get >this finished up. 16x16, but we'll probably have shorlander tweak the image for the style of each platform, so we can take over the in product work and just have Sean focus on the more photo-realistic logo. >For the plane, there are a variety of obvious possibilities there that come to >mind to indicate the same states and transitions (motion lines, plane moving, >etc.) In a previous UX meeting we were joking (although half seriously) about how much fun it would be if we had the plane literally fly off screen after sending. This then led to a discussion of using WebGL to fold the page in the content area into a plane, and then have that fly off screen :) Apparently HTML5 doesn't yet have origami primitives that we could leverage, but we're playing around with a few very fun ways of providing visual feedback that the share occurred. Also over in bug 647128 there's already some work on auditory feedback.
Hey Alex. Just so I'm totally clear on comment #50, are you saying shorlander will work on the icon files and Sean should focus on the hi-fi version?
yeah, of course no offense to the immensely talented sean, but for the highest level of internal consistency I would prefer we have a single designer handle all of our in product icons, especially the primary UI ones.
No offense taken - I was hoping you'd say that!
In terms of icon states, and this may be just for shorlander, we currently have a couple to indicate the various states of sharing. * Normal (the normal f1 logo) * "Unshareable" (for about:config and the like we currently hide the icon. if you wanted a disabled state you'd need a separate icon) * Panel open (f1 uses a highlight to show a depressed type state) * Sharing progress (animated - f1 uses an animation highlighting the f, then the 1, lather, rinse, repeat) * Share successful (animated - f1 uses a one time glow of both letters to indicate success) * Error state (f1 opens a notification bar if it encounters an error sharing, we currently use the /!\ icon but had planned to move to using an error version of the f1 icon) Some thoughts from the usability test, results of which will be available later this week. The sharing progress and final state were somewhat unnoticed by the participants and so it might make sense to do something larger like pulse the URL bar background color instead of just animating the icon. We should take this discussion to another bug, I just wanted to note that. If we have the above icon states Sharing will be able to transition to the new icons from the f1 icon.
Attached image Share Plane Icon States —
(In reply to comment #54) > * Normal (the normal f1 logo) Grey glyph icon that matches the rest of the icons in the locationBar. > * "Unshareable" (for about:config and the like we currently hide the icon. > if you wanted a disabled state you'd need a separate icon) We could go with a greyed out icon but I think continuing to hide it is probably the best thing to do. > * Panel open (f1 uses a highlight to show a depressed type state) Depressed inset + blue glow > * Sharing progress (animated - f1 uses an animation highlighting the f, then > the 1, lather, rinse, repeat) We could do something similar by just pulsating the plane icon (will attach a APNG mockup) > * Share successful (animated - f1 uses a one time glow of both letters to > indicate success) This might conflict with the "pulse" and is also so transient that it might be easy to miss. What about changing the color to green? This does have accessibly concerns so maybe changing the icon in some way as well. I used a check mark inside the plane as one potential idea. > * Error state (f1 opens a notification bar if it encounters an error > sharing, we currently use the /!\ icon but had planned to move to using an > error version of the f1 icon) Should we use a panel instead of a bar? Faaborg might have more feedback here. Yellow share icon with an exclamation point. > The sharing progress and final state were somewhat unnoticed by the > participants and so it might make sense to do something larger like pulse > the URL bar background color instead of just animating the icon. I didn't do any explorations with pulsing the whole bar, but I did do a quick mockup of an inline progress bar (will attach a APNG mockup as well). Although most shares might be too fast for this to be viable? I also included an extra state that matches the plane styling to the styling of a bookmarked page if you are on a page that has already been shared.
I'm not sure if we should surface how long it actually takes to share something. What if we just made the swift share sound (https://bug647128.bugzilla.mozilla.org/attachment.cgi?id=525286 ) and turned it green (even though it still has 1 or 2 seconds left). Then we could revert to the error state in the rare case that something went wrong. It will feel really fast as responsive, and users won't have to sit and watch the underlying progress actually unfold.
I like the idea of straight to green, but I also like the subtle blue pulse as an activity state. I'm used to activity states with TinyGrab and Cloudapp, but if it went straight green, I guess I'd be ok missing out on a lil animation. :)
Two things were observed/found during the interview that are related to icon color: 1. Several users didn't notice the subtle blue shade on the F1 icon until they were told to look there by the interviewer. 2. Quite a few people didn't associate the blue shade with the message "link is shared". They guessed the blue color meant the function worked, but they were not sure if the link was shared for sure. Several users mentioned they'd like to see a clear confirmation on sharing success. (A couple of users even looked for text "shared".) It would be great if the icon design we are considering now can provide users with a clear sense of confidence (on sharing success). If not through icon, then we probably need to figure it out elsewhere. See more details of these two findings: https://intranet.mozilla.org/UserResearch#Firefox_Sharing
Hey guys, what's the status here. Didn't Sean finalize the logo with the envelope design that was shown at the all-hands? Let me know if we can close this out please. Thanks.
yes, I believe so.
In that case I'm going to close...we can reopen if needed.
Status: NEW → RESOLVED
Closed: 14 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: