Clicktracking: Putting the heat to the map

Heat Map Image from Clicktale

There are several ways to determine if the design of a website meets your pre-determined goals. One of the ways to determine this is with Clicktracking, similarly grouped with Clickmapping. With a small amount of Javascript placed into your website, you will have the ability to find out where on your site visitors are drawn, what they click on, and where they spend the most time. Doing so offers the web owner/designer the ability to make changes that might bring about positive change in terms of increased traffic, and/or sales, or positive user interaction.

Indirect assessment with Clicktracking is a component of a User Research method named Quantitative Analysis, which is typically derived from mathematical analysis, since the instrument of data collection (e.g., survey tool or web-server log) captures such large amounts of data that are easily coded numerically (Rohrer, 2014). In conjuction with Clicktracking, Heat Maps provide a means to visually understand how the data is collected and most often presents the findings in a high-contrast graph pointing out instances with a spectrum of colors where bright white and bright red relates to most viewed or clicked and blues and violets relating to least viewed or clicked. As the number of visitors clicks increases, the graph increases the size of bright areas along the top of the color spectrum and morphs the darker colors into brighter ones, increasing the size of those as clicks increase.

This mapping feature takes place by activating a control that triggers the system to perform a function, in this case, a relationship occurs between a control and its effects (Matz, 2012). By recording what users do with their mouse or trackpad, UX experts can quantify the data and identify potential issues and offer suggestions to improve site usability.

“Heat maps are great for analyzing the behavior of your visitors.”

Heat mapping has been around the web since the mid-1990s but is not without it’s share of issues. Although, mapping with the use of a mouse generates data from actual visitors, accuracy of this mapping is not always accurate (Sonberg, 2017). Users might be looking over looking at items on a site that they don’t click or hover over. Likewise, they may be hovering over items that might not otherwise get attention. The mapping shows exactly where the mouse has gone but experts must infer that a user is watching the mouse as it’s moved. This is the reason that heat maps from eye-tracking software is a bit more respected in the field.

Unfortunately, quantitative studies with eye-tracking software is not inexpensive. In fact, quantitative research in itself is much more expensive due to the fact that more data needs to be collected. In addition, quantitative analysis is subject to bias due to the fact that experts must make inferences to what a user was thinking and must make suggestions based on this information.

Crazy_Egg Heat Map Display from Nielsen Norman Group

All in all, businesses that conduct quantitative research through indirect clicktracking are in for a treat. Often, analyzing the behavior of the visitors leads to insights not often found using other methods. Also, visuals provided by the heat maps communicate information in a direct manner. Although, inferences need to be made, most often the amount of data collected will draw a sharp eye to the points most drawn out by users. For businesses that find themselves lacking visitor follow throughs, clicktracking might lead them to the most obvious problem and a clear way to bring about change.

Matz, K. 2012. Donald Norman’s design principles for usability. Architecting Usability: a blog exploring User Experience design. Retrieved from: http://architectingusability.com/2012/06/28/donald-normans-design-principles-for-usability/

Rohrer, C. 2014. When to Use Which User-Experience Research Methods. Nielsen Norman Group. Retrieved from: https://www.nngroup.com/articles/which-ux-research-methods/

Sonberg, J. 2017. 19 Things We Can Learn From Numerous Heatmap Tests. ConversionXL. Retrieved from: https://conversionxl.com/blog/19-things-we-can-learn-from-numerous-heatmap-tests/

Design Critique: LingoDeer (Android App)

LingoDeer

Introduction

Designed by a team of language teachers, LingoDeer is a free mobile app that offers to teach three Asian languages (Korean, Japanese, and Mandarin Chinese) by way of reading, listening, speaking, and writing lessons. Although the app offers the same structure and layout of lessons for all three languages, I will focus on the Chinese language.

Finding Your Way Around

When LingoDeer is opened, an arm waving cartoon deer with glasses greets the user. Eventually, the guest will arrive at the LingoDeer home screen displayed with the application’s name. The navigation bar at the bottom of the screen offers clues of grayed-out ‘Review’ and ‘Me’ icons with text to signal that there are more sections to the app other than the highlighted ‘Learn’ section where the user currently appears.

Lesson Blocks

In the center of the screen, the user is confronted by several blocks that contain lessons alternately positioned upon a white background separated by an amber-colored border. One block seems to disappear off the top of the screen. The partial block allows for the discoverability of more lessons by scrolling, pulling the screen down offering the natural mapped area above. The only ‘clickable’ areas on the screen physically constrain the user from proceeding to advanced lessons until he/she tests out of beginning lessons.

Lession Sessions

Each lesson page offers four illustrated image blocks captioned with a Chinese character that represents each image below each block. The page asks the user to choose a block indicated by the phrase at the top of the page. Directly after, a ‘Check’ text in a navigation bar becomes highlighted and signifies that the user can now click the text to find out if the correct answer was chosen.

Constraints

After the initial lesson, the user is asked to test what he’s learned and a ‘Drag it to the right place’ page follows the initial lessons. Users are asked to Drag the highlighted block of text to a position in the sentence already created above. It’s up to the user to figure out the constraints of dragging the block to the correct position. When the block becomes close to the above sentence a grayed-out area becomes visible and only then offers a signifier to the user of a possible block location. Again, after choosing a section, the ‘Check’ text is highlighted offering the ability to check for the right answer.

Advanced

An advanced set of tests take away the ‘Drag it to the right place’ phrase and simply let the user create a sentence with a group of jumbled characters. This test is more difficult because extra characters that won’t be used are added to the group.

Immediate Feedback

With each click, a voice speaks the word or phrase chosen. Lesson testing is also backed up with imagery. With a correct answer, the glasses-wearing deer appears with a positive sign (thumbs up or check mark) with text (Awesome, Excellent, or Bravo) followed by a green background. The action is accompanied with the noise of a cash register that received money (Ka-Ching!).

But with an incorrect answer, the deer appears to be crying profusely, a red background appears and the sound of a whistle plays which seems to express that someone has gone down a slide. In either case, the user can continue but it’s clear that something has happened.

Conclusion

The app isn’t perfect as it was initially difficult to tell how to advance after choosing an answer. The feedforward is so subtle a user could simply choose the answer again or choose a difference answer. Also, dragging the answers was perceived as permanent. I didn’t know I could drag my answers to other positions in sentences. But overall my experience is a positive one. Despite LingoDeer’s odd name, the app provides an ease of discoverability and clear signifiers, the free app provides immediate feedback and contains no ads. It’s great for quick learning and can be used offline as well.