Tuesday, October 23, 2018

forms - Labels above the field or to the side of the field? What about prompt text and validation messages?


Which layout works best for your users?:



  • Field labels on the side of fields

  • Field labels above the data entry fields

  • What about prompt text, format tips, examples and validation or error messages?


I've done many online forms over the past few years. I have "pre-designed" patterns and layouts I've used over and over and over again. Some of the layouts have been heavily tested, some not so much.



One of my colleagues challenged me recently asking why I could be so confident that the layout they had proposed wasn't right. It made me stop and reassess my approach, which I realised were based on opinion rather than evidence.


Examples or evidence?


I have an existing paper form to work with. Its ugly. Truly ugly. The last thing I want is to create an online version of the same ugliness. Do you have examples of forms or wizards that you think are designed really well? Can you point me to any research or academic material that I could use to back up my recommendation to (read as: looming major argument with) the product owner?


My task: take an existing paper based form, convert it to an online form and extend the functionality to include validation on-the-fly, file uploads, credit card payments and confirmation, status and error messages.


The overall design: most likely to be about 8 screens, in the format of a step-by-step wizard. Users will be able to save incomplete forms and come back later. Most questions need to be answered, some questions are complex. Users will only need to use the form once every five years so they won't be familiar with the questions in advance.


The challenge: there's no existing pattern for online forms in this organisation, they don't have many running at the moment, and none as complicated as this form. I will need to convince the product owner that creating a replica of the paper form is a bad idea. A really bad idea.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...