Page MenuHomePhabricator

Make mobile diff page prev/next experience consistent with desktop
Closed, ResolvedPublic2 Estimate Story Points

Description

As @TheDJ pointed out to us, the desktop diff view shows the next and previous links at the top of the diff. On mobile they are at the bottom. This makes them hard to discover even by seasoned editors like himself.

For consistency these should be duplicated at the top of the page.

Mock

Testing instructions

  • ON any page navigate to history via the bar at the very bottom of the page e.g. https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:History/Albert_Einstein
  • Click on one of the links
  • At the top of the page there should be a previous and/or a next link. Clicking it should take you to the diff before/after.
  • On the most recent diff there should only be a previous link.
  • After clicking previous diff multiple times, you should reach the very first diff.

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterMove the mobile revision navigation links to top

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 24 2017, 7:28 PM
Nirzar added a subscriber: Nirzar.EditedJun 27 2017, 11:34 PM

based on the Hackathon Discussion with @TheDJ this works for me!

I would want to use #36C and bold links.
Like we use on Userpage

Edit: Apparently, we don't use this on userpages. so I will create a bigger task for updating link color to match our styleguide. pray for me.

Talk contrib dot separated links. better usability

Jdlrobson renamed this task from Inconsistency on diff pages to Make mobile diff page prev/next experience consistent with desktop.Jun 27 2017, 11:48 PM
Jdlrobson triaged this task as Medium priority.
Jdlrobson updated the task description. (Show Details)
Niedzielski updated the task description. (Show Details)Aug 2 2017, 3:40 PM

Estimates 1-3 and coffee.

TODO from @Nirzar :

  • Update mock to drop bottom buttons.
  • Clarify whether previous and next links should be floated left and right or together.
Jdlrobson updated the task description. (Show Details)Aug 22 2017, 6:33 PM

@Nirzar can you confirm which of the above mocks is correct and what the padding should be (if any?)

Nirzar updated the task description. (Show Details)Aug 22 2017, 8:06 PM

@Jdlrobson I removed one mock from the desc. we would like them to be separate.

but...... Wikimedia germany is going to be working on some improvement to mobile diff. reading design will be designing for them. Maybe we can punt on this card and make it part of that effort. they will be doing the development for it.

ovasileva set the point value for this task to 2.Aug 29 2017, 4:12 PM
pmiazga claimed this task.Aug 31 2017, 1:36 PM

Change 375411 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Move the mobile revision navigation links to top

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

@Nirzar I didn't change the navigation links from Previous edit and Next edit to Previous and Next as currently, MobileDiff page is using same text labels as the desktop version.

TheDJ added a comment.EditedSep 1 2017, 10:18 PM

@Nirzar Why not two buttons on either side of the diff, have it like caroussel/gallery pagination ?

Or Swipe, swipe, swipe ?

Seems much better aligned with mobile web UX concepts. :)

Nirzar added a comment.EditedSep 1 2017, 10:51 PM

@TheDJ do you mean buttons instead of links?

Yeah I wanted to propose that, but we don't have capacity to increase scope :(

here's what we proposed for Revisions >

Diff could be similar. WMDE is going to do some work on Mobile Diff very soon as part of wishlist. Foundation will have some design resources on that. We will definitely propose this suggestion when WMDE works on this. There are a lot of usability issues on this page.
The sticky footers wastes a lot space in some cases. the hierarchy for information could be much better.

I will ping you once our designer has proposals for making mobile diffs better. Not sure how much of that work will get done by WMDE.

Or Swipe, swipe, swipe ?

That is the ultimate goal but we haven't done any gestures on mobilefrontend yet, and that's been a blocker for a lot of features like TOC.
Coincidentally, we're might try that on native apps first, because gestures are more predictable to do on native.

Jdlrobson reassigned this task from pmiazga to ABorbaWMF.Sep 5 2017, 2:41 PM
Jdlrobson added a subscriber: pmiazga.
Jdlrobson updated the task description. (Show Details)Sep 5 2017, 2:44 PM

Change 375411 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Move the mobile revision navigation links to top

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

I took a quick look at this one iOS and android and at a few different URLs on mediawiki. Everything seems to be working.

Nirzar closed this task as Resolved.Sep 6 2017, 6:45 PM

nice!

@TheDJ This is done, resolving it. I will keep you updated on the upcoming improvements by WMDE on this.

Thank you!