Tuesday, May 28, 2013

App and web development - airlines probably need some usability help

Are airline phone and web apps fit for purpose - for the traveller (not the airline)?

I think they need work, well certainly the ones I have used (which I admit is not a statistical sample).

Having bought a new iPhone I was looking for an excuse to use the new passport app and on a rare trip to the US eagerly downloaded the airline app so I could use my phone, instead of a boarding pass.

I struggled like crazy to achieve my primary goals - check-in and then use my phone as a boarding pass. Surely these are the priority customer journeys for such an app?

I never actually managed to check in with the app but having switched to the website to check in followed by a lot of trial and error I finally managed to get the boarding pass to display. But was it worth all the hassle? Probably not, especially as you can get a mobile boarding pass emailed to you from most airlines, and the GDS/Travel agent systems seem to do the same.

The ONLY unique feature of any use to me for an app compared with the email, was the purported ability to display the boarding pass as part of the phone's lock screen thereby saving me the hassle of unlocking my phone at each checkpoint. This may seem minor but when you are carrying a whole bunch of stuff and trying not to drop your phone while unlocking it, all the while under pressure as you hold the queue up at the checkpoint it's pretty useful - especially as my phone wouldn't stay unlocked for very long. Did it work - of course not.

What became clear to me was that the app was designed for the airline, not the passenger. In fact I suspect it wasn't subjected to any usability work in design or development. It didn't make me feel kindly about the airline brand, in fact on another journey I resorted to paper. Paper is easier to carry, works on all scanners and doesn't need unlocking! It needn't be that way, a phone could be so much better.

The other pretty silly experience was this airline's online check in. One the outward bound journey I couldn't event beyond the home page on an iPad but the real trial was the return. If you picture the situation, it's 10 minutes before online check in closes, I'm in a taxi and have already established I stand no chance of checking in with the app, oh - and I haven't got my reading glasses. There I am, paying for a fortune in roaming data charges, on a supposed 4G connection (which is slower than UK 3G) desperately trying to get checked in.

Firstly the website doesn't recognise mobiles. Surely somebody at this airline has had the sense to look at their analytics to see that business travellers often check in at the last minute and usually use their mobiles or tablets. In these days of HTML 5 and CSS3, re-purposing web screens for phones and tablets really isn't that hard, even I can do it. Not having my reading glasses on me, I was really struggling.

Secondly, the simple task of trying to check in was hampered by stupid up-sell pages. When you are struggling to read the screen and having to zoom in the was a royal pain in the rear end. This is about usability 101 - primary school curriculum  let me achieve the task (user journey - see note on tasks and Gerry McGovern) I am trying to achieve. There will be plenty of evidence of conversion rates in their web analytics of these up-sell pages over time which, I bet, will show no conversions that late in the check in window - so why give me the stress, delay and overall hassle ?

All this boils down to the simple proposition that usability should be a central part or web and app development. This is practiced in UCD (http://bit.ly/12N8Pij). Instead of user testing once you have built your web or mobile app, the sensible thing is to test throughout the design and development process. The benefit ? It saves the expense of re-work after release by instead catching issues early and ensures that what gets delivered is what users want. The result ? Typically - increased conversion rates (and sales), reduced calls and happier customers. Common sense ? I think so, but that's just me.

It also highlights that testing in a lab, will not provide all the answers, you need to test the pre-release app in situ, with real customers in real situations. Only then will the importance of situational factors be fully understood. Airline check in and boarding is the bane of most travellers existence  a prime candidate for situational testing as part of overall usability work.

Tuesday, May 7, 2013

Tracking Chat in Google Analytics with BoldChat (part 2)

In the last post, we changed tracking chat as page views to tracking chat as events and also added different events depending on the type of chat page appearing (pre-chat, chat window and post chat survey).

This post is focussed on developing this approach still further to track other chat events, such as when a visitor clicks a chat button, when they accept a chat, decline a chat or ignore it. These are all critical measures and are usually supplied very satisfactorily in the chat platform, so why would we need to do this with google analytics ? My end goal is to be able to combine chat data with some qualification measures to see just how valuable chat interactions are, i.e. is it possible to measure "incremental" sales contribution that chat delivers on a website? The value measures will be dealt with in the next blog, this post is about adding more chat pipeline measures.

Probably the most critical  measures when using chat invitations are the acceptance rate, decline rate and ignore rate. Measuring these in fine detail will optimise your chat results if you adjust your chat approach. As an example; if the chat acceptance rate is low and the decline rate is high, it could be argued that either the chat invite graphics and text are not relevant enough or that the invite is just too early in the visitors online journey - or both. Similarly, if the ignore rate is very high, it could be that visitors are not seeing it. It is critical to continually test different approaches to maximise acceptance and minimise declines and ignores.

Button chats

In the next post, I am going to dig deeper into the appearance of buttons so we can track information such as "for how many visits or page views was a chat button not available?"  This is important because when all chat operators are busy the chat button will either not be displayed or a different button will be displayed. This may indicate opportunities for having more chat operators, or changing opening hours for the chat operation. For this post, however, I am going to focus on when a visitor clicks a chat button to request a chat.

In BoldChat if you go to Setup->HTML->Generate Chat Button HTML you will see something like this: -
<!-- BoldChat Live Chat Button HTML v4.00 (Type=Web,ChatButton=Chat Button Dept 1,Website=- None -) -->

<div style="text-align: center; white-space: nowrap;">
<a href="https://livechat.boldchat.com/aid/466112173820034708/bc.chat?resize=true&cbdid=461747837706183791" target="_blank" onclick="window.open((window.pageViewer && pageViewer.link || function(link){return link;})(this.href + (this.href.indexOf('?')>=0 ? '&' : '?') + 'url=' + escape(document.location.href)), 'Chat466112173820034708', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');return false;">
<div><script language="JavaScript" type="text/javascript"> var bccbId = Math.random(); document.write(unescape('%3Cimg alt="Live chat by BoldChat" src="' + (('https:' == document.location.protocol) ? 'https:' : 'http:') + '//cbi.boldchat.com/aid/466112173820034708/bc.cbi?cbdid=461747837706183791" border="0" id=' + bccbId + ' /%3E')); var bccb = {id: bccbId, bdid: '461747837706183791', rdid: null, type: 'chat'}; var _bcvma = _bcvma || []; if(window.pageViewer && pageViewer.addButton) pageViewer.addButton(button); else _bcvma.push(['addButton', bccb]);</script>
<span style="font-family: Arial; font-size: 8pt; color: black;"><a href="http://www.boldchat.com" style="text-decoration: none; color: black;">Live chat</a> by BoldChat</span>
<!-- /BoldChat Live Chat Button HTML v4.00 -->

This would be something like the code you would paste into your web site to display a chat button.

The code we are looking for is the onclick=" property of the link on line 4.

Specifically this would be: -
 onclick="window.open((window.pageViewer && pageViewer.link || function(link){return link;})(this.href + (this.href.indexOf('?')>=0 ? '&' : '?') + 'url=' + escape(document.location.href)), 'Chat466112173820034708', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');return false;"

Again we are going to add a google analytics event instead of a page view using
_gaq.push(['_trackEvent','category', 'action', 'label', value]);
To track the button click, we can insert the google code as the first javascript statement in the onclick property of the link, as follows: -
 onclick="_gaq.push(['_trackEvent','chat', 'button', 'standard button', 3]);window.open((window.pageViewer && pageViewer.link || function(link){return link;})(this.href + (this.href.indexOf('?')>=0 ? '&' : '?') + 'url=' + escape(document.location.href)), 'Chat466112173820034708', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');return false;"
From now on whenever this button is clicked it will track in google.

Chat invites. 

Chat invitations get a little trickier. BoldChat provides excellent facilities to customise your chat invite. It is relatively easy to add javascript to the simple button invitation type on both the chat invitation link and the close button, but to go further and track ignore rates we have to dig deeper . We could either use something like jQuery to detect events on the invitation code or (in this case) use the BoldChat Javascript invitation type which allows us access to the ignore event. The next blog will go into more detail and see if there are easier ways to do this, but for now the javascript invite type is pretty handy. The javascript invitation type enables you to totally customise how your invitation behaves, this provides full flexibility, but does involve a fair degree of coding to get your invite just the way you want it. For this example we will use the BoldChat sample javascript invite.
// Sample function to handle invite
    window.bcInvite = obj;
    window.hideInvite = function(){ document.body.removeChild(div); }
    var name = obj.Variables.login.BestName;
    var div = document.createElement("div");
    div.setAttribute('style', 'position: absolute; left: 0; top: 0; background: #FFFFFF; border: 1px solid black');
    div.innerHTML = '[' + name + '] Would you like to chat?
<input onclick="window.hideInvite(); window.bcInvite.Accept();" type="button" value="Yes" /> 
<input onclick="window.hideInvite(); window.bcInvite.Decline();" type="button" value="No" />';
    }, 60000);
The lines we are interested in are line 9 & 10 both which start <input type="button" and line 12 which has a setTimeout function.
For the <inputs> we can see in both cases there is an onclick property where we can add our tracking code.
&ltinput onclick="_gaq.push(['_trackEvent','chat', 'accept', 'chat invite accepted', 3]);window.hideInvite(); window.bcInvite.Accept();" type="button" value="Yes" /> 
<input onclick="_gaq.push(['_trackEvent','chat', 'decline', 'chat invite declined', 2]);window.hideInvite(); window.bcInvite.Decline();" type="button" value="No" />';
In the above code I have added google event tracking for each event, which will track invite accepts and declines.
        _gaq.push(['_trackEvent','chat', 'ignore', 'chat invite ignored', 3]);
    }, 60000);
For the ignore measure you can see that I have added a new line, just after the line with setTimeout, to track when the chat is ignored.

These changes give almost all the measures that are needed to track chat. The objective was to achieve this without using a JavaScript library such as jQuery or mootools (which would have been easier, but my aim was to achieve this in a cross site approach without dependancy on a particular library).

A quick test on my development website Netsil shows the following results.

These statistics need some tweaking and I also need to track the appearance of the invitation for comparision, but for now you can see that I have had 5 visits, 2 chats (one acceptance and one chat button) and 3 invitations where they have been declined or ignored.

In the next post, I will document my view of the best way of: -
  • using jQuery to track these events and the invitation event
  • using plain javascript to track these events and the invitation event
  • build a way to measure the net contribution of chat to the website's sales
  • look at how to measure which chat related sales were incremental - which is after all the holy grail.

Tracking Chat in Google Analytics with BoldChat (part 1)

Although chat products provide great analytics, there are benefits to tracking chat in Google Analytics, especially now google show real time events.

There are some whitepapers from BoldChat and one particular blog which detail how to do this. You can find the whitepaper here and the blog entry here. These both show how you can track chat interactions as page views, however I feel that this is not the most beneficial approach. There is IMHO much more value to be had using google events to track chat interactions instead of page views.

First and foremost, if you track chat interactions as page views you will have chat data in your page views reports which will skew your normal analytics results. You could filter these page views out with advanced segments but why bother when events are more suitable? Google describe in their documentation that events are more suited to interactions with a page (e.g. a video player), which I believe is more suited to chat.

The next benefit is that you can track all stages of interaction within google which will give you much more insight around your chat operation.

What you will need

  • This will need to be done with javascript so inherently you will need those skills
  • Optionally google offer a great chrome plugin which tracks analytics interactions. I personally found this very useful to see the events being passed to google.
  • A very flexible and highly customisable chat platform, I have used BoldChat because it is very open and the level of customisation allowed me to go quite with my analysis.
  • You will need to test the suggestions below as they are not yet fully tested, but are all working in principle.

Step 1 - tracking chats

Firstly we need to add analytics to the chat window. This also entails ensuring that your google analytics is configured for multiple top level domains (Admin->Tracking Info). So your google tracking code for your website would be something like :-
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_setAllowLinker', true]);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

Update: Line 4 is the key line

A point to note. I found that if you turn on the multiple top level domains feature in google it automatically turns on subdomains and adds:
_gaq.push(['_setDomainName', 'my-domain.org']);
I found that as my development web server is not on this domain, my tracking stopped so I removed this for my testing. For a live site this would probably not matter.

Important Update: it is critical to get this right as I found on my experiments that I was getting all of my events reported but when I set different domain names some of it stopped. In later analysis these where in different sessions. It is therefore really important to pass session to the boldchat window in order for the measures to be maintained. I am in the middle of documenting this in the third of this series as it took some investigation to get it done, in the meantime you need the _getLinkerUrl(targetUrl, useHash) or _link(targetUrl, useHash) functions

Once this is set on the website, then it is pretty simple to do this to your chat window. In BoldChat goto   Setup->Account Setup->Chats->Custom Chat Windows, choose your chat window and click edit.

Once in the edit window, click the Brandings tab and ensure that the Custom Branding radio button is selected. On the left hand side under groups you will see Header/Footer and if you click this the middle column will display a list and you need Footer include. Paste your google code in there. You could put tracking code in the head include or header include sections but bearing in mind we are going to track different pages based on the body class later on we will need the body tag to have loaded in order to test this value. I have since resorted to loading jQuery into the Boldchat window which means I can put all my code in the head section.

You can now test this is working by looking at real time reports in google, in overview mode. If you click a chat button on your website you should see the page view come through.

Step 2 - Tracking chats as events

Now we need to change this page view into an event. In addition, because there are different chat windows (pre-chat survey, chat window and post chat survey) we can add some code to track the different type of chat window. The code for this is inspired by the blog from vkistudios.com which you can read here /http://blog.vkistudios.com/.

You will notice that the line with
has been removed from the top 4 lines and instead we are using the track event function i.e.
_gaq.push(['_trackEvent','category', 'action', 'label', value]);
For my analysis I have chosen to have category as "chat" and action as the specific chat action e.g. "pre-chat". I have also assigned a value in case I want to analyse them later.
<script type="text/javascript">  var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_setAllowLinker', true]);//_gaq.push(['_trackPageview']); //this line is commented out to prevent the page view being tracked
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

// Code to detect which chat window we are using

var page = document.body.className.substring(document.body.className.indexOf('page-')+5);
if(page =='1'){
      _gaq.push(['_trackEvent','chat', 'chat', 'chat window opened', 3]);
else if (page == '6'){
      _gaq.push(['_trackEvent','chat', 'pre-chat', 'pre-chat window opened', 3]);
else if (page == '5'){
     _gaq.push(['_trackEvent','chat', 'pre-chat', 'post-chat window opened', 3]);
else if (page == '10'){
      _gaq.push(['_trackEvent','chat', 'post-chat-complete', 'post-chat survey completed', 3]);}

You can see from the above that the javascript from vki studios that I modified, uses the body class name in the chat window as this changes with each type of window.

If you put in code similar to this in place of your google tracking code, you should now be able to see these events coming through in the new Real Time Events in google.

Once this is working for you, you can now look at how chat impacts your sales (for example) by setting up advanced segments in google analytics so you can study the impact in chat on your website. It is also useful to create a custom report where the chat category and chat action are dimension drill downs, while the metrics you can measure are things like total events, revenue etc.

In another part to this blog, we can start customising some more to add other chat events which can be useful to look at.

Thursday, May 2, 2013

How hard can it be to order a take away ?

Imagine this scenario. A chap about to leave the office and his daughter rings suggesting they have a XXXXX (name obscured to protect the innocent - but it's a major, high street, unique, UK brand with eastern food) take away. Great idea. So they get to discuss what they want and the chap goes online to look at a menu to confirm that he can remember the name of what he wants.

He Googles XXXXXX. Straight there, looks for menu on the home page doesn't find it, gets distracted by a phone call and by the time he returns to the website, the homepage is all about sharing XXXXXX on social media. No item with "menu" on it, this is after all a restaurant. He clicks the "our food"  item in the navigation and lands on a filler page with some blather about the restaurants. He then  clicks "browse our dishes". There is some success but not much. Four odd looking drinks are displayed and a plate for food, "is that it?" he thinks. Naturally he scrolls with the mouse wheel, not much happens but at least he can see the items names which have previously been obscured by the cookie notice (which at this stage he can't be bothered to accept).

Counter-intuitively there are two tiny buttons at the top far right of the food photos. Curious he mouse's over them to see what they mean - no help there. So he clicks one and hey presto the display turns into a normal scrollable list - with all the food on. Success! He finds his dish, but only after clicking on a few items as the descriptions are not complete in the list. This turns out to be a journey in it's own right. Going back to the list to look at other items displays the original four items with no scrolling. Round and round he goes until food is finally chosen.

So he has finally found the two items to order, clicking on the first he clicks "order take-out", (what happened to "take away"?) naively expecting some kind of shopping cart, only to be faced with another useless page telling him how simple it is to use and going on and on about the mobile app (which is weird because he's on his mac). Persisting, he clicks the link to order take-out (wasn't that what the last link was for?) and now is faced with a form to choose his store, bored but not wishing to let his daughter down he chooses. Then another page appears amusingly entitled "lets begin", (he thought he had ages ago) the sole purpose of this page is to select a pick-up time. Now there is a page asking "how would you like to order" offering to browse the menu (wasn't he there a while ago?) or use super quick ordering (is that super quick from now on or super quick from the beginning of the web site ?). Foolishly he chooses browse the menu, big mistake. Now the the products are ordered into tabs by type and it takes clicking and scrolling through four tabs to find the first dish.

Finally he is ready to check out, but no, no such thing as simple checkout you have to register first. Any sensible ecommerce site allows register-less buying. Frustrated he picks up the phone and dials the local restaurant to try and order old school.......

There must be a better way.

For me this is a classic case of form over function, so easily avoided if clear objectives of the site are mapped out before design starts. With such an excellent brand as XXXXXX one would think that, if you want to promote take away, there must be a much easier way to enable visitors to do it. Perhaps part of the problem is that XXXXXX is a franchise and there is something different about all the restaurants which forces this to happen. I am not sure it's a great idea to force odd processes on visitors.

Side note: The cookie message.

Some time later, curious he goes to the mobile site, this is much much worse, more than half the screen is obscured by the cookie message which is on top of the web site and there is no noticeable menu except a silly reverse ^ top right. It's difficult to click, but reveals a menu, but it's difficult to scroll through the menu options with  the damn cookie message in the way - which by now he  is determined not to accept.

This cookie thing is annoying, so it's worth a look. IMHO this is uncompliant with the legislation, basically it says they have updated their legal and privacy policies to be in line with eu legislation.  When you click on the links you don't actually go to the cookie policy. The message on the annoying overlay states "find out about which cookies we use and what information we collect on our website", hunting around there is no description of the cookies and what they do.

The rules are this

  • "6 (1) Subject to paragraph (4), a person shall not store or gain access to information stored, in the terminal equipment of a subscriber or user unless the requirements of paragraph (2) are met
  • (2) The requirements are that the subscriber or user of that terminal equipment--
    • (a) is provided with clear and comprehensive information about the purposes of the storage of, or access to, that information; and
    • (b) has given his or her consent.
  • (3) Where an electronic communications network is used by the same person to store or access information in the terminal equipment of a subscriber or user on more than one occasion, it is sufficient for the purposes of this regulation that the requirements of paragraph (2) are met in respect of the initial use.
  • “(3A) For the purposes of paragraph (2), consent may be signified by a subscriber who amends or sets controls on the Internet browser which the subscriber uses or by using another application or programme to signify consent.
  • (4) Paragraph (1) shall not apply to the technical storage of, or access to, information--
    • (a) for the sole purpose of carrying out the transmission of a communication over an electronic communications network; or
    • (b) where such storage or access is strictly necessary for the provision"

Looking in the cookies set, you notice that XXXXXX are setting 8 cookies before they have consent, 6 of these are tracking and analytics cookies. Don't get me wrong I am all in favour of web analytics, but a site really shouldn't claim it is compliant where it clearly isn't and doing it in such a silly way shows no instinct for usability.

It doesn't take a lot to implement a decent cookie warning and permission system (BT being a great example) , especially one that doesn't annoy the hell out of you and get in the way until you accept. Bullying visitors to accept your cookies by getting in the way, is probably a sure fire way of annoying customers - or maybe that's just me.