{"id":65,"date":"2022-03-02T07:01:09","date_gmt":"2022-03-02T07:01:09","guid":{"rendered":"https:\/\/vwo.com\/glossary\/click-area\/"},"modified":"2025-02-20T09:40:10","modified_gmt":"2025-02-20T09:40:10","slug":"click-area","status":"publish","type":"post","link":"https:\/\/vwo.com\/glossary\/click-area\/","title":{"rendered":"Click Area"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>What is click area?<\/strong><\/h2>\n\n\n\n<p>Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.<\/p>\n\n\n\n<p>Providing an adequate size to these click areas is critical for easy use of any interface. The click areas should be designed to be functional, easy, and accurate to make it easy for the user to click or tap them.<\/p>\n\n\n\n<p>A small click area may probably make users work harder than they need to. Hence, the click area should be optimized according to the device.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"445\" height=\"512\" data-id=\"905\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg\" alt=\"VWO Clickable area\" class=\"wp-image-905\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg 445w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg?tr=w-375 375w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Problematic small click areas<\/strong><\/h2>\n\n\n\n<p>Having smaller or inappropriate click areas around buttons or links can be quite frustrating due to the following reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Clicking on small things is a lot of work as it requires accurate mouse movements or precise finger touches. Users don\u2019t need such annoyances to use even the basic features.<\/li><li>It can make the design of the page or app look unappealing.<\/li><li>Users do not want to pay attention to details while clicking buttons. In the case of small areas, they have to hover over the button to see what action will take place.<\/li><\/ul>\n\n\n\n<p>Below are some examples of small click areas:<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"133\" data-id=\"913\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/webpronews-click.jpeg\" alt=\"Webpronews (small click area)\" class=\"wp-image-913\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/webpronews-click.jpeg 680w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/webpronews-click.jpeg?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/webpronews-click.jpeg?tr=w-375 375w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption\"><span id=\"docs-internal-guid-962f14df-7fff-fe09-afb1-87a67dd6750e\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;background-color: transparent;vertical-align: baseline\">Image source: <\/span><a href=\"https:\/\/www.impressivewebs.com\/defining-click-area\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;background-color: transparent;vertical-align: baseline\">impressivewebs<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/nostarch-click.jpeg\" alt=\"Nostarch (small click area)\" class=\"wp-image-914\" width=\"837\" height=\"249\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/nostarch-click.jpeg?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/nostarch-click.jpeg?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/nostarch-click.jpeg?tr=w-375 375w\" sizes=\"(max-width: 837px) 100vw, 837px\" \/><figcaption>Image source: <a href=\"https:\/\/www.impressivewebs.com\/defining-click-area\/\" target=\"_blank\" rel=\"noreferrer noopener\">impressivewebs<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Some tips to fix the click areas<\/strong><\/h2>\n\n\n\n<p>To provide the users with an interactive user experience, the below tips should be kept in mind while designing the touch elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Navigation of any page or app can be improved by expanding the area around the buttons and links and filling the white space around.<\/li><li>A basic user-centred design is to create a touch target with the user\u2019s physical dimensions in mind. A past <a href=\"https:\/\/www.nngroup.com\/articles\/touch-target-size\/\" target=\"_blank\" rel=\"noreferrer noopener\">study by the MIT Touch Lab<\/a> established that the average person\u2019s fingertips are 1.6\u2013 2cm (0.6\u00ad\u00ad\u20130.8 in) wide. The thumb has a large impact area \u2014 an average of 2.5cm (1 inch) wide!<\/li><li>Keep the spacing between links and buttons appropriate.<\/li><li>Maintain the view-tap asymmetry: This occurs when clickable elements are large enough to be seen but too small to select.&nbsp;<\/li><li>Keep the audience in mind while designing the elements.<\/li><li>Conduct usability tests to determine if touch targets are large enough and effective. Adhering to guidelines is a good first step, but getting real user feedback is even better.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to enhance the clickable area<\/strong><\/h2>\n\n\n\n<p>Increasing the clickable area of a link may seem like a small and meaningless task, but it enhances the usability of a website resulting in increased conversions.<\/p>\n\n\n\n<p>Read <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/target-size.html\" target=\"_blank\" rel=\"noreferrer noopener\">this article<\/a> to understand how to increase the clickable area for various elements.<\/p>\n\n\n\n<p>Designing appropriately sized touch targets is important to reduce acquisition times and errors and lessen user frustrations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.<\/p>\n","protected":false},"author":565,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Click Area | VWO<\/title>\n<meta name=\"description\" content=\"Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vwo.com\/glossary\/click-area\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Click Area | VWO\" \/>\n<meta property=\"og:description\" content=\"Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vwo.com\/glossary\/click-area\/\" \/>\n<meta property=\"og:site_name\" content=\"VWO Glossary\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-02T07:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T09:40:10+00:00\" \/>\n<meta name=\"author\" content=\"avnishsharamav\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/\"},\"author\":{\"name\":\"avnishsharamav\",\"@id\":\"https:\/\/vwo.com\/glossary\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"headline\":\"Click Area\",\"datePublished\":\"2022-03-02T07:01:09+00:00\",\"dateModified\":\"2025-02-20T09:40:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/\"},\"wordCount\":447,\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/\",\"url\":\"https:\/\/vwo.com\/glossary\/click-area\/\",\"name\":\"Click Area | VWO\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg\",\"datePublished\":\"2022-03-02T07:01:09+00:00\",\"dateModified\":\"2025-02-20T09:40:10+00:00\",\"author\":{\"@id\":\"https:\/\/vwo.com\/glossary\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"description\":\"Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.\",\"breadcrumb\":{\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vwo.com\/glossary\/click-area\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage\",\"url\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg\",\"contentUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vwo.com\/glossary\/click-area\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vwo.com\/glossary\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Click Area\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vwo.com\/glossary\/#website\",\"url\":\"https:\/\/vwo.com\/glossary\/\",\"name\":\"VWO Glossary\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vwo.com\/glossary\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/vwo.com\/glossary\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\",\"name\":\"avnishsharamav\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vwo.com\/glossary\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"caption\":\"avnishsharamav\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Click Area | VWO","description":"Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vwo.com\/glossary\/click-area\/","og_locale":"en_US","og_type":"article","og_title":"Click Area | VWO","og_description":"Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.","og_url":"https:\/\/vwo.com\/glossary\/click-area\/","og_site_name":"VWO Glossary","article_published_time":"2022-03-02T07:01:09+00:00","article_modified_time":"2025-02-20T09:40:10+00:00","author":"avnishsharamav","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vwo.com\/glossary\/click-area\/#article","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/click-area\/"},"author":{"name":"avnishsharamav","@id":"https:\/\/vwo.com\/glossary\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"headline":"Click Area","datePublished":"2022-03-02T07:01:09+00:00","dateModified":"2025-02-20T09:40:10+00:00","mainEntityOfPage":{"@id":"https:\/\/vwo.com\/glossary\/click-area\/"},"wordCount":447,"image":{"@id":"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/vwo.com\/glossary\/click-area\/","url":"https:\/\/vwo.com\/glossary\/click-area\/","name":"Click Area | VWO","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage"},"image":{"@id":"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg","datePublished":"2022-03-02T07:01:09+00:00","dateModified":"2025-02-20T09:40:10+00:00","author":{"@id":"https:\/\/vwo.com\/glossary\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"description":"Click area is the clickable or tappable part of links and buttons on websites and apps. It is the area that gets highlighted while hovering over a button or link.","breadcrumb":{"@id":"https:\/\/vwo.com\/glossary\/click-area\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vwo.com\/glossary\/click-area\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vwo.com\/glossary\/click-area\/#primaryimage","url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg","contentUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/06\/vwo.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/vwo.com\/glossary\/click-area\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vwo.com\/glossary\/"},{"@type":"ListItem","position":2,"name":"Click Area"}]},{"@type":"WebSite","@id":"https:\/\/vwo.com\/glossary\/#website","url":"https:\/\/vwo.com\/glossary\/","name":"VWO Glossary","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vwo.com\/glossary\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/vwo.com\/glossary\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044","name":"avnishsharamav","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vwo.com\/glossary\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","caption":"avnishsharamav"}}]}},"_links":{"self":[{"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/users\/565"}],"replies":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":8,"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":3324,"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/posts\/65\/revisions\/3324"}],"wp:attachment":[{"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}