I absolutely love this. J. Crew re-did their (admittedly) out of date checkout process and they’ve combined in-line form fields with category markers. I know Luke W. has written about his Apple checkout process quite extensively and how he’s simplified the process but I’m not convinced in-line instructions are ever that great, particularly for longer surveys (and it looks like several people have written about this topic: here and here).
In this re-design, users still know the section they’re in, but also have short, well-established clues to help them figure out what they should do for each specific field. I also think this type of approach makes it easy to scale for global designs, since it gives flexibility to countries that might have slightly different needs for form fields (including character count and information needs). A cool nice-to-have feature is that your city doesn’t populate until you’ve entered your ZIP, so that information is pre-populated directly on that page.
I’m wondering how accessibility plays out here, and if the red error lining around the form fields could be made thicker to help color-blind users differentiate errors. Looking down toward the address section, it looks like not all error states have error messages, so there needs to be a way for all users to glance through and spot their mistakes.
Screen capture from J. Crew (March 2, 2013).