1059554 - Visual design for Share overlay

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Overlays, defect)

Description

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_shareoverlay_mock2.png

Visual designs for the Share overlay in bug 1044947

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: shareoverlay1_icons.zip

Attaching icons

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

"The 1 dp dividers between the items in the list are #D7D9DB (I think I forgot to label that in the spec)." :)

Comment 3

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Talked to Anthony on the icons and wording.

I think we will use "Added to Reading List" and "Bookmarked".

Also besides wording to indicate the states, we can also show the states from the icons.

If a link is bookmarked, use the filled star icon.
If a link has not been added to reading list, use the reading list icon with a plus on the top right. It's consistent with our current reader mode. And if a link has been added to reading list, use the reader mode icon(no plus).

I suggested in Bug 1061721 to use a subtle pop to draw attention to the labels, instead of grey out the section. A GIF demonstration here: http://cl.ly/image/0V2U1K3x3A0y 

Thoughts?

Comment 4

[Richard Newman [:rnewman]]

I have a fairly strong preference for "Already bookmarked" over "Bookmarked", for three reasons:

* What we're trying to tell the user here is "You already bookmarked this thing". "Bookmarked" is a pretty ambiguous thing to localize -- did Firefox bookmark it, or did you? did it *just* happen, or is this a historical event? are we describing the state of an object, or an action that occurred? -- and localizers aren't always thorough at reading localization notes. Avoiding ambiguity is worthwhile.


* When I get a popup with that phrasing (brief past-tense), as a user I interpret it as:

   "The action I just performed to cause this popup to appear -- i.e., tapping Add to Firefox -- resulted in this link being bookmarked".

That's obviously not the case. Imagine getting a notification "Bookmarked!" when you tap a link -- this isn't far from that.


* "Bookmarked" makes my brain hurt, because I'm reading down a list of actions, and this is one... right up until the last two letters, when I have to re-parse. (You could rephrase this concern as "not sufficiently distinct from 'Bookmark'".)

Comment 5

[Chris Kitching [:ckitching]]

(In reply to Richard Newman [:rnewman] from comment #4)
> * When I get a popup with that phrasing (brief past-tense), as a user I
> interpret it as:
> 
>    "The action I just performed to cause this popup to appear -- i.e.,
> tapping Add to Firefox -- resulted in this link being bookmarked".

Likewise.

> * "Bookmarked" makes my brain hurt, because I'm reading down a list of
> actions, and this is one... right up until the last two letters, when I have
> to re-parse. (You could rephrase this concern as "not sufficiently distinct
> from 'Bookmark'".)

This problem is particularly pronounced if this button otherwise looks very similar to the others (same colour etc.) until tapped. One could plausibly quickly misread this and be surprised to find it "pops".

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: shareoverlay1_bookmarked.zip

Attaching "bookmarked" icons!

I like the bounce, but I think just bouncing the icon is enough.

Do we also want to consider a "inactive" color for the font? Not sure if this is applicable but if it is we could try #AFB1B3 from our swatch.

Comment 7

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Thanks for the feedback folks.

I didn't have strong preference on the wording. rnewman's rationale makes sense to me. And I am okay with just bouncing the icons.

Let try these for now and see how it works:
* Use "Already on Reading List" and "Already bookmarked" as rnewman suggested
* Bounce the icon only
* Use an inactive color(#AFB1B3) for the labels when it's already bookmarked/added to reading list. 
* Use "Bookmarked" icon for "Already Bookmarked"

Comment 8

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: icon_Add to Reading List.zip

Add to Reading List icon: Reader mode with a plus on the top right corner.

Comment 10

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_shareoverlay_mock3.png

Attaching a preview of the clean up. The main purpose is to close up this bug as there's still inconsistencies that are in the current version. Taking that opportunity, I also updated some of the visuals (font color, padding, etc) that we have since updated with Tablet UI, etc.

Notable changes:
 - Rounded corners
 - Updated "tapped" state color (See "Add to Reading List" in mock)
 - Updated disabled state (#BFBFBF, See "Already in Bookmarks" [copy debatable])
 - Updated font color (from #43484E to #363B40)
 - Removed build icon indicator (doesn't seem necessary, especially with the visible browser chrome, could debate)
 - Pulled out Page title and URL to overlay content (more contextual)
 - Cleaned up spacing
 - Visual feedback confirmation (will attach in separate comment)

Comment 11

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: share_trigger_confirm_mov3.mov

attaching interaction/animations mock

Comment 12

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: share_trigger_confirm_mov4.mov

keeping the label around for a bit longer (i.e. on confirmation feedback might be a good idea to help the user recall)

Comment 13

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_shareoverlay_mock4.png

Option for sharing from outside Firefox that preserves ability to "just open in Firefox"

Comment 14

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

NI-ing Mike :) let's work on this together!

Comment 15

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I think we can close this now?