All posts by dixign

Can a design be too good?

 

Panda background on bing
Panda background on bing

Bing recently designed this lovely homepage that had a video of a panda chewing some bamboo in the background.

Because I work in digital and for WWF this is exactly the type of thing I tend to get a few emails about.

It was lovely… I spent a good while watching it… and then left their site without making a search.

This got me thinking: does amazing design inspire action, or hinder it?

That is to say: does that flashy video or the inspiring image you’ve added to your site distract the user – your visitor – from the asks and actions on the rest of the page.

This isn’t a new idea – this is something that’s been tested a million times over.

We know different images, sizes, positions can create different results… however – what I’m considering here are the ‘flashy’ (not Flash) things.

At what point does design become too good?

If I had the chance to I’d love to see if the search rates on Google are effected when the Google Doodle is interactive.

Experimentation time

I can see how Bings users reacted to their little bit of integrated video. Neither can I see how Googles search rates are effected. What I can see is how our users might react.

So I put together a video background banner for our homepage for a tiger-takeover week we were running to celebrate World Tiger Day.

Video tiger banner
Video tiger banner on the WWF website homepage

Its pretty simple and uses the YouTube API (tutorial coming soon). If you’re wondering it has a fall ball for mobiles and browsers with JS turned off.

But how and what do we test?

Let’s keep it simple shall we – let’s test the banner with the video v one with just an image. And – to keep it even simpler I’m going to use a third party service (Visual Website Optimiser) to switch the video in and out.

I could use Visual Website Optimiser‘s tools to track it – but really I want some of the additional metrics that Google offers – so I’m going to fire a bit of event tracking code when the video is loaded. This will allow me to segment out the two streams of traffic on GA.

And what to measure?

I have an engagement score for the site. Its a pretty basic metric but it works as a simple measure of success when compared with itself on other pages, sites and time periods. In simple terms it binds and normalises some of the key site measures (such as time on site/page,  bounce rate, pages per visit). Basically – if page one has an engagement score of 3 and page two has a score of 6 then page two is more engaging.

Using the Google events we’ve set to fire earlier we’ll be able to see which variation has the greater engagement score.

So that’s that set up… and it’s currently running! Watch this space and I’ll post some of the findings later.

What should a homepage look like?

Homepages are funny things…

The BBC homepage
Oh, I do like the BBC homepage

Over the years I have seen some odd behaviour when it comes to the company homepage. In a number of organisations now, some people (colleagues) have held the view that the home page as a promo opportunity (which it is, I suppose) – sometimes vying quite fervently for space as the life of their activity or campaign depended on it (it doesn’t…often).

And I get why:

  • It often acts as a shop front for the organisation
  • Items featured on it seem – by implication – important
  • It does (often) win the crown for most visited page on the site

However – what people often forget – and I actively remind people – is:

1. Not everyone will see your home page.

For us its about 20% of all visitors. Most visitors (4 out of every 5) will have followed a link in an email, or made a search on Google or clicked on a social post and have ended up directly at the piece of content (and page) they require. Which brings me onto my next point…

2. Visitors have a reason that they’ve arrived at your site.

The (1 in 5) visitors who arrive at your homepage haven’t – for the most part – just stumbled upon it to see what’s going on. I realise that’s a broad, sweeping statement and there are definite and obvious exceptions (BBC news, Facebook, etc) – but for most of us this is true. Visitors come with a purpose and – even if they’re one of the few that land on the homepage – they’re going to be making their way to their desired destination.

So what is a homepage for?

The pebble homepage
The pebble website has a single purpose and the homepage reflects this

Well for some it will be obvious… if you are – for instance – Pebble then you’re going to use it as your shop front for Pebbles.

But if you’re an organisation like – say WWF – then there are likely one of over a hundred reasons that someone might have come to the site – so you have two options:

  1. Make your homepage the first level of your navigation structure
  2. Use your homepage as promotional space for activities / campaigns / products that visitors might not have known about but might be interested in (but obviously don’t forget the nav)

I’m going to focus on the second option for now as… well – I think its where most time is worth spending.

In my day job I’ve spent a lot of time reticently multivariate  testing elements of our homepage to get the best results and I thought I’d share some of the results.

NB: Each site’s audiences are different and it’s important not to take my word as gospel – but please feel free to take my findings and test them yourself. I tend to use either Google Experiments or Visual Website Optimizer for my testing.

A single – well formed hero space – works better than a carousel.

I spent a lot of time testing different versions of the hero space on homepages. It seems that having one reduces bounce rate (my theory is that if the imagery is right it acts as confirmation for visitors that they’ve landed at the right place) – but carousels traditionally get very little click through.

The tool being used to countdown to Earth Hour on the WWF website
The tool being used to countdown to Earth Hour on the WWF website

Carousels muddy the water. They don’t give a persuasive argument for one action over another. Think of it as a salesman… (good) sales people don’t go out with 50 items and list them off to potential punters – they have one product and they use all their effort to sell it.

So with that in mind put in the effort to “sell” that ask. Movement works well (unsurprisingly) as it draws the visitors attention. Recently I applied a countdown and that did EXTREMELY well. It turns out (I assume) people panic when exposed to a number slowly creeping to zero.

Big images and less text.

I’ve worked at a number of organisations that have used the first paragraph of a news article or blog post to “persuade the visitor to read more.” This is a nice thought but it relies on the user reading that first paragraph in the first place… and (not to over simplify things) but if we can avoid it people try not to read.

After much testing it turns out a large image with a small bit of copy works best. Make sure the copy changes colour on hover… oh and make sure the whole area is the anchor… buttons work well – but not as well as if the user can click anywhere within the space.

In some instances I’ve even found just a heading and image performs well – especially if the heading is a clear call to action: “Take this quiz” or “Sign this petition” for instance.

Men click icons, women click copy.

A couple at a computer.
A couple at a computer. Poss. looking at my website?! Image by Ed Yourdon

This is more of a general thing but something I found whilst doing demographically segmented heatmapping is that men tended to click icons and images. Women on the other-hand tended to click on text links more.

How is this useful? Well – if the audience you’re trying to hit is of a specific gender then its important to use a link type they’re statistically likely to click. Also it can be important to remember that one way isn’t always best. Armed with this knowledge I tend to ensure important links include both copy and iconography.

Don’t forget the navigation.

Remember that your visitor has come to your site for a reason – and your aim shouldn’t be to corner them into a position where their only choice is to click one of the few options you’ve put in front of them. They won’t. They’ll leave (and increase your bounce rate).

A good nav is important… but don’t forget to monitor your analytics and check to see if you might be getting any spikes as a result of outside influences (you want to be looking at the organic search keywords). I’ve found conv. rates increase for asks when external activity is happening.

Add a link direct to that ask on the homepage and you’re removing clicks, barriers and drop-off points between the user landing and finding something relevant.

The last thing I want to mention is not to forget the 80% (“we are the 80%” I hear them cry) of those who don’t visit the homepage. Finding other locations to cross link within your site – especially where it’s relevant – is crucial. I’ve tested some wording and found “People who read this also visited:” works well as a way of promoting your cross-links.

800,000 people have read this article

Telling you that 800,000 people have read this article is a) a lie… but b) more than likely the reason you’re reading this right now.

The reason for this is an evolutionary impulse behavioural economists call “social proof” and it could well be the key to inspiring action in our supporters.

Over the past month or so there has been a lot of talk in the online not for profit community on how to cultivate action. American “nudge” enthusiast Richard Thaler proposed charitable donations will increase if they are easier to make. Philanthrocapitalism author Michael Green argued that it’s all about the fun whilst Rob Dyson promoted the virtues of gamification.

I’m not going to disagree with them (in fact I love gamification and will, when asked, talk fervently on the subject and recommend some very good books). I am, however, going to throw my hat into the ring and say this – it might be simpler than that.

Following the crowd

What if people gave (or got involved, or volunteered, etc) for the same reason you’re reading this – they thought everyone else was doing it?

Reuse your towel sign
The reuse your towel card displayed in some LA hotels

Dan McKayLet’s travel back in time and across the pond to LA in the mid-noughties where a group of three UCLA professors are trying to prove just this. The trio are swapping the “reuse your towel” signs in a local hotel’s bathrooms to ones that include the line “the majority of other guests reuse their towels.”

Unsurprisingly (given that I’m using it as an example) the results were staggeringly positive. Those with the new signs became 26% more likely to reuse their towel – proving that we’ll happily alter our behaviour to emulate the actions of our peers.

That’s social proof – the act of imitating others.

Subconscious suggestion

It’s not something you should find particularly new. Museums and street performers (whilst not the most common of bed fellows) have been aware of this for years. It’s why the former will add a little seed money at the beginning of the day and the latter’s donation boxes are made of glass. The resulting visible piles of cash show us that others are giving and subconsciously bullies us into doing the same.

Need an example that’s a little more contemporary? Let’s look toward social networks. Facebook is the very embodiment of social proof. If you take a peek at your Facebook news feed right now you’ll likely see examples of the social network nudging you to take action with posts and ads that have been liked by “John Smith and 20 other friends”.

It’s the reason so many people watched Invisible Children’s “Kony 2012” video and Rebecca Black’s “Friday”. I’m not saying that there isn’t pleasure (or interest or enjoyment) to be gained from giving money to a museum or watching Miss Black “sing” but rather that often the initial prompt to take the action is that simply x number of others have done it before.

Rich potential for non-profits

As a sector many of us are already using these techniques to influence our supporters. If we look closely enough we can see examples of social proof littering the not for profit landscape.

Totalisers – for example, especially in scenarios such as Comic Relief and Children In Need – are reminders that others have performed an action – prompting millions to do the same. Similarly, Child’s i Foundation’s “Buy a Brick” and Unicef’s “Own a Colour” visualise the number of digital donations made by others – clearly identifying a group of people you’re not yet a part of.

It need not be on such a large or complex scale as that though. There are loads of free services out there (including JustGiving Pages and Facebook Events) that will automatically monitor and display the number of donors or attendees you’ve attracted (in real-time) – hopefully stimulating even more to become involved.

On an even smaller scale – social proof can inspire through something as simple as a carefully thought out line of copy.

And this leads me to my final thought: an example from my own organisation, The Blue Cross, where we recently ran a small text-to-donate campaign. After 24 hours we posted a message on our Facebook wall thanking “all of the many kind supporters who have already texted a donation.” The implication was that those who hadn’t donated were in the minority and what followed in the next 15 minutes was a flurry of donations that doubled our overall total.

Javascript countdown

So I’ve created this little countdown tool.

This will count down to a specific date and time… and then display a specific message during and then after the specified time.

The tool being used to countdown to Earth Hour on the WWF website
The tool being used to countdown to Earth Hour on the WWF website

It’s pretty lightweight (and relies on JQuery – again)

The Countdown HTML:

<span class="lineOne">This is where the countdown goes </span>
<span class="subLine">until the event</span>

The Countdown Javascript:

You’ll see on line 8 and 9 there are timestamps – these are for the beginning and the end of the event – you’ll have to figure out what the timestamps for these dates and times are.

Line 44 and 49 are the messages that will come up during and after the event.

$(document).ready(function(){
		console.log("ping");
		var 	countSpeed = 2,
			dayLength = 86400000,
			hourLength = 3600000,
			minLength = 60000,
			secondLength = 1000,
			eventStamp = 1396125000000,
			eventOverStamp = 1396128600000;
			setInterval(countUp,1000 / countSpeed);

		function countUp(){

			var 	thisNow = jQuery.now(),
				eventDiff = eventStamp - thisNow,
				daysLeft = eventDiff / dayLength,
				daysLeft = Math.floor(daysLeft),
				hoursLeft = (eventDiff - (daysLeft * dayLength)) / hourLength,
				hoursLeft = Math.floor(hoursLeft),
				minsLeft = (eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength)) / minLength,
				minsLeft = Math.floor(minsLeft),
				secsLeft = (eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength) - (minsLeft * minLength)) / secondLength,
				secsLeft = Math.floor(secsLeft);
				millisLeft = eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength) - (minsLeft * minLength) - (secsLeft * secondLength);
				if(millisLeft > 99) { 
					millisLeft = ""+millisLeft;
					millisLeft = millisLeft.substring(0, millisLeft.length - 1);
				}
				if(secsLeft<10){ secsLeft = "0" + secsLeft; }
				if(minsLeft<10){ minsLeft = "0" + minsLeft; }
				if(hoursLeft<10){ hoursLeft = "0" + hoursLeft; }
				if(daysLeft<10){ daysLeft = "0" + daysLeft; }

			$(".lineOne").empty().append("00 days 00 hours 00 minutes 00 seconds ");
			$("#days").empty().append(daysLeft);
			$("#hours").empty().append(hoursLeft);
			$("#minutes").empty().append(minsLeft);
			$("#seconds").empty().append(secsLeft);
			$("#millis").empty().append(millisLeft);

			if(thisNow > eventStamp && thisNow < eventOverStamp){ 				$(".lineOne").empty().append("Earth Hour"); 				$(".subLine").empty().append("is currently underway").css("margin-top", "180px"); 				$("#heroSpace .wwf_button").empty().append("Find out what's happening"); 			} 			else if (thisNow > eventOverStamp){
				$(".lineOne").empty().append("Earth Hour");
				$(".subLine").empty().append("has been and gone").css("margin-top", "180px");
				$("#heroSpace .wwf_button").empty().append("Find out what happened");
			}

		};

	})

Obviously – please feel free to use as you wish. Let me know how you’ve found it in the comments.

Count down to Earth Hour

So this week was the 60 day count down to Earth Hour and to celebrate WWF produced a list of 60 things to do in the dark.

To remind visitors about the campaign we booked in a homepage take over of the main WWF site focusing on Earth Hour and in particular the count down… which gave me an opportunity to play with some simple js and do something a little fun.

Earth Hour on the WWF homepage
Earth Hour on the WWF homepage

The code (if you’re interested) is below – for your enjoyment. The stats – so far – are looking good.

Homepages are funny things – and I plan to write a blog post on them soon – but in short we sometimes put a lot of focus on them and forget that visitors usually arrive at our sites for a reason… and that reason is rarely to see what random offering is being featured on the HP.

Anything we can do to draw attention toward valuable calls to action – including the occasional bit of movement – should always be considered (if only to be dismissed). But it is also important not let that get in the way of the user’s journey toward the reason for their visit. This can only lead to a ruined online relationship… so when you’re monitoring look for the impact elsewhere also (negative or positive).

Anyhow – the code:

$(document).ready(function(){
	var countMe = 0,
		countSpeed = 40;
	$(".subLine").fadeOut(0);
	$(".count").empty();
	setInterval(countUp,countSpeed);

	function countUp(){
		$(".count").empty();
		if(countMe<10){ $(".count").append("0" + countMe); }
		else { $(".count").append(countMe); }
		
		if(countMe<60){
			countMe = countMe+1;
		} else {
			$(".subLine").fadeIn(1000);
		}
	}
})

Highlight some text – a dare ya

Today I’ve implemented a little bit of script on my site that allows you – the visitors of this site – to highlight any bit of text that you might want to tweet… and tweet it at the click of a buttons.

Go on…

Give it a go.

It’s quite a simple bit of jQuery script that activates on text highlight.

var myCopy;

function clickToCopy(){
    $(".panel").remove();
}

if(!window.Kolich){
    Kolich = {};
}

Kolich.Selector = {};
Kolich.Selector.getSelected = function(){
    var t = '';
    if(window.getSelection){
        t = window.getSelection();
    } else if(document.getSelection){
        t = document.getSelection();
    } else if(document.selection){
        t = document.selection.createRange().text;
    }
    return t;
}

Kolich.Selector.mouseup = function(event){
    st = Kolich.Selector.getSelected();
    if(st!=''){
        $("body").append("<div class='panel'><a href='http://www.twitter.com' target='_blank' id='textTweet'>Tweet this</a></div>");
        $(".panel").css({
            "left": event.pageX,
            "top": event.pageY
        });
        myCopy = "" + st;

        if(myCopy.length>100){
            var whatDiff = myCopy.length - 100;
            myCopy = myCopy.slice(0,-whatDiff);
        }

        myTweet = myCopy.replace(/\%/g,"%25").replace(/ /g, '%20').replace(/!/g,"%21").replace(/"/g,"%22").replace(/#/g,"%23").replace(/\$/g,"%26").replace(/\&/g,"%26").replace(/'/g,"%27").replace(/\(/g,"%28").replace(/\)/g,"%29").replace(/@/g,"%40");

$("#textTweet").attr("href", "http://twitter.com/home?status=" + myTweet + "...%20" + window.location.href);

    } else { $(".panel").remove();}
}

$(document).ready(function(){
    $(document).bind("mouseup", Kolich.Selector.mouseup);
});

The purpose of this is less about the what it does (and being a smart-arse)… but more an experiment in allowing visitors to better choose what they share socially (rather than the bog-standard “Share this page”-type button.

Part two of this will be to also include a “copy to clipboard” option… which also allows for better analytical tracking… but this is yet to come (watch this space).

Update: I’m also going to try and make it work a little better in instances where the selected text is longer  than the characters allowed.