Three steps home pages

| 04.7.2009

I’ve noticed a trend recently of home pages for various web services having a three step layout. The goal is to describe your service with three simple steps.  A few examples:

Sunnygram

sunnygram

Blurb

blurb1

Poll Everywhere

poll_everywhere_steps

This pattern is becoming pretty rampant and with good reason — it’s effective.  If you have a site that is providing a service in a new or unique way, you need to explain to your prospective customer why you are special very quickly. I can’t even tell you how many sites I visited in the course of doing research for this article that I could not figure out.  The three steps design approach provides a framework for communicating uniqueness in a clean, simple format.

For example, screenshotted below are two sites that do very similar things — ticket search. Fansnap uses the three steps approach to describe what they do and why they do it better than others. Seatwave highlights an event at the top and then provides a browse interface below.

Fansnap does a better job educating their visitors about what is so special about their ticketing site. In contrast,  Seatwave is just another ticket site — I’m not sure why I would use it over eBay or StubHub which are more well known.

Fansnap

fansnap

Seatwave

seatwave

But is three a magic number? Why not four steps?

Four steps starts to feel like a lot. Let’s look at this  four step example from LOVEFilm.com – the British version of Netflix.

LoveFilm.com

lovefilm1
Four steps starts feeling complicated — I can’t just scan and move on. Do they really need that third step –”Watch it at your leisure with no late fees”? It seems like they could combine it with step 4 pretty easily. Then maybe they could have a big sticker or something that says “No late fees!”

Check out this super quick redesign I did  reducing the steps from 4 to 3:

Before – 4 steps

ilovebefore

After – 3 Steps with a No Late Fees sticker

iloveredesign

2 Pitfalls

As with every good pattern, there are ways that you can mess it up:

1. Avoid empty sound bites

In the quest to have 3 catchy pieces of information, don’t reduce your something to nothing but buzzword fluff.  Fansnap is trying to be clean by sticking with three words:  Compare – Choose – Click. But, on first glance it’s a little confusing what they are talking about and why they are unique. Basically, they search across a bunch of sites (like kayak.com except for tickets) and then offer a cool UI to compare the seats so that you can get the best seats at the lowest price. Handy.  Here is a redesign of the language and graphics that keeps the simplicity but doesn’t force the user to think:

Before – empty language

fansnap_before

After – clear languag and graphics

fansnap_redesign

2. Put the numbers close to the words

In the original FanSnap above, the numbers are buried in the graphic. This makes me wonder at first if the items below are steps or just three features.  In the redesign I’ve put the numbers next to the words and suddently it is clear that this is a quick, fun process.

So, to make a long story short, three steps is an interesting design pattern for quickly communicating the essence of your service to your prospective customer. Next week, I’ll delve into the sister pattern of 3 steps which is  3 features.

Share with

2 Comments

  1. Great Observation!

    posted by Eric at 2:34 am on 04.23.09
  2. Good article.

    - These stages can also be applied to designing home pages. From discussing ideas with a client to researching your intended market and finally producing a design. All these stages work together, allowing you to produce a site that will target your users. When designing you should also take into consideration, the functionality and navigation side of your website.

    posted by Laura Godfrey at 2:48 am on 05.21.09

Leave a comment