903600 - [fig] Bookmarks list folder interaction UX is unintuitive

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Theme and Visual Design, defect, P1)

Description

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

1) When you go down into a folder and have an additional bookmark in the list below this folder, the page scrolls (probably because the boomkmarks below are removed), which is a bit startling

2) In addition to (1), everything outside of the folder is removed and only entries inside the folder are shown, which is unexpected to me - the old bookmarks should remain - (the scrolling of (1) makes this more difficult to intuit)

3) There is not much indication that you are inside of a particular folder - the folder you clicked remains on screen and the "back" button is very small and hard to see. Perhaps highlighting the folder entry in a particular color and/or indenting its contained bookmarks would help?

4) The button to go up a level is small and hard to hit

Disclaimer: This interaction is hard to test due to bug 903592 so this has not been heavily tested

Comment 1

[Lucas Rocha (:lucasr)]

ibarlow, any input?

Comment 2

[Ian Barlow (:ibarlow)]

I'd like to try it before commenting, but I can't reproduce this until we resolve bug 904081 -- Figgy Fennec crashing on startup with Sync... :/

Comment 3

[Lucas Rocha (:lucasr)]

(In reply to Ian Barlow (:ibarlow) from comment #2)
> I'd like to try it before commenting, but I can't reproduce this until we
> resolve bug 904081 -- Figgy Fennec crashing on startup with Sync... :/

ibarlow, bug 904081 has been fixed. Any input here?

Comment 4

[Ian Barlow (:ibarlow)]

Ok, I see a couple of things we can do here to improve this flow. I agree it's a little off.

1. We should be making it clearer that you are inside a folder, first by hiding the bookmarks thumbnails when you enter. The fact that they remain on screen makes for a very confusing mental model. 

2. We should visually treat the "up a level" row differently than the other items. At one point we had discussed making it a slightly darker blue, not sure what happened there. 

3. We should add a subtle crossfade when transitioning between folder levels, to visually reinforce that you are going to a 'new page'. 

Mockup: http://cl.ly/image/0N143f0B3F1E

Comment 5

[Lucas Rocha (:lucasr)]

I'm going to nominate this one as it looks like an important UI change to do before the release.

Comment 6

[Sriram Ramasubramanian [:sriram]]

Crossfade? So we replace the list shown with the child level. Which means, there are no two different pages that can be cross-faded. Or in fact two lists that can be cross-faded. Would like to have a shrink-fade-out and grow-fade-in animation on thumbnails to show the levels? (I was thinking of translating the list to scroll away the thumbnails. But that will have re-layout issues).

Comment 7

[Ian Barlow (:ibarlow)]

Sorry, not sure what you're actually asking me right now Sriram :)

Comment 8

[Sriram Ramasubramanian [:sriram]]

Oh. We cannot cross fade from parent list to child list. Instead can we shink + fade-out the thumbnails when navigating to the child folder (only from the top most level).. and grow + fade-in when returning back to parent folder?

Comment 9

[Ian Barlow (:ibarlow)]

That sounds... visually complex. I'm open to trying it, but if there is a more subtle way to communicate going from one folder level to another, that would be preferable.

Comment 10

[Lucas Rocha (:lucasr)]

I believe this bug will be fixed by removing the grid from the bookmarks panel (see bug 917394) i.e. we'll be restoring the original UI for bookmarks navigation. Ian, agree?

Comment 11

[Ian Barlow (:ibarlow)]

Yeah, that sounds right -- not a problem with the new layout.

Comment 12

[Lucas Rocha (:lucasr)]

This will be fixed once we land bug 917394.

Comment 13

[Lucas Rocha (:lucasr)]

Bug 917394 is fixed now. Closing.

Comment 14

[Lucas Rocha (:lucasr)]

Bug 917394 is now fixed in Aurora (Firefox 26).