Upcoming SlideShare
Loading in...5

Like this? Share it with your network








Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.linkedin.com 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Heatmaps Presentation Transcript

  • 1. Heatmaps as a usability tool Presented by Amol Tondwalkar
  • 2. Usability Usability is a qualitative attribute that assesses how easy user interfaces are to use. and is composed of: Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they re establish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design? INTRODUCTION
  • 3. ANALYTICAL TOOLS An analytical tool is used to analyze or "take a closer look at" website. It is normally a way to review the effectiveness of a website. For example, Google offers a free web analytics tool that is used by Web Masters to track visitors on a given site. It allows Web Masters to see where visitors are coming from, how long they stay, what links they are reviewing, etc. Analytic Tool help with Tracking and Reports!
  • 5. AGENDA
    • What are Heatmaps?
    • Why Heatmaps?
    • How are Heatmaps different from other analytical tools?
    • How do you make Heatmaps work for you ?
    • What sort of sites should Heatmaps be used for?
    • What are the limitations of Heatmaps Usage?
    • Tools for Heatmap Tracking
    • Q uestions and A nswers???
  • 6. HEATMAP VARIATIONS The first one is an eye tracking-heatmap , which tracks the eye movement of a user when the user looks at a website. Eye-Tracking Being able to track a user’s eye movement is very valuable as it provides insight into how the user processes information.  However, collecting this information requires a recruited participant, a lab environment, special software and a test facilitator.  While useful, the ability to aggregate data consistently from users who are self-motivated to perform a test in large numbers is very expensive. Click Heatmap A click-heatmap gives an impression about the regions of a website user’s click - no matter if there's anything to click or not. Heatmaps therefore are very useful to identify usability flaws. They reveal those parts of a website, where users expect something to click, but in fact nothing exists to click. A popular example is those huge logo images at the top of a website, where one could expect a link to the root page. The second one is a click-heatmap which tracks the coordinates of all mouse clicks users perform on a website.
  • 7. WHAT ARE HEATMAPS A heat map is a graphical representation of data where the values taken by a variable in a two-dimensional map are represented as colors. The heat is displayed graphically based on the attention/focus received by an area. There are different means of tracking the attention/focus, which have been covered in detail in the latter part of this presentation. The colored spots demonstrate how many users viewed or clicked sections of the web page. The following is a guide to the colors. You can see that a heat map is not the same for all web sites. Heat map varies by content. less than 40% Blues 40-50% Light Green 50-60% Green 60-70% Yellow 70-80% Brown 80-100% Red Percentage viewed Color
  • 8. WHY HEATMAPS A website has at least one goal - whether it’s to communicate information, get users to register or get users to purchase a product.  Each page on the website contributes to users achieving that goal.  By using heatmaps, we can optimize a user’s propensity to reach the goal(s) for the website. Heatmaps can be used to determine the reading patterns of viewers on the website. It also helps in determining prime focus areas of the website which in turn helps in placing the right content at the right place.
    • They’re useful for many reasons, some of which include:
    • Knowing exactly how a viewer uses a specific page.
    • Seeing which parts of a page are unused.
    • Seeing parts of a page that are most used.
    • Understanding patterns of use on the site as a whole.
    • Predicting how visitors will use the site in the future.
    • Using that insight to better cater to the users.
  • 9. HOW ARE HEATMAPS DIFFERENT Google Analytics or Hitbox doesn't track the exact position of clicks; so although it does give you some useful data in the overlay, it's quite different to analyze exactly where the clicks occurred. Again this data can be vague in case of broken links. Implementing this kind of functionality using Google Analytics-Events, means addition of extra code and efforts. HeatMaps generally works off x/y positions of clicks, not the target of the link; hence you don't need to re-code multiple links to the same resource. Plus, combine that with unique metrics like 'click time' (how long it took them to click where they did), these products really start to become different tools to Google Analytics (i.e. usability vs. statistics). For example, one of experiment with HeatMaps on a page which listed out three steps to opening an account. HeatMaps showed that people were clicking on the 1, 2 and 3 icons trying to go to those steps. Because they weren't actual links, Google Analytics would never show that (and didn't).
  • 10. WORKING EXAMPLE Show, don't tell
  • 11. HEATMAPS – HOW TO USE To generate a HeatMap, a script must be included on each page to be tracked.  In web analytics terminology, this method is referred to as “page tagging”.  In addition to other web analytics data (page views, links, referrers, etc), the script collects X and Y coordinates each time a user clicks.  As with other analytical tools, the bulk of the code is written a script file, provided by the heatmap provider. This is downloaded only the first time the user visits the site (as it cached). It makes multiple calls to the server on user action, however as these are asynchronous calls typically there is not affect on the site performance. A heat map program on the server then aggregates the data from all users and displays clicks through an overlay on each studied page.  A legend (typically visualized as a spectrum) is included to show ”hot” (and cold) areas of a page. < script type =&quot; text/javascript &quot; src =&quot; http://localhost.hollywood.com/clickheat/js/clickheat.js &quot; ></ script > < noscript > < p > < a href =&quot;http://www.labsmedia.com/clickheat/index.html&quot;> Landing page optimization </ a > </ p > </ noscript > < script type =&quot; text/javascript &quot; > <!-- clickHeatSite = '';clickHeatGroup = 'index ';clickHeatServer = 'http://localhost.hollywood.com/clickheat/click.php ';initClickHeat(); //--> </ script > Copy and paste the code below on your pages, just before the end of the page (before </body> tag):
  • 12. When to run a Heatmap? Heatmaps should run for a good amount of time before analyzing the data. That doesn’t mean you run a heatmap continuously for 24 hrs to fetch the reports. To make best use of heatmaps Select a bunch of pages from your website and test it over a period of time at different intervals, like, a) during high traffic, b) over a weekend, c) on a specific day at different time etc.. This would help you understand user behavior at different time intervals and allow you to target content for that specific group. Once you have a nice sized data group, spend time observing how your viewers are using your site. If Possible, take print out of heatmaps, and make notes on paper when making adjustments on the site. This could be also be used as reference in future analysis. HEATMAPS – HOW TO USE
  • 13.
    • Following points need to be considered while analyzing the data:
    • Areas that see very few clicks can probably be removed. If your viewers don’t find it to be important, it could be more of a distraction and hindrance to them. Consider removing such elements, or even replacing them to see if different use of that area may lead to more interest in your sites content.
    • Look for Clicks that don’t lead anywhere. If you notice patterns in users clicking in areas that are not links, you may be confusing them, and once again slowing them down. Consider making those areas links, or removing them altogether.
    • Observe areas that get LOTS of attention. These are the parts of your site where you should be spending most of your time on (In terms of polishing and content development).
    • Observe areas just after content to see if your viewers are led anywhere else. If you don’t see any clicks after your content, it could mean that your viewers have hit a dead end, and have no where else to go. Try to turn your endings into new beginnings.
    • Compare clicks above the fold to after the fold.
  • 14. WHERE TO USE HEATMAPS Heatmaps can be used for any public website or Intranet applications. But, Heatmaps are not that effective for applications where trained users follow more or less the same steps to complete a certain task. In this case, it is obvious that the heat will be shown on certain action buttons which are used more frequently. The less frequently used items will show less heat. For E.G. Applications like Timesheet logging, Library system, etc. In such case, where you know who the users are, user interviews would be very effective to create a usable Interface. E-City SAP
  • 15. LIMITATIONS OF HEATMAPS While Heatmaps are useful in analyzing the data as explained above, there are also a few limitations to it.
    • Heatmaps might not work for pages which offer users to make customizations e.g. swapping the positions of components as per their requirements, setting the number of content to be displayed within a component, etc. Heatmaps might not work here because different users will alter the page as per their requirements. This will make the page layout different, as set by different users. Few users will place a component on the right side, while, others might like it in the center. Also as users are allowed to select/place the content where they find it to be suitable, heatmaps may not be relevant in this case.
    For e.g. my.yahoo.com/ e-city. This site allows users to shuffle content as per their requirement. Heatmap, will hardly be of any use on these kinds of sections. That doesn’t mean Heatmaps will be useless on these sites. Here, Heatmaps can be used to target revenue generating or promotional ads. Using Heatmaps on these kinds of sites will help identify the hot spaces on the site to target ads.
    • Heatmaps might not be effective when tested on very few users, It will be difficult to make any
    • conclusion as their might not be enough data to do so.
    • 3. Certain sites uses Ajax Implementation for various effects (Expand / Collapse/ dropdown), Data provided by heatmaps for these sites will be confusing as heatmaps will show the heat on a certain area, but it will be difficult to differentiate which component has most of the clicks.
    • 4. If you are using a freeware offering such services then you need to install the setup on your own server. This might put some extra load on your server and might slow down the page load time.
  • 17. TOOLS FOR HEATMAPS Paid Services Free Services
    • Some of the interesting Features offered by these Analytical Tools:
    • Heat Map: A virtual heat map of hot spots, constructed from the click data of our users, is overlaid on our web site, highlighting the areas of activity (the &quot;click density&quot;”). With these reports, we can very quickly identify:
      • Popular areas of the page/site.
      • Unpopular areas of the page (e.g. links which aren't clicked).
      • Misused areas of the page (e.g. clicks on text or images which aren't linked).
    • Hover Map: This displays usage data for individual items on your pages. All clickable items on the page are highlighted, and can be individually activated to show the number of visitors that clicked on them, and other statistics.
    • Stop/Start recording: If we are currently recording click data for the site, we can switch the recording off. Similarly, if we have previously switched recording off for this site, we can re-start it.
    • Click limits (turn ON/OFF): The account will have a limit on the number of clicks you can store. Using this option, we can set a click limit for each individual site, so that we can more easily distribute our total click limit across all of our sites (e.g. so that our busiest site doesn't use all of our allotted storage space).
    • Screen sizes and browsers are logged, making possible the tracking of liquid CSS layouts (100% used width).
  • 19. THANK YOU