{"id":10903,"date":"2022-02-22T08:30:31","date_gmt":"2022-02-22T14:30:31","guid":{"rendered":"https:\/\/www.webii.net\/blog\/?p=10903"},"modified":"2022-07-18T13:30:42","modified_gmt":"2022-07-18T18:30:42","slug":"designing-buttons-for-good-ux","status":"publish","type":"post","link":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/","title":{"rendered":"Best Practices When Designing Buttons for Good UX"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Although user interface (UI) and user experience (UX) are oftentimes used interchangeably, they are different things. UI is actually a subset of UX. With UI, the focus is on the looks and functions of a design element. Alternatively, with UX, <\/span><a href=\"https:\/\/www.webii.net\/website-services\/web-design\/\"><span style=\"font-weight: 400;\">web designers<\/span><\/a><span style=\"font-weight: 400;\"> are concerned with the full integration process to create conditions that ensure that users have a positive impression of an element. This is an ongoing process because consumer feedback is going to inevitably change over time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">UX designers focus on usability, <\/span><a href=\"https:\/\/www.webii.net\/blog\/2021\/11\/accessible-mobile-design-is-good-design-for-everyone\/\"><span style=\"font-weight: 400;\">accessibility<\/span><\/a><span style=\"font-weight: 400;\">, and desirability. A big part of this is buttons, which can be found on pretty much any website out there. The goal of them is to make a user take an action, with that action being a single tap. Buttons should be located throughout your site so that, no matter which web page someone lands on, they will be encouraged to complete that action. Let\u2019s give you some more insight into the necessity of having <\/span><span style=\"font-weight: 400;\">buttons for good UX.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Where Are Buttons Expected to Be Placed on Your Site?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Users will already have an idea in their head of where buttons should be located. Because of this, you need to stay in accordance with standard UI patterns. This will enhance the discoverability of your buttons. Here are some places they should go.<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Top:<\/b><span style=\"font-weight: 400;\"> Place a primary call-to-action beneath the heading to pitch a sale, and a secondary one to provide access to more services.<\/span><\/li>\n<li aria-level=\"1\"><b>Middle:<\/b><span style=\"font-weight: 400;\"> This is the perfect space for secondary CTAs, such as \u201cJoin Our Newsletter,\u201d to promote other sections of your website or your marketing efforts.<\/span><\/li>\n<li aria-level=\"1\"><b>Bottom:<\/b><span style=\"font-weight: 400;\"> Continue to recommend users to get started with your offers through the use of a primary <\/span><span style=\"font-weight: 400;\">button for UX<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li aria-level=\"1\"><b>Footer:<\/b><span style=\"font-weight: 400;\"> Add buttons for the social media platforms that you use, including their extremely memorable logos instead of words.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">How Do You Know What to Write to Make Them Effective?<\/span><\/h2>\n<p><a href=\"https:\/\/www.webii.net\/blog\/2021\/05\/3-tips-for-increasing-your-site-traffic-through-mobile-ux-optimization\/\"><span style=\"font-weight: 400;\">Think simple<\/span><\/a><span style=\"font-weight: 400;\">! You don\u2019t need entire walls of text to explain to someone why they should be able to interact with your <\/span><span style=\"font-weight: 400;\">buttons for good UX<\/span><span style=\"font-weight: 400;\">. Instead, they should know at a single glance where they are headed next if they do click them. For this reason, use actionable, task-specific words to avoid confusion. These may include \u201cBrowse Services,\u201d \u201cAdd to Cart,\u201d or \u201cSubmit.\u201d Doing this means that you are using calls-to-action, which are written directives that prompt an immediate response from the user.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Your <\/span><span style=\"font-weight: 400;\">Buttons<\/span><span style=\"font-weight: 400;\"> Must Be Accessible for All Audiences, But Are They?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Make sure that you are using the right contrast ratio on your buttons. This is how much the text stands out against the background, and is important because it determines legibility. You also need to display the right sizes for desktop and mobile. Users with visual impairments should be able to increase the font size in their browser without having elements cut off. The <\/span><a href=\"https:\/\/www.w3.org\/WAI\/GL\/UNDERSTANDING-WCAG20\/visual-audio-contrast-contrast.html\"><span style=\"font-weight: 400;\">World Wide Web Consortium<\/span><\/a><span style=\"font-weight: 400;\"> (W3C), whose mission is to make the internet an accessible place for everyone, says that there are particular criteria that websites must follow. It comes down to the four standards of being operable, perceivable, robust, and understandable.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-10906 size-large lazyload\" data-src=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-2-1024x819.jpg\" alt=\"UX Buttons 2\" width=\"1024\" height=\"819\" data-srcset=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-2-1024x819.jpg 1024w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-2-300x240.jpg 300w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-2-768x614.jpg 768w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-2-1536x1229.jpg 1536w, https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-2.jpg 2000w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/819;\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">What Interactive Design Should They Have to Up Your UX Game?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">First of all, users need to recognize that your <\/span><span style=\"font-weight: 400;\">button<\/span><span style=\"font-weight: 400;\"> is, in fact, a button. And you shouldn\u2019t have elements on your web pages that look like buttons that aren\u2019t. Upon interacting with them, users want to receive instant visual feedback. This is why there are design options like the hover effect. When a cursor is over the top of a button, the color changes. It is one of the most used CSS effects in web design, and benefits you because it increases the chance of receiving clicks. At the end of the day, it isn\u2019t just a matter of whether the button links users to where you want to link them.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How Can You Differentiate Primary and Secondary <\/span><span style=\"font-weight: 400;\">Buttons for Good UX<\/span><span style=\"font-weight: 400;\">?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Primary buttons require the most attention from your users. After all, they accomplish the most important goal on the page. So, you only need one. For example, when you go on a social media platform, such as <a href=\"https:\/\/twitter.com\/webiinet\">Twitter<\/a>, you are currently given four prompts. The first two are to sign up with Google or Apple, the third is to sign up by phone or email, and the last is to sign in if you already have an account. The only button that is blue is the third one, while the others are white. This difference in color visually indicates that it is the primary button for good UX<\/span><span style=\"font-weight: 400;\">, meaning Twitter wants people to make an account this way.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Our team at WEBii wants to help you have a responsive web design that is both beautiful and functional for all devices. In part, this means creating attention-grabbing <\/span><span style=\"font-weight: 400;\">buttons<\/span><span style=\"font-weight: 400;\"> that drive your users in the direction you want. Come <\/span><a href=\"https:\/\/www.webii.net\/contact-us\/\"><span style=\"font-weight: 400;\">chat with us<\/span><\/a><span style=\"font-weight: 400;\"> to start customizing a solution that fits your business\u2019s needs.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although user interface (UI) and user experience (UX) are oftentimes used interchangeably, they are different things. UI is actually a subset of UX. With UI, the focus is on the looks and functions of a design element. Alternatively, with UX, web designers are concerned with the full integration process to create conditions that ensure that [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":10905,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[329,509,3,407,300],"tags":[],"class_list":["post-10903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-web-design","category-responsive-web-design","category-web-design","category-website-usability","category-www-learning-center"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Best Practices When Designing Buttons for Good UX - WEBii<\/title>\n<meta name=\"description\" content=\"Every website needs buttons for UX so that visitors can clearly see where to go next. We answer the questions you may have about buttons.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Practices When Designing Buttons for Good UX\" \/>\n<meta property=\"og:description\" content=\"Every website needs buttons for UX so that visitors can clearly see where to go next. We answer the questions you may have about buttons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Marketing &amp; Web Development Company Blog - WEBii\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-22T14:30:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-18T18:30:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Megan Marshall\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Megan Marshall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/\"},\"author\":{\"name\":\"Megan Marshall\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/13e6130fbedfea692719a26e0641fe00\"},\"headline\":\"Best Practices When Designing Buttons for Good UX\",\"datePublished\":\"2022-02-22T14:30:31+00:00\",\"dateModified\":\"2022-07-18T18:30:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/\"},\"wordCount\":833,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/UX-Buttons-1.jpg\",\"articleSection\":[\"Mobile Web Design\",\"Responsive Web Design\",\"Web Design\",\"Website Usability\",\"WWW Learning Center\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/\",\"name\":\"Best Practices When Designing Buttons for Good UX - WEBii\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/UX-Buttons-1.jpg\",\"datePublished\":\"2022-02-22T14:30:31+00:00\",\"dateModified\":\"2022-07-18T18:30:42+00:00\",\"description\":\"Every website needs buttons for UX so that visitors can clearly see where to go next. We answer the questions you may have about buttons.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/UX-Buttons-1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/UX-Buttons-1.jpg\",\"width\":2000,\"height\":1600,\"caption\":\"Illustrations provided by Canva.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/designing-buttons-for-good-ux\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WWW Learning Center\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/category\\\/www-learning-center\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Best Practices When Designing Buttons for Good UX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"name\":\"Web Marketing &amp; Web Development Company Blog - WEBii\",\"description\":\"web design . web development . seo . marketing . web hosting . + more\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\",\"name\":\"WEBii\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"width\":1200,\"height\":598,\"caption\":\"WEBii\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/13e6130fbedfea692719a26e0641fe00\",\"name\":\"Megan Marshall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/949\\\/9499f2156bca3e854008e190a0246c96x96.jpg\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/949\\\/9499f2156bca3e854008e190a0246c96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/949\\\/9499f2156bca3e854008e190a0246c96x96.jpg\",\"caption\":\"Megan Marshall\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Practices When Designing Buttons for Good UX - WEBii","description":"Every website needs buttons for UX so that visitors can clearly see where to go next. We answer the questions you may have about buttons.","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:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/","og_locale":"en_US","og_type":"article","og_title":"Best Practices When Designing Buttons for Good UX","og_description":"Every website needs buttons for UX so that visitors can clearly see where to go next. We answer the questions you may have about buttons.","og_url":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/","og_site_name":"Web Marketing &amp; Web Development Company Blog - WEBii","article_published_time":"2022-02-22T14:30:31+00:00","article_modified_time":"2022-07-18T18:30:42+00:00","og_image":[{"width":2000,"height":1600,"url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-1.jpg","type":"image\/jpeg"}],"author":"Megan Marshall","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Megan Marshall","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#article","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/"},"author":{"name":"Megan Marshall","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/13e6130fbedfea692719a26e0641fe00"},"headline":"Best Practices When Designing Buttons for Good UX","datePublished":"2022-02-22T14:30:31+00:00","dateModified":"2022-07-18T18:30:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/"},"wordCount":833,"commentCount":0,"publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-1.jpg","articleSection":["Mobile Web Design","Responsive Web Design","Web Design","Website Usability","WWW Learning Center"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/","url":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/","name":"Best Practices When Designing Buttons for Good UX - WEBii","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#primaryimage"},"image":{"@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-1.jpg","datePublished":"2022-02-22T14:30:31+00:00","dateModified":"2022-07-18T18:30:42+00:00","description":"Every website needs buttons for UX so that visitors can clearly see where to go next. We answer the questions you may have about buttons.","breadcrumb":{"@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#primaryimage","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-1.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2022\/01\/UX-Buttons-1.jpg","width":2000,"height":1600,"caption":"Illustrations provided by Canva.com"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webii.net\/blog\/designing-buttons-for-good-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webii.net\/blog\/"},{"@type":"ListItem","position":2,"name":"WWW Learning Center","item":"https:\/\/www.webii.net\/blog\/category\/www-learning-center\/"},{"@type":"ListItem","position":3,"name":"Best Practices When Designing Buttons for Good UX"}]},{"@type":"WebSite","@id":"https:\/\/www.webii.net\/blog\/#website","url":"https:\/\/www.webii.net\/blog\/","name":"Web Marketing &amp; Web Development Company Blog - WEBii","description":"web design . web development . seo . marketing . web hosting . + more","publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webii.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webii.net\/blog\/#organization","name":"WEBii","url":"https:\/\/www.webii.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","width":1200,"height":598,"caption":"WEBii"},"image":{"@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/13e6130fbedfea692719a26e0641fe00","name":"Megan Marshall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/949\/9499f2156bca3e854008e190a0246c96x96.jpg","url":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/949\/9499f2156bca3e854008e190a0246c96x96.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/949\/9499f2156bca3e854008e190a0246c96x96.jpg","caption":"Megan Marshall"}}]}},"_links":{"self":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/10903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/comments?post=10903"}],"version-history":[{"count":0,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/10903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media\/10905"}],"wp:attachment":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media?parent=10903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/categories?post=10903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/tags?post=10903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}