Beginner’s Guide to Animated Website Tours

To make a compatible tour page for your website requires a lot of insight towards what your visitors need to know. Generally you can find a lot of examples using static informational pages as a guided user tour. Admittedly this is a great method for gaining traction from your userbase but it is not easy to accomplish.

In this article I want to look over some examples and plugins for creating your own animated website tour. This could happen all on the same page or in-between different page sections. The content is entirely up to you and this leaves a lot of room for innovation. But after checking out some of the possibilities you will surely be able to craft something useful.

Designing Around Themes

A good tour should be created around a theme or specific user interface style. The dynamics of how your visitors access content in the tour will define terms if the information actually sticks. I really like the example tour from Dropbox which actually doesn’t use very many animations. But the page is fairly dynamic and quickly loads content in a book format.

It is easy to see how this may catch on as a quick and easy solution to explain Dropbox to somebody who has never heard of it. The colorful illustrations and graphics are also a nice touch. It seems like the interface would still work even having JavaScript disabled which is a good fallback solution. The minimalism is a welcome design feature by most guests.

Freckle website tour interface webdesign layouts

The more simplistic tour page used on Freckle’s website is a single-page design without updated content. The first element is a big streaming video which is often preferred by most users. Videos are playable from mostly any browser and offer quick-to-the-point ideas for how to use the website or application.

But it is notable that their tour page includes real information and screenshots from the app. Depending on the complexity of your website this extra information may be a good idea. Setting up a complete tour page with just a video can be off-putting for some people. But I do stand by the idea of streaming videos and they can work even better as part of a presentation element.

Sticky-Sliding Navigation

One other solution for holding lots of tour content on a single page is parallax scrolling. The background images will slide along as the user scrolls but we keep a fixed navigation menu attached onto the interface. Then users may skip through the different sections at their own leisure.

The very creative MediaFire website is host to many great design aesthetics. But their homepage actually contains a small guided tour area once you scroll past the header. You will notice a series of links which are fixed off to the left side. You may click any of these section links to pan around the page jumping between content.

Take inspiration from this for your own ideas but remember that a tour should feature the most important or puzzling ideas related to your website. You are looking to clarify any questions users may have so that people aren’t lost when browsing the interface. You will find this to be the case on MediaFire and it is obviously very useful in other applications and social networking websites.

An Example Tour Page

The web development blog Codrops has been publishing a lot of great tutorials revolving around new-age design trends. Most recently I found an article discussing website tours using jQuery and the demo is simply fantastic. Additionally developers may download the project source code and see how to create this same effect on your own site.

open source jquery plugin tour website beginners demo

There are a couple major benefits to the Codrops tour approach. First we have a navigation box in the top right corner so users have quick access to the next piece of the tour. Some tutorials do allow for navigation through the arrow keys – but this method doesn’t help unless you directly explain to the user that they should navigate using the keyboard.

I also really like how the popup bubbles do not interfere with other elements on the page. You may style each bubble differently as needed and this provides an excellent resource for demonstrating your website’s capabilities. The autoplay tour demo is another solution if you would rather animate like a movie without any user input.

Building with Open Source

All the examples so far should provide insight towards the idea that many different websites can build tours in various layout styles. Most of these pages are custom made, but modern developers have their choice of building with existing projects. jQuery developers have provided a handful of free open source plugins including my favorite which is called pageguide.js.

pageguide.js jquery codes webdev open source screenshot

Check out the demo Github page if you want to see this effect in action. Pageguide offers the ability to customize not only tooltips, but also highlighted elements and motion up and down the page. Granted the coding may get a little harsh if you are unfamiliar with JavaScript. But this is true of almost any dynamic tour plugin so it will require some buckling down.

joyride jquery open source plugin codes

Another choice you may look into is the Joyride plugin released by Zurb. You can find this on Github and many of the features will continue years into the future. The plugin supports native responsive elements which may adapt as the window resizes. Plus the documentation is well-written and offers a slew of fantastic options to choose from.

There are definitely some other plugins worth mentioning like aSimpleTour and Crumble.js. It is difficult to pin down one specific plugin and label this as the de-facto tour plugin. But the truth is that each website will be using tours for a different reason. You’ll need to have a plan in advance before looking into the development side. But luckily there are plenty of open source projects to aid in the creation of your tour pages, no matter how complicated the interface.

Related Articles

Final Thoughts

I hope some of these resources may prove beneficial to web developers around the world. You do not often find startups with fantastic tours and feature walkthroughs. But the handful that are use tours online have been pushing the boundaries on this new trend in web design.

It is true that we have never had so much support for dynamic jQuery enhancement. Any static website tour may not require animations or any type of jQuery for that matter. But the added effects are often much more captivating to new users. Be sure and check out some of these plugins or demo pages from throughout the article. Plus if you have any questions or ideas we may have skipped over please share with us in the post discussion area.

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments