Closed Bug 1059554 Opened 5 years ago Closed 5 years ago

Visual design for Share overlay

Categories

(Firefox for Android :: Overlays, defect)

All
Android
defect
Not set

Tracking

()

RESOLVED FIXED

People

(Reporter: antlam, Assigned: antlam)

References

(Blocks 1 open bug)

Details

Attachments

(4 files, 4 obsolete files)

Attached image prev_shareoverlay_mock2.png (obsolete) —
Visual designs for the Share overlay in bug 1044947
Attached file shareoverlay1_icons.zip (obsolete) —
Attaching icons
"The 1 dp dividers between the items in the list are #D7D9DB (I think I forgot to label that in the spec)." :)
Assignee: chriskitching → alam
Blocks: 1044947
Status: NEW → RESOLVED
Closed: 5 years ago
No longer depends on: 1044947
Hardware: x86 → All
Resolution: --- → FIXED
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?
Status: RESOLVED → REOPENED
Flags: needinfo?(chriskitching)
Flags: needinfo?(alam)
Resolution: FIXED → ---
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'".)
(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".
Flags: needinfo?(chriskitching)
Attached file shareoverlay1_bookmarked.zip (obsolete) —
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.
Flags: needinfo?(alam)
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"
Attached file icon_Add to Reading List.zip (obsolete) —
Add to Reading List icon: Reader mode with a plus on the top right corner.
Duplicate of this bug: 1107290
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)
Attachment #8480231 - Attachment is obsolete: true
attaching interaction/animations mock
keeping the label around for a bit longer (i.e. on confirmation feedback might be a good idea to help the user recall)
Option for sharing from outside Firefox that preserves ability to "just open in Firefox"
NI-ing Mike :) let's work on this together!
Flags: needinfo?(michael.l.comella)
Flags: needinfo?(michael.l.comella)
Attachment #8480233 - Attachment is obsolete: true
Attachment #8488126 - Attachment is obsolete: true
Attachment #8487586 - Attachment is obsolete: true
QA Contact: flaviu.cos
QA Contact: flaviu.cos → teodora.vermesan
I think we can close this now?
Flags: needinfo?(michael.l.comella)
Status: REOPENED → RESOLVED
Closed: 5 years ago5 years ago
Flags: needinfo?(michael.l.comella)
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.