Everything started with a very simple statement, that I don’t like video tutorials for coding matters. It’s not that I hate on videos; they are great for all kinds of software tuts, talks, monologues, podcasts and so on, but personally I found it much more comfortable to take a fast glimpse at code highlights and read 2-3 lines of text, than search for the right moment until code shows up and wait till author says what he got to say.

Anyway, people from WalkHub decided to suggest a group of people (including me), that website walkthrough would be a great alternative to a tutorial.

Well, I can’t image how step-by-step website tour can replace a tutorial, but topic about walkthroughs is a good one.

Planning website intro

First of all, there are very few situations when you should be using these step by step website tours. In general, this kind of feature should be either “on demand” option or used in areas where majority of users may find navigating around… confusing (and you can’t do anything about that). Think about it this way, it’s not bad to have option like that, but at the same time, you should do everything in your power to don’t need one at all.

If you think about it, majority of website intros are just trying to fix failure from a design process, because that’s how you call it when you need to show a viewer how to use your website.

Science Dog

Great example of walkthroughs are tutorials in games; this kind of “follow us” guides were very popular in this industry, because of different genres and constantly changing ways of interaction with a game. On the other hand, I can tell from my experience and multiple discussions, people were usually skipping them and that’s one of many reasons we could see a switch to “practice missions” and dynamic difficulty levels in recent years.

However, websites are not games and are certainly more unified systems when comes to interaction with a user. Therefore, teaching people how to use them, should be used with caution.

When do I use one?

Scenario A
Let’s go with a simple scenario “I do want to have one, no matter what!” which will introduce user to the website and show him the key features like:

  • where to register and log in,
  • how to perform basic actions (rate, reply, add, delete),
  • maybe inform about cookies policy.

I assume we both agree, that you shouldn’t dim the website and put “Hello, let’s have tour” out of nowhere in front of a viewer. If you wonder why, you may want to check out issue no 3 of Design Time here. Instead of that, it would be less intrusive to just ask “Would you like to know our website better?” and if user is indeed confused with your carefully crafted (it better be) design… he/she will just activate your tour. That’s what I would call a win-win scenario.

In addition to that, you can put a link to a tour in the footer section of your website, from where it can be initiated – “on demand” option, as mentioned earlier.

Scenario B
Another scenario assumes you DO have a website with unusual service and couple of hints will give your user an advantage, compared to diving into it on his own. That’s the point where you have to judge it carefully for your users. They won’t like help in the first place, because it’s disturbing the journey through your website, but after occurring useful, it will be appreciated.

never been so wrong

In that case, it is safe to get a little bit more aggressive with your help. You can dim the window to get user’s attention and proceed with welcome message; it’s also very important to get off on the right foot as you want to show your concern on the first visit and offer help, not suggest that user is incapable of performing valid actions on his own – and scare him away.

Do your best to make this obligatory screen friendly when delivering as much vital information as possible at the same time.

How to make good website tour?

You listed pros and cons, answered many questions, you are going to do it and logic tells you it’s the right thing to do – you website is getting brand new, step-by-step intro. There are just a few things to keep in mind before you make a “tutorial” for your service.

It shouldn’t be a video
It’s tempting to record an HD piece of you demonstrating your amazing features and trying to sell it to the user, but in that case it’s not important anymore. User is here and he wants to give it a try. Video is slow, hard to edit (what will be a massive problem with multiple iterations of your product) and it’s problematic for viewer to skip parts he has already figured out.

You may think about outsourcing
*Waves at Walkhub*. It is one way of doing this and if you are not too technical person you should probably go this way, but keep in mind it is screenshot-based and slow (relatively to the 3rd solution). It’s like showing multiple gifs with instructions, depends on the section user is interested in. Still better than video (editable at least), but a bit artificial – slide show on top of a website.

JavaScript is your friend
You developed a wonderful website with services designed to make lives easier, it’s time to step up and present it in a good fashion. You or your development team can provide the most versatile step-by-step website tour you can imagine. Thanks to multiple, available jQuery plugins (you can also write one on your own for your project) you can setup and adjust guide that is user friendly and acts as you wish. Personally I would recommend this way over previous solutions, even if it means allocating more time for development.

Remember what user said
It goes without saying, that you should keep [save] user’s respond, regarding taking a website tour, at least in local storage. If the answer was yes, we can assume viewer will know how to navigate website the next time (keep in mind fail-safe in a footer which can initiate tour “on demand”) and if the answer is no, we can bet that he feels comfortable around and doesn’t need to look after him.

Give people control over tour
If a visitor decided to take a path with presentation of key features, you should allow him to either skip it entirely (exit, finish, break) or move to the next point of the tour. This way he/she is in control of the walk and gather needed/unfamiliar information instead of waiting for something useful to present itself.

Ready, go to solution

I did some research in the matter of walkthroughs and if I had to pick solution right here, right now, it would be Intro.js. First of all it’s simple and JavaScript based, there is great control over process what leaves spaces for custom actions – after all it’s built-in solution, no some kind of 3rd party medium. It’s lightweight, supports keyboard shortcuts (much more comfortable than clicking “Next/Prev” which change place based on label position) and is open source, so fear about tool being discontinued is minimal – even IF, there is very high chance it will be forked and development wheel will keep spinning.

Fin

Website tours may look cool, but times when users of the Internet were tourists are long gone and there is no need to treat people like that. Instead, every website should be designed with a great attention to the way people will be using it. With clear and simple navigation, intuitive paths and transparent meaning, without overcomplicated information, your user will be find on their own – without leading him by the hand.

However, if you decide that a small step by step instruction, lies in the interest of your potential user, craft one with yours and your visitors comfort in mind.

Good luck!

EDIT:
I found a pretty nice example of “tour” for your web service or features presentation if you are more interested in showing off your application’s options. This one is from Mozilla and it presents Firefox after one of redesigns.

Firefox features

It’s great because:

  • it’s simple (not overwhelming),
  • contains vital information,
  • you have easy access to every piece of data independently, no need to skip through things you are familiar with,
  • and last but not least, you can just skip entirely – no harm done.

If you know any other interesting examples of interactive tours, drop a line in the comments or just tweet @Bel4r.