bg-wall

What's New

Inside the industry and inside the agency

18 Jun 2012
emma-atkins.jpg

Forming good form design

by Emma Atkins , Executive Designer

 

Forming good form design  Banner

I've been designing a lot of forms lately and it's come to my attention just how much difference a well designed form can make to user experience. Sites can lose a lot of users based on the design of their forms. If a user is put off by an overcomplicated look, difficult to understand terminology or simply the length of this almighty form, they will usually exit the site never to be seen again.

But fear not, poorly designed forms are on the decrease and there are lots of useful write ups and pointers as to where you can put things right. Huzzah, I hear you cry! Huzzah indeed fellow form-filler-outers. Here are a few things I've come across in my form travels that have helped me create a clean and simple user experience for our clients.

Findings

1.

iCloud login

Keep it simple. This is an example of how I feel all forms should look. Cut out all the added extras that don't have a place on your form, leaving only the necessary fields that you require for the user to go to the next step. Its obvious to the user what is needed of them and they know it will only take a short while for them to be done.

 

2.

mail chimp colours

Colours play an important role in your designs. Users will want to know what are buttons, what will happen and what they should expect when they click on these funny coloured bits. Be bold with your colours but stick to a few and keep it minimal, make your final "continue", "Submit" or "YES THIS IS THE END" button the one that stands out the most so they know what to do when the time comes.

 

3.

nike layout

Layout is king. It's the glue that holds your form together. I find it useful to adopt the mindset of the person filling out the form - what will they want to do first, where will they go next. For layout this style is the most popular, as it is set out in the natural flow as to which we read and process information. The steps of your form need to be logical and never misleading. If you have notes relating to a certain field make sure they are conveyed clearly and are noticeably linked to the field they relate to. It's good practise to ensure the length of your fields are comparative to the data that will be going in them for example: don't make your postcode field ten yards long and your email address field smaller than a newt's toe - the user will not be happy!

 

4.

Buffalo Progress bar

A nice touch for those mammoth forms that are long but necessarily so - a progress bar! Divide up your content into sections of similar content steps and show the user exactly where they are in the process. It's always good to know how much you've done and how much you are still needing to do on mega forms - you don't want any hidden extras popping up when you don't want them!

 

5.

opt culture error message

Finally, error messages. They are really important and vital to get right. In the rare occurrence that your user hasn't filled in a mandatory field on your form you need to tell them and show them exactly where they can put it right. They won't mind a little form-filling-in criticism if it means it gets the job done, so don't be shy, be clear :)

 

Happy forming!

Back to blog posts

Leave a comment

Contact us to discuss your digital requirements
Tel. +44 (0)20 7183 4999

Enquiry Form
Subscribe
  • Twitter feed unable to load