Closed Bug 978306 Opened 6 years ago Closed 4 years ago

[meta] Improve UX for navigating many panels

Categories

(Firefox for Android :: General, defect, P3)

All
Android
defect

Tracking

()

RESOLVED DUPLICATE of bug 1195728

People

(Reporter: bnicholson, Unassigned)

References

(Blocks 1 open bug)

Details

Looking at the list of panel ideas at https://mobile.etherpad.mozilla.org/hub-demos, there are at least 5 or so that I'd be interested in using; this is in addition to the existing Top Sites/History/Bookmarks/Reading List panels that are enabled by default. We're also considering adding a Downloads panel that would be enabled by default, so that's 5 installed panels out of the box. 

It's not hard to imagine that users could end up with 10+ panels that they're interested in, and we should hope that they do as it means that our panel idea is a success. But navigating among this many panels will likely be a headache, especially if the user hasn't memorized the order their panels are in.

Some solutions discussed so far have included a separate panel used as an index list, a quick dial for panels, or even using the deck of cards pattern found in Chrome and Google Now.
Flags: needinfo?(ibarlow)
Blocks: lists
I think we should start thinking about this bug sooner rather than later, since I'm worried that implementing a solution for this bug would be a non-trivial amount of work.

I think our current UI is fine for Fx30/31, but we may want to improve the lots-of-panels UX for Fx32, if that's the release where we want to encourage users to install lots of panels.
Priority: -- → P2
Just checking in on this bug... I have 5 new custom panels in my default Nightly, and I'm finding it annoying to navigate between them.

I feel like my favorite part of my new home panels is spontaneously discovering new content, but that really only happens for the default panel, because I need to be specifically looking for something to swipe to the side.
Priority: P2 → P3
Would it be possible to make a panel that listed all of your installed panels that have updated content or something?
(In reply to Deb Richardson [:dria] from comment #3)
> Would it be possible to make a panel that listed all of your installed
> panels that have updated content or something?

I was about to go make an add-on to do this, but we locked down the objects in Home.jsm such that add-ons don't have access to the list of installed panels. We could try doing something like this as part of the product, although we would need to add some new functionality if we wanted to know which panels were updated recently.

It would actually be cool if you could have one conglomerate feed of contents from all the panels, but I'm not sure how we would do that.
There's a limit to everything. Desktop had the "too many toolbars" issue a while ago (I am assuming Australis fixes some of this). How many panels should we expect people to have installed? Surely if you have 5 panels installed, along with the builtin in 4 panels (9 panels total) there are some panels you use more than others.

I am just pushing back on the need for Fennec to have a "panel navigator" system built into the app, when any such system will have it's own set of issues too. Heck, the ViewPager is suppose to be part of the solution to this problem.
Blocks: 1064386
Redirecting this needinfo to yuan.
Flags: needinfo?(ibarlow) → needinfo?(ywang)
Simple solution to consider: use the our tablet tab strip on phones. It allows you to scroll the homepage's tab strip independently of the panels giving you direct access to individual panels i.e. it doesn't force you scroll through the panels sequentially.

We can experiment with fancier solutions but this would be a good start for now.
I think we should start with Lucas's suggestion. It might not be easy to discover since I assume most people will swipe through the panels not the titles. But we can show a contextual hint to people who have more than 5 panels installed. 

I've also been talking about making customizing home panel easier to access. The first thing we could do is when the user long press on the title banner of home panels, Fennec brings the users directly to Customize/Home setting page.
Flags: needinfo?(ywang)
Updating the bug summary here to be about making an incremental improvement.

It would be worth seeing if we could do this during the Fx35 timeframe, since we're adding yet *another* panel with the synced tabs panel.
tracking-fennec: --- → ?
Summary: Decide UX for navigating many panels → Improve UX for navigating many panels
Turning this into a meta bug.
tracking-fennec: ? → ---
Summary: Improve UX for navigating many panels → [meta] Improve UX for navigating many panels
Depends on: 1073053
(In reply to Lucas Rocha (:lucasr) from comment #7)
> Simple solution to consider: use the our tablet tab strip on phones. It
> allows you to scroll the homepage's tab strip independently of the panels
> giving you direct access to individual panels i.e. it doesn't force you
> scroll through the panels sequentially.

This was one of the solutions I suggested, the other was using a FAB and opening a list of panels[1].

Or there's always the tabs button to the left idea and then on the AwesomeScreen, that button could transform into a drawer button/action and open a drawer with the panels list there.

[1] http://material-design.storage.googleapis.com/images/patterns-promotedactions-relatedactionsFAB15do2_large_mdpi.png
Depends on: 976983
I'd be interested in seeing how we attempt to handle this on iOS too. I have seen some iOS mocks that use a Navigation Drawer to present the list of panels. We could do the same on Android too.
Picking up from where Lucas and Yuan left off, I think the simplest solution here would be to use the updated Android design style of "Scrollable" tabs. 

http://www.google.com/design/spec/components/tabs.html#tabs-specs 

I thought about "Fixed" tabs as well, but we can sometimes have long names as our Panel Titles and that causes issues. With the new "Scrollable" styles, we get to expose more tabs, we have a way to deal with overflow, and we benefit from system UX conventions/ alignment. Coincidently, this is also pretty much what Tablet is already doing. :)
I've been thinking about this, if porting the tablet feature to the phone isn't much work, that's something we should definitely do, but thinking about our Lollipop work, we can certainly move towards a more responsive UI to merge the code. A lot of work has been put in to Android to ensure that's not only feasible but easier. But with Lollipop in mind, we have four options:

1. All/Fixed Tabs (https://lh6.ggpht.com/ymiMOXSTXuS2qdCfSAvf-Flz3LVGu6hfybUDziB5fvOrKG4Euswng5ge0ziyGAMfvw=h900): Great for discovery and navigation but not so much legibility. Though as in the image linked, we could have the orange background which would be great for branding. Though I fear that'd be a gaudy.

2. Floating Action Button featuring list (http://material-design.storage.googleapis.com/images/patterns-promotedactions-relatedactionsFAB15do2_large_mdpi.png): Great for branding if we have the FAB graphic as the Firefox logo, but there's not enough evidence available to talk of how users are taking towards lists within FABs to make a determination about discoverabiility. I do know that Tumblr had a huge amount of success with it and that's what lead to Google adopting it.

3. Current Tablet Method: Not great for discoverability, though improved navigation, still not the best. No branding avenue.

4. Spinner/dropdown (http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7SXp4WFFUZDZwSE0/components_menus_usage1.png) was dismissed previously for discoverability issues but with Lollipop in mind, may be worth another visit of the idea.
I'm going to dupe this forward to a new bug that we have filed to revive this effort.
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1195728
You need to log in before you can comment on or make changes to this bug.