Jump to Sidebar Content | Jump to Main Page Content

Begin site navigation:
End site navigation.
Begin left menu:


End of left menu.
Begin main content:

New Mouse-Dependent UI for Google Analytics 2.0

Saturday, July 21, 2007 2:12 pm

As much as I was dreading it, Google officially flipped the switch yesterday over to their new Analytics user interface. Chock full of sticky AJAX inline pop-ups, movable boxes, and REALLY BIG FONTS, it’s bound to get noticed.

I’ve been using Google Analytics for the last year, and was in denial about having to make the switch, even though they kept kindly alerting me on the login screen for the past two months. But I found the new interface distasteful, so I kept using the former interface thinking they’d fix some of the problems before the actual launch.

No such luck. According to their blog, it “goes a long way towards percolating data up to the surface where it can be seen by the right people.” Yes, I suppose it does. But, it also makes certain information harder to access and digest, requiring unnecessary mouse-clicks and mouseovers — factors that can quickly lead to user fatigue and that also present accessibility challenges.

Offhand, what strikes me most is the overwhelming disarray of the content on the pages. Take a look at this screen shot:

screen image
Google Analytics Network Location page

Text and numbers are strewn about everywhere, and there are far too many different font sizes with no apparent sense of hierarchy: fonts at the top of the page are just as big (and bold) as those right in the middle of the page and lower down. They’re also so big, the screen could serve as an eye chart (seriously, I can read them from 10 feet away.)

Displaying data can be a challenge, but proper content chunking and clean formatting can go a long way toward making it easier for people to understand complex information. To start off, I’d recommend that they move away from percentage-based font sizing – a little peak at their CSS file shows {font-size: 190%} – in favor of ems, which are generally just as effective for relative sizing, but offer a bit more control. Also, arranging the content differently, using color more appropriately, and making better use of whitespace would give the pages more visual appeal and cognitive structure.

It didn’t take me long to customize the dashboard for each of my accounts and fully explore the ins and outs of the new application. But even after adjusting to the new interface, it still takes me a lot longer to get the information I need.

For example, in the old interface, I could make one click on the calendar to view a quick “Executive Overview” of today’s activity, but now it takes three: a click on the date display in the upper right corner, then a click on today’s date, and finally a click to “Apply Range.” They’ve also removed the ability to view stats by year with just one click – now you’re forced to use the date range tool.

screen shot
Google Analytics date range tool

Another frustration is the Flash timeline that appears on nearly every page, which can’t be removed as part of your customization options. On many pages, it defaults to the same Visits/Day data, and then on others, it displays a timeline for that category. Unfortunately, there isn’t any obvious indication when the data changes because the timeline looks identical, so it isn’t very intuitive.

screen shot
Google Analytics Flash-based timeline

Because the timeline is ever present, there’s more scrolling involved to reach the more informative data displayed in the tables beneath the timeline. It’s an inescapable, in-your-face design element that ends up being quite a distraction: as you move your cursor about the page to access other tools, the pop-ups follow your mouse like a game of whack-a-mole.

More disarming, though, is that Google seems to have forgone their typical emphasis on accessibility by presenting an interface that makes it nearly impossible navigate without a mouse. A key W3C WCAG 2.0 Priority 1 guideline is to design for device independence, thereby ensuring keyboard functionality for all controls which helps people with motor disabilities who may be using alternative input devices such as head wands, mouth sticks, voice-recognition software, or eye-tracking devices.

Essentially, this is called “natural tab order,” by which someone can navigate a page using their keyboard (keys such as TAB, SHIFT+TAB, SPACE, arrows, etc.) to access links and perform operations. Different Web browsers have their own peculiarities, which is why cross-browser testing is an essential aspect of application design. But, script elements and embedded Flash objects – which Google Analytics heavily relies on – are common culprits that steal cursor focus, thus interfering with keyboard functionality.

Here are some results of my testing:

In Opera 9.1, my tabbing just switches back and forth between the first two drop-down toggles (View Reports and My Analytics Accounts), which prevents me from accessing other links on the page. This is likely due to the use of the JavaScript onchange event handler, which can steal the mouse focus if a keyboard-accessible handler, such as a Go button, isn’t provided as well.

Firefox 2.x smoothly lets me tab past this and into the page content, but it’s only apparent if you watch the status bar on the bottom – there’s no indication of an active link to let you know where your cursor is located. So it’s a guessing game, sometimes bringing up a new page and other times, a dialog box.

In Internet Explorer 6.x, the keyboard access starts off working perfectly, including the Flash-based calendar. Large yellow boxes highlight and select the calendar days, but then I got lost in a loop trying to select multiple dates and couldn’t escape the calendar to access the Apply Range button. On a second attempt, I bypassed the calendar and started cruising down the rest of the page, but then got lost in the hundreds of keyboard-accessible hotspots within the Map Overlay.

screen shot
Google Analytics Map Overlay and activated Flash hotspot

In all cases, the natural tab order follows the page content first and bypasses the left-hand navigation – a more important structural area of the page. Google’s developers attentively included a hidden “skip navigation” link to permit screen readers to bypass the top page navigation, but offering up other links to navigate into and away from other page content would be a small task with a big impact toward greater accessibility.

On a last note, the AJAX-driven contextual help is entirely mouse dependent. A sticky box appears when clicking on one of the question mark icons, and the only way to make it go away is to click on the icon a second time. Since you can’t tab into it, you can’t access it at all. Containing help resources in inaccessible locations like this is an odd oversight – I’m surprised that one squeaked past their in-house testing. A better option would be to include these resources within their Help link at the top of the page, or disable the AJAX call entirely.

screen shot
Google Analytics AJAX-based contextual help

On a side note, some other “features” of the new interface include:

  • It isn’t possible to view Visits and Pageviews simultaneously. It’s an either/or option, but you can’t see a combined timeline.
  • The Domains list has disappeared. Only ISP locations are available in Network Properties. The Domains helped distinguish specific visitors from ISPs like AOL or Comcast.
  • A new highly-touted feature is the PDF export, but actually, it only prints the current report page and isn’t a true export of all of the data within a report.
  • And alas, Google — the king of mapping — really botched the Geo Map feature. The Natural Search Blog provides an exceptional analysis of this issue.

Overall, I think Google made a good attempt at improved accessibility, but the Google Analytics 2.0 application presents some lingering issues and usability quirks. I’m hoping that they’ll conduct further usability testing and make improvements – or, better yet, revert back to the 1.0 version. I know it’s free, but still, “free” doesn’t trump “user-friendly.” There are some emerging competitors and the analytics market isn’t in any way saturated, so there’s a lot of room for a more usable and accessible application to take a top spot.


  1. Does anyone know the name of the font used on Google Analytics GUI. I can’t seem to locate it to save my life. I am not looking for the serif logo typeface, the GUI font.
    Thanks much!
    – Mike

  2. Maybe I’m missing something, but that looks like a standard sans serif font to me, either Arial or Helvetica. From the GA admin dashboard, just view the source to see the link to their css file.

End of main content.