Engagement

Engagement measures whether users interact with your key calls to action. It captures the first click on a page to show if your design draws attention to the right places and motivates people to take action.Use this metric when testing layouts, landing pages, or new features. It's especially helpful when comparing design variations or CTA placements where that first interaction sets the tone for what happens next.Engagement tells you if your design invites exploration or if users hesitate. It helps you build momentum by showing where people lean in and where they hold back.Interpreting the ResultsUse this key to understand what your Engagement score means and how to interpret that for your product experience:How to Calculate EngagementThe Engagement metric tracks how many participants interact with key elements on a page, helping you understand which content or offers grab the most attention.Set up questionsUse a first-click test that prompts participants to interact with a page:This test should include predefined hotspots on key areas of interest and can be distributed to your target audience using a remote testing platform.Collect dataThis is an example of what your click test data might look like on the page:Shown here is a heat map, though you may also see your responses as individual click dots on the design, or areas outlined as key hotspots.Plug data into the formulaThe Engagement score is calculated using the formula:For each hotspot, divide the number of participants who clicked in that area by the total number of respondents. You can calculate engagement by individual hotspot or use a combined score across all hotspots to reflect overall engagement with the design.Calculate the Engagement ScoreOnce you have the percentage of participants that clicked within a hotspot on the design, you can calculate the engagement score:Combined, the overall Engagement score is 56%, which falls in the Average range on a scale from Very Poor to Very Good. This indicates that just over half of participants engaged with one of the key interactive areas on the page, suggesting there may be opportunities to improve clarity or visual hierarchy.When to Use Engagement MetricsEngagement metrics allow you to measure user interaction with your product, identify friction points, and improve designs to drive meaningful actions. Here are some common use cases for using engagement metrics:Content PerformanceEngagement metrics track how users interact with content like blogs, product pages, or videos, helping you identify what resonates most and optimize for higher interaction.Redesign or Visual UpdatesMeasure how users respond to updated layouts or visual changes, ensuring that redesigns improve clarity, usability, and key interactions.New FeaturesEngagement metrics evaluate how users interact with new feature elements like CTAs or tooltips, helping you identify friction points and optimize for better adoption.How We Measured Engagement on HelloFresh’s Membership Offer Landing PageWe tested HelloFresh’s promotional landing page to understand how effectively it captured user attention and drove clicks toward key membership offers. To evaluate this, we used the Engagement metric.The SetupEngagement is calculated by measuring first-click behavior on important calls to action (CTAs) across a design. This helps reveal which content areas are drawing user attention immediately upon viewing the page.Participants are shown the experience and provided this directive:“Click where you would go first on this page.”Followed by an open response question asking them to explain why they clicked there.Responses are tallied to determine how many users engage with the intended CTAs, and those click rates are averaged into a single Engagement score.The ResultsOur first-click test on Hellofresh's member offer page produced the following results:We plugged the data into the Engagement formula to reveal the score:HelloFresh’s landing page received an Engagement score of 56%, rated Average on the Glare scaleThe Hero Offer drove the highest click-through at 36%, with Pricing Plans capturing 20%The Footer Offer received 0% of first-clicks, indicating low visibility or priority for usersParticipant responses highlighted the strong visual design of the hero area, but some mentioned missing key information further down the pageThe ImpactThe test results showed that while the hero content was doing most of the heavy lifting, lower-page offers were not effectively supporting the user journey. The Glare team recommended surfacing secondary CTAs earlier in the experience and refining layout structure to improve discoverability and boost total page engagement.SourceHelio SurveyCSVHow to Use AI to Measure EngagementUsing the first-click test outlined in the How to Calculate section above, gather responses on a survey from an audience of at least 100 respondents. We find that 100 responses is statistically significant in most markets. Once the responses are collected, download the CSV file of your data report and upload it into an AI platform along with the prompt below.Copy this AI prompt to calculate your own Engagement score, and check out the type of output it would produce:Technicals for Measuring EngagementThe code snippets below show how UX metrics can be measured using data from a survey platform. Take a peak into the development of these metrics, and even become a contributor in ourpublic repo.Data StructureThis JSON data structure outlines the scores and clicks used to measure engagement. Thescoresobject contains percentage values for clicks on different hotspot areas (primary, secondary, tertiary), whileclickstrack the individual interactions, including their coordinates and timestamps.{\n\tscores: {\n\t\ttop_1_score: 60,\n\t\ttop_2_score: 20,\n\t\ttop_3_score: 20\n\t},\n\tclicks: [\n\t\t{\n\t\tid: 1,\n\t\trelative_x: 0.5341614906832298,\n\t\trelative_y: 0.17133956386292834,\n\t\tcreated_at: \u00222018-12-13 17:54:24\u0022,\n\t\tsection_response_id: 424242,\n\t\thotspot_id: 1\n\t\t},\n\t\t....\n\t]\n\t\n}Parsing DataThenet_engagement_scoremethod in Ruby parses and calculates the engagement score based on where participants clicked. The code looks for the top 1, top 2, and top 3 hotspots, calculates how many clicks occurred in each hotspot, and then computes the engagement score by determining the percentage of clicks on each of these areas.This code dynamically parses user interaction data to generate engagement scores, which helps identify which areas of the interface attracted the most attention.class UxMetric\n\tdef net_engagement_score\n\t\ttop_1_clicks = clicks.where(top_1_hotspot: true)\n\t\ttop_2_clicks = clicks.where(top_2_hotspot: true)\n\t\ttop_3_clicks = clicks.where(top_3_hotspot: true)\n\n @scores ||= {\n\t successful_primary_score: (top_1_clicks / total_clicks) * 100,\n\t successful_secondary_score: (top_2_clicks / total_clicks) * 100,\n\t successful_tertiary_score: (top_3_clicks / total_clicks) * 100\n }\n end\nendValidationValidation ensures that the engagement question is properly structured. In this JavaScript validation, we check if the question is aClick Testtype and whether there are exactly three defined hotspots. Additionally, each hotspot should have the appropriate label (e.g., "top") and avoid branching events that move to the next section (since we want to evaluate engagement on the current page).This validation logic is critical to ensure that the engagement test is structured correctly and measures interactions with the correct hotspots on the interface.function isValidEngagementQuestion(question) {\n\tif (question.type !== 'Click' \u0026\u0026 question.hotspots.length !== 3) {\n\t\treturn false;\n\t}\n\t\n\tfor ( let i = 0 ; i \u003c question.hotspots.length; i++ ) {\n\t\tif (!question.hotspots[i].label.includes('top')) {\n\t\t\treturn false;\n\t\t}\n\t\tif (question.hotspots[i].branch_event +== 'next_section') {\n\t\t\treturn false;\n\t\t} \n\t}\n return true;\n}Score TranslationIn this section, the engagement score is translated into qualitative categories. Based on the sum of the primary, secondary, and tertiary scores, the engagement level is classified asHigh,Average, orLow. This function checks the total score and returns the appropriate qualitative description.This translation ensures that engagement scores are not only numerical but also meaningful in terms of user interaction quality. A score of 30% or higher indicates aHighlevel of engagement.function translateEngagementScore(scores) {\n\tlet {\n\t\ttop_1_score,\n\t\ttop_2_score,\n\t\ttop_3_score\n\t} = scores;\n\t\n\tlet total_scores = top_1_score + top_2_score + top_3_score;\n\t\n\tif (total_scores \u003e= 30) {\n\t\treturn 'High'\n\t}\n\telse if (total_scores \u003e= 10 \u0026\u0026 total_scores \u003c 30) {\n\t\treturn 'Avg';\n\t}\n\telse {\n\t \treturn 'Low';\n\t}\n}\nFormula for Engagement CalculationThe formula used to calculate engagement applies different weights to the primary, secondary, and tertiary CTAs (Call to Actions) based on the percentage of clicks each receives. Primary CTAs are weighted more heavily, followed by secondary and tertiary CTAs.Each level of CTA gets a weighted score, which is then summed to provide the overall engagement score.function calculateEngagementScore(promoters, detractors) {\n const nps_score = (promoters - detractors) * 100;\n return nps_score;\n}Templates & Presentation MaterialsCreate effective presentation slides, document design concepts, and implement UX Metrics with templates and resources.We've done the work to provide professional layouts that communicate to your stakeholders. UX Metric cards clearly communicate the totals, allow space for breakdowns, and styled to allow for your own brand.Visit Findings for TemplatesResourcesThe Resources section provides a collection of articles, case studies, methods, and blog posts to support your work within the UX metrics framework. These materials offer insights into best practices, research methodologies, and practical applications for improving design comprehension and usability. Whether you're refining your design process or conducting user research, these resources will help guide you towards data-informed, user-centered decisions.ArticlesAsynchronous usability tests: how to keep participants engaged?byNam PhamTo create effective asynchronous usability tests, focus on keeping participants engaged through clear, simple communication and easy-to-follow tasks. Break tasks into smaller steps and use tools that make participation seamless, ensuring you collect useful feedback.User Engagement Metrics in a nutshellbyD&IDive into three core dimensions of engagement, usage consistency (e.g., time spent, frequency), feature usage, and monetization and illustrates how analyzing metrics like “days active” against outcomes such as retention or conversion can help define meaningful engagement thresholdsUX Engagement Metrics for Digital Products and WebbyKristy SullivanThe critical role of user engagement metrics is understanding how users interact with digital products, emphasizing the need to monitor key categories such as session duration, number of sessions per user, retention rate, churn rate, and user lifetime value (LTV) for effective UX optimizationHelio MethodsGravity Score Testing (SUS)by HelioHEART Frameworkby HelioHelio Case studiesUsability Improvement for a Banking Dashboardby HelioAdvent Navigation Tree Testingby HelioIU Online’s Index Page Engagementby HelioZoho Landing Page Optimizationby HelioHelio blog postsUnlock User Engagement with Behavioral Journey MapsbyBryan ZmijewskiEffective Dashboard UI DesignIdeas byBryan ZmijewskiTake This Further with the UX Metrics AI SkillsEngagement measures how actively users are interacting with your product. TheUX Metrics AI Skillsis a package you load into your LLM so you can ask questions and get expert answers anytime.Find out which features users actually interact withSet engagement benchmarks that make sense for your productSpot the difference between engaged use and aimless clickingConnect engagement patterns to design decisionsDrop it into your LLM and start asking questions right away.