Seamless user experience in web forms, is it possible?

We often ask our customers/users to add some content in our system. We often ask our users to complete some requests through a complex process. To be sure that our users will not get lost or panic, we should provide simple and clever web forms. In view of providing a seamless user experience, the wizard process is sometimes a brilliant solution.

UX Patterns - Web Forms
UX Patterns – Web Forms


When we start to design a product that asks the user to introduce some content, we’ve to keep in mind that we’re asking the user to increase his/her own focus on our platforms. We have to be sure that all the information is in the right place and delivered  to our users in the most comprehensible way.

Of course, when we talk about UX, there are (fortunately) strict rules – and sometimes the best experience concerns the device eco-system and/or the scenario.

As far as I am concerned, it’s always a good idea to:

  1. Keep in mind the important lessons learnt from the book by “Luke Wroblewski “Web Form Design: Filling in the Blanks”;
  2. Browse a lot trying to find web forms and processes from the easy one to the most incredible and hard to understand;
  3. Make a grid with strengths and weaknesses of the solution that we found;

We followed this approach during the project startup phase and these are our findings:

The process should be easy and clear through the design of the interface and the user tasks collection. During the benchmark step, we found this interesting article about the workflow best practices. We copy and paste some points because they fit our needs for this design task:

  • Goal – You should give some sense of the total task;
  • Steps – You should display how many steps are involved;
  • Status – You should display where the user is in the process;
  • Mandatory – The user should know what is required;
  • Confirmation – You should know when you have completed a step;
  • Position – You should end up at an appropriate spot;
  • Correction – You should be able to undo your actions;

And we added:

  • Support – You should provide a specific tool to support the user during each step (ex. FAQ page);
  • Notification – You should always provide a report and/or a notification because some processes are not doable in one session and with one device;
  • Confirmation on the go – You should provide such info to be sure that the user clearly understands what he/she did and why. This is the case where the user is not able to fill all the fields: here we provide a “save” button to ensure access to this specific page;

Here you can find the mid-level mockups for this UX pattern:

Leave a Reply

Your email address will not be published. Required fields are marked *