Page MenuHomePhabricator

[EPIC] A/B test Zebra #9 prototype
Closed, ResolvedPublic

Description

Background

Currently Vector 2022 uses whitespace to separate the various regions of the interface, and has a white page background (outside of the content area). Two questions have been raised regarding this approach:

  • Would additional visual separation between regions of the interface improve the reading experience? Mainly by:
    • Drawing more focus/attention to the content when landing on the page (rather than taking in the interface as a whole first, then focusing on the content)
    • Making it easier to stay focused on the content while reading, because the content area is more well defined (some people have specifically experienced getting continually distracted by the table of contents while reading)
  • Would a gray background outside of the content area reduce eye strain some people are experiencing from the large white area (i.e. “glare”) on larger screens?

We think that adding a boundary around both the content area and the table of contents (as well as other menus), helps to further structure and clarify the interface, and makes it easier to focus on the content (both when the page first loads, and while you are reading). Additionally, making the page background gray should help reduce the eye strain some people are experiencing, while also adding further focus to the content area and the table of contents.

Acceptance criteria

Build out and A/B test the Zebra #9 prototype and compare it to the current page layout

Related Objects

StatusSubtypeAssignedTask
ResolvedJdlrobson
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedEdtadros
Resolvedovasileva
ResolvedSpikeovasileva
ResolvedEdtadros
Resolvedjwang
ResolvedNone
ResolvedBUG REPORTbwang
Resolvedovasileva
ResolvedNone
ResolvedJdrewniak
Resolvedovasileva
ResolvedKSarabia-WMF
Resolvedjwang
Openovasileva
OpenJScherer-WMF
Resolvedmatmarex
ResolvedBUG REPORTNone
Resolvedjwang
Resolvedjwang
Resolvedjwang
Resolvedbwang
ResolvedKSarabia-WMF
ResolvedMabualruz
OpenFeatureovasileva
ResolvedJdrewniak

Event Timeline

T327732 was closed, and the vertical spacing between items and the font sizing in Zebra is still a mess. See also T327718 for details. I was sent to this ticket from that ticket.

Is this ever going to happen, or the changes in Vector have stopped?

Change 955980 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[operations/mediawiki-config@master] Remove zebra from beta cluster

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

Change 955980 merged by jenkins-bot:

[operations/mediawiki-config@master] Remove zebra from beta cluster

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

Thanks @Ladsgroup.

The left and right menus now start at the same page-height, which is a nice change.
And other visual zebra elements (Color contrast, &c) look good.

An unexpected side effect is that both left and right columns are now wider, with substantially more h-padding in the right column, leaving less space for the article body in all but the widest windows. As narrow body width continues to be the problem mentioned most often about V2022, that is demotivating to see.

I agree with Sj's comment above. In my browser window, which has 1,228 pixels of width for content, the space for content in this Zebra prototype is just 605 pixels, less than half of the available screen width. I came to Wikipedia for the content, and it is being served to me through a straw. In Vector 2010, the content is delivered in a box that is 1,032 pixels wide (84% of the available width), and there is still enough padding around elements to feel comfortable.

I understand the utility of the sidebars and of a bit of side-to-side padding, but Vector 2022's obsession with narrowing the viewport available to page content has always been absurd, and this proposed revision makes it even worse.

Related: T332731 (last comment was "review this again in the context of the Zebra #9 prototype" )

There are different issues that Zebra tried to solve, after the total mess created. One of them was about readability, which is solved with the grey background, separating the menus from the content visually, so people with reading difficulties could read the article easier.

There are other problems, like the site width, and the right side menu being a hotchpotch of things that are not tools, with things that are definitively tools but only useful for some users and other things that don't even work.

Nevertheless, the issue of the grey background would make the experience better, even if the other problems persist.