Page MenuHomePhabricator

Timeless: Usability issues on mobile devices
Closed, ResolvedPublic

Assigned To
Authored By
Jdlrobson
Aug 11 2017, 11:03 PM
Referenced Files
F17490230: timeless-mobile-02.jpg
May 1 2018, 3:09 PM
F17490236: timeless-mobile-01.jpg
May 1 2018, 3:09 PM
F17490226: timeless-mobile-03.jpg
May 1 2018, 3:09 PM
F17490235: timeless-mobile-04.jpg
May 1 2018, 3:09 PM
F9225466: IMG_8521.PNG
Aug 30 2017, 2:51 PM
F9045756: IMG_8594.PNG
Aug 15 2017, 3:59 PM
F9045755: IMG_8590.PNG
Aug 15 2017, 3:59 PM
F9045757: IMG_8591.PNG
Aug 15 2017, 3:59 PM

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))
Screenshot_20170811-173249.png (2×1 px, 205 KB)
Screenshot_20170811-173309.png (2×1 px, 209 KB)
IMG_8590.PNG (818×640 px, 97 KB)
IMG_8592.PNG (831×639 px, 67 KB)
IMG_8591.PNG (1×640 px, 88 KB)
IMG_8594.PNG (1×640 px, 75 KB)
IMG_8521.PNG (1×640 px, 97 KB)

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)

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)

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)

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.

IMG_8521.PNG (1×640 px, 97 KB)

(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)

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

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

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.

timeless-mobile-01.jpg (1×768 px, 132 KB)
timeless-mobile-04.jpg (1×768 px, 112 KB)
timeless-mobile-02.jpg (768×1 px, 110 KB)
timeless-mobile-03.jpg (1×768 px, 74 KB)

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.

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.

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...