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