Redesign Diviner


Redesign Diviner

This implements PHUIDocumentViewPro which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop PHUIDocumentView once everything is converted. Some features are:

  • White Background, no border on page
  • Table of Contents is move to hidden menu (more space for documentation)
  • Property List sits under the document

Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.

Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.

Screen Shot 2015-10-31 at 12.36.52 PM.png (2×2 px, 414 KB)

Screen Shot 2015-10-31 at 12.36.46 PM.png (2×2 px, 788 KB)

Screen Shot 2015-10-31 at 12.37.01 PM.png (2×2 px, 696 KB)

Screen Shot 2015-10-31 at 12.36.40 PM.png (2×2 px, 739 KB)

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: tycho.tatitscheff, joshuaspence, Korvin

Differential Revision: https://secure.phabricator.com/D14374


chadAuthored on
chadPushed on Nov 1 2015, 4:58 PM
Differential Revision
D14374: Redesign Diviner
rP2c2d1d13e378: arc liberate
Build Status
Buildable 8517
Build 9821: Run Core Tests

Event Timeline

Some people like @CodeMouse92 did raise concerns with first iteration of redesign.

@epriestley @chad

Nothing is hard to read and the text contrast is great.

That's one of the problems, though...the text contrast is a little TOO great. A major part of my job is interface design for users with various disabilities, and for people with dyslexia (such as myself), as well as certain types of migraine issues and eyesight issues, the glaring black on white makes the interface difficult, if not entirely unusable. The sheer MASS of white is the biggest problem, as we can't track black-on-white anyhow in a small context, much less when that accounts for nearly the entire interface.

Thankfully, my own dyslexia is minor enough that I can cope with this, but it is not easy. Since a surprisingly large portion of the population has some form of dyslexia, that has to be taken into account. For us, this IS very hard to read.

It isn't hard to use an off-white in place of pure white, as it greatly improves readability for dyslexic users w/o decreasing readability for anyone else. In the very least, it should be an option somewhere. Large swaths of black-on-white may be the current design fad and the standard of the internet, but it serves as a barrier to many computer users, and is paramount to an office building not being wheelchair accessible, only in this case, making this accessible to this user group takes a 10 second CSS stylesheet edit.

Just some food for thought.

While I personnaly love this, what did you think of it, in term of accessibility ?

While I personally love this, what did you think of it, in term of accessibility ?

Quantitatively, it's "more accessible" as it's higher contrast and larger type with better, more consistent spacing. If you're remarking about whether it's better for @CodeMouse92 or not, I think you'd have to reach out to him personally.

If it's the version currently visible on this Phabricator (since I have high contrast turned on), it looks good to me. Having the border helps me track, personally. The option to override color schemes (i.e. dark theme) accounts for black-on-white issues that many dyslexic users might have.

By the by, I like the adjustments to spacing and format.

After using Phriction for a while with these changes, I only noticed one major UI problem - the hamburger menu does not display hierarchy. This is really difficult when one has a particularly long or detailed Phriction document with three or four levels of headers, and makes it almost useless in those situations. One cannot quickly find what they're looking for.

Perhaps there should be an option to toggle the old menu in those situations? I have to admit, I like the hamburger menu in some situations, but cumbersome in others. It's six of one, half dozen of the other, really.

No plans to re-introduce. The main problem is really long pages are generally really really bad. We'll move forward by providing better tools for organizing large amounts of content (like tab or other types of navigation). See T9379

Though it the ToC menu isn't showing indentation levels, that's a bug.