This article was originally published on onepixelout.com
Forms are the portal between the user and the system, and are often the focus of a webpage. Login, registration, updating your status, entering payment information and delivery address — all of these are handled using forms. For eCommerce sites, well crafted forms can make all the difference.
In my experience, improving the design of a single form can even double the sales of an online store.
… and I love designing forms.
Since forms are a functional aspect of the user interface, there are some rules when it comes to how to design them. Today we are going to look at tips and best practices when it comes to getting forms to do all of the legwork, so the user doesn’t have to.
1. Start with the Inputs
Start with the most common form element : the text input field. It is the most common component of most form, so get it right and you’re already half way there.
There are 3 basic elements of every form input: the text field, and the label, and the error message. Whatever way you chose to design this most fundamental building block, make sure that there is always a way for the user to know which piece of information is needed, and if there was an error — how they can recover from that error. Which brings us neatly on where to put labels.
Labels Go On Top
Trends come and go. There is a trend that leans toward using the placeholder as the label. While using placeholders for labels is not necessarily wrong, they do present some UX issues. The problem with that is if the user taps it, the label is gone. If the user returns to this form and the input is focused because of an error, the label is also gone.
Labels need to be visible at all times. For this reason, labels go on the top.
Why the top and not the left of the input field?
When the label is on the left of the field, this will need to stack one on top of the other on mobile. Think mobile first.
Guide the user to entering the correct information with placeholders, and use labels for their intended use.
The other argument for putting the labels above their input fields is that the reader has a linear vertical line to read the information, which research has shown is faster than jumping from a left column to a right column. So make things easier for your user — a clean line for them to read the things they need to enter to move forward with your website.
2. Errors States and Warnings
For every standard text input field you’ll need a corresponding error message. Here are a few tips on designing for the error case:
The error message may come from either the client or server. The client side can detect things like when a mandatory field is not populated, or when an email address is in the incorrect format. The server side will be able to find out if an email address currently exists. Know which ones are client and which ones are server. The client side errors should be given to the user before the form has submitted as hints. Client side errors should prevent the user from submitting incorrect information.
Get smart with the error messages.
When a user makes an error, give them information about which field caused the error. For security, some developers may not wish to specify at login whether the email or password is wrong, and that’s completely fine. But when the user is simply signing up for an email or entering their address at the checkout, tell them which field is wrong and why.
Every time you design the text input, also take into account how the error message will look both before and after the user hits “Send”.
If a particular field requires a certain criteria — for example, a password needs to have a certain number of characters and combine both numbers and letters, let the user know. You can include ways to show how strong the password is as they enter it. It might also be useful to show if an email has already been registered, or a username has already been taken.
3. Group Like with Like
Visually the form will look neater when you group like with like, but from a user experience point of view it’s also better. Think about how the mobile user will interact with this form. If the text input fields are together, the user will have to stay on the keyboard to complete the fields.
If you are asking the user to switch from text input fields to dropdowns, to radio and back to text input fields, this is more shifting around from the user side. Think about how the user is holding their mobile device, and how this can reduce friction by grouping similar input fields together.
4. Radio Buttons, Dropdowns and Checkboxes
Sometimes there can be confusion over when it’s time to use radio buttons, dropdowns and checkboxes.
Radio buttons are a great way to show the user a low number of possible answers. As the designer, you are able to pre-select an answer, or leave this blank. Radio buttons are the best choice when only one option can be chosen.
When there many possible answers, a dropdown is more suitable (my rule of thumb is if there is more than 5 or 6). You can pre-select an answer, or leave the top item as “Please Select” in order to instruct the user to make a choice.
Checkboxes are the best choice when you have a single box to tick (such as terms and conditions) or you have more than one possible choice. If you want to find out which marketing emails to send a user, a group of checkboxes will allow you to make more than one selection.
Using checkboxes instead of radio buttons shouldn’t limit you in your user interface design decisions. As the designer, you have a lot of flexibility on how these UI elements can appear on the screen. If you still want to style checkboxes to make them look more interesting, this shouldn’t have an impact on the user experience. Instead of having a list of text next to a small circle, you could make this more engaging by designing select-able images or icons.
5. Where Possible, Eliminate Optional Fields
If the business goal is to get a user to buy something from your website, your goal as a designer is to eliminate as much friction as possible between the customer and the system. Taking out unnecessary fields will make the form appear like less work on the side of the user.
This is important to know when designing any kind of checkout or delivery address forms. If the marketing department want to find out the customers interests so they know which marketing emails to send, there might be other ways of finding this information after the customer has purchased their items (for example, on the page they visit when they “confirm their email”).
Always look for creative ways to have only the minimum number of fields visible. If your goal is to optimise for conversion on an ecommerce site, focus on minimising the number of fields in the forms for delivery address and checkout. If you’re design an interface for booking flights, show the user the minimum amount of fields they need to see the available flights. Once you have your user invested, you can start finding out more of the peripheral information that they might need — such as number of bags etc.
6. Use Auto-complete for Longer Fields
The street name field may, depending on the name of the street, take a lot of time to type — particularly on a mobile device. It can be even more difficult to type correctly.
You could think about incorporating the Google maps API to make the street name auto-complete. This means that the user may only have to type the first few characters, and select the right street from the drop-down list of possible street names. It’s even possible to auto-populate the ZIP code also, just by having the name of the street, but we’ll discuss this in the next point.
7. Use Conditional Logic
There are ways to use logic to enter some information on behalf of the user, making their lives just a little bit easier.
- If you know the users country, the design can predetermine additional fields they might need (‘state’ if they are in the USA, ‘county’ if they are in Ireland etc)
- You can use the postcode to populate the name of the city, state or province.
- If you have their country based on the IP address, can you populate the country code in the phone number field?
If you’re going to populate fields on behalf of the user, always give them a way to edit this information. It’s possible you are not correct.
For example —you can use Google Maps API to get the name of a German street. By knowing the name of the street, you can also get the area code. However, some streets in Germany are large enough to span different area codes, so the information will be wrong for a small number of edge cases. Always give the user the option to edit the data if needed.
Exploring conditional logic for every single country in the world would be a huge amount of work — so be smart with your efforts. Look at the countries where you get the most orders or traffic, and start to optimise for those first. If you see a strong return, you could carry on implementing the same conditional logic for more countries.
8. Get Smart with Placeholders
Earlier we talked about how we shouldn’t use placeholders as the text field label, since it will vanish when the user taps on it. We didn’t explore the other ways that placeholders can make the user experience better.
Placeholders offer a neat opportunity to show a user how to format their information. Phone numbers are a great example. Should the user include their country code? Or area code?
When you need a telephone number in a certain format, or a credit card number to include dashes, you can inform the user of this information by providing an example in the placeholder. This is a cool way to minimise the errors by clearly stating that you need the country codes etc.
9. Clearly Communicate the Next Step
Make your buttons work overtime by communicating what will happen next. If there is an additional step to complete, make this known to the user too.
Instead of using “Next” or “Checkout”, you could say “Review Order” or “Pay Now with Paypal”. Add another level of communication by specifically telling the user what will happen when they tap on it. Will this button complete their order, or will they have time to review it? Will they be brought to a Paypal login?
Always look for ways to make the user feel at ease during the experience, especially if it affects their bank balance.
I still get anxious every time I use the Amazon checkout because they don’t tell me the full amount including the shipping fee until the very last step. Be transparent with your user. Drive trust by giving them the information they need at every step, and clearly explain what to expect when they hit a call to action.
10. Keep Looking for Ways to Optimise
Once you launch your bright, shiny new form — keep looking at the analytics. If you find a large number of people bounce when they see it, find out why. Carry out user testing to see where your users feel uncomfortable, and work to remove that friction. As a designer, often our work is never really ‘done’.
Forms are occasionally not a very fun thing to design, but when done well they can make a huge difference to the user experience of a website or app. Design your forms to work harder so the user doesn’t have to.
Communicate clearly on calls to action, give hints to the user through warnings and placeholders, and offer auto complete. Always look for new ways to do more of the heavy lifting, so the user has a friction-less experience.