Web Scraping Tool — Online Order Form

Hello Dribbble friends,

In this shot I'm sharing an old project I worked on a few years ago. I was tasked with the redesign of a new checkout experience for a web-based scraping tool.

THE PROBLEM: The old checkout experience was a very complicated process that forced customers to jump through multiple rounds of hoops, due to unnecessary steps and requirements that needed to be eliminated. There was also a visual disconnection between the checkout process and the rest of the website, which contributed to the abandonment of new users.

Quickly after I started solving the problem, I learned that a checkout experience is a complicated optimization puzzle to be solved. The key is to keep things as simple and intuitive as possible.

A few rules of thumbs in web form validation design:

- Users dislike when they go through the entire process of filling up a form and have to wait for clicking the submit button to understand what went wrong. Don't provide confusing validation feedback. It should clearly communicate the errors, and if necessary, ways to fix them.

- Inline data validation gives users real-time feedback when filling out the field. These bits of feedback can be presented before, during and after users fill out the form with information.

- Never provide validation feedback on a popup alert.