{"id":5159,"date":"2010-07-01T16:09:04","date_gmt":"2010-07-01T23:09:04","guid":{"rendered":"http:\/\/9.284"},"modified":"2010-07-01T16:09:04","modified_gmt":"2010-07-01T23:09:04","slug":"interactive-heat-map","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/labs\/2010\/07\/interactive-heat-map\/","title":{"rendered":"The interactive heat map for Firefox Main Window usage!"},"content":{"rendered":"

Mozilla Metrics team has created a really awesome interactive heat map to visualize the data from the recent Test Pilot <\/a> study of Firefox\u2019s main window<\/a>. The team also publish a great blog post<\/a> sharing findings from this study. Check it out below!<\/p>\n

“Last month, Mike Beltzner shared an early product plan for the next
\nversion of Firefox with the Mozilla community and presented our vision
\nfor Firefox 4<\/a>. A big upgrade coming with Firefox 4 is the new theme
\nproject: creating a new, sleek, and simpler default theme for the
\nbrowser. The UX team has been working tirelessly on this \u2013 streamlining
\nand modernizing the user interface, particularly on Windows, given the
\naesthetic changes introduced by Vista and Windows 7. \"\"<\/a>
\nNote: Plans May Change.<\/p>\n

Metrics and Test Pilot have been doing what we can to help guide the UX
\nteam as they create an optimized design. A few months ago, Test Pilot
\nreleased the Menu Item Usage Study<\/a>, from which we gained valuable insight into how
\nusers interact with the menu bar. And a few weeks ago, we released the
\nMain Window Usage Study<\/a> to capture the remaining major UI elements of the browser,
\nand provide more data-driven recommendations.
\n
\nToday, we’d like to present some initial findings from this study. Like
\nprevious Test Pilot studies, the main window study ran for 5 days and
\ncovered Firefox versions 3.5 and up. The sample consists of 9,667 users
\nwho have opted into the Test Pilot program AND opted to submit their data.<\/p>\n

We usually display study results in charts and graphs on this blog, but
\nfor this study, we were inspired by the work of principal designer, Alex
\nFaaborg, and came up with a slightly different kind of visualization.
\nBack in March, Alex created a heatmap<\/a> to visualize the menu study data
\n(his post is also a great example of how the UX team is using Test Pilot data to
\ninform design decisions). Overlaying the actual UI and putting the data in context
\nwas really useful, so with his help, we expanded on the idea and constructed
\nthis interactive, web-based heatmap<\/a> for the main window study:<\/p>\n

\"\"<\/a>
\n(image links to heatmap)<\/p>\n

Currently, the heatmap can display the usage data in two ways. Selecting
\n‘Used by x% of users’ displays the percentage of users who clicked each
\nUI element at least one time, and ‘Clicks per user’ is simply the
\nfrequency click count for each item, divided by the number of users in
\nthe sample (we normalize for sample size to make comparisons across the
\ndifferent subsets more meaningful). The first approach is useful because
\nit mitigates the effect of outliers, since each person who clicks an
\nitem counts only once, whether they clicked the item 1 time or 25,000
\ntimes. The obvious drawback is that this metric fails to capture
\nintensity of use, which ‘Clicks per user’ does capture.<\/p>\n

You can also choose to examine specific subsets within the sample; there
\nare selectors to display breakdowns by OS and by self-reported
\ncomputer\/web skill level. Unfortunately, you cannot combine these
\nsubsets yet; that is, while you can look at data for just Windows users
\nor for just Advanced users, you cannot look at data for the subset of
\nAdvanced, Windows users. Our sample is too small for such sub-setting
\nright now, but we’ll add this ability as soon as our sample size increases.<\/p>\n

Be sure not to miss the table to the right of the heatmap – it lists all
\nthe UI elements in descending order and also outlines the color
\nspectrum. In addition, if you are viewing data for a subset, the table
\nwill show the differences between the currently selected subset and the
\nother related subsets to make comparison easy (the differences for the
\n‘Used by x% of users’ filter are simply one subset minus the other, the
\ndifferences for the ‘Clicks per user’ filter are in percentage change).<\/p>\n

We’ll discuss results more thoroughly in future blog posts, here are a
\nfew findings that immediately jumped out to us. As always, these
\nfindings apply to our sample of Test Pilot users only, and we realize
\nthis sample is not likely representative of the population of Firefox
\nusers as a whole. Furthermore, its important to remember that usage data
\nlike this is only one part of a rigorous design process, and that it
\nalone will not dictate any design decisions.<\/p>\n