Last week I was doing some research on form design and jotted down the following links and thoughts:
The Apple store’s checkout form redesign (Luke Wroblewski)
A lengthy article reviewing the old and new Apple store checkout process highlighting the good and bad points.
- Under “Dynamic Indication” is an explanation of how you can detect the type of credit card people are using based on the first few digits of the card. Minimising the amount of information people enter on a form is good.
- Under “Primary Action” is an example of helping users move forward through a process by clearly distinguishing the “continue” button from every other item on the page.
- Under “Error Messaging” is a point about clearly distinguishing which fields have errors and why – Apple’s use of yellow field highlights can be confusing. I disagree with the authors suggestion however to use red alone for error highlighting – a differentiating colour backed up with simple instructions may be sufficient and less likely to make the person feel stupid/at fault.
Marking required vs. optional form fields (Luke Wroblewski)
Suggests showing the word “optional” with the field labels instead of marking mandatory fields with an * is more user-friendly.
23 forms and data entry usability guidelines (User Focus)
A usability checklist when designing and building forms.
In-line tips (an example)
I personally like the treatment on the PlainFrame Early Access form to show tips in-line with a form – hover your mouse over a question/field and you see tips on the right-hand side. It reduces the length of the form and can be easily ignored by people more familiar with the terms they are being presented, or those who don’t wonder why they’re being asked particular questions.
I haven’t checked out how accessible it is, but if it’s not then there would be work-arounds to make it accessible.
