After using the new UI daily for a little bit now, I'd have to agree with many of the comments here on brightness, low-contrast, etc. It seems less of an accessibility issue (which would be more about readability/legibility - the text contrast is fine) and more of a usability issue (more about scanability of UI elements and identifying UI elements quickly in peripheral vision, differentiating comment-blocks quickly while scrolling, etc.)
- Queries
- All Stories
- Search
- Advanced Search
- Transactions
- Transaction Logs
Advanced Search
Jun 22 2015
Jun 21 2015
The background on the "Needs Revision" state in Differential looks odd to me. I feel that this would actually look better without a background color.
I think this is a change we should probably pursue, and start with a color treatment as in T6787#88172. There are several technical challenges:
I don't think applications can ever show as feed actors today, although I'm not 100% sure about that.
Herald obviously should be an outline of Exploud.
I fixed this in timeline. Does herald show as an actor in feed? I don't feel timeline needs the image for herald, but feed actor images could be nice. I'd probably generate them by application needs (herald, harbor master, diffusion)
For application actors, like Herald, we don't have a profile icon when they create feed stories:
Jun 20 2015
Ahhhhhh, after D13363 I can track more easily again. Thanks @chad and @epriestley!
It'll be fixed before final, I have the full font, just not as a woff.
I have one major problem for me & team with redesign: font choice. It seems that choosen font misses all of polish diacritic characters. Let me try here before sending screenshots:
That's an awesome feature, @epriestley. I'm don't even need it myself, but I really love how Phabricator tries to be a tool for anyone to use, without getting in their way. We're about to move our entire company off of Github and onto Phabricator and it's things like this that reassure me we've made the right choice :-).
After D13363, you can now select "Use High Contrast Colors" in Settings → Display Preferences → Accessibility. It currently looks like this:
One is a link, and gets the consistent color of darkbluetext, the other is not. This isn't new to the redesign (though I think it did not previously render consistently). I don't expect Timeline to be redesigned in this branch, it's too big a project.
I don't like the different colours here:
Jun 19 2015
I would +1 :
- a more contrasted UI (bordure) aand find @epriestley solutions good
- a try with fixed centred width or more margin (lets say contents over 8/12 of the screen)
D13361 is one potential solution, T8614 is another. Redesign is still weeks away at best. July was always the target.
@epriestley I understand prioritization. However, if that's the case, is there a way that I can NOT get the UI update on my end? I spend a lot of time on my Phabricator server, since I'm the lead developer, and my eyes are already tired from being here.
Alright. I think that probably falls under T8614 more than being a core design constraint. We can do resource post-processors + more variables with relative ease for users with substantially different visual constraints, at some point in the future, but given that huge swaths of the internet are problematic for your particular constraint I don't think we should design around it for the majority of the userbase, for whom black text on a white background is easy to read.
@epriestley Yes, I do have difficulty. I prefer interfaces that don't use that color scheme. Even with textbooks, I have to use a colored plastic sheet to deal with the glaring white and black, otherwise I can't process what I read. For example, my code editor...
@epriestley, @chad
EDIT: Yes, Chad, exactly.
Do you have difficulty reading Wikipedia, NYTimes, etc? Other major web properties which primarily present large blocks of text in black on white backgrounds?
I think he is more concerned with the added whitespace of the boxes, and lowered contrast between boxes and background. That the more individual boxes popped off the page, the easier they were to consume.
@CodeMouse92, I'm really confused about your feedback. Almost all of the text was on pure white in the old design, too. Here's a screenshot of the old design: all the text is black on white:
@chad, Comparing the new UI to the old one, I see quite the opposite. I'm just asking for the white to be toned down to a subtle off-white so as to make it usable to users like myself. I am having a VERY hard time on here right now.
@CodeMouse92 this would reduce white, not increase.
@chad, SIGNIFICANTLY opposed only to the massive use of pure white. See my large above comment.
Would it be possible to support both fixed and fluid layouts? Or is that
going to be a pain to support for all the different apps?
It means you don't need to make it look good at 1000px, 1200px, 700px...
The only reason to move to fixed width is that it's easier to read (lots of UX studies on the matter). It doesn't change anything for me, as everything is already responsively designed anyways
I wouldn't say i'm "significantly opposed" to width-limited/centered content, but I don't like the notion. I want to be able to set the width of the content to whatever I want, and the browser window lets me do that on the fly.
Philosophically, deciding that I only get 800 pixels or whatever makes your (The designer's) life easier, at the expense of limiting the user's choices, and that something I dislike.
The best way to think about this is that it is a new 'base' for the next few years with Phabricator. Based on what products are coming soon (Spaces, Harbormaster, Calendar) and what will come down the road, it was becoming clear to me that shoehorning stuff in endlessly would end up being quite a mess. Time to refresh. It was intentional to break everything down to a minimal site and from that move forward. I just want the "tools" themselves to seem invisible, and out of the way. All that should matter is your content and that it's clearly accessible.
Nothing is hard to read and the text contrast is great.
In T8549#122021, @avivey wrote:"Muted" is be perfect word for what I feel: everything is good and decent, but it's not as fun as it used to be.
In T8549#121389, @egig wrote:Hi, all. It'll be better if the main content has comfortable maximum width on wide screen and set it to center.
Why don't you just set the width of the browser to the width you like?
I merged/updated and now new 100x100 profile pictures look like background-size isn't being applied correctly:
After using this for a while, I also find the UI very "bright", or I'd specifically say "unsaturated", or "washed-out" or "muted". Nothing is hard to read and the text contrast is great, the overall feeling of the UI for me is that all of the backgrounds and borders have the minimum level of saturation and contrast to be clear.
In T8549#121390, @chad wrote:I had hoped to explore that this pass, but don't know if we'll fit that in. (I prefer centered, fixed-width content myself).
Re accessibility/contrast: Alright, so I'd forward users with limited eyesight and their statements to T4213. Thanks! (Side note: You probably meant the Wikimedia community when you wrote "WMF".)
90% of the UI is exactly the same color. The bar colors are gone, and the header gradients are gone. The main header can still be set to dark/black and none of the actual "workspace" is any brighter (it was always white).
agree, a little bit too bright for me.
I also find the new design to be very bright.
This is my personal opinion, but its really bright.
Jun 18 2015
@paladox, please read the description carefully. The images are helping support the main point of the section, which is that Phabricator changes very quickly. Having old images which are very different from the modern UI helps reinforce this point.
Could the images be updated to reflect the recent changes to phabricator. since it looks much modern then that.
Resolved-ish.
To echo @chad's comments, we really want to drive accessibility changes by understanding problems and then solving them, just like we drive all other product changes.
In T8549#121766, @aklapper wrote:Potential accessibility issue:
- .phui-timeline-title text has color: #6B748C.
- body has background: #F7F7F7.
According to http://webaim.org/resources/contrastchecker/ that's a contrast ratio of 4.35:1.
WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text.
Potential accessibility issue:
- .phui-timeline-title text has color: #6B748C.
- body has background: #F7F7F7.
Jun 17 2015
When I scale the text size up a bit, I get a weird left margin of blank space next to the page content:
In T8549#121389, @egig wrote:Hi, all. It'll be better if the main content has comfortable maximum width on wide screen and set it to center. Overall, I like the new design, thanks for this. I wish i can contribute more.
Hi, all. It'll be better if the main content has comfortable maximum width on wide screen and set it to center. Overall, I like the new design, thanks for this. I wish i can contribute more.
Yeah, I find the exclamation icons to be too harsh (especially for the "accepted" state).
At certain resolutions:
Jun 16 2015
Have you considered adjusting the padding on the panels and such?
The notification markers look much better today :)
Odd button alignment on "Notifications":
Header serifs are nice. Make it consistent everywhere and it'll be good. at first glance it does feel weird, but I believe in @chad
- Personally i fill sheriff font quite disturbing. Is it not possible to get a not that much heavier font that Oswald was but still sans sherif. This one make quite typewriting font ?
- I +1 hach-que consideration about task indicator les readable than before
When I mouse over the [Triangle !] icon they get a bit flashy:
Jun 15 2015
Also this doesn't line up:
This looks weird to me because my brain continues the straight line downward and doesn't like the fact that the circular icons rest right against that invisible line. Maybe it's me, but I feel like there should be some left padding on those circular icons...
I'm dyslexic, and I have to admit that the new layout can be a bit hard to use for me - it uses far more whitespace, much lighter grey, and less separators, so it is harder for me to track (read). Color settings would be nice, honestly, or at least make it a little less...white?
Just some additional feedback here: I find the exclamation marks confusing. I like them on "commits need audits" but dislike them for tasks.
Advanced search is definitely supposed to open by default. Saved searches should be all that collapse.
- I'm definitely missing advanced search defaulting open, especially on global search. My filter is set to "Open Tasks", which is what I want about 80% of the time, but the other 20% of the time I scroll up to edit the constraints. With the new behavior, I have to open the query interface to do this.
The body text is a bit fuzzy (and annoying to read) on my computer (Desktop/Windows/Chrome 44):
I expect there are lots of incidental bugs from the last two merges, I didn't attend to them all yet, but if you want to get a feel for it for a day maybe? with prod data, that's cool with me.
Oh! Sorry -- I pushed it to this install and put a "give us feedback here" thing on the home page. I can pull it back for now if it's not ready for feedback quite yet, it just looked like most of the internal feedback had been sorted and master was in a pretty good state to merge over.
Is... this live for people? I only have email right now, no web. But it sounds like people are using it, haha.
Oh, hovercards have double status, too (note double "Open").
https://secure.phabricator.com/book/phabflavor/article/writing_reviewable_code/ <-- Article button shows up twice now
- Line height in Feed and Conpherence feels a little tighter than in comments / descriptions? Maybe I'm imagining this or it's just a size/font/rendering issue, but this feels a touch tighter (mostly vertically, I think?) than I expect: