Chapter 5

Chapter 5

Show Progress Towards the Goal

ARE WE THERE YET???

🎂 We've saved the best for last. Let's streamline billing and checkouts!

The Problem

The longer a form is, the more likely a user is to bail. The best solution is to require as little information from the user as possible. However, sometimes quite a few pieces of information are truly required.

Contact

How can we contact you with any questions?

Address

Where should we ship your order?

Payment

How would you like to pay for your order?

The Solution

The simple solution in this case is to break the input fields up across multiple screens. Keep the fields on each screen related.

Contact

How can we contact you with any questions?

As is so often the case in design and engineering disciplines, a solution can introduce its own problem. The user is no longer overwhelmed up front, instead they begin to feel strung along.

The solution to this new problem is simple.

Show progress toward the goal.

This can be as easy as a progress bar and a bit of text.

1 of 3
Contact

How can we contact you with any questions?

Another potential solution is to keep all but the current section collapsed.

Contact

How can we contact you with any questions?

Address
Payment

You might have noticed that the above looks quite similar to the layout of Amazon's checkout process. There's a reason they made it that way. That form results in them getting paid more.

Take Action Now

  1. Review input forms in your application.

  2. If numerous fields appear on a single screen, consider breaking them up into logical groups.

  3. Show a single group at a time.

  4. Show the user where they are in the process.

Congratulations

You've broken larger input tasks up into bite sized pieces while still keeping the the big picture visible!

Enjoying The UX Mini Course?

Sign up for the Cubicle 6 newsletter to get practical UI/UX articles written by a developer for developers.