I've been posting shots about this project lately. In this animation I want to show you how the form works.
Focus — complete — next — repeat
Imagine you’re working on an important task and you know you have to be concentrated but you see a new notification on your phone, pum! You lose focus.
I don’t want that to happen while the users are completing the form. I need the user to focus only on the form and avoid any distraction from the page itself. So the form was designed to focus on one field at a time.
Once the user completes a step, he can go to the next one by clicking on the “Next” button or by pressing “Enter” or “Tab”. By using either the mouse or the keyboard the user can speed up the whole process.
The site is live autocosts.info
Would you like to know more about this project?
👉 Check out the case study: https://medium.com/@mcristaldo/ux-ui-case-study-auto-costs-find-out-the-true-cost-of-owning-a-car-86727a3da5dc
Valuable feedback and suggestions are welcomed! I’m always willing to improve my skills.