Page MenuHomePhabricator

Clicking the black frame should close Multimediaviewer
Open, LowPublic

Description

As most other gallery browers, people expect to be able to dismiss them by clicking the black frame around the image. Now the only two ways to close are the close button, or Esc, and both are not very 'mouse' friendly. (If your hand is on the mouse, the time to discover and move your mouse to the close button takes long)

Event Timeline

TheDJ created this task.Apr 28 2016, 1:11 PM
Restricted Application added subscribers: TerraCodes, Aklapper. · View Herald TranscriptApr 28 2016, 1:11 PM
Jdlrobson triaged this task as Low priority.Apr 28 2016, 5:12 PM
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson added subscribers: Nirzar, Jdlrobson.

@Nirzar any thoughts around this?
Sounds good to me though.

Nirzar claimed this task.Apr 28 2016, 8:12 PM
Nirzar added a project: Design.

sure. seems like a standard lightbox pattern.

The one thing I'd be concerned with, is when there are several pictures in a gallery and you've got the prev/next arrows. In this case there are –in my experience– some lightbox implementations where the sides are acting as prev/next clickable area, not as close one. Example https://en.wikipedia.org/wiki/Pinarello#/media/File:Pinarello_Dogma_F8_with_Shimano_Dura_Ace_Di2_and_Enve_6.7_Wheelset_(14667510890).jpg

Change 511343 had a related patch set uploaded (by Simon04; owner: Simon04):
[mediawiki/extensions/MultimediaViewer@master] Clicking on the black wrapper should close MVV

https://gerrit.wikimedia.org/r/511343

Testing out the patch, it works well and the solution is good.
Per @Volker_E comment earlier, I'm not sure if the behaviour is correct. Personally I expect to click the black area to hide the UI, so closing it is not 100% perspective. @Volker_E can you and the design team make a call here and plus 2 if you think this is correct?

Tgr added a subscriber: Tgr.May 20 2019, 10:04 AM

My main concern here would be that it is easy to mis-click the buttons which are usually in the black area, and accidentally exit from the viewer. I think we had another task about this with more discussion, but can't find anything now...

simon04 moved this task from Backlog to Design on the MediaViewer board.Jun 10 2019, 7:00 AM
Jdlrobson added a subscriber: alexhollender.

@alexhollender would you be able to weigh in on this question about the DESKTOP version of mediaviewer?

@alexhollender would you be able to weigh in on this question about the DESKTOP version of mediaviewer?

I support this change. I just checked several other lightboxes / image galleries and this seems to be standard (Facebook, Instagram, Pinterest, Twitter, Dribbble), as @Nirzar mentioned above.

Perhaps in conjunction with this (or separately) we could increase the height/affordance of the previous/next buttons, e.g.

current height = 120pxincreased height = 140px

+1 to the idea proposed in the task in general. Additionally to the height affordance question above, we should consider to make the clickable area start from right, so that users are not going to think they are on prev/next or one of the other buttons and in reality are on the right of the button – closing MMV.
Not sure how the positioning came together, but even in current way, latter seems to meet user expectations better to me:

currentproposed

The button offset has been introduced in a62410616dc803d1066. Wild guess is that background image positioning was not consistently implemented back then? @MarkTraceur might be able to shed some light here?

Tgr removed a subscriber: Tgr.Tue, Jul 9, 6:03 PM

Change 511343 merged by Jdlrobson:
[mediawiki/extensions/MultimediaViewer@master] Clicking on the black wrapper should close MVV

https://gerrit.wikimedia.org/r/511343