971776 - [UX] Improve the context menus in Firefox

Status: VERIFIED FIXED

(Firefox :: Menus, defect)

Description

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Attachment: NOT a spec

Context menus in various places have collected some cruft and sometimes don't solve problems too well.

We should make an effort to
a) re-architect those menus
b) consider new ways to display things that go beyond lists (see attachment for an example)

Comment 1

[Sevaan Franks [:sevaan]]

Fennec has a similar context menu at the moment, which can be used as a guideline to creating the context menu for desktop.

This new context menu will help unify the experience across devices.

Comment 2

[Florian Bender]

Looks awesome! 

Please mind HTML5 <menu>: see Bug 705292 Comment 0 and 2.

Also, some addons open a submenu with more options (or should somehow when instead they are adding a load of additional entries …) – how's that gonna work?

Comment 3

[Sevaan Franks [:sevaan]]

Some initial thoughts and a concept for the context menu can be seen here: https://people.mozilla.org/~sfranks/ContextMenus/Improving%20Context%20Menus%20in%20Firefox%20Desktop%20-%20Concept.pdf

Comment 4

[Sean Bolton]

Wow, nicely done! I like the Australis feel and the shortening of a long menu. Really like that you look at customization! Like the consistency across platforms (w/ Android) – is it worth going even further and replicating spacing/style in some way?
Two main questions: 1) what sharing services show up by default? Can we learn this from browser usage (e.g. I'm always on Facebook)? 2) How do we surface this an non-intrusive on the first run? Can we make it an offer to maker sharing easier or allow people to turn it off that don't want it?

Comment 5

[Sevaan Franks [:sevaan]]

Hey Sean, thanks for the feedback!

I suspect we'll investigate some further ways to make a more consistent experience across platforms. Whether it ends up as a unified style, I don't know. I don't expect that will be the case, at least not for a while, but would be curious as to other smaller elements of the browser you think we could merge/adopt a style with/from.

Regarding your two main questions:

1) We haven't begun thinking on what the default services would/should be, and are open to recommendations at this point. If you want to take a stab at an initial list, that would be helpful. The focus is on both sharing /and/ saving services. I don't think we can learn from browser usage and predict what a user is going to use, but rather instead the most commonly used tools will be surfaced into the context menu itself. So it learns from you as you use it.

2) First-run is another feature we haven't yet started our thinking on (feel free to come up with some ideas...have you seen the first-run experience for Australis?). At the moment our next step is to break down the 8 context menus Firefox uses and see what other improvements we can work in. The presentation above is just to introduce the "box" around it. More updates will be posted to this thread for your feedback and please let us know of any ideas you have too.

I suspect the customization aspect of the context menus will bring a lot more users to use that functionality...and if they don't want the sharing options, they can just remove it, or replace them with other buttons they find useful. Customization is a big part of making context menus more powerful for users :-)

Comment 6

[Zhenshuo Fang (:fang) - Firefox UX Team]

In summary there are three components for this exploration: 
1)Add Back/forward/reload/star in context menu
2)Add share options in context menu
3)Make context menu customizable

Marking this bug fixed while we start working on 1) in bug 996118.

Comment 7

[Tim Nguyen :ntim]

What about HTML 5 <menu> element ?

Comment 8

[Zhenshuo Fang (:fang) - Firefox UX Team]

(In reply to Tim Nguyen [:ntim] from comment #7)
> What about HTML 5 <menu> element ?

I'm not sure I get your question, can you elaborate a little bit more? :)

Comment 9

[Tim Nguyen :ntim]

(In reply to Zhenshuo Fang (:fang) - Firefox UX Team from comment #8)
> (In reply to Tim Nguyen [:ntim] from comment #7)
> > What about HTML 5 <menu> element ?
> 
> I'm not sure I get your question, can you elaborate a little bit more? :)

HTML 5 has a context menu spec, that is supported by Firefox.
You can see a blog post (that also has a demo) here : http://davidwalsh.name/html5-context-menu

Where will those menu items be placed ?

Comment 10

[Florian Bender]

Check out the last example under 4.11.5.2: http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#declaring-a-context-menu

Comment 11

[jaramat]

(In reply to Sevaan Franks [:sevaan] from comment #5)
> 1) We haven't begun thinking on what the default services would/should be,
> and are open to recommendations at this point. If you want to take a stab at
> an initial list, that would be helpful. The focus is on both sharing /and/
> saving services. I don't think we can learn from browser usage and predict
> what a user is going to use, but rather instead the most commonly used tools
> will be surfaced into the context menu itself. So it learns from you as you
> use it.

I'm not sure if this is the right place to make this proposal, but I think that the sharing services could/should work similar to how the keyword search works now - i.e. it grabs the page/link/image's URL and sends it as a request to the sharing service. One of the benefits of this is that it could work like the add-on (https://addons.mozilla.org/en-US/firefox/addon/playlink) works - users could use it to quickly open sites in other programs.

Of course, users would have to set their services/programs up first, or just leave it at the defaults (which need to be determined).

Having this as a built-in feature would be pretty awesome.

Comment 12

[Sevaan Franks [:sevaan]]

(In reply to jaramat from comment #11)

Hey Jaramat, thanks for the thoughts. Have you seen Mozilla's Social API? You can read about it here: https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Social_API

And you can try it out here: https://activations.cdn.mozilla.net/en-US/

This way all the interactions occur in the browser chrome which can make for a smoother experience.