‘Usability’ - Category Archive


Google Analytics

May 11th, 2011

I have used Google Analytics since well before web 2.0, but only recently did I spend a few hours reviewing their Conversion University course material and pass the Individual Google Analytics Qualification test to receive my Google Analytics certification. The tool is an indispensable part of any web user experience designers workshop and while a certification does not mean you’ve mastered the tool, it does allow you a solid baseline of understanding and reiterate the value of that the tool possesses.

Google Analytics is also less of a single tool than it is a compilation of strategies, trends, analysis, prospectives and possibilities. It is less about being the best at the long jump, and more about being athletic. Being comfortable with the web application is important, but so is being able to apply the data to real working websites, e-commerce sites and other web properties

Prior to even knowing what the proper taxonomy of terms where for GA, I was using event tracking in flash videos to track visitor trends for how far into a section they would watch, was adding page tracking to PDF downloads and logging outbound affiliate links to capture data on where I was sending qualified leads to partnerships. The GA certification process is more about the how-to rather than the why, when, or what this means, as much training is, but it allowed me to reflect on the best tips for successfully mastering Google Analytics.

#1. Profiles, Profiles, Profiles.

If you are only using one profile per website, you’re doing it wrong. I know, seems odd that you would have to have two or more profiles for any website, since the concept would be you’d already have all the data stored, so why couldn’t you just segment and partition what you were interested in seeing. Truth is, segmenting is only one way to slice the data.

The reason to have more than one profile is to keep one unfiltered, raw data set always available to capture all the traffic. Filters, once applied, removed that filtered data from the data set, alleviating the end user from having to always segment, or hiding certain user data from portions of the account users who you may not want having access to ecommerce data for example.

It’s easy to think of profiles are different ways to understand your web traffic. Your marketing website, your web application, your reporting portion of your web app, a forum, shopping cart, subdomains, help center, even an intranet. You can have up to 50 profiles per account, so go nuts. Profiles can then have users, filters and goals attached to them. So profiles could also be setup for your marketing department, customer service team, web managers, and content editors.

With no additional tracking typically required, you can begin setting up new profiles, fitlers, users and goals straight through your GA account.

#2. Regularly Express Your Regular Expressions

RegEx is a like spinach. When you were younger, you hated the sight, smell and taste of it. Now that you’ve grown up a bit, you realize it’s power, flexibility and overall value. Every effort you spending making more time for spinach or regex, the better your life will be. Learn by any means necessary. I’m no master, but these resources have been helpful:

#3. You can’t win if you don’t score a Goal

Setting up goals are easy. Determine what is or isn’t a goal is easy. So why do must sites not have goals? No idea.

Your goals are your objectives. Pages visited. A checkout process or funnel. The amount of time spent on the help center searching for an answer. If they downloaded that PDF, watched that video, clicked that big, shiny neon green button. Whatever it is, set up a goal or goals, this allows you to take actually advantage to the single coolest stat in all of GA. (Keep reading)

#4. The data is in the details

Lovely sparklines ramble across the interface that making trend analysis and Edward Tufte smile. A logical hierarchy from accounts to profiles to users, filters and goals, to profile segments, custom reports and per report filtering, sorting, viewing and saving to your dashboard or exporting for further spreadsheet love. Create annotations on the main timeline to communicate with your team traffic spikes, PR news, site updates and features added. Customizations that follow you like friends, twitter followers or Linus’s blanket from one of your accounts and profiles to the next. They even now have a dashboard builder that allows you to create a quick, personalized overview of your site with just the details and data you want to see.

#5. The $ Index.

Staring into etrade stock trader can feel like falling into the number abyss. Everyone would always prefer one or just a few numbers to be lively indications for they things they are interested in tracking. The stock marketing tries this with the S&P 500, or the 200 day moving averages; baseball with batting averages and a pitcher’s ERA. The more you look at data however, the more the data looks back at you. There will be no end to all the new ways to slice and spread these numbers, and while statisticians are raking in the profits and laughing their number crunching tails off, the UI department is working to tell an effective, time-efficient story with all this data overload.

With Google Analytics, the $ Index is your pot of gold. Sure, page visits, unique visitors, keywords and ecommerce revenue are important numbers, but to understand your website is to understand how each page is helping or hurting your site’s ability to perform and convert.

Horizontal Heat Map

March 1st, 2011

Recenty a study at Useit.net released some valuable information about how user’s view your website’s content – Not top to bottom, but left to right.

What was unique about this study was the concept of how user’s might read/see your content in terms of percentages along the horizontal dimension. Above The Fold meet Mr. Left to Right. This eye tracking study is helpful in understanding patterns, but should be used as a guide, not a law. (Some languages read right to left, and some folks don’t believe too heavily in the above the fold.) This chart helps us understand the data:

But how about visualizing what this means for a website?

I’ve created a horizontal heat map to help quickly solve this issue. Much like Google Lab’s Browser Sizes (an excellent tool for web designers) this Horizontal Heat Map can quickly help you visualize the site’s content. By using opacity of varying levels based on the useit.com dataset, we can properly shade each column from left to right in relative opacity to simulate how a user might “see” a website.

Give it a try. See how your site stacks up.

Visualize your site with the Horizontal Heat Map.

re:thoughts on Drupal 6.xx

October 21st, 2009

After working at an agency as their only online designer and developer, I spent some time researching a platform I could use for 90% of our projects. I finally decided on Drupal after experiences with custom built CMS, wordpress, joomla, and other systems.

What Interested Me the Most

  1. Open source – it was free to try, use, break and build. I liken Drupal to Mozilla, the modules to the add-ons, etc.
  2. Extensibility – with over 3,000 modules, great documentation and constant improvements from tons of people meant that things would only get better.
  3. Seperation of code, theme, modules and content – don’t touch the core, themes and subthemes, modules for one or mutiple sites, and all the content in the database, easy to back up, update, migrate, restore.
  4. I18N – I wanted to build sites that allowed for translation of both content and admin interfaces. Drupal offered robust value.

However, after a hiatus from Drupal after I left the agency, I began to miss building sites, hunting for Drupal help and stumbling thru their clunky, scroll-happy interface. Well, now I’m back, both building and bullying Drupal, but also thinking of things that could make the platform better.

My strength is in design and UX. While working late last night on a side project, I noticed several things that Drupal struggles to solve.

What Could Make Drupal (Even) Better

Installing Modules
Besides the time required to setup Drupal’s many necessary modules, there is also the problem of downloading, unpacking and uploading. In comparison, in the WordPress admin interface you can search, view, select, and install plugins right from one screen. Now I understand the security flaws involved with doing this on a live site, but while building from localhost, you still could easily access, download and update modules from the admin interface in Drupal. This would be an excellent feature that ramps up initial start-up time. I know that in Drupal 7, many of the most used modules will be included in the core, but given that this problem will always exist for any additional modules, and that Drupal 8 will surely add more modules to their core, I’d like to see this inclusion built into core sooner than later.

Fieldset memory
This is especially true when working with long pages like the modules page. Drupal should add a flag to the database for all fieldsets, and on a page save, keep the fieldset either expanded or collapsed depending on how the interface appeared on the save of that pages. This would eliminate a great deal of scroll and prove to be a more intelligent interface feature. Additionally, following the likes of the windows explorer save windows, the fieldsets could be triggered by a number of times collapsed to update their default settings. For example, if you close a fieldset and click save in the page 3 times, that fieldset would then be triggered to be closed by default now.

Naming and Wayfinding
There is a general inconsistency with naming across the core and modules of Drupal. For example in views, you can filter on Node: Node:Type but in the admin navigation menu, it is displayed as content management -> content type. This would be fine if it were isolated cases in little used modules and work flows. However, there are some many common work flows that represent this problem, but also so many work flows that you do only occasionally, not repeatedly, so you forget and are left with the failed user feeling not that of support from the application.

Save button
Countless times I would have loved to have an additional “save” button at the top of my page, much like gmail has the “send” button above and below the email frame. This would be an easy additional and greatly improve the in-and-out of pages and nodes experience.

Link thru
Drupal is certainly feature-rich. However, I feel trapped by using the admin menu. I do agree that it is better than the page click, page click, of the default left side admin navigation menu in core, but why not offer cross linking where appropriate. For example, if I’m setting up a content type and have added a custom field of a image and proceed to setting up the image properties and display qualities when I realized I haven’t setup my imagecache values that I want. So, I have to leave this setup process, then using the menus system, get over the image cache and set that up, then return to select the imagecache from the dropdown. Why does Drupal assume, or rather force a one way street to get tasks done? It may be easier to code and develop initially, but as time wears on, so too does the back tracking to run thru another short setup and then return to the task at hand. One example where this works perfectly is views. If you are logged in a on a node that displays a view, when you hover over the block, the view “edit, export clone” links handily appear.

What do you think? Do you know any workarounds or solutions to the above list? Leave your comments.

Steep and Cheap, Now Even Cheaper

October 7th, 2009

If you’re online as much as I am and wishing you were offline, knee-deep in some powder at Vail or ripping around on your mountain bike in Moab then you’ve probably heard of the suite of websites at Steep and Cheap. They operate much like those shopping network channels (secret addiction of mine, please steal the remote from me when I’m sitting on one of those channels) where they sell one item for twenty minutes or until they run out.steepandcheap-logo

I’ve been using this site over the past couple of years and have successfully bought a pair of sunglasses, snowboard bindings and some googles all for more than 50%  off their retail price. However, it was only recently when they added a few additional site features that made me become even more endeared (read “addicted”) to them.

These three changes, with the last being an innovative web marketing idea, are all brilliant.

1.Individual Quantity Drill-down for each Color and Size


Quantity listed for each color and size

They used to show you just the total quantity left for the item. Now, they offer their users a small image of the item in the corresponding color with a bar graph showing that items color and size remaining quantity. Underneath the graph they even offer the total purchased and total available.

This small change allows for users to easily identify their color, size and quantity remaining. This is the small, big thing.  It allows Steep and Cheap to put up more “Sold Out” images and dwindling graphs that encourage users to act now before “it’s gone.”

2. Time Remaining

They used to show a stat called “Sellout Rate” which would tell you have fast they were selling the listed item. For example, “1.3 per minute.” For most users this is too much math to figure how much longer the item will stay available. Steep and Cheap was just simply converting the time the deal was up by how many items they had sold. Since the deal would remain up for a certain maximum amount of time or until all the items were sold, the sellout rate really only hindered people from feeling the need to jump in a purchase that item right away.


Time remaining tick down bar graph

So they replaced it with a time remaining bar graph that changes color from green to yellow to red as the time ticks down. This allows users not interested in this auction to know how long until the next. This allows the current user who are interested in the deal to read some reviews, do their research and then get the deal before its gone, much like the time limit attached to online ticket sales which helps you feel more comfortable with your purchase. No buyer’s remorse. But, the engineering behind this is also intelligent. If the item isn’t selling you can just quickly add a few minutes to the clock to adjust to the sell rate. And with the total quantity graph placed right below the time remaining graph the user can easily see if they should add to cart before the quantity hits zero.

3. $1 Deals

Introduced just over two weeks ago, the $1 deals have added traffic to the site, refreshed the site to its loyal users, increased word of mouth marketing, offered a great value to their customers for a very low cost to their bottom line and inserted even more excitement into their online shopping experience.

The secret that Steep and Cheap uncovered is that their best assets are their current customers. Probably, like myself, most users have bought more than one item. With $1 Deals you are targeting the already converted with an even sweeter proposition, you’ve made loyalist out of just average shoppers, pushing more people into advocates and die-hards.

Now offering $1 Deals

Now offering $1 Deals

A few times each weekday the page flickers, the favicon in their open browser tab flashes yellow and a leftover item they couldn’t sell goes for one dollar. They offer a few colors and sizes, but honestly, its sold so fast it’s hard to even click over fast enough to see what you’re buying. But at $1, who cares? Its a steal no matter what it is!

$1 Deal traffic spike

$1 Deal traffic spike

They sell a few items they couldn’t previously get rid of for next to nothing and gain the equivalent to the Black Friday doorbuster crowds everyday. These $1 Deals encourage users to sign up for an account and stay logged in so they can quickly process through checkout for the $1 items. This also leads to a lower overall effort required to sell other items since users already have an account AND are signed in. These deals encourage users to keep the Steep and Cheap website open all day in an easy-to-reach browser tab.  With a nifty yellow flash of the favicon every user gets a notification to the deal and Steep and Cheap drives more traffic to their site. And the proof is right there in front of you. These two screenshots were taken not 10-seconds apart. The first one, right as the $1 Deal goes up shows 9,060 people on the site. This quickly jumps to more than 13,200, over 4000 new visitors in a matter of seconds.

Small changes to design and knowing their customer has increased the user experience and brand value.