859427 - Forms UI, structure, & usability

Status: VERIFIED FIXED

(www.mozilla.org :: Pages & Content, defect, P3)

Description

[Jonathan Petto [:jpetto]]

Some specific tasks and some to think about:

Partners forms (http://www.mozilla.org/en-US/firefox/partners/ & http://www.mozilla.org/en-US/about/partnerships/), and likely others, have no immediate way of knowing which fields are required. You need to attempt to submit before being alerted to missing required fields.

Form styles need expansion, specifically regarding error reporting. Current form styleguide (http://www.mozilla.org/en-US/styleguide/websites/sandstone/forms/) is a good start, but more is needed, such as mutli-directional arrow on error tooltip and more obvious initial display of required fields.

Additional styles may be needed, such as error list/message for entire form (for unsuccessful submissions).

Also, as mentioned by craigcook, partners form (http://www.mozilla.org/en-US/about/partnerships/) is missing labels and is misusing placeholder attributes. This should be made more semantic and more accessible.

For new styling, can we expand off existing UI, then have design folks review and revise if necessary?

Comment 1

[Jonathan Petto [:jpetto]]

From icaaq: all required fields should have aria-required="true" added. Could be part of the (impending?) overhaul.

Comment 2

[Steven Garrity [:sgarrity]]

Got a start on building out some of the base CSS for bedrock forms. Feedback encouraged: https://github.com/mozilla/bedrock/pull/1067

Comment 3

[Jonathan Petto [:jpetto]]

Another specific note on the partners form (https://www.mozilla.org/en-US/about/partnerships/) - putting in invalid data (bad URL or email address) will result in a very general and unhelpful error message - no specific errors are given.

Should we move this to its own bug, or keep it here as part of the overall cleanup? I assume there are other forms out there with this problem. Maybe a related bug to make sure all forms have meaningful error messages?

Comment 4

[Steven Garrity [:sgarrity]]

(In reply to Jon Petto [:jpetto] from comment #3)
> Another specific note on the partners form
> (https://www.mozilla.org/en-US/about/partnerships/) - putting in invalid
> data (bad URL or email address) will result in a very general and unhelpful
> error message - no specific errors are given.

Eek, that is bad. I'd suggest another bug and keep this one for more general improvements.

Comment 5

[Jonathan Petto [:jpetto]]

Filed bug 904161 for returning meaningful error messages to the templates.

Comment 6

[Steven Garrity [:sgarrity]]

Attachment: Screenshot of proposed form example additions to Style Guide

We've been working on improving the usability and appearance of forms on mozilla.org. I've created a set of proposed form examples for the Style Guide Sandstone Forms page. Screenshot attached for visual and text review.

Comment 7

[Matej Novak [:matej]]

Hey Steven, this looks good. Just a few things:

• Are the red asterisks next to a couple of them deliberate?
• Under "Password input," is there supposed to be that colon before "focus"?
• No spaces before and after the slash in "Error/warning"
• We're not consistent with the capitalization of our button text. We have "Primary Action" and "Sign me up" — I don't remember which we decided to go with, but I prefer the latter.
• No period after "Different by Design" in the first CTA module.
• Mozilla needs to be capitalized in the second CTA module.

Thanks!

Comment 8

[Steven Garrity [:sgarrity]]

Attachment: forms-styleguide-v2.png

(In reply to Matej Novak [:matej] from comment #7)
> Hey Steven, this looks good. Just a few things:

Thanks for the feedback Matej. I've made some changes and attached an updated screenshot. Comments follow in-line:

> • Are the red asterisks next to a couple of them deliberate?
Yes, these are to indicate required fields (on longer forms where not all fields are required). I started with the more explicit: "Field title (REQUIRED)", but it was pretty visually heavy and we thought that the asterisks was pretty widely used. The label would show a "Required" tooltip on hover, and the necessary HTML5 and ARIA indicators for required fields would also be in place.

> • Under "Password input," is there supposed to be that colon before "focus"?
It was intentional, as it was referencing the CSS ":focus" selector. However, we already have a focus state shown in the right column, so I've removed the form field note and focus-state on the password example.

> • No spaces before and after the slash in "Error/warning"
Fixed.

> • We're not consistent with the capitalization of our button text. We have
> "Primary Action" and "Sign me up" — I don't remember which we decided to go
> with, but I prefer the latter.

Agreed - went with the sentence-case.

> • No period after "Different by Design" in the first CTA module.
> • Mozilla needs to be capitalized in the second CTA module.

These were both out-of-date screenshots. I've updated them and both suggestions are addressed. Note that I updated the "Get Mozilla updates" module to include the explicit "Email" field label. This is different than what we have on mozilla.org now, but this would be updated soon after this new style guide pages lands.

Thanks again for the feedback. More is welcome.

Comment 9

[Matej Novak [:matej]]

That's looking good to me. Thanks.

Sean, any thoughts?

Comment 10

[[github robot]]

Commit pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/7e8982b491512dfd3cec0893424fd29c32066472
Add form CSS and examples to Style Guide
Bug 859427

Comment 11

[raymond [:retornam] (inactive)]

fixed on https://www.allizom.org/en-US/firefox/organizations/
https://www.allizom.org/en-US/styleguide/websites/sandstone/forms/