(Originally posted August 15, 2013)

Effective landing pages should perform two functions. The first, and obvious one, is to convince the visitor that the service is worthwhile enough to go through the process of signing up. The other function that it should perform is to show the user that the interface is simple and manageable. This is slightly less obvious, but just as important. No matter how interesting and awesome the service might be, if it is complicated, no one will want to use it.

I’m going to assume that you can all write the amazing copy filled with buzzwords and flashy text that convinces the user that what you made is important. As for showing that the interface is simple, this is a lot tougher.

The most common method is using images that show off the interface. Whether it’s a large image at the top of the page, or little images that coincide with specific pieces of text, images do a fine job of showing the app off. But static is boring, and you can do better.

Another method that is seen is a video that walks th 1ff8 rough the important points of the app. This is an improvement over static because it is less work for the user since all they have to do is sit and watch, and it allows you to curate exactly what you want the user to see. But getting a visitor to click on the video, especially with sound, is not easy.

A combination of the first two options is to use a series of images that show the usage of the app, but without the sound. This is becoming more popular recently as it still captures the visitor’s attention, and is already playing when they scroll to that location. With this, you can show off the flow of the app without being so intrusive as a video would be, and it doesn’t require the user to fire up the video player.

There are all good options, but they still only tell the visitor about the service. You want to showthem.

When I was building Streakflow, I needed another way to convince new visitors that the service is worthwhile. At first, I tried and went through all of the methods I mentioned above. But none of those could really capture the essence of how to use the site. I realized that instead of just trying to explain the app, I could let them do the discovery themselves. It seemed simple especially considering that main functionality was on one page. The result of that is the following demo.

The demo does two things. It shows the simplicity of the interface, as well as being a slight teaser that makes the visitor want to sign up and use it for real. Plus, it has a game like interface which is always a plus for the user.

The entire thing is a state machine built in client side javascript. There’s not backend, and all actions are kept locally. And with that code, it brings the app to life, without the user having to do anything initially.

One page apps are pretty simple to envision a demo, but multipage or more complicated apps my have a harder time. Twitter could have a split screen where you have two users. You would be able to follow and unfollow and tween fake things. If you’re following the other guy, then you’ll see their tweets in your feed. unfollow and they won’t show up. It’s simple, shows the functionality, and would make you want to do it for real.

You could even get more complicated, but still have the coolness factor. Something like Foursquare could have a mini city where you move your stick avatar to different places and check in there. This shows the functionality, and would be kind of fun, and again, makes you want to do it for real.

When you don’t have traction, doing what ever you can to get the visitor over the hill and signed up is important. The standard way of doing this in the landing page is by using writing, and images. Telling doesn’t do anything. Showing, by having an interactive aspect can be very beneficial.