If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Forms UI, structure, & usability

VERIFIED FIXED

Status

www.mozilla.org
Pages & Content
P3
normal
VERIFIED FIXED
5 years ago
3 years ago

People

(Reporter: jpetto, Assigned: sgarrity)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

5 years ago
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?
(Reporter)

Comment 1

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

Updated

5 years ago
Priority: -- → P3
(Assignee)

Comment 2

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

Comment 3

4 years ago
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?
(Assignee)

Comment 4

4 years ago
(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.
(Reporter)

Comment 5

4 years ago
Filed bug 904161 for returning meaningful error messages to the templates.
(Assignee)

Updated

4 years ago
Assignee: nobody → steven
(Assignee)

Comment 6

4 years ago
Created attachment 792997 [details]
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.
Attachment #792997 - Flags: review?(smartell)
Attachment #792997 - Flags: feedback?(Mnovak)

Comment 7

4 years ago
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!
(Assignee)

Comment 8

4 years ago
Created attachment 793980 [details]
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.
Attachment #792997 - Attachment is obsolete: true
Attachment #792997 - Flags: review?(smartell)
Attachment #792997 - Flags: feedback?(Mnovak)
Attachment #793980 - Flags: review?(smartell)

Comment 9

4 years ago
That's looking good to me. Thanks.

Sean, any thoughts?

Comment 10

4 years ago
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
fixed on https://www.allizom.org/en-US/firefox/organizations/
https://www.allizom.org/en-US/styleguide/websites/sandstone/forms/
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED

Updated

3 years ago
Attachment #793980 - Flags: review?(smartell) → review-
You need to log in before you can comment on or make changes to this bug.