There is a “subscribe” form on the Boston Azure web site from which people can ask to be added to the group’s email list.
I just made some updates to improve the user experience (UX). Here are the changes I made, and I list the handy web resources I used to help me decide (where applicable).
For field labels, I place the label directly above the field it describes. I use <fieldset> and <label> to describe my markup, presumably making it friendly to screen readers. (Credit to templates provided with ASP.NET MVC for making this part easy.) This is the layout that Luke Wroblewski (author of Web Form Design: Filling in the Blanks) recommends in his Best Practices for Web Form Design for scenarios where you want to maximize speed, and the user is likely familiar with the data being requested.
Luke’s work is packed with clear, actionable, useful guidance that is easily applied and backed by user research. A gold mine…
Other recommendations I adopted from LukeW include:
- Since I have two required fields and three optional ones, I removed the (Required) labels, and stuck with the (optional) ones only.
- Added field length for optional Notes field.
- Made the Primary Action of the form (the Subscribe button) green, just like Apple Store (got the idea from UIE mailing).
Also from LukeW, but from a different source (The Apple Store’s Checkout Form Redesign, which I learned of from a UIE mailing):
- After the form is submitted, the user does not get an immediate email. I made that clear in the resulting text.
More improvements I can make in the future, also based on LukeW, include:
- Validate the data entered. In my case, this is currently only that a well-formed email address is provided.
- Provide more context on why data is being requested.
- Disable the Submit (Subscribe) button after it is clicked to avoid double clicks.
Other changes, outside of LukeW’s guidance:
- Mentioned “low volume” and “will not spam you” – though also need a privacy policy. Will get to that eventually..
- Programmatically set focus to the first field in the form when the page is loaded. I used the jQuery technique described here.
- Dropped “:” (colons) at end of labels while also changing labels text from leading caps style to mixed case (“Job title” instead of “Job Title:”). While not decisive for me, I found an interesting discussion around whether to use a colon in form labels.
- Made sure users could press Enter at any time to submit – but this will only work if they are not in the single multi-line field on my form. Need to consider removing that field … Need to consult with Joan on that one. 🙂
Used semantic mark-up to implement the green Submit (Subscribe) button mentioned above:
Submit (Subscribe) Button
HTML:
<input type="submit" id="primaryaction" value="Subscribe" />
CSS:
#primaryaction
{
padding: 5px;
color: #FFFFFF;
background-color: #267C18;
font-weight: bolder;
}
Old form:
sign-up form BEFORE the make-over
New form:
The AFTER screen shot
Coding Out Loud 