24
Apr

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 ;)

jump to the comment form ↓

  • User Gravatar Mike Smith
    April 24th, 2010

    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.

  • User Gravatar Joel
    April 24th, 2010

    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.

  • User Gravatar Smashing Share
    April 24th, 2010

    Very nice and informative!

  • User Gravatar Paweł P.
    April 26th, 2010

    Nice collection, just in right time for me :) But I can’t see
    my new solution to view a cart items.

  • User Gravatar Jordan Walker
    April 26th, 2010

    I have been working on a system that requires registration, those mentioned above are get example to set as a bench mark.

  • User Gravatar Katie
    April 26th, 2010

    I was looking for a gallery like this a few months ago. I have bookmarked it for future use, thanks!

  • User Gravatar Jae Xavier
    April 26th, 2010

    I like using the 1 – 2 – 3 model. Linear processes are aligned with general expectations.

  • User Gravatar Casie
    April 27th, 2010

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

  • User Gravatar Peter Green
    April 28th, 2010

    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

  • User Gravatar Michael Pehl
    April 29th, 2010

    I am using janko’s formToWizard -> http://www.jankoatwarpspeed.co.....query.aspx

    cool thing :)

  • User Gravatar Derrick Workman
    April 29th, 2010

    Great post goes along well with the next article as well.

Who Linked To This Post?

  1. designfloat.com
  2. [User Link:24 Steps-Left Pages That Enhance The User Regristration Process] | Tips for Designers and Developers | tripwire magazine
  3. 145+ Seriously Useful and Inspirational Articles for Creative Designers | tripwire magazine
  4. CSS Brigit | 24 Steps-Left Pages That Enhance The User Regristration Process
  5. 24 Steps-Left Pages That Enhance The User Registration Process | Design Newz
  6. Weekly Design News – Resources, Tutorials and Freebies (N.34) - Speckyboy Design Magazine

Share your thoughts, leave a comment!