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.

quick_view.jpg (662×363 px, 106 KB)

  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.

mweb_filters.png (1×1 px, 1 MB)

Example of color block

Screen Shot 2020-08-24 at 3.46.20 PM.png (330×342 px, 25 KB)

  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

Screen Shot 2020-08-24 at 3.44.02 PM.png (666×892 px, 195 KB)

Event Timeline

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

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.

Screen Shot 2020-09-24 at 9.57.00 AM.png (578×334 px, 246 KB)

  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.

Screen Shot 2020-09-24 at 10.14.00 AM.png (596×366 px, 214 KB)

  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'):

Screen Shot 2020-09-24 at 10.08.43 AM.png (368×352 px, 103 KB)
Screen Shot 2020-09-24 at 10.07.21 AM.png (396×355 px, 118 KB)

Tabs:

Screen Shot 2020-09-24 at 10.19.16 AM.png (549×392 px, 138 KB)

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.

Checked in commons wmf.13.