Good article — too many websites have lengthy forms that require way too much information. I think people forget it’s an inverse relationship between the number of form fields and the successful completion rate of a form.
Copy & paste the code below to embed this comment.
Edwin Tong
Any good suggestion out there for address inputs?
What is a good UI design to capture user’s address
information in a order form for example? I’ve tried using two or more normal input textfields and also single textarea. Both with different feedbacks from users.
Regarding address fields: in my opinion, the textarea leaves users a bit too free to choose their own formatting. Take for example the following two representations of one address:
6314 Baker St. Suite 300
Atlanta, GA 30333 USA
6314 Baker St.
Suite 300
Atlanta, GA 30333 USA
Now, while you can differentiate between them in code, it become increasingly difficult as the number of different ways of representing an address increases. I like to use the following:
Street Address:
Suite / Apt Number:
City
State (let users type, don’t give them a select box to look through)
Zip
All separate fields which have a clear purpose.
Obviously, the rules change if you’re dealing internationally. I like to add a “country” selection before “city, state, zip” so the appropriate boxes can be disabled as necessary.
Ok, here goes, please be gentle. I understand that one is encouraged to use a checkbox for yes or no; but I can’t understand why! If a radio button is either one or the other, and a checkbox can be for many, why the preference?
Thank you,
B.
Copy & paste the code below to embed this comment.
Karen Johnson
I’ve found a few recommendations to show the asterick after the label or field. And I disagree. I’d like to see the asterick appear before a label so that a user’s not forced to read the labels and fields before noticing the asterick. What do you think?
Yes, placing the asterisk after the field is sometimes inconvenient to users. Not to mention, it sometimes means they won’t see it, defeating the purpose.
I like to stay flexible, and do whatever works best for the particular form. Just be consistent, and use similar placement for all mandatory items within the form.
What continues to astound me is that, whether it be a multi-million dollar company or your local muffler salesman, websites are riddled with elementary usability problems. As an experienced writer, I am always more acutely aware of content and am often over zealous with my criticisms. As a usability analyst, however, such harsh criticism is inspired by the apparent lack of thought that is apparent on so many sites. Simple, effective, changes deliver a much better user experience but, apparently, such components are just not important to the company and thus, neither are the customers’ experience. Incredible.
As far as I can tell, captions must have a table as parent element. And it seems like it’s one caption per table. http://www.w3schools.com/tags/tag_caption.asp
They might work for you now, but I doubt their accessibility. And their future behavior is anyone’s guess.
Copy & paste the code below to embed this comment.
sarahana shrestha
I would think that the division of a medium/long form into multiple columns (possibly two) would have the advantage of appearing short (or not overwhelming eg. https://account.atlanticrecords.com/wallet/NewAccount.asp). Does this have significant disadvantages compared to a single-colum forum in which the user can move vertically without interruption? thanks.
Copy & paste the code below to embed this comment.
Joó �dám
“You can also use CSS to hide the fields that are already filled in correctly and only display those which need to be corrected.”
Why use CSS? CSS is for design. This is not a design element, this is a behaviour. For define behaviours of our document, we have to use JavaScript. Imagine if the user clears away the stylesheet, or defines his/her own.
First the (x)html, then write JS, and CSS should be the last component.
72 Reader Comments
Back to the ArticleRob Bolton
Good article — too many websites have lengthy forms that require way too much information. I think people forget it’s an inverse relationship between the number of form fields and the successful completion rate of a form.
Edwin Tong
Any good suggestion out there for address inputs?
What is a good UI design to capture user’s address
information in a order form for example? I’ve tried using two or more normal input textfields and also single textarea. Both with different feedbacks from users.
Brian Crescimanno
Regarding address fields: in my opinion, the textarea leaves users a bit too free to choose their own formatting. Take for example the following two representations of one address:
6314 Baker St. Suite 300
Atlanta, GA 30333
USA
6314 Baker St.
Suite 300
Atlanta, GA 30333
USA
Now, while you can differentiate between them in code, it become increasingly difficult as the number of different ways of representing an address increases. I like to use the following:
Street Address:
Suite / Apt Number:
City
State (let users type, don’t give them a select box to look through)
Zip
All separate fields which have a clear purpose.
Obviously, the rules change if you’re dealing internationally. I like to add a “country” selection before “city, state, zip” so the appropriate boxes can be disabled as necessary.
Hope I’ve been of some help.
BC
Brian Crescimanno
ALA seems to have gummed up my formatting on those two addresses.
6314 Baker St.
Suite 300
Atlanta, GA
30333
USA
6314 Baker St. Suite 300
Atlanta, GA 30333 USA
Benjamin Westafer
Ok, here goes, please be gentle. I understand that one is encouraged to use a checkbox for yes or no; but I can’t understand why! If a radio button is either one or the other, and a checkbox can be for many, why the preference?
Thank you,
B.
Karen Johnson
I’ve found a few recommendations to show the asterick after the label or field. And I disagree. I’d like to see the asterick appear before a label so that a user’s not forced to read the labels and fields before noticing the asterick. What do you think?
Michael Straker
Yes, placing the asterisk after the field is sometimes inconvenient to users. Not to mention, it sometimes means they won’t see it, defeating the purpose.
I like to stay flexible, and do whatever works best for the particular form. Just be consistent, and use similar placement for all mandatory items within the form.
Dr Tim Thomas
Splendid article in many ways.
What continues to astound me is that, whether it be a multi-million dollar company or your local muffler salesman, websites are riddled with elementary usability problems. As an experienced writer, I am always more acutely aware of content and am often over zealous with my criticisms. As a usability analyst, however, such harsh criticism is inspired by the apparent lack of thought that is apparent on so many sites. Simple, effective, changes deliver a much better user experience but, apparently, such components are just not important to the company and thus, neither are the customers’ experience. Incredible.
matthew willse
As far as I can tell, captions must have a table as parent element. And it seems like it’s one caption per table. http://www.w3schools.com/tags/tag_caption.asp
They might work for you now, but I doubt their accessibility. And their future behavior is anyone’s guess.
sarahana shrestha
I would think that the division of a medium/long form into multiple columns (possibly two) would have the advantage of appearing short (or not overwhelming eg. https://account.atlanticrecords.com/wallet/NewAccount.asp). Does this have significant disadvantages compared to a single-colum forum in which the user can move vertically without interruption? thanks.
Joó �dám
“You can also use CSS to hide the fields that are already filled in correctly and only display those which need to be corrected.”
Why use CSS? CSS is for design. This is not a design element, this is a behaviour. For define behaviours of our document, we have to use JavaScript. Imagine if the user clears away the stylesheet, or defines his/her own.
First the (x)html, then write JS, and CSS should be the last component.
Viz Abdelli
But is there are any css hack to make select input looks a bit less ugly
Cheers