denise: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)
Denise ([staff profile] denise) wrote in [site community profile] dw_beta2011-12-10 12:06 am
Entry tags:

New Create Entries beta, round two

The next code push will update the new Create Entries page in beta with a number of fixes for previously-reported bugs and enhancements. To make it easier to keep track, we're therefore opening up a new bug-reporting post (to avoid confusing things with bugs reported in the previous post).

When reporting bugs, please include:

* The browser name, browser version number, and operating system you're using
* The steps you took to reproduce the problem
* Whether or not you've tested the same steps in another browser (and if so, which)
* Whether you get the same result every time you try the same steps, or if it only happens sometimes

If we can't reproduce the problem under the same browser and operating system, we may also ask you for a list of any browser extensions you have installed.

Things that are still not yet implemented:

* the "don't autoformat" button
* the rich text editor
* editing existing entries (it will display the old form)
* draft posts of any type, including autosaving of entries

There are also still some issues with IE, especially in "privacy mode". Anything that requires Javascript is currently not working in IE in privacy mode, and we're trying to figure out if there's something we can do to fix that or if the settings of the browser override anything we can do.
facetofcathy: four equal blocks of purple and orange shades with a rusty orange block centred on top (Default)

[personal profile] facetofcathy 2011-12-10 04:12 pm (UTC)(link)
Bug in Display:

Firefox 8 on Ubuntu 11.10 Using Celerity site skin

The browse button beside the icon has an underline (green) under the word browse, as if it's a link.

Problem persists with a change to Tropo red, now the underline is red.

Goes away on hover.

In Chromium 15.0.874.106 (Developer Build 107270 Linux) Ubuntu 11.10 there is no line.

However, in both browsers using keyboard navigation that button "lights up" twice on focus, once around the whole button and then around the link within it.

Design Feedback:

I find the #666 headings on the components a little too low contrast with the #eee background. Changing the text to #444 makes it more comfortable. #666 fails the standard colour difference test by a smidge.

There's a bunch of other grey on grey effects of very low contrast that are difficult for me to read as well:

The headings on the unused modules when one has the module placement editor view up is painfully low contrast with the background.

The cancel link in the Entry Form Options box is borderline uncomfortable in its contrast. (I think it should be a button anyway.)

The borders on buttons are very low contrast to the backgrounds the buttons sit on sometimes (the buttons within the modules like browse for tags). It works okay when the button is grey and the background is white, but when the background becomes grey like the button itself, it all gets a bit samey and blurry. I notice this is a popular style for form designers, I just compared your design to one of my operating system forms, and there, the grey of the background is lighter than the button grey by a higher margin and the button border is a bit darker as is the text. More like the way your buttons look on hover, which is a comfortable level of contrast.

In isolation, things like the button border contrast are less a problem than text/background contrast, and I realize there's a struggle to meet contrast guidelines when you want a fairly unobtrusive look to the form elements. But all that grey in very low contrast can make the form seem vaguely blurry when it actually isn't. Add in the drop shadows, and for someone with my middle-aged vision, the whole form feels uncomfortable to use, instead of looking stylish and modern.
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2011-12-14 12:55 pm (UTC)(link)
Oooh thanks, this is awesome feedback! You're right that we wanted the color elements to be unobtrusive, but if it's turning out blurry for you, that's something we need to fix (you're probably not the only one affected, at that).

I've done some tweaking of the colors, and the tweaks are all now live on the site, so I hope that's more distinct (while still being unobtrusive). Please don't hesitate to let me know if you're still having trouble with the contrast!
foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)

[personal profile] foxfirefey 2012-03-29 03:11 am (UTC)(link)
Hi--I'm checking in to try and see if you've checked in and things are better now in current versions?
facetofcathy: four equal blocks of purple and orange shades with a rusty orange block centred on top (Default)

[personal profile] facetofcathy 2012-03-29 03:17 pm (UTC)(link)
I presume we're talking about the second section of my comment.

Most of the module colour contrasts are borderline okay. Honestly, I will never like this design, which is not really the point, and I'm trying to keep my critique to real effects, not how much I like it.

I find the heading gradient image to be very visually distracting. It immediately is easier to focus on if I take that and the text shadow off the headings, but I consider the headings too pale until they're showing the hover colours. Compare the gradient image to the one on #menu in Tropo Red which provides a defined background without being visual noise.

The very greyed out unused modules in the drag and drop mode issue still stands. They are very hard to focus on, as are the words drag and drop themselves.

The cancel link in the Options box is taking it's style from the .destructive class in the site scheme style. I can't recall ever seeing that used anywhere else, but I wonder if it wasn't styled with the assumption that it appears on a white background (in tropo or celerity). It is differently coloured as a link and on hover from anything else and I don't see any design reason for it to be so different from the create poll link right above it or to be such a pale grey link.

I find the page barely usable, but the total accumulation of text shadows, box shadows, gradients, border radius and all those shades of grey is still a blurry background with a few crisp foregrounded elements, like the selection and input boxes. I guess my question is when does an aesthetic choice, which I understand that this is, have to give way for broader usability? I'm using Tropo Red at the moment, and the contrast between this site-schemed page and all the others in terms of heading colours, button colours, general contrast levels etc. is very marked.

I will almost certainly make a stylish script to strip the blur out and crisp this up once it becomes the standard post form.

New issue: while playing around with the form I noticed that with the right em size of the screen the heading on the journal module and the #usejournal select box overrun the module. (I have this module in the sidebar.) I assume the heading is being dragged along for the wider ride by the select element which has no width set.

Contrast this to #iconselect which has a width of 100% set. All the select elements and other form elements should likely be
looked at to make sure they are contained if they're in the sidebar.