In the early stages of application development, when you’re building a proof-of-concept, or a demo app for your investors, focusing on UX/UI might not be your top priority. It’s understandable, the budget might be tight, there’s a lot of development to be done and it’s more important to show that your idea works. But you will need to work on that eventually (Want to find out when? Check out this article - When is it a good time to optimise the UX of you app?).
So even If there were just the frontend developers engaged in the project and no UX/UI expert, it’s never too late for that! Below you will find one of the real case study of complex forms that we handled here in Selleo’s UX team.
What you’re seeing in front of you is a screenshot from a system for adding parking spots, operating across the country. It could use a custom design instead of the default framework style, but most of all, let's take a look at what can we improve UX-wise. To start the process, there’s a couple of questions that we can ask ourselves:
1. Are all fields really required?
As you can see there is a ‘required’ star next to almost every field. Maybe we don’t really need that many in the first place. It might be how the database structure looks like and the data needs to be saved there, but it does not mean that we should get it all by users’ manual input. Which brings us to the second question...
2. Do all the fields need to be there?
This is the most important one. How much input do we really need? Let’s break our case down one by one:
- Description - if the area is hard to get, or not available regularly we need to be able to show that. This one stays
- Line 1 - you have to find the place somehow, so yup address can be handy. By the way, pay attention to the label - it says just ‘Line 1’ - guess that’s the name of the string stored in the database, but that does not have to be our label. Make sure these are descriptive for the users
- Line 2 - we already have the address from the previous field. It depends on the region, but in our case, we can have just one input. Yay! We just got rid of the first input!
- Lat & Lng - latitude and longitude, which can be found from the address. These are both disabled, available for the user only as a preview, maybe to check if the coordinates are showing the correct street. This is useful, but instead of showing numbers, let’s display the coordinates on a map - so we remove both fields
- City & postcode - yeah pretty useful for a nationwide app Country code - if the app is for an international market, sure why not. But in our case it will only be used in one country, for now, so let’s remove it
So we’re down from 9 fields to 6, we’ve added a map with a preview, a custom design, the fields have more descriptive labels, the placeholders show sample input. We have also reordered the inputs, the location is more important than the description. It’s already much nicer and more usable, so is there anything more we can do?
3. Let’s fill in the form for users!
We need all of this data, but does the user have to fill in everything? Maybe there is a way to get this data automatically? Well, there is, since we already have a map preview and are marking the location from Google Maps, we could use it for filling the form. The user needs to add the street address and number, but the city and postcode will be filled in automatically in the form of autosuggestions that Google Maps uses. In this case, only one field for the address is needed. Street name, number, city and postcode will be shown as a preview only.
Now we only have 3 fields, that’s one third of the original form! Let’s have a look at the final, filled in form:
So what are the rules for optimizing UX complex forms? Make it as simple and easy for the user as possible, while getting all the data you need. Sometimes you will have to compromise, for example, you got the user to sign up, but you would also want their phone number. If it could have a negative impact at the signup rate it might be worth waiting and asking for it later. What if the user has to choose working hours? If it’s possible, find out what hours are the most common for your target group, and predefine that. Even if you’re 50% accurate, already half of the users don’t have to change anything! Remember, ask a lot of questions and don’t take what you see for granted :)
Need help with your UX design? Contact our team of experts!
