944728 - New design is harder to read than old design

Status: RESOLVED DUPLICATE of bug 924767

(developer.mozilla.org Graveyard :: General, defect)

Description

[simon]

What did you do?
================
1. Searched google for "men forEach"
2. Landed at the forEach description page


What happened?
==============
I had to put sunglasses on.

What should have happened?
==========================
The content should have been more readable.

This is an information site, with technical articles requiring lengthy, detailed study as well as sometimes occasional glances to refresh memory. It should be easy to read both at a glance and when looking at the same or related content for extended periods, and the new design facilitates neither function.

Is there anything else we should know?
======================================
The light-weight body text is lost. The ratio between header text and body text is too extreme and the leading between them feels awkward. The line-lengths are too long to read comfortably. The horizontal alignment of text (particularly the box-outs and notes) is irregular, causing the eye to trace difficult lines down the page. The vertical spacing between items doesn't communicate a hierarchy of information on the page effectively, especially between the menu/header and the content.

The initially-collapsed in-page navigation just looks like an out-of-place, orphaned link to a separate page.

The menu drop-downs have no vertical edges and share background-color setting with the page, so it's hard to see where one begins and the other ends. 

The bright blue link text is hard to read against the white background. The yellow box-out colours almost disappear against the white background colour, fooling the eye into thinking the box-outs are part of the nearby text, but with odd vertical spacing (margins, padding) that are at odds with the overall colour balance.

Comment 1

[simon]

To be fair, the original design is too cramped, vertically but the font-sizing and colour scheme is easier to read.

Comment 2

[Jean-Yves Perrier [:teoli]]

The length of the line will be shorter as soon as the quicklinks will be added to all JavaScript page, this is a work in progress.

The two boxes are also something that will be fixed in the near future.

Comment 3

[Chris]

I wanted to give this some time to get accustomed to it. I still find the new design more difficult to read.

I was curious about this, so I used the "Wayback Machine" at internet archive to take a look at an old page, both to refresh my memory and to see what qualities the old look had that made it more readable from my perspective.

I think it is a matter of contrast. The links are blue in both designs, but the new design stands out as "blue everywhere!". Blocked-out content, like the right-side menu or code samples, seem to blend into other page elements. When I scan the document with the new design, I feel overwhelmed, even though I am looking at information with which I am already mostly familiar.

The bounding white content area on the old design also seems to make whitespace in the document more effective at breaking up content into digestible regions. The current design seems to have a flow that makes it difficult to parse blocks of content, as though my eyes are in need of a resting place outside the flow of the layout.

I am surprised by some of my reaction. If you had asked me if I prefer designs that make a white box around content and put that over a darker background, I would have said, "Yes, in 1998." But, doing a side-by-side, I think there is a need to bring more contrast into the design, and that is one way to do it.

For reference, here is the article I looked at--

Current: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

Wayback: http://web.archive.org/web/20131018064352/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp