Page MenuHomePhabricator

Timeless: Usability issues on mobile devices
Closed, ResolvedPublic

Description

Issues with the Timeless skin on mobile (Android and iOS), particularly on narrow screens in portrait mode:

  1. The search box at the top is unusable [1]. T161471
  2. Swiping right to exit the menus/sidebars is fascinating but unintuitive since this is not very obvious. A touch/click action outside the menu should allow the menus to disappear. (resolved at some point)
  3. One button overlaps with the MediaWiki wordmark at the top [2], and the namespace/namespace talk buttons (top left) are moved downwards on the Main Page even though there's enough space [3]. Curiously this does not happen on Extension:Scribunto/Lua reference manual [4], or maybe all six buttons were moved downwards. (resolved at some point)
  4. The TOC does not wrap properly and some text is hidden on on the left (it is impossible to scroll) [5]. (resolved at some point)
  5. Conversely, tables are hidden to the right, forcing the page to be wider [6]. Minerva hides the overflow and allows a table to scroll by itself. (So does Phabricator, incidentally.) T179265
  6. Notifications menu should be more responsive (i.e. should stay in the middle of narrow windows and not move other content regardless of where the bell and mailbox icons are); currently it is identical to the Vector implementation and does not look very nice on small screens [7]. (resolved at some point, likely in Echo itself)
  7. Inefficient use of horizontal space. Better to have edge to edge ui and small padding on content on narrow form factors (resolved at some point, at least for mobile (cough))

Event Timeline

I had this problem too and was just about to file a task.

I used an iPhone 6 plus

Jc86035 renamed this task from Usability issues with header on mobile device to Timeless: Usability issues on mobile devices.Aug 15 2017, 3:59 PM
Jc86035 updated the task description. (Show Details)
Jc86035 updated the task description. (Show Details)
Jc86035 updated the task description. (Show Details)
Jc86035 moved this task from Backlog to Features on the Timeless board.Aug 23 2017, 6:51 AM
TheDJ added a comment.Aug 23 2017, 8:55 AM

On the last issue regarding tables, note that my responsiveContent gadget on mediawiki.org would fix this. These are rules that desperately need to be centralised in a core style module in my opinion, so that multiple skins can reuse these rules.

Jc86035 updated the task description. (Show Details)Aug 23 2017, 9:02 AM
Jc86035 updated the task description. (Show Details)

I'm using an iPhone SE and I am also experiencing the following problems:

  1. icons overlapping the site name
  2. unable to exit from sidebar menu
  3. touching icons will accidentally trigger the MediaWiki link (mediawiki.org)
Jdlrobson triaged this task as High priority.Aug 30 2017, 1:08 PM

Mobile first responsive design is hard.

I think priority high is fair here - many editors use the desktop site on their mobile device and we shouldn't be breaking their experience and it seems Timeless is rolled out to 4 wikis right now (and I assume the hope is to roll out to more wikis) so the bar is getting higher.

I'm not sure what the Timeless strategy is for this - looking at the design, the options seem to be to either push the icons down below; folding them into the hamburger or user menu; or hiding them.


(Image: Chinese interface of Timeless on mediawiki.org with the notifications box opened)
The notifications box is far too big on my iPhone...

Jc86035 updated the task description. (Show Details)Aug 30 2017, 2:54 PM
Jc86035 updated the task description. (Show Details)Aug 30 2017, 2:57 PM
Jc86035 updated the task description. (Show Details)

The notifications team may want to split the notifications part into a separate task (Timeless skin doesn't work with Echo).

Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptAug 30 2017, 3:48 PM

I think once anyone is actually working on these it would be good to split this into six or seven subtasks.

Jdlrobson moved this task from Needs triage to Triaged on the Mobile board.Aug 30 2017, 6:41 PM

Timeless is a skin that I believe is designed for Desktop. I think it is supposed to make Wikipedia look like other wiki sites (such as wikiHow or Wikia). I could be wrong, so please make any corrections.

It's supposed to work across devices, with distinct designs for desktop, mobile, and other weird things. The only problem is they're all broken. Slight problem. Slight.

KPFC added a subscriber: KPFC.May 1 2018, 3:09 PM

I have fixed most of it (at least I can use it this way for daily usage) with a little bit of css; see https://www.mediawiki.org/wiki/Skin_talk:Timeless#Issues_with_very_small_screens

Aklapper added a project: Notifications.

Ah, sorry, looks like Notifications was intentionally added here so I'm adding it back.

I'm not convinced that such "catch-all" tasks are feasible at all though.

Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptMay 1 2018, 3:47 PM
Isarra added a comment.May 1 2018, 5:24 PM

I'm not convinced that such "catch-all" tasks are feasible at all though.

Mostly I think this is useful as a start point - to fully address it all and actually close it we'll probably want to split it up, indeed, and specifically complete all of those, but if folks want to find random things to fix in the meantime, or want to add things somewhere for overall tracking, this seems to be working for that, at least.

By the way, this task is sort of related, since it occurs on mobile devices and other small screens: T198145.

Restricted Application added a project: Growth-Team. · View Herald TranscriptAug 21 2018, 9:30 PM
Isarra moved this task from Features to Bugs on the Timeless board.Dec 5 2018, 10:28 PM
Isarra updated the task description. (Show Details)Aug 26 2019, 3:01 AM
Isarra closed this task as Resolved.Aug 26 2019, 3:09 AM
Isarra claimed this task.
Isarra updated the task description. (Show Details)

All right, we still got T179265 open, but everything seems to at least be generally resolved other than that, and since that has its own task, I guess it's time to close this...