News

Build better UX with a Trip.js web tour

Worried that visitors won’t discover all your cool features? Take them on a guided tour…

si03

Screen shot 2014-11-17 at 15.13.53

If you’ve taken the time to carefully build your website to be user-friendly and include all the features that people will want to use, you could just leave people to find their own way around. But why stop there? Why not provide a tour of your website that quickly helps people to find the content or functionality they are looking for?

We know that a site should be self-explanatory, but sometimes adding a little extra help into the equation is not always a bad thing. Including a strong call to action on your webpage can make all the difference between success and failure. Plus, adding in extra assistance will entice a lot of users to stay. Curiousity will also play a part. If they have never seen a web tour they are almost guaranteed to stick around.

Studies have shown that simply asking people to telephone, share, like, follow etc significantly increases their likelihood of doing so. A web tour takes this idea one step further. It enables you to encourage your visitor to focus on the action that you want them to take. In the right hands, it’s a powerful tool – so use it with care.

What’s it for?

A web tour is a sequence of pop-ups, or tool tips, sometimes requiring interaction and intended to introduce a visitor to the content or functionality of a webpage. A great tour won’t make a poor page interesting so don’t bother adding a tour to a webpage that really just needs to be improved. One-page-style websites work well with web tours and this tutorial uses the free template developed by Carino Technologies and available from ShapeBootstrap.net (bit.ly/1o4MmZz).

Where to start?

You’ll need to find a prominent place to put a button for people to trigger the tour. The tour will automatically scroll the page up or down to each of the page elements to which you assign a tour step. Trip.js by Taiwanese developer EragonJ provides the tour functionality and can be downloaded from eragonj.github.io/Trip.js.

Integrate the plugin

First a link to the plugin’s style sheet is added to the head of the HTML. Then, at the bottom of the page just before the closing </body> tag, trip.js and trip-demo.js are called. Trip.js provides the core functionality and trip-demo.js is where you provide the tour content and configure its functionality.

001    <link type=”text/css” rel=”
stylesheet” href=”src/trip.min.css”>
002    <script type=”text/javascript” src=”src/
trip.js”></script>
003    <script type=”text/javascript” src=”js/
trip-demo.js”></script>

Keep it simple

The work required now should be straightforward but the tutorial site comprises a large number of files to provide a site that’s rich enough to be worthy of a tour and it’s easy to get in a mess working on several aspects simultaneously. Focus on building your page first and then if you feel it might benefit from a tour, that can be added later.

Planning the tour

Your tour needs to have a purpose if it is to be worthwhile for visitors. In this fictitious example the visitor is guided through the different parts of the site and then directed to the credit card button. It’s helpful if you think of the tour like a story and having a beginning, a middle and an end.

Setting up the tour

The trip-demo.js file is used for configuring each of the tour steps and the overall plugin functionality. First, a check is made to ensure the DOM is fully loaded. A variable array is then created for each of the steps. The position of the tooltip is set as n=north, e=east, s=south, w=west. You can also use nw, sw etc, and these locations are all relative to the element that has the step’s class added to it.

001     $(document).ready(function() {
002        var trip = new Trip([
003            {
004                sel : $(‘.demo-index.step1’),
005                position : ‘n’,
006                content : ‘Welcome to TripTour - We 
go there for you!’,
007                delay : 3000,
008                animation: ‘bounceInRight’,
009                callback : function(i) {
010                    console.log(“step “+ i +” is 
finished”);
011                }
012            }, 

Console logging and timings

A number of callback functions can be invoked. For example, the step can be logged in the console to assist with debugging a tour. If you want to use an apostrophe in your tour content it needs to be preceded with a back slash. The duration of the tooltip is set in milliseconds.

001    {
002                sel : $(‘.demo-index.step2’),
003                position : ‘s’,
004                content : ‘We’ll even navigate 
around our website for you!’,
005                delay : 6000,
006                callback : function(i) {
007                    console.log(“step “+ i +” is 
finished”);
008                }
009            },
010                {
011                sel : $(‘.demo-index.step3’),
012                position : ‘n’,
013                content : ‘We like bold stripes’,
014                delay : 4000
015            },

Tooltip positioning

In addition to the four main compass points, ne, nw, se and sw can be used. More interestingly, the options ‘screen-ne’ etc plus ‘screen-center’ can be used to position tooltips at the edge, corner or centre of the viewport. A step name for these ‘steps’ does not need to be defined because they are not linked to page elements within the HTML.

001    {
002            sel : $(‘.demo-index.step6’),
003            position : ‘s’,
004            content : ‘and here’,
005            delay : 3000
006        },
007        {
008            position : ‘screen-ne’,
009            content : ‘We travel to the farthest 
corners’,
010            delay : 3000
011        },

Configuring dialogues

The plugin’s canGoNext function is used to create a dialog box where the user is only able to advance through the tour if they click OK – similar to being required to accept terms and conditions in a shopping cart. The dialog text can simply be edited within the speech marks following ‘confirm’.

001    {
002            sel : $(‘.demo-index.step8’),
003            content : ‘But we will ask you to do 
something for us’,
004            delay : 4000,
005            canGoNext: function() {
006                return confirm(“You can only 
continue if you agree!”);
007            }
008        },
009        {  
010            sel : $(‘.demo-index.step9’),
011            content : ‘We’d like you to see some 
of the beautiful places we’ve been’,
012            position : ‘n’,
013            delay : 4000
014        },

Navigating the tour

It’s important to get the balance right between taking the visitor along with you on a predetermined path and giving them the freedom to go forward or backward as they wish. Setting showNavigation to ‘true’ displays Back and Next on the tooltip and enables this functionality. showCloseBox ‘true’ gives the visitor the option to close the dialog by clicking on the ‘x’ within the box.

001    {002            sel : $(‘.demo-index.step10’),
003            content : ‘You see, we want to make 
sure you are happy.’,
004            delay : -1,
005            showNavigation: true
006        },
007        {
008            sel : $(‘.demo-index.step11’),
009            position : ‘n’,
010            content : ‘We wouldn’t want you to 
leave the tour prematurely by hitting 
Esc or clicking the Close box’,
011            delay : -1,
012            showNavigation: true,
013            showCloseBox: true
014        },

Set them free

It’s corny to say, ‘if you love somebody, set them free’. However when trying to influence online behaviour you’ll often achieve better results by giving people choices rather than trying to force their hand. None of us enjoy feeling like we are like lab rats being forced along a particular route.

More options

At the end of the steps, the default theme for the plugin may be set. You can optionally return the user to the top of the page; helpful if you want to hand back to the visitor at the tour end. However, you might want users to now interact with your site in a particular way, eg completing a profile or payment form, in which case you’d stop the page at the appropriate scrolled position.

001    {
002            tripTheme : “white”,
003            onStart : function() {
004                console.log(“onStart”);
005            },
006            onEnd : function() {
007                console.log(“onEnd”);
008            },
009            onTripStop : function() {
010                console.log(“onTripStop”);
011            },
012            onTripChange : function
(index, tripBlock) {
013                console.log(“onTripChange”);
014            },
015            backToTopWhenEnded : false,
016            delay : 2000
017        });

Just the start

The tour is started when a page element with the class ‘.start-demo-index’ is clicked. Refer to the plugin documentation for more functionality. The plugin is described as still being in beta mode and under active development, and you can get involved by heading over to GitHub.

001    $(“.start-demo-index”).click(function() {
002            trip.start();
003        });
004        window.trip = trip;
005    });

Apply some class

Once you’ve created your configuration file, you connect the steps to your webpage by adding the name of the tour and the step to the element’s class. In the example code, that’s “demo-index step1”. The “start-demo-index” is the class that when clicked will trigger the start of the tour.

001    <div class=”w-container”>
002            <div id=”about-animation”>
003            <div class=”wrap”>
004                <div id=”myButtonwrapper”><a href=”#
” class=”myButton start-demo-index 
demo-index step1”>Take me on a trip
</a></div>
005                <div class=”about”>
006                    <h1 class=”about-heading”>ABOUT
</h1>
007                    <div class=”about-text”>
WHO WE ARE?</div>

Animation options

Check the trip.js file (you’ll actually be using the minified version for your project) and you’ll see it uses the powerful animate.css library and gives you over 20 animation options. The default is ‘tada’, but you can easily change the animation used by each step by adding a line to the step, eg animation: ‘bounceInUp’.

001    function(window, $) {
002        var CHECKED_ANIMATIONS = [
003            ‘flash’, ‘bounce’, ‘shake’, ‘tada’,
004            ‘fadeIn’, ‘fadeInUp’, ‘fadeInDown’,
005            ‘fadeInLeft’, ‘fadeInRight’, 
‘fadeInUpBig’, ‘fadeInDownBig’,
006            ‘fadeInLeftBig’, ‘fadeInRightBig’, 
‘bounceIn’, ‘bounceInDown’,
007            ‘bounceInUp’, ‘bounceInLeft’, 
‘bounceInRight’, ‘rotateIn’,
008            ‘rotateInDownLeft’, ‘rotateIn
DownRight’, ‘rotateInUpLeft’,
009            ‘rotateInUpRight’
010        ];

Taking it further

As the developer proudly says, “with the
flexibility of Trip.js, the only limitation is your imagination!”. Below is an example refinement where the background-colour is changed when the tour starts and changed
back at the end. It’s simple to achieve and a good visual cue for visitors.

001    onStart : function() {$(“body”).css({ 
“background-color” : “#eee” });   },   
002    onEnd : function() { $(“body”).css
({ “background-color” : “#fff” });   }

Have you seen Yeti?

Yeti is the latest theme to be released for Trip.js and supports headers for each step. These must be enabled globally in the trip-demo.js file and also be set for each step. If a header isn’t set for a step, its number will be used instead – eg “Step 3” will be displayed.

001    In each step:
002    header : ‘hello’,
003    In global setting:
004    showHeader: true,
×