Tom Critchlow of Distilled – a search agency in the UK – has written a guest post for the Google Analytics blog that demonstrates how using outdated Google Analytics tracking code on your secure pages can be costing you THOUSANDS of dollars.

Tom explained how he noticed a glitch on the analytics report of his client’s ecommerce site that involved users of Internet Explorer 8. These users had a significantly lower conversion and revenue rate on the site, in comparison to users of other browsers and IE versions.

Turned out Tom’s client was using the old Urchin version of the Google Analytics tracking code on every page. The old code included a call to a non-secure .js file that triggers a security warning pop-up in the Internet Explorer 8 browser.

Browsers like Chrome and Firefox don’t display a security warning but Internet Explorer 8 produces the following warning when users transition from the non-secure (http) pages to secure (https) pages on a web site.

The error looks like this:

Not surprisingly, the error was causing almost all visitors browsing with Internet Explorer 8 to abandon the shopping cart process and this was costing Tom’s client an enormous amount of revenue, estimated to be in excess of USD 150K per month.

A 5 minute fix to the site saved Tom’s client an estimated 1 million dollars per year. What was the fix? Simple. Installing the new version of the Google Analytics tracking code.

The new Analytics tracking code is asynchronous, meaning that it can track a single domain, or more complex sites with multiple subdomains, database driven pages, php pages or just top level domains.

The new tracking snippet offers:

* Faster tracking code load times for your web pages due to improved browser execution
* Enhanced data collection and accuracy
* Elimination of tracking errors from dependencies when the JavaScript hasn’t fully loaded

If you are using older versions of the Analytics tracking code, Google recommends you login to your Analytics dashboard, download the new code and transition your pages over as soon as possible.

Now you have an added incentive to transition – if you run an ecommerce site, the new code might not just save you page load time but thousands of dollars too!

I mean, the sheer amount of data you are presented with about your web site can be overwhelming if you don’t know what to look for. Or even if you DO know what to look for.

That’s why I’m a big fan of Avinash Kaushik, the Analytics Evangelist for Google and author of the Occam’s Razor blog.

I have been avidly reading Avinash’s book Web Analytics: 2.0 for a couple of weeks now and I’m so impressed by Avinash’s writing style and the knack he has of simplifying concepts.

Take for example his definition of a Single Page Visit:

“I came. I puked. I left”

Exactly. If a visitor to your site doesn’t like or find what they’re looking for the first page they look at, it’s  highly likely they’ll simply take off. So you’d better look carefully at those pages with high bounce rates and work out what the heck is turning people away.

Avinash knows that webmasters and marketers often need to present a SWOT analysis or at least a summary of key site analytics to a range of stakeholders. He explains explicitly how to pull the crucial data out of your site analytics and present it in such a way that even the most non-tech of people can make sense of it.

I was reading his feature article in the latest Search Marketing Standard magazine yesterday and something in particular he said really stood out for me:

“Less is more. Focus on the critical few metrics rather than the insignificant many”

Often, we are so obsessed with understanding ALL the data presented by our analytics program that we forget to take a step back and think about WHY we are studying analytics in the first place. Avinash reminds us that we need to use our time wisely and look at just the few critical metrics that impact our business.

These will be different for everyone, depending on the goals of their web sites. For example, for my business, the key metrics are probably bounce rate, keywords, referrers and exit pages. As long as I review these four metrics regularly, I can be confident that I’m measuring the most important data that is influencing my online business. For a lead-generation based site, the critical metrics might be conversions, entry pages, page views and referrers.

So don’t be afraid of your analytics. Think about the main goals you’ve set for your web site, dive in to your analytics and pull out a few metrics that will help you understand why visitors are meeting/missing those goals. Then you can tweak the site based on what you’ve learned.

It all began last week when Read Write Web, (a very popular blog based here in New Zealand), published a post about Facebook’s new partnership with AOL called FB Wants to Be Your One True Login.

Apparently the post started ranking in the top Google SERPs for *facebook login*. Nothing wrong with that so far, it makes perfect sense given the post title and TrustRank the site has built up in Google.

BUT, all these strange and inappropriately angry comments with excessive use of exclamation marks began appearing on the RWW post.

Comments like this:

“When can we log in?”

“I don’t like the new facebook. Why fix something that isn’t broken. this really sucks..”

“I just want to log in to Facebook – what with the red color and all?”

“Quit this crap and let me sign in!

“All I wanted to do was LOG IN TO MY FACE BOOK ACCOUNT! I don’t like this new way! “If it an’t broke why fix it?”

“Can we log into face book? This is crazy I want to get all my info off and be done with this.”

“How do you get in?”

“I just want to get into my Facebook page.”

“This is such a mess I can’t do a thing on my facebook . The changes you have made are ridiculous,I can’t even login!!!!!I am very upset!!!”

“I was just learning,why would you mess it up?”

“All I want to do is log in, this sucks!!!!!!!!!!!!!!!!!”

“The new facebook sucks> NOW LET ME IN.”

RWW staff were confused at first, but then it dawned on them. Instead of bookmarking Facebook.com or entering www.facebook.com in their browser address bar like anyone with half a brain, all these commenters were apparently typing *facebook login* into Google whenever they wanted to login to Facebook and then clicking randomly on one of the results. The RWW post just happened to be the one they clicked on.

Having arrived at the Read Write Web post about Facebook, they somehow thought it WAS the *new* Facebook, despite the completely different color, design and the very clear Read Write Web heading at the top of the page. Not only did they think they were AT Facebook, but these commenters, in their hundreds, somehow managed to ignore the post itself, work out how to comment ON the post and leave their inappropriate rants about how much the hated the *new* Facebook. Except for one commenter, who claimed he liked the new design.

As the hours wore on and the page rose even higher in the Google results for *facebook login*, the comments became even more inappropriately angry and amusing:

“I WANT THE OLD FACEBOOK BACK THIS SHIT IS WACK!!!!!”

“I am going to delete my account (IF I CAN EVER LOG IN) as this SUCKS BIG TIME ! If this does not get back to NORMAL you are going to lose a lot of folks who hate this and as you can see from all the comments they think it sucks too !!! facebook was great for connecting with old friends …now, NOT SO MUCH. SO HOW DO I LOG IN?”

“Bring me back old facebook this is sheet”

“I HATE THE NEW FACEBOOK PAGE , IN FACT I HAVE STARTED TO VISIT IT LESS, BECAUSE IT IS A HASSLE”

“Who’s idea was this?? Hope he’s not too big to fire cause he just LOST a bunch of faithful users. Chances are it’ll never be the same as it was before….cya”

“I’m going back to my f*ckin space u ass holes have to f*ck up a good this !!!!! dumn asses

To add to the hilarity, a Facebook user called Laraine (bless her heart), found a new way for Facebook users to solve their *problem*:

“For those of you that want to get in face book now just go to Bing..put in face book and search (or it will pop up) hit on face book login and it takes you  to your password page…i did it…. if this ever gets back to normal I will use the address bar from now on…..”

Read Write Web added a big bold paragraph to the original post stating *This site is not Facebook* and wrote a new post addressing the issue called We’re Still Not Facebook, but they continued to be bombarded with flames. It’s a little something I like to call The Walmart Effect.

There are two morals to this story:

1) There should be some type of study done on the correlation between IQ and the use of exclamation marks.

2) You need to design your web site and your software for the lowest common denominator.

I’m reminded of Damian Conway’s fantastic presentation at Webstock Web 2.Overwhelming – 22 Ways to Frustrate Your Visitors where he amusingly drilled into us that the majority of our web site users are NOT geeks, they’re NOT tech savvy and as this example shows, Dumb User Errors (DUE) are terrifyingly commonplace.

Make your stuff embarrassingly easy to use, because Dumb Happens.

Remember back in September when I blogged about Google increasing the size of the search box? Well it turns out that Google have been experimenting quite a bit with the layout and design of their home page, playing around with different versions of it, visible only to a handful of guinea pigs in their control group and users of a few select data-centers.

A major feature of the home page testing (and one that exists in the final launched version) is a fade-in effect where the content on the page “fades in” over a few seconds. I had noticed the fade-effect a couple of times during October and wondered if it was a glitch. TechCrunch noticed too and blogged about it quickly.

With the testing period over, Google officially launched their new home page across all datacenters and most regional Googles this month. When the page first loads, it shows only the Google logo, buttons and the search box. The remaining links appear only once the user moves the mouse over the page.

Google’s VP of Search Products Marissa Mayer says this design provides a focus on site usability:

“For the vast majority of people who come to the Google homepage, they are coming in order to search, and this clean, minimalist approach gives them just what they are looking for first and foremost. For those users who are interested in using a different application like Gmail, Google Image Search or our advertising programs, the additional links on the homepage only reveal themselves when the user moves the mouse.”

Google hopes that the minimalist page will soon become second nature to users and encourage them to use the home page features more efficiently.

Site Performance, an experimental feature added to the Webmaster Tools console courtesy of Google Labs, provides detailed information about your site’s load time and gives suggestions for speeding it up. It includes a chart of your site performance data over time, which can help determine latency triggers.

As explained in Google’s official blog post about it, the Site Performance console includes examples of specific pages and their actual page load times, plus Page Speed suggestions that can help reduce latency.

I was pretty shocked when I logged into Webmaster Tools today to find my blog pages take an average of 6 seconds to load. Google states that this is slower than 83% of sites! The Example Pages and Page Speed Suggestions revealed the culprit was a banner ad that was not optimized and a couple of extra DNA fetches on some pages so I was able to fix the issues pretty quickly.

The load time data is apparently sourced from aggregated information by users of the Google Toolbar but it’s important to remember that it’s all averaged. A specific user may experience your site faster or slower than the average depending on their location and network conditions.

As a Labs tool, Site Performance is still under development and Google are seeking feedback on it via the Webmaster Tools Forum.

The search box is now thicker and much longer than before. The character limit appears to be unchanged at around 96 characters but the text you type in is much larger. The two buttons beneath the search box are about 30% larger than before and have square rather than round, corners.

Compare the original search box with the new search box below:

The change went mostly unnoticed until a blog post on Mashable went viral on Twitter, closely followed by a TechCrunch post on the subject.

The motivation for the change was initially unclear, but I assumed it to be a design usability issue, possibly in response to Bing’s clean search interface.

Google Vice President of User E Melissa Mayer finally confirmed the usability aspect later in the day with her post about the tweak :

“Starting today, you’ll notice on our homepage and on our search results pages, our search box is growing in size. Although this is a very simple idea and an even simpler change, we’re excited about it – because it symbolizes our focus on search and because it makes our clean, minimalist homepage even easier and more fun to use. The new, larger Google search box features larger text when you type so you can see your query more clearly. It also uses a larger text size for the suggestions below the search box, making it easier to select one of the possible refinements.”

The tweak is now live on most of Google’s datacenters and regional sites.

Breadcrumb navigation shows the user’s path in relation to their current location. It’s the little trail of keywords you often see at the top of the page, below the main header image telling you what section of a site you are on. There’s a good explanation here.

Philipp Lenssen of Google Blogoscoped blogged about seeing breadcrumbs in Google SERPs as far back as July. Leo Fogarty has seen a couple of results on closely related search queries.  Now Chris Crum of Web Pro News reports a few random instances of breadcrumb SERP usage.

Google have always encouraged webmasters to use breadcrumb navigation for usability purposes and now they’re apparently going to reward webmasters who take their advice by including breadcrumbs within their site snippet.

Here’s a screengrab of how breadcrumbs look in the Google SERPs for the search query “car hire Spain”:

As you can see, the keywords in the breadcrumbs that match the search query are bolded, meaning that they are included in the algorithmic ranking factors for that query. So potentially, the use of breadcrumb navigation as an SEO tactic has just become a whole lot more important.

A check of the pages displaying the breadcrumbs in their snippets confirms the use of breadcrumb navigation and the exact breadcrumb trail included in the snippet e.g. http://www.auto-europe.co.uk/car-hire/Spain.cfm.

I personally haven’t seen any crumbed SERPs but it’s apparently quite rare so far, with the testing possibly limited to UK sites.

Have you seen any? Please let us know via the comments below.

I have been practising on my own site.  When I add an alt img tag I still cannot see the text when I scroll over the image.  I don’t understand this, could you please help? My URL is [URL removed for privacy reasons]. There is no alt img tag at present (I took it out because it didn’t seem to work).

Thanks in advance and regards,

Barry

—————————————————————————————————

Hi Barry

If you’re using Firefox, you won’t see alt tags when you mouseover. But if you right click on the image with your mouse and view *properties*, you should see your alt text in the alt field.

Or you could just view your site in Internet Explorer where the mouseovers should work fine.

Regardless of which browser you use, search engines will be able to index your alt tags. Plus text to speech software will be able to read them for visually-impaired visitors, so you should include them wherever possible for site usability purposes.

Live blogging Designing Sign Up Screens and Flows presentation at Webstock 09 by Author of “Designing for the Social Web” Joshua Porter.

Josh got started in this biz because every client he ever had came to him with problems relating to web site sign ups.

Joshua wrote a book called The Usage Lifecycle. First up: Sign up is hard. If you have 8% of first time visitors signing up for a *free* account, you’re doing well.

When we think about the hurdle of sign up, we generally think about the friction of interface. So how do you remove friction? The Tumblr sign up is a great example of this. The URL box shows you what your URL will be. No need to understand sub-domains or anything else. The action button says “sign up and start posting” – it’s clear what will happen when you sign up.

We’re starting to see cool ways to make forms easier to use. Things like:

- Password strength

- Check username availability

- Inline help

- refilling fields upon error

- sending username in confirmation email

- Show/hide password

Joshua is currently working on a Facebook app. Facebook applications are great to work on because of all the different metrics. He’s been trying to improve the ease of use of typical Facebook forms:

Original Flow looks like:

1) Confirm personal info

2) Add your friends

3) Invite others

4) Getting started

Original Conversion Funnel:

Of the 100% of people who started the sign up process using the original flow, only 14% made it to the getting started screen. So at every level of the app sign up, we lost users.

What would happen if we took down some of the steps? He started by removing steps 1 and 3. The new flow was:

2) Add your friends

4) Getting started

The new conversion funnel resulted in 86% of users making it to the *getting started* screen.  Always ask clients why they want their user sign up forms changed. Focus tends to be on the form. But the form is not the problem of sign up. There’s a lot of good info on the web about form design. That’s not the issue. The issue is motivation.

“If ease of use were the only requirement, we would all be riding tricycles” – Douglas Engelbart

You need to change people’s minds about your software. Sign up is in the mind, not the web. People will find a way to sign up if they are motivated enough.

What are we asking?

1) A change in behaviour – old habits die hard

2) Give up accepted shared practices

3) Jump into the unknown

4) Shift from potential to kinectic energy – psychology behind wanting to change

The Psychology of Sign up = 9 x Effect by John T. Gourville. People tend to overvalue the software they currently use by about a factor of 3. Software makers tend to overvalue the software they offer by about a factor of 3. This creates the 9 x Effect. That’s why entrepreneurs tend to think they’re going to set the world on fire.

What we imagine people are thinking: confident, decisive, passionate

What they’re actually thinking: unsure, scared, non-commital

The Preconditions of Sign up:

- product research

- considering an alternative

- learning about the product

- comparison with other options

- reconnaissance

The form goes where the moment of readiness to sign up comes along. Therefore, pre-conditions are very important.

Design for 3 distinct visitor types:

1) I know I want to sign up

2) I want to make sure this is for me

3) I’m skeptical

Ways to tackle sign up:

1) Immediate Engagement

Geni’s family tree image where user can picture their *place* in the tree. NetVibes sign up reminds people it’s free, provides unobtrusive help comment window. Most importantly, you are allowed to create a personalized page via various fields etc BUT you have to sign up in order to be able to save that page. Slide widget that is on many social media sites uses similar thing. If you click on other people’s slide-shows, you can add and customize a photo BEFORE you sign up. Tripit use a helpful signup graphic and allows you to send travel data such as flight confirmations etc and then Tripit creates the account for you based on your return address. You’ve never even filled out a form, just sent an email. Posterous also has an email generated sign-up process and has “sign up” crossed through to remind people how easy it is

2) Write to Reduce Commitment

Copywriting is the easiest, fastest way to improve your sign-up process.

Highrise did A/B testing using Google Web Site Optimizer. They tested copy at top of sign-up form. Most conversions resulted from:

“30 day Free Trial on All Accounts. Sign-up takes less thann 60 seconds. Pick a plan to get started”.

Another example was PearBudget which started as an Excel spreadsheet and was converted to a web app. It allows you to create an online budget. The sign up is simply a pop up field “Save Your Budget” with an email and password field.

3) Levels of Description

First level is your elevator pitch – one line description of service, logo, screenshot

Second level includes more detail – features, benefits, how to join

Third is In-depth level – more complicated, details, links to deeper levels of information

The NetFlix sign up is a great example of the 3 levels in action. They also add their phone number for persons still needing help during the sign up process.

Bill My Clients recently changed their sign up which was not successful. Freshbooks has a great user interface (yay team!).

Derek starts with an example of a blind user trying to call a website help line.

Blind User: “Hello? I need some help please”

Help desk staff: “What is your login password please?”

Blind User: “Just a moment”. (He starts JAWS screen reader that reads out his password login info that’s stored in notepad)

Help desk staff: “Is there someone in the room with you sir?”.

Blind User: “No, it’s my screenreader”.

Help desk staff: “Sorry sir, but my superviser says I have to hang up on you now”.

BEEEEEEEEEP

This actually happened. User experience encompasses EVERYTHING. Even the help desk phone manner. People need to think about this! User support etc. Accessibility is SO important

Derek then showed the example of an accessible door sign with white lettering on a black background, plus raised lettering underneath, plus braille on a raised angle. This equals excellent accessibility and it should be inspiration for what we do on the web. Can we do things on the web to help people with a disability? We can and we should.

Derek’s vision: “People with disabilities will have their preferences and needs always available so the web / environment could adapt to them for a change.” Imagine if we could walk into a bookstore and signs would adapt to your personal disabilities, flaws or needs?

Accessibility is not always inspiring or cool. Most people think of the W3C guidelines when they think of accessibility.  But we should think of progressive enhancement when we design accessible websites:

1) Content

2) Presentation

3) Behaviour

That is the baseline for an accessible web site. Let’s go beyond this.

Small barriers can become big ones for people with disabilities surfing the web. Derek gave an example of an Advanced Search form which is completely unusable. Showed another example where the word “news” was used for popular items on the site. This created false expectations in the user because the items were nothing to do with breaking news items. The web designers should have used “highlights” instead.

Just because something is technically compliant DOES NOT mean it’s going to be easy to use. He showed an example of a hugely complex and challenging wheelchair ramp. It may have been technically compliant, but it would have scared the crap out of wheelchair-bound users. Accessibility doesn’t have to be hard.

Derek then played a sound-bite example of tags on Amazon URL being interpreted by a screen reader – it took foreeeeevvveeeerrr. Accessibility FAIL. He then played example of Chapters URL interpreted by a screen reader – All layout is done with CSS, using JavaScript correctly, implemented web standards properly. BUT something gets lost. The pop-up comment box interrupted the navigation. ALL tags get read out. Result = confusion and the Amazon site was actually easier to use for a visually impaired visitor. Goes to prove that even the sites who try the hardest can get accessibility wrong.

Derek was born with a club foot. He wore a cast for the first year of life. He had a major operation to correct it at age 3. But sports were still impossible as a kid. NOW, he does triathalons. Between his first in 2006 and his latest in 2008 he got better and fitter. Like Nat said yesterday, he had successful failures and learnt from them. He pushed his limits and got better.

We should do this on the web in terms of accessibility. Let’s get better at this stuff and keep improving accessibility. Derek showed an example of Google Maps – zoom not accessible via tabbing for visually impaired visitors, so they must use grids. Ugh. For a voice recognition user, this is awful. Luckily, Google Maps API allows us to create our own accessible version of Maps.

Someone challenged Derek to make an online crossword puzzle accessible. They said it couldn’t be done! He did it by using labels on clues, using JavaScript to jump from one clue to the next. He created a field set in correct numerical order and then applied JavaScript to make the crosspoint easier to use.

This is the type of thing you can do if you think a bit harder about accessibility. Previous version was image-based. You can also do Inline Editing and hover navigation. In BaseCamp, there’s no way to navigate without a mouse. So he created a GreaseMonkey script that allows disabled users to use BaseCamp right now. 37Signals should address the accessibility issues but who knows when?

The Social Accessibility Project is a FireFox plugin that uses crowdsourcing to improve usability experience for disabled surfers. It provides and takes instant feedback from user community in real time.

On August 1 2001, a Mozilla Bug Report was filed about a major accessibility issue in FireFox when trying to view Flash movies. Nothing has been done about it! So Derek and others took the same approach they used with Google Maps and hacked a solutionto use tabs to control play/pause, mute/unmute, again using a GreaseMonkey script to add keyboard controls. Awesome.

Some people created Outfox, a GreaseMonkey script using Firefox that brings voice to Firefox using JavaScript. It reads out maps etc. and effectively creates a talking map. Is this helpful? He’s not sure but let’s push the limits and see. These are all just experiments.

Ubiquity for FireFox enables Derek to invoke granular data such as specific addresses, links etc. The web is so much more complicated now – people say “I wish I had a command line”. So Derek thought, what could we do with this? What if we could create a play command line using Ubiquity so that a user doesn’t have to tab 30 times to get to the control they want? There are lots of applications here.

This stuff is cool to Derek. It may not be as cool as online gaming, but if it improves the User Experience, it is cool to him. What type of functionality can we all build into the web to improve it? Let’s see.