Welcome to Josh Baker's Practical Advice for Optimizing Your Internet Marketing blog. Here you will find internet marketing optimization and online strategy articles full of tips, tricks, discussions, and thoughts to help you take your marketing and business to the next level of success.

Archive for Usability

It comes with no surprise that the heat maps produced from the data collection from studies using eye-tracking technology (following the eye movements and fixations of those participants in the study on how they look at a webpage) is all the rage in discussing and uncovering how visitors behave when looking or interacting with a webpage. However, many companies cannot afford to have this research done for their own actual website or are not willing to invest in their own study if they can indeed afford it. Therefore, many companies therefore rely on the common findings from reputable already published studies in order to increase the usability and effectiveness of their own websites (towards the bottom of this post I will discuss software that you can use to uncover related data on your own).

Photo by Jason-Morrison

Photo by Jason-Morrison (License: Creative Commons Attribution-NonCommercial)

 Probably the most famous study that over the past few years that we have all heard or read about are the findings from a study that Jakob Nielsen performed which uncovered the F-Pattern – the F-shaped patterns that users follow when reading content on a webpage of looking across the top of the content, then move down the page to read again horizontally across the page -but usually not fully across the page, and then finally quickly scan the left side of the page from top to bottom, this forming in most cases an “F” shape if you were to draw lines for where their eyes moved.

 A heat map was then produced to display the cumulative results from the study by providing insights into how the readers actually read the content on the page, not only visualized in the heat map by the density of those areas that were fixated on the most, but also by the colors red, yellow, green/blue and gray representing how “hot” a particular area was (red showing that area was viewed the most, blue the least, and gray not at all) that was read.

The data from the study was analyzed and the take-away was as stated by Jakob Nielsen, when discussing the Implications of the F-Pattern:

  • Users won’t read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won’t.
  • The first two paragraphs must state the most important information. There’s some hope that users will actually read this material, though they’ll probably read more of the first paragraph than the second.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They’ll read the third word on a line much less often than the first two words.

In the spring 2009 issue of Search Marketing Standard, Gord Hotchkiss of Enquiro, whom offers eye tracking services,  stated that:

“we do like eye tracking as a tool to gain insight into user behavior because it gives you a deep data set, especially when you combine it with post-session questions. It allows you to combine and compare what people physically see with what they remember seeing”

Tools You Can Use, Cost-Effectively, For Additional Visual Insight into Your Visitors Interactions

You can easily find a growing number of eye tracking heat maps and their summary findings and analysis around the internet these days. Of course there are those of us who want to know more about how people are using our website and typically are only using a web-analytics platform such as Omniture Web Analytics or Google Analytics to gather data and then interpret it. Then, there are those who want to gain even more insight or a more visual representation of user interaction (beyond the standard site-overlays that come with a web-analytics package) and luckily there many web-applications (typically implemented by adding a java code snippet to your web page or pages) available for you to use to do just this. While not as informative or a significant as eye tracking analysis, click tracking provides another level of analysis over what you are commonly seeing:

Here are just a few of the many available to help you identify with heat maps where your users are clicking enabling you to further identify usability or performance issues:

CrazyEgg – provides Click HeatMap, Click Confetti (find out where people click based on their referrer, search terms, etc.), Site Overlay to look at the hard data, ability to share results and export data. Live reporting.

ClickDensity – provides Click Heatmap, Click Map (shows where all clicks are on page), Hover Map which displays usage data for individual items on your page, Page Summary stats, specify an internal page (URL) that a visitor must have viewed in their session BEFORE the current page or a page (URL) that a visitor must have viewed in their session AFTER the current page, ability to save heatmaps etc as a .jpg.

ClickHeat – provide a visual Heatmap of clicks on a HTML page, showing hot and cold click zones. While not as robust as the tools mentioned above, it is however free (Open Source).

Have you used other clicktracking tools and would like to share them? Let me know!

Categories : Analytics, Usability
Comments (0)

Unfortunately most ecommerce websites that I come across, a very high percentage of them are not effectively reaching their maximum level of potential performance capability, especially true of their online catalogs’ category pages. The goal of the category page is to quite simply help the potential buyer get to the right product page for the right product ultimately and hopefully ending in a sale.

What complicates the situation (although not really as complicated as one would think, and often used as an excuse, or unaware of by others) is that visitors arrive at various different stages in the buying process. This being so, the category page needs to provide the ability for the visitor at any stage of the buying process to narrow down their selections in order to easily get to the product pages of the products that fulfill their reason for being on your ecommerce website in the first place. As a refresher, here are the stages of the consumer buying process:

  1. Problem recognition or need awareness – the buyer needs to replace a broken TV, they really want a new cell phone, they want to look more stylish, etc. This can be self-recognized or realized through external sources such as peer pressure, or even marketing materials.
  2. Information search to help buyer determine possible available alternatives – examples of search include comparison shopping, internet research, word of mouth, and even the buyers own memory.
  3. Evaluation of available purchase options – deciding which features the buyer wants, etc., if you are not satisfied with the choices that you find, you end up back in the Information Search step again).
  4. Purchase decision – this is where the buyer chooses the alternative they want to buy (the actual product, the make, model, the store, etc.).
  5. Purchase – the actual purchase itself.
  6. Post purchase behavior – the evaluation of the purchase such as satisfaction or dissatisfaction.

Not all visitors will arrive to your site at the same stage in the buying process. Universally, not all visitors will go through all of the stages, and not all visitors will be at the same point inside each stage of the process, some may be just entering a specific stage, while others may be near exiting a specific stage.

Many category pages fail to help the potential buyer actually get to the right product, but rather leave it up to them to figure out what that right product is and how to get to it, on their own nonetheless. This is often ineffectively done by overcrowding category pages with individual products (or predominately featuring them on the pages most important real estate) instead of providing the functionality for the visitor to further narrow down their selections. An effective category page’s primary purpose in most ecommerce instances should not be to sell a product on that page, but to provide the “tools” to help the user further navigate to the right product or products with as much ease as possible and therefore with as little friction as possible on the way.

For example, if I am looking for a TV, and I am on your TV category page, I most likely do not want to see all of the 250 TV’s that you carry. Help me navigate to just the plasma’s, or just the LCD’s, or all TV’s by size, or all TV’s within my budget. Better yet, how about providing a “what type of TV is best for you” wizard option on the category page for those who haven’t made a decision between the various types or features or benefits and for those who aren’t as knowledgeable. They could use the help in narrowing down the available selections.

You can further break-it-down on the subcategory pages that the category page may link to – if I choose plasma TV’s on your category page, then your subcategory page needs to further give me the options to navigate the available options or features by size, by price, by resolution, by brand, again maybe a wizard to help the visitor in further choosing the right plasma TV for their purpose. Keeping all of this in mind allows for those in different buying stages to use the category pages effectively.

If you were in the canned good aisle in the supermarket and there was no rhyme or reason with the setup, the chicken noodle soup next to the canned carrots, and the canned chili next to the canned pears, and the canned tomato paste next to the canned sting beans, not to mention the sizes of the same brand and item not next to each other, how effective would you be in finding the item that you need and in the right size, you would probably get frustrated and leave to go to the supermarket down the street that presents the items in an manner that increases your usability of the canned good aisle. With the web, the user can hit the back button to the search engine and go elsewhere in seconds.

When your category pages are constructed properly and do the job they are intended to do, it’s almost effortless for the buyer to end up with the right solutions or products within seconds – increasing the chances that they will make a purchase from you rather than leaving in frustration or not finding the product they want or need. With ineffective category pages even though you may carry the right product for them, they may never actually find it in the time they have allotted to spend frustrated on your site before going elsewhere.

Now, I am not saying that you want the user to have to click through 10 pages to get where they need to be, but what I am saying is that you need to provide functionality for those at whatever stage they may be in. Those who know exactly what brand and model number may use your site search. Those who know they have $1,000 to spend on a plasma TV will take another route, and those who know they want a TV but don’t know what type or features available and don’t have a budget in mind just yet will take another route. Depending on where they are in the buying process will determine how much direction they will need (and want) and how much narrowing down they are willing to participate in to get to the right product. 

Let’s look at how Best Buy effectively uses their category pages:

Scenario: I want to purchase a new laptop, I am somewhere between the Information search and the evaluation stage (I know a fair amount about laptops, but not sure what new options are out there that I may want or need).

By selecting the Computer category on the home page I am brought to the computer category page thus allowing me to see all of the categories related to computers. I need a laptop so I recognize the picture of a laptop with the word “laptops” right below the picture, and proceed to click on it. Here is the computer category page:



I arrive at the laptop page and instantly see the headline that asks me “Which laptop is right for you” with images and links to the various subcategory pages of USES for laptops such as Entertainment, Gaming, Small Business, etc. I actually want one to use for movies, music, etc., so I click on the Entertainment link and am presented with a product listing page. Here is the laptop computer category page:


The product listing page lists all the products that fall under the Laptop>Entertainment Categories. But wait, on the left hand side (see the red box I added) I can also sort the products by Brand, Customer Reviews, Price, and so on, allowing me to further narrow down my selections based on more of my criteria (either known beforehand or as I uncover it during my visit). Here is the laptop product listing page:

Just a few clicks and mere seconds after arriving at the Best Buy website, I was able to get a more or less customized list of laptop computers for entertainment usage, by Dell, within my budget. Here is the Dell laptop product listing page matching my criteria:


I didn’t have to frustratingly search through Best Buy’s entire laptop inventory and read each of the product descriptions to determine which laptops were right for me. Their website easily guided me to the right products based on my stage of the buying process and based on the criteria I felt was important to narrow down their product selection by.

Comments (0)