798696 - When viewing single image in Gallery, extremely hard to find button to go back to thumbnail view

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Gallery, defect)

Description

[Chris Jones [:cjones] inactive; ni?/f?/r? if you need me]

Issues that came out of my "user research"
 - the button is in the bottom-left of the gallery view.  Other "back buttons" are in the top left of app views.
 - the button doesn't indicate that it goes back to anywhere.  (The meaning wasn't understood at all, in fact.)

This led to a lot of frustration.

Comment 1

[Dietrich Ayala (:dietrich)]

Josh, can your team take a second look at this icon and interaction?

Comment 2

[Jan Jongboom [:janjongboom] (inactive)]

Attachment: Move the back button to a header element in gallery detail view

This patch is a proposal on how to fix this. I have moved the back button to a 0.75 opacity dark header element (that goes away if you tap the photo). It looks pretty good actually, and it is way more clear on how to go back.

Comment 3

[David Flanagan [:djf]]

Comment on attachment 718438 [details] [diff] [review]
Move the back button to a header element in gallery detail view

Resetting the review request to Josh.

It doesn't make sense for me to even look at the code until we have UX approval to change the design in this way.

Note that this is not just a UX issue for Gallery. The camera uses the same grid icon in the lower left to switch to the gallery app, so landing this bug might also require rethinking the camera UX.

Comment 4

[Jan Jongboom [:janjongboom] (inactive)]

Attachment: Screenshot of the change in portrait mode

Comment 5

[Jan Jongboom [:janjongboom] (inactive)]

Attachment: Screenshot of the change in landscape mode

Comment 6

[Jan Jongboom [:janjongboom] (inactive)]

Casey or Josh, I've added a screenshot of my proposed change in the case that the bars are visible (tap the screen to hide em both). Can anyone give me a needinfo?

Comment 7

[Casey Yee]

I agree that we need a real back button to return to the gallery grid view.

The back button and the empty header takes up a lot of screen space.  We'll need a better design.

Patryk, can we come up with some kind of back button that we can use on it's own separate of the header bar?   There are several similar situations where it would be very nice to have a less-obtrusive back button.

Comment 8

[Patryk Adamczyk [:patryk] UX]

Agreed. Eric will attach a new design.

Comment 9

[Jan Jongboom [:janjongboom] (inactive)]

We might want to add stuff like rotating the image in the header bar as well, so if there's space for that that'd be nice.

Comment 10

[Eric Pang [:epang] UX]

Attachment: back button mock up

Mock ups for back button in gallery

Comment 11

[Josh Carpenter [:jcarpenter]]

Sorry for the slow response on this one. The new implementation is definitely a usability improvement. Visuals feel a bit inconsistent, however. Perhaps too domineering. Smaller and slightly inset might help. I probably need to see and feel on device though. Let's implement as is and we can always tweak.

This thread reminds me of another issue: we should almost _never_ reveal the Gallery background. Photos should always fill the screen, even if it means scaling them up so some of their real estate falls outside screen boundaries. Our current Gallery feels a tad ugly because we're constantly revealing that gray background (which should probably be black, while we're at it). I'll file a separate bug for this.

Comment 12

[Josh Carpenter [:jcarpenter]]

Comment on attachment 718438 [details] [diff] [review]
Move the back button to a header element in gallery detail view

-ing. Superseded by newer layouts.

Comment 13

[Eric Pang [:epang] UX]

Hi Josh,

Just wanted to clarify, should Pavel implement according to my mock ups?  Then once ready we can see what it's like on the device and make any necessary tweaks?  Let us know, thanks!

Comment 14

[Josh Carpenter [:jcarpenter]]

(In reply to Eric Pang [:epang] from comment #13)
> Hi Josh,
> 
> Just wanted to clarify, should Pavel implement according to my mock ups? 
> Then once ready we can see what it's like on the device and make any
> necessary tweaks?  Let us know, thanks!

Hi Eric, that is correct. Let's implement per comment #10.

Comment 15

[Eric Pang [:epang] UX]

(In reply to Josh Carpenter [:jcarpenter] from comment #14)
> (In reply to Eric Pang [:epang] from comment #13)
> > Hi Josh,
> > 
> > Just wanted to clarify, should Pavel implement according to my mock ups? 
> > Then once ready we can see what it's like on the device and make any
> > necessary tweaks?  Let us know, thanks!
> 
> Hi Eric, that is correct. Let's implement per comment #10.

Hi Pavel, we're good to implement, thanks! :)

Comment 16

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch

the mockup image have bad quality ... so ... maybe we need to adjust the colors

Comment 17

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia repo

Comment 18

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Eric see comment #3 What about cammera app? We should save the icons there, or ... ?

Comment 19

[David Flanagan [:djf]]

Comment on attachment 741755 [details]
patch for Gaia repo

This new back button looks and feels much better than the old version.

I think the background should be translucent, and I think the button should hide (like the bottom toolbar) when the user taps, however, so I'm giving r- for now.

Also, there is a z-index issue, and I think some unnecessary foreground colors and unnecessary unlocalized text in the button.  See my comments on github.

Comment 20

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #18)
> Eric see comment #3 What about cammera app? We should save the icons there,
> or ... ?

Hi Josh, based on comment 3 did we want to implement this button for the camera app as well?

Comment 21

[Eric Pang [:epang] UX]

Attachment: Gallery - Back Icons

Comment 22

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #16)
> Created attachment 741753 [details]
> After patch
> 
> the mockup image have bad quality ... so ... maybe we need to adjust the
> colors

Hi Pavel, I didn't realize I didn't attach the icons to this bug.  Ive added them now " Gallery - Back Icons".  Let me know if this works better.  Thanks!

Comment 23

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #22)
> (In reply to Pavel Ivanov [:ivanovpavel] from comment #16)
> > Created attachment 741753 [details]
> > After patch
> > 
> > the mockup image have bad quality ... so ... maybe we need to adjust the
> > colors
> 
> Hi Pavel, I didn't realize I didn't attach the icons to this bug.  Ive added
> them now " Gallery - Back Icons".  Let me know if this works better.  Thanks!

By the way the button is translucent when in it's unpressed state (grey) but opaque with pressed (blue state) - As David added in comment 19, I also think it's a good idea to have it hide when the user tapped on the screen.

Comment 24

[Josh Carpenter [:jcarpenter]]

(In reply to Eric Pang [:epang] from comment #23)
> (In reply to Eric Pang [:epang] from comment #22)
> > (In reply to Pavel Ivanov [:ivanovpavel] from comment #16)
> > > Created attachment 741753 [details]
> > > After patch
> > > 
> > > the mockup image have bad quality ... so ... maybe we need to adjust the
> > > colors
> > 
> > Hi Pavel, I didn't realize I didn't attach the icons to this bug.  Ive added
> > them now " Gallery - Back Icons".  Let me know if this works better.  Thanks!
> 
> By the way the button is translucent when in it's unpressed state (grey) but
> opaque with pressed (blue state) - As David added in comment 19, I also
> think it's a good idea to have it hide when the user tapped on the screen.

Agreed :)

Comment 25

[Josh Carpenter [:jcarpenter]]

(In reply to Eric Pang [:epang] from comment #20)
> (In reply to Pavel Ivanov [:ivanovpavel] from comment #18)
> > Eric see comment #3 What about cammera app? We should save the icons there,
> > or ... ?
> 
> Hi Josh, based on comment 3 did we want to implement this button for the
> camera app as well?

No, the Camera app layout should remain unchanged.

Comment 26

[Eric Pang [:epang] UX]

(In reply to Josh Carpenter [:jcarpenter] from comment #25)
> (In reply to Eric Pang [:epang] from comment #20)
> > (In reply to Pavel Ivanov [:ivanovpavel] from comment #18)
> > > Eric see comment #3 What about cammera app? We should save the icons there,
> > > or ... ?
> > 
> > Hi Josh, based on comment 3 did we want to implement this button for the
> > camera app as well?
> 
> No, the Camera app layout should remain unchanged.

Hi Pavel, what's the status of this bug?  You mentioned you might need help from David?

Comment 27

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch

Hey David,
I hope my logic is right and the patch is ok

Comment 28

[Jan Jongboom [:janjongboom] (inactive)]

Comment on attachment 741755 [details]
patch for Gaia repo

f+ from me. I think a black button with opacity .8 would be nicer, but I'm not a designer. Functional it's nice.

Assigning r? to Dale, as the n? was set by accident to the wrong person I guess :-)

Comment 29

[Dale Harvey (:daleharvey)]

Comment on attachment 741755 [details]
patch for Gaia repo

Moving the r? along to David as he is the Gallery owner, I dont touch it much

Comment 30

[David Flanagan [:djf]]

Dale: thanks for passing this to me.

Pavel: I never saw your needinfo from May because I haven't used that email address in years...  Sorry that this patch has just been sitting here.  I'll review soon.

Comment 31

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Oh, right ... the wrong email ... no problem David 10x for help. I just rebase my PR and now is up to date. Thanks again.

Comment 32

[David Flanagan [:djf]]

Comment on attachment 741755 [details]
patch for Gaia repo

r+ but note that the toolbar and the back button are animated differently. One is 100ms linear and the other is .2s ease-in-out. If that is intentional, its fine with me. But if it is an oversight, please fix before landing.

Comment 33

[David Flanagan [:djf]]

Pavel,

I'm setting needinfo here because I'm not sure you'll see the r+ and question above since it was Jan that set the r? most recently.

Comment 34

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey David,
thanks sorry I was off for few days.
I change the animation to 0.2s linear for the toolbar and the back button but I just want to check this with Eric.

Comment 35

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Eric,
can you check this patch? is this 0.2s for animation is enough?

Comment 36

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #35)
> Hey Eric,
> can you check this patch? is this 0.2s for animation is enough?

Hi Pavel, sorry I'm only getting back to you now!  The speed of the animation seems good to me.  Though it doesn't look like the grey state of the icon is translucent, can you check?  Right now it's looking to heavy. thx.

Comment 37

[Eric Pang [:epang] UX]

Comment on attachment 741755 [details]
patch for Gaia repo

Looks much better to me!

Comment 38

[Eric Pang [:epang] UX]

Hey Pavel, are we able to land this patch?

Comment 39

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Landed on master:
https://github.com/mozilla-b2g/gaia/commit/21513e36ea3a2b55d8b2a603f4d96dfa82673526

Comment 40

[Eric Pang [:epang] UX]

Thanks Pavel! Marking as Resolved Fixed