Page MenuHomePhabricator

[M] Improve mobile UX for MediaSearch UI
Closed, ResolvedPublic

Description

The areas on mobile web that will need adjustment are:

  1. Quick View. Instead of being an element on the side of the viewport like on desktop, on mobile it can be a full screen modal / takeover.

  1. File type tabs and filters need a way to fit on the screen. We want to follow the desktop design with the filters below the tabs but with the limited real estate these rows will need to be horizontally scrollable. Since we are supporting a variety of viewport sizes, adding a block that is a fade of transparent to white (Left to right) on top of the text to indicate there is more information to the right could be useful affordance.

Example of color block

  1. We also need to pay special attention to the tap target areas for these two rows of controls to make sure they are easy to use. I've added additional height for each row and tap area to help eliminate mis-tapping. The general idea there is making sure the rows are at least 48px tall, with 6px of left and right margin on each element and 8px in between elements

Event Timeline

egardner created this task.Jul 22 2020, 4:44 PM
Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptJul 22 2020, 4:44 PM
mwilliams updated the task description. (Show Details)Jul 27 2020, 8:19 PM
mwilliams added subscribers: Ramsey-WMF, CBogen, AnneT.
mwilliams updated the task description. (Show Details)Aug 4 2020, 8:12 PM
CBogen renamed this task from Improve mobile UX for MediaSearch UI to [M] Improve mobile UX for MediaSearch UI.Aug 26 2020, 4:22 PM

Change 622918 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Add dialog base component and use for QuickView on mobile

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

AnneT added a comment.Aug 28 2020, 2:45 AM

Patch above only covers the first item in this task, launching a dialog with QuickView content on mobile.

Change 627638 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Add horizontal scrolling to tabs on mobile

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

Change 627638 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add horizontal scrolling to tabs on mobile

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

Change 622918 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add dialog base component and use for QuickView on mobile

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

Change 627936 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Add horizontal scrolling for filters on small screens

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

Change 627936 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add horizontal scrolling for filters on small screens

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

Change 628434 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Adjust tab and filter spacing on mobile

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

Change 628434 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Adjust tab and filter spacing on mobile

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

@mwilliams FYI, all of this is up on beta if you want to take a look and make adjustments if needed!

Etonkovidova added a subscriber: Etonkovidova.

Checked in betalabs - seems that everything is in place, but it'd be great if @mwilliams will take a look (if all look ok - then the task can go to Verify in production).

1 .Quick View. Instead of being an element on the side of the viewport like on desktop, on mobile it can be a full screen modal / takeover.

  1. File type tabs and filters need a way to fit on the screen. We want to follow the desktop design with the filters below the tabs but with the limited real estate these rows will need to be horizontally scrollable. Since we are supporting a variety of viewport sizes, adding a block that is a fade of transparent to white (Left to right) on top of the text to indicate there is more information to the right could be useful affordance.

Fading (transparency) is in place.

  1. We also need to pay special attention to the tap target areas for these two rows of controls to make sure they are easy to use. I've added additional height for each row and tap area to help eliminate mis-tapping. The general idea there is making sure the rows are at least 48px tall, with 6px of left and right margin on each element and 8px in between elements.

The screenshots are to show the margins on the first element ('All image sizes') and the second ('All file types'):

Tabs:

This is looking really good to me! Plenty good enough to head to production and I'll spend more time with it once it is out and easier to test.

Etonkovidova closed this task as Resolved.Oct 15 2020, 11:54 PM

Checked in commons wmf.13.