Today, I worked on an interesting project that I like to share with others. It is always been one of our tasks to find the better ways to create HTML form that people can easily fill out information we need with minimum effort. One of my fellow designers found this article on Medium.com and we decided to adapt this idea on our existing form.
Adapting the idea and improve it on our need.
Solving the main problems and maximizing user experience. I narrowed down the main problems with HTML select input on mobile devices and identified the main goals we want to achieve.
- Remove the step of hitting “Done” on iPhone
- Auto load next Select options
And this is what I coded for the prototype. Compare below two forms to get the idea.
Things has been implemented.
- Accordion tabs instead or layers(The article from Medium.com suggested). Since 5 of select inputs co-response each other on our form, it seems better to show what they have selected as they fill out the entire form.
- Disable all fields except for the first field. It has to work like this on our case. Since first selected value generate different options on second fields and so on.
- Once you selected the value, you can always go back and edit.
Things can be improved.
- Adding more visual cues (e.g. Adding check icon on the right, when you select the value).
- Maybe a search bar when it gets too many options to select from (like the article suggested).
- Smoother animation.
- Better instruction messages.
We are planning to run A/B tests on these two forms to see what converts better and how people interact with it and I will probably update this to let you know the result.