Work - Need New Icons for contextual tile actions

RESOLVED FIXED

Status

RESOLVED FIXED
6 years ago
4 years ago

People

(Reporter: MarcoM, Assigned: shorlander)

Tracking

Trunk
x86_64
Windows 8.1
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: feature=work)

Attachments

(5 attachments, 3 obsolete attachments)

Comment hidden (empty)
(Reporter)

Updated

6 years ago
Summary: Need New Icons → Work - Need New Icons
(Reporter)

Updated

6 years ago
Blocks: 838497
(Reporter)

Updated

6 years ago
Flags: needinfo?(shorlander)
Priority: -- → P1
For the pin/unpin, block/restore of TopSites story: https://bug831918.bugzilla.mozilla.org/attachment.cgi?id=703488 - we need icons (and possibly labels?) that will apear in the contextual appbar when one or more tiles are selected. We need; 

* pin site(s) - ie fix them in place in the topsites grid
* unpin site(s) - i.e unfix them from the grid so they move or fall off the grid based on frecency
* block sites - filter them so they never appear in the topsites grid

AFAIK the plan is to have unblock/restore be an option/preferences menu item. But maybe it wouldn't hurt to create this at this time too.

Note that for other stories we'll need similar treatment for contextual actions on all the start screen tiles - bookmarks, history, downloads(?) etc. So the same icons may want to be repurposable for these contexts if the meaning is clear.

Also note, I've seen designs that include text labels under the appbar icons. I'm not sure of the status of that, but it may also have a bearing on ow
Summary: Work - Need New Icons → Work - Need New Icons for contextual tile actions
... a bearing on how much information the icons need to contain.
(Assignee)

Comment 3

6 years ago
Created attachment 719300 [details]
Pinning Tile Icons - i01

Initial visuals for the app bar icons and the pinned indicator. Still haven't figured out exactly how our pinning will coexist with pinning of secondary tiles to the start screen.

Someone suggested "Save to Windows Start" in IRC.
Attachment #719300 - Flags: feedback?(yuan)
Flags: needinfo?(shorlander)
(Assignee)

Comment 4

6 years ago
Note: the contextual items in the app bar have transitions that will have to be specced out. It will apply to all of the app bars.
(In reply to Stephen Horlander from comment #3)
> Created attachment 719300 [details]
> Pinning Tile Icons - i01
> 
> Initial visuals for the app bar icons and the pinned indicator. Still
> haven't figured out exactly how our pinning will coexist with pinning of
> secondary tiles to the start screen.
> 
> Someone suggested "Save to Windows Start" in IRC.


Thanks for posting those.

I noticed a few things. Maybe you have already put thoughts into them. But I will just post them here for your consideration. :) 


1. I noticed the Windows 8 contextual commands for selected items are usually indicating actions instead of states. For example, on Win8 start screen, for Unpin/Pin, Larger tile/smaller tile, or Live/static title, there are always 2 icons, instead of 1 toggle icon.

I think the icons on combined URL bar should be treated differently than the icons for contextual commands. In a UI that is often visible to users, the states(such as bookmarked, saved to start screen) often provide more value.

2. I noticed you used "Pin thumbnail" instead of "Pin Top Site". Since we are listed these thumbnails under "Top Sites". I assumed using "Pin Top Site", "Remove Top Site", "Restore Top Site" is clearer. 

3. Lastly, I like the semi-transparent background for the "Pinned" icon. And the icon fits in with the selected state quite well. Its position is also consistent with desktop FX. My only concern is that being visible at top left corner will make the thumbnail less recognizable, as most site logos appear on the same position.


Thanks!
(Assignee)

Comment 6

6 years ago
(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #5)
> 1. I noticed the Windows 8 contextual commands for selected items are
> usually indicating actions instead of states. For example, on Win8 start
> screen, for Unpin/Pin, Larger tile/smaller tile, or Live/static title, there
> are always 2 icons, instead of 1 toggle icon.
>
> I think the icons on combined URL bar should be treated differently than the
> icons for contextual commands. In a UI that is often visible to users, the
> states(such as bookmarked, saved to start screen) often provide more value.

Yes, you are right. I am ok with switching to that model for external consistency. I was mostly worried about internal consistency since we usually refer to these states as toggles instead of actions.


> 2. I noticed you used "Pin thumbnail" instead of "Pin Top Site". Since we
> are listed these thumbnails under "Top Sites". I assumed using "Pin Top
> Site", "Remove Top Site", "Restore Top Site" is clearer. 

Good catch! :)


> 3. Lastly, I like the semi-transparent background for the "Pinned" icon. And
> the icon fits in with the selected state quite well. Its position is also
> consistent with desktop FX. My only concern is that being visible at top
> left corner will make the thumbnail less recognizable, as most site logos
> appear on the same position.

I would also rather have it on the right to avoid conflicts with the upper left. The problem here is that the selected checkmark is in the top right. I think I have an idea for working around this, it might be a little more complicated though.

Have you given any more thought to the conflict between internal pinning and pinning to the start screen? I think we will need unique metaphors for these things. Some options suggested so far:

- Use "Pin" internally and "Save to Windows Start" for start page pinning
- Use "Pin" for both but make sure we are explicit about which type of pinning they are doing
- Continue using "Pin" for Windows Start and choose something else for making thumbnails sticky?

I should also add that we might want to think about calling our start screen something besides the start screen. It is getting really confusing ;)

Thanks!
(Assignee)

Updated

6 years ago
Attachment #719300 - Flags: feedback?(yuan)
(Assignee)

Comment 7

6 years ago
need-info see bottom of comment 6
Flags: needinfo?(yuan)
(In reply to Stephen Horlander from comment #6)
> (In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #5)
> > 1. I noticed the Windows 8 contextual commands for selected items are
> > usually indicating actions instead of states. For example, on Win8 start
> > screen, for Unpin/Pin, Larger tile/smaller tile, or Live/static title, there
> > are always 2 icons, instead of 1 toggle icon.
> >
> > I think the icons on combined URL bar should be treated differently than the
> > icons for contextual commands. In a UI that is often visible to users, the
> > states(such as bookmarked, saved to start screen) often provide more value.
> 
> Yes, you are right. I am ok with switching to that model for external
> consistency. I was mostly worried about internal consistency since we
> usually refer to these states as toggles instead of actions.
> 
> 
> > 2. I noticed you used "Pin thumbnail" instead of "Pin Top Site". Since we
> > are listed these thumbnails under "Top Sites". I assumed using "Pin Top
> > Site", "Remove Top Site", "Restore Top Site" is clearer. 
> 
> Good catch! :)
> 
> 
> > 3. Lastly, I like the semi-transparent background for the "Pinned" icon. And
> > the icon fits in with the selected state quite well. Its position is also
> > consistent with desktop FX. My only concern is that being visible at top
> > left corner will make the thumbnail less recognizable, as most site logos
> > appear on the same position.
> 
> I would also rather have it on the right to avoid conflicts with the upper
> left. The problem here is that the selected checkmark is in the top right. I
> think I have an idea for working around this, it might be a little more
> complicated though.
> 
> Have you given any more thought to the conflict between internal pinning and
> pinning to the start screen? I think we will need unique metaphors for these
> things. Some options suggested so far:
> 
> - Use "Pin" internally and "Save to Windows Start" for start page pinning
> - Use "Pin" for both but make sure we are explicit about which type of
> pinning they are doing
> - Continue using "Pin" for Windows Start and choose something else for
> making thumbnails sticky?

In my opinion "Pin" is the best metaphor for pinning top sites, since the goal is to make the object sticky.
The "Pin" on Windows Start is more abstract. It is similar with saving a file to your desktop. The goal is to grant instant access to the pinned site. But users can still move the tile around on the Windows Start screen. I think the users should be able to get the affordance, if we name it "Save to Start". 

> 
> I should also add that we might want to think about calling our start screen
> something besides the start screen. It is getting really confusing ;)
> 
Yes, good point. Frank and I suggested to Asa. Now we call the page "Firefox Start" internally.

> Thanks!
Flags: needinfo?(yuan)
(Assignee)

Comment 9

6 years ago
Created attachment 726322 [details]
Pinning Tile Icons - i03

Updated to address feedback:

* Moved pin indicator to right side
  - Will require a different display for selected pinned tabs (see "Thumbnail Selected and Pinned")
* Added "Save to Start" Icon
* Switched all icons to actions and not toggles
Attachment #719300 - Attachment is obsolete: true
Attachment #726322 - Flags: feedback?(yuan)
(Assignee)

Comment 10

6 years ago
Just realized I forgot to include "Save to Start" on all the selected mockups, just pretend it's there ;)
(In reply to Stephen Horlander from comment #9)
> Created attachment 726322 [details]
> Pinning Tile Icons - i03
> 
> Updated to address feedback:
> 
> * Moved pin indicator to right side
>   - Will require a different display for selected pinned tabs (see
> "Thumbnail Selected and Pinned")
> * Added "Save to Start" Icon
> * Switched all icons to actions and not toggles

Those look great to me. The pin indicator on the right side of top site thumbnail fit in with the metro title selection very well :)


Only thing I would like to discuss is"Save to Start". I don't think this option should appear in the contextual actions. (Apologize if I wasn't clear about this before)

First, the aim to have contextual options for a tile on Start Screen is to arrange position, change visibility, etc. But "Save to Start" won't change the layout of Firefox Start.

Second, "Save to Start" is basically creating a secondary tile, FX should show the users a preview of the tile before they confirm to create. If the users select multiple top sites, we also need to create multiple previews in one place for the users to confirm.

Lastly, "Save to Start" action is on the same level with "Bookmark" action. If we are adding one, why not the other? Likewise, we would also need to consider add "Save to Start" for history and bookmarks tiles if "Save to Start" is in the options for "Top Sites"

As being said, I think "Save to start" on the main navigation bar should meet the common use case for creating a secondary tile. Having it on the contextual app bar creates value but also brings complexity to the UI. Given the trade-off we are facing with, I think not including "Save to Start" here is more reasonable.  

Would like to hear your thoughts. Thanks!

Comment 12

6 years ago
(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #11)
> As being said, I think "Save to start" on the main navigation bar should
> meet the common use case for creating a secondary tile. Having it on the
> contextual app bar creates value but also brings complexity to the UI. Given
> the trade-off we are facing with, I think not including "Save to Start" here
> is more reasonable.  
> 
> Would like to hear your thoughts. Thanks!

I agree here. No save to start in the context app bar. Much easier that way.
(Assignee)

Comment 13

6 years ago
Yeah, makes sense and a lot less complicated :)
(Assignee)

Comment 14

6 years ago
Created attachment 726419 [details]
Pinning Tile Icons - i04
Attachment #726322 - Attachment is obsolete: true
Attachment #726322 - Flags: feedback?(yuan)

Updated

6 years ago
Component: General → Firefox Start
Version: unspecified → Trunk
(Assignee)

Comment 15

6 years ago
Created attachment 726696 [details]
App Bar - Contextual Icons - 01
(Assignee)

Comment 16

6 years ago
Created attachment 726697 [details]
App Bar - Contextual Icons - 01 - (HiDPI 140%)
(Assignee)

Comment 17

6 years ago
Created attachment 726702 [details]
App Bar - Contextual Icons - 01

Added new icons to app-bar.png. Also changed the gear icon.
Attachment #726696 - Attachment is obsolete: true
(Assignee)

Comment 18

6 years ago
Created attachment 729624 [details]
Tile Pinned State Indicator - 01
(Assignee)

Comment 19

6 years ago
Created attachment 729625 [details]
Tile Pinned State Indicator - 01 (HiDPI 140%)
We use the X icon for hide top site, which should be used for the "restore top sites" action?
Flags: needinfo?(shorlander)
(Assignee)

Comment 21

6 years ago
(In reply to Sam Foster [:sfoster] from comment #20)
> We use the X icon for hide top site, which should be used for the "restore
> top sites" action?

Restore arrow, last icon in appbar-icons.png
Flags: needinfo?(shorlander)
appbar-icons.png updated in #800996: https://hg.mozilla.org/mozilla-central/rev/56ceb60c5d0b

pinned state indicator added in #854960: https://hg.mozilla.org/mozilla-central/rev/7c34dfbf3d27
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
(Assignee)

Updated

6 years ago
Priority: P1 → --
OS: Windows 8 Metro → Windows 8.1
You need to log in before you can comment on or make changes to this bug.