It’s not always what we expect.
Motivation: people do not always use our products and software in the way that we, the designers and builders, expect. In analyzing how web apps and pages are used I wanted a quick way to determine what people are actually clicking on. We have web analytic tools that tell us total page views, link clicks, and form submissions, but is there more we should be looking for? Are they clicking where we want, in the sequence we want? And I had a hunch that users might be clicking on non-interactive elements, expecting something to happen, and experiencing more confusion than joy.
Catching all the Clicks
The first step is to capture every click on our pages, even if it’s on a non-interactive element. We should not assume that everyone recognizes our link colors and button design. Using Heap on the primary website at my company, Boardable.com, it is a matter of minutes to setup a “Click Any” event to catch every click on the site. I am a big proponent of Heap for this reason: after it has been installed it auto-captures every user interaction, even if you don’t know if you will ever need it. Months after a product change we can come back, define new events, and Heap will have all of the historical usage and analytics within seconds. In this case it is especially valuable because it will auto-capture clicks on any element in the page, regardless of interactivity. I set up the event like this, and added “Filter Results” criterion to limit to a single page (https://boardable.com/academy):
“Click Any” event definition in Heap.
This will pull up every click or tap on anything on the specified domain (boardable.com), while matching the path “/academy” to isolate for a single page. As of February 2022 this page’s design looks like this:
Going to Heap’s app again, we can setup a report that gives us all clicks on this page over the last 30 days, broken out by Target Text (what was in the button, link, or text that the person interacted with). This is the Report definition:
On my site this produces a list like the one on the right (from most frequent to least, the top 9 results shown here).
Clicking the Right Things
The first several can be seen as the primary CTAs on the page (“Board Member Academy”), indicating interaction with elements that were intended by the designers (“Meetings,” “Rollout,” and “Advanced” are below the fold). However, what is the long string starting with “Boardable Basics Quick-start …”?
It turns out a significant number of site visitors click on the header text and sub-title on the page, which are not interactive elements. It is just text and does not take the browser anywhere. However, you can quickly see why: the text style is different (especially the lighter blue subtitle), it is prominently placed, and could easily be understood as a link to more content. ‘Yes! I came here for the basics and I want a quick start, let’s go!’ This is definitely an opportunity to get visitors to something about “Boardable Basics” or a “Quick-start” guide, since visitors are already clicking on it.
As you might anticipate next, the “Video Tutorials” inverted white text header also receives a lot of clicks but is not actually a link.
Clicking None
What about non-textual interactive elements? Or visitors clicking on non-interactive, non-textual elements?
Indeed, in this report the top grouping has a Target Text value of None, accounting for 12.5% of all clicks (over a 30 day period). Heap will also provide Target ID, Tag, and Class, and in this case Tag gives the most complete view:
One third are clicking on <button> tags (good!), one third are clicking on <img> tags (many of which may not be links), and the rest are on other graphical or input elements. Considering the large number of image-based buttons on the page, we can hypothesize that visitors are engaging with those as designed.
The primary opportunity for improvement indicated here would be to ensure that every image <img> on the page is also a link (taking the visitor to the same content as the nearest CTA). For example, the large “Boardable Academy” mortarboard hat logo is non-interactive and does nothing, but it could link to the same page as the smaller Board Member Academy button next to it.
Empty Folders
A very similar discovery showed up when following the same process with Boardable’s web application (as of writing anyone with a valid email address can signup for a free trial here. Go check it out.)
Using a “Click Any” event in the app and then breaking them out by Target Text again provided some anomalous results. Fortunately, most of the list of top-50 clicked elements across the product fit with the prominent interaction points as designed by the developers. However, here is an example of an unexpected bread-crumb that lead to product insight and usability improvements.
In the list of document related content one thing people click on is not a button:
documents/folder: Savedocuments/folder: Select Filedocuments/folder: Submitdocuments/folder: This folder is emptydocuments/folder: Upload File
Four of these are clearly actions a user can take, but “This folder is empty” is not an action, it is a declarative statement. Where is it, and why or what are users expecting it to accomplish?
As of writing (February 2022), the page in question is the view of a new folder in Boardable’s Document portal:
It was a matter of a few minutes comparison with similar tools (Dropbox, Google Drive, etc.) to reveal that “this folder is empty” is commonly the drag-and-drop upload interaction element in other products. We can hypothesize that users familiar with these other tools are expecting to initiate an upload process and proceeding to select a file by clicking on the message (and, again, the visually distinct nature of that text on the page is could be a cue to interactivity, which would be misleading).
In both of these cases we were able to find these opportunities for improvement by looking at what users actually clicked on, rather than assuming users are clicking on what we want them to. I can set up funnel conversion metrics on uploading documents, or consuming “Quick-start” material, but if users are getting stuck trying to find the interactive elements I am already starting at a disadvantage.
Am I measuring the right things? I think I am 2 steps closer. And I am going to keep on searching, digging, and questioning the assumptions I can uncover, that is for sure.
Dr. Ben Smith is a Data Scientist and thinker, fascinated by the appearance of computers in our daily lives, creativity, and human struggles. He has had the privilege to think, learn, and write at the University of Illinois, the National Center for Supercomputing Applications, the Cleveland Institute of Art, Case Western Reserve U., IUPUI, and at Boardable: Board Management Software, Inc.
If you have feedback or questions please use Contact me to get in touch. I welcome thoughtful responses and constructive critique.