24 Steps-Left Pages That Enhance The User Registration Process

The registration process should entail simplicity, great usability and a high-level of accessibility. With numerous sites wanting to focus on how attractive and eye-catching their sign-up forms are, they seem to “forget” one principle; how the user interacts with the registration form.

Below we’ve included a showcase of inspiration that solely focuses on one simple yet entirely effective characteristic, enhancing the registration and check out process using steps-left.

Enhancing Your Registration Process

Incorporating steps-left into the registration process has been around for quite some time. Their purpose is mainly to guide and inform the user as to what’s to come in following steps. It’s a clever way to make the process much easier, and in return you’ll yield higher conversion rates. A few years ago there were a number of websites who where already incorporating this method into their sign-up forms.

The only problem with these were that most of them allowed you to choose which step you wanted to complete at your leisure. This meant you could skip in-between steps which caused the user to become confused and discouraged.

As of recent, the ones you’re able to come across don’t allow this type of functionality, but offer more because they “have” less. A few good accessibility tips for implementing steps-left would be to make sure the titles are large enough to read with minimal trouble, if you use graphics and colors make sure they’re not overdone, and try to either use numbers (i.e. step 1, step 2, etc..) or a small image to define the step. You can also strictly use typography as well. As long as the users focus is predominately geared towards the sign-up form, it’ll help the process.

Another feature rarely seen will enable you to ask the users to save their progress at every step, and allow them to come back and finish in case their Internet connection halts, or they wish to complete the process at a later time. However, this would only be feasible for the larger registration processes.

Steps-Left Showcase

Below we have 24 steps-left for you to gain knowledge and inspiration from. You’ll be able to use them as somewhat of a guideline to designing and developing your own.

BlogLines ↓

Steps

Amazon ↓

Steps

Majestic ↓

Steps

Free People ↓

Steps

Delicious.com ↓

Steps

Food Network ↓

Steps

Grasshopper ↓

Steps

Sortfolio ↓

Steps

Game Co. ↓

Steps

Search Inside Video ↓

Steps

Flickr ↓

Steps

LiveStream ↓

Steps

Buffalo Planner ↓

Steps

Ikea ↓

Steps

Urban Originals ↓

Steps

Design Collectors ↓

Steps

iWork Wear ↓

Steps

MediaLoot ↓

Steps

The Ultimate Green Store ↓

Steps

PopScreen ↓

Steps

John Lewis ↓

Steps

Issuu ↓

Steps

Mealeo ↓

Steps

Hootsuite ↓

Steps

Your Turn To Talk

I hope you liked this post, please take a minute to leave a comment below ;)

Comments

  1. says

    Nice post Joel. I’ve always wanted to incorporate a steps-left registration process on a site somehow (either through my own work or client work) and these are definitely good examples. Some are “prettier” than others, but all functional looking for sure.

  2. says

    Thank you Mike, I definitely agree with you. I’ve also noticed that step’s left may not work with every registration process. Similar to Digg, they used to have a Steps-Left process and now they’ve just placed the sign-up form within the same page you’re able to login. Or Twitter, I believe they used to have a steps left as well, however, they cut back on the “unnecessary” details and made it simpler. Every case is different :)

    There are a few in this showcase that look much better then others, but functionality as you said is what matters.

  3. says

    Joel – Thanks for featuring us on the site! Appreciate the positive feedback and I’m sure our designers will as well :)

  4. says

    Hi,

    Good read. Crossed my mind that has it been measured (and analyzed) that how many start the registration process but never finishes it, and for what reasons?

    Coming from event business, where registration is the key, yet should be kept fast and extremely simple (at the same time as gathering all the wishes and special requirements) this is a key. Any comments/advice appreciated.

    /Peter

  5. Tal says

    Our website developer has been discribing different methods for our customers to register with us and told me to come here.

    Glad I did, I’ve got a much better idea of what looks good and what I think will work well on our website.

    Cheers for the info.

  6. says

    Great post – very helpful as we are currently implementing a multi-step form.

    It might also be useful to add a few more screenshots showing how a step’s state updates when a user has completed that step, as the greyed out /not-yet-visited treatment is probably not appropriate for that scenario.

Trackbacks

  1. 24 Steps-Left Pages That Enhance The User Regristration Process | SpyreStudios…

    With numerous sites wanting to focus on how attractive and eye-catching their sign-up forms are, they seem to “forget” one principle; how the user interacts with the registration form….

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *