1. Keep It Simple<\/h2>\n![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/loom-2.jpg?w=900\")
<\/div>\nIt all comes back to this classic phrase in design theory: Keep It Simple, Stupid (or Silly, if you prefer).<\/p>\n
Website button design is no different. A button design doesn\u2019t have to be overly complex. It should be obvious and functional. Sometimes other design trends can get in the way of this, and that can impact conversions on your website.<\/p>\n
So, when it comes to button design, think like this \u2013 and don\u2019t overthink it. A button should look like a button. It\u2019s that simple.<\/p>\n
2. Provide Plenty of Contrast<\/h2>\n![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/anna.jpg?w=900\")
<\/div>\nAlmost as important as having an identifiable button is making sure that it is easy to see.<\/p>\n
The reason ghost button styles on top of images trended and faded quickly are because the buttons did not have enough contrast to be easily discernable. Users could not find them right away.<\/p>\n
Don\u2019t hide buttons with poor contrast. Make them stand out and shout with plenty of color and space contrast so that they stand apart from other elements on the screen. Leave plenty of padding around buttons so that they can breathe.<\/p>\n
This makes buttons easier for users to find and identify as clickable elements as well as makes them physically easier to click without getting the wrong element by mistake.<\/p>\n
3. Use Color<\/h2>\n![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/helm.jpg?w=900\")
<\/div>\nHave you ever noticed how many buttons are red or orange? It\u2019s because bright colors draw the eye to these elements and encourage action.<\/p>\n
Using color is also a pretty trendy design technique. From bright colors to buttons with simple gradients, the color might be one of the easier ways to help people interact with the design.<\/p>\n
4. Write Microcopy That Creates Expectation<\/h2>\n![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/volk.jpg?w=900\")
<\/div>\nDon\u2019t make this mistake: A button with the words \u201cClick Here\u201d on it. (How spammy is that?)<\/p>\n
The microcopy within a button design should create a clear expectation of what will happen with a click. Tell users what they will get next. This might be as simple as \u201cSubmit\u201d to enter data, or clicking a link to \u201cLearn more,\u201d or watching a video. Regardless of what the action is, tell users in the microcopy.<\/p>\n
This information can help create trust with users and increase conversions with actions\/interactions that users find desirable.<\/p>\n
5. Engage with Subtle Animation<\/h2>\n![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/cognito.jpg?w=900\")
<\/div>\nThere is a trend in button design where websites use two buttons side-by-side. One is filled, one is a ghost style. Both include a hover animation that further emphasizes two clickable choices.<\/p>\n
Animation can help bring attention to buttons and even encourages clicks. It\u2019s become a commonly accepted user pattern to include a hover animation on buttons and provides a simple cue to users that they should engage.<\/p>\n
Just don\u2019t go overboard. Swirling, spinning, flashing buttons are more annoying than helpful.<\/p>\n
6. Make It Big Enough to Tap<\/h2>\n![\"ui](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/kittycat.jpg?w=900\")
<\/div>\nButtons should include a clickable (tappable) area that is a least 10 millimeters in diameter, and larger is always OK. This advice comes from a study by the MIT Touch Lab<\/a> that looked a finger pad sizes in relationship to touch devices.<\/p>\nLet\u2019s put that in perspective. The typical key on a physical computer keyboard is 15 millimeters by 15 millimeters. That\u2019s a good goal. (Just don\u2019t forget to account for different screen sizes so that your button doesn\u2019t get lost on small screens.)<\/p>\n
If you do need to use smaller buttons, consider adding a wide click radius to it. That way if the user misses the buttons itself, there\u2019s enough room around it so that the desired action still happens. (Your website visitors will thank you.)<\/p>\n
7. Use a Familiar Style<\/h2>\n![\"ui](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/sugat.jpg?w=900\")
<\/div>\nThere are a few general button styles that everyone is familiar with. Use one of them.<\/p>\n
\n- A rectangular filled button with square edges and text inside<\/li>\n
- A rectangular filled button with rounded edges and text inside<\/li>\n
- A rectangular filled button with a visible drop shadow (above)<\/li>\n
- A rectangular ghost button<\/li>\n
- Simple circle buttons, most commonly used in the bottom right corner to denote support, help, or chat<\/li>\n<\/ul>\n
8. Put in an Expected Location<\/h2>\n![\"ui](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/222-1.jpg?w=900\")
<\/div>\nNot only do buttons need to appear and function expectedly, they also need to be located in a place that users will look for them.<\/p>\n
\n- For homepages, this includes button placement below a main headline or block of text. Buttons are generally left aligned with the text or in the center of the screen.<\/li>\n
- For forms, buttons appear after inputs. Some single input forms align the button on the same row to the right of the input.<\/li>\n
- General CTA buttons appear directly below the content they reference.<\/li>\n
- Buttons to play or start a video or game are often in the center of the preview screen.<\/li>\n
- Shopping cart or ecommerce buttons are generally in the top right corner.<\/li>\n<\/ul>\n
9. Don\u2019t Forget Feedback<\/h2>\n![\"ui](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/intents.jpg?w=900\")
<\/div>\nDoes the button respond to interaction? Make sure that there\u2019s an obvious feedback loop included in the button interface design.<\/p>\n
Provide a visual or instructional cue that the button has done its job. Some buttons will require more work than others. Buttons that link to another page or website, for example, provide feedback that the button has worked if the new page loads. A form submission button might provide a \u201cthank you\u201d message on the screen if the information is submitted properly.<\/p>\n
10. Use Buttons Intentionally<\/h2>\n![\"ui](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/amram.jpg?w=900\")
<\/div>\nToo many buttons create chaos.<\/p>\n
Use buttons where they make sense. Don\u2019t overload the design with buttons all over the place. Users won\u2019t have a clear idea of where and what is most important to click.<\/p>\n
Save buttons for use with website goals. They should drive visitors to the elements that are most important in your overall design.<\/p>\n
Conclusion<\/h2>\n
A website button is an element that converts your call-to-action into a result. Take the time to think about this design, from color to function to microcopy. Test button designs to ensure that you have the most functional version in your interface.<\/p>\n
If you have a button that\u2019s working, don\u2019t fall in the trap of trends and change the design. When it comes to buttons, the function should be the top priority.<\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"Great button design is something that most website users never think about\u2026 because when it works well, it\u2019s almost invisible. The best buttons are easy to click or tap, have an obvious function, and help users interact with the design without thinking. It\u2019s a fairly simple formula, but it can be hard to design if… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-72245","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
<\/div>\nIt all comes back to this classic phrase in design theory: Keep It Simple, Stupid (or Silly, if you prefer).<\/p>\n
Website button design is no different. A button design doesn\u2019t have to be overly complex. It should be obvious and functional. Sometimes other design trends can get in the way of this, and that can impact conversions on your website.<\/p>\n
So, when it comes to button design, think like this \u2013 and don\u2019t overthink it. A button should look like a button. It\u2019s that simple.<\/p>\n
2. Provide Plenty of Contrast<\/h2>\n<\/div>\nAlmost as important as having an identifiable button is making sure that it is easy to see.<\/p>\n
The reason ghost button styles on top of images trended and faded quickly are because the buttons did not have enough contrast to be easily discernable. Users could not find them right away.<\/p>\n
Don\u2019t hide buttons with poor contrast. Make them stand out and shout with plenty of color and space contrast so that they stand apart from other elements on the screen. Leave plenty of padding around buttons so that they can breathe.<\/p>\n
This makes buttons easier for users to find and identify as clickable elements as well as makes them physically easier to click without getting the wrong element by mistake.<\/p>\n
3. Use Color<\/h2>\n<\/div>\nHave you ever noticed how many buttons are red or orange? It\u2019s because bright colors draw the eye to these elements and encourage action.<\/p>\n
Using color is also a pretty trendy design technique. From bright colors to buttons with simple gradients, the color might be one of the easier ways to help people interact with the design.<\/p>\n
4. Write Microcopy That Creates Expectation<\/h2>\n<\/div>\nDon\u2019t make this mistake: A button with the words \u201cClick Here\u201d on it. (How spammy is that?)<\/p>\n
The microcopy within a button design should create a clear expectation of what will happen with a click. Tell users what they will get next. This might be as simple as \u201cSubmit\u201d to enter data, or clicking a link to \u201cLearn more,\u201d or watching a video. Regardless of what the action is, tell users in the microcopy.<\/p>\n
This information can help create trust with users and increase conversions with actions\/interactions that users find desirable.<\/p>\n
5. Engage with Subtle Animation<\/h2>\n<\/div>\nThere is a trend in button design where websites use two buttons side-by-side. One is filled, one is a ghost style. Both include a hover animation that further emphasizes two clickable choices.<\/p>\n
Animation can help bring attention to buttons and even encourages clicks. It\u2019s become a commonly accepted user pattern to include a hover animation on buttons and provides a simple cue to users that they should engage.<\/p>\n
Just don\u2019t go overboard. Swirling, spinning, flashing buttons are more annoying than helpful.<\/p>\n
6. Make It Big Enough to Tap<\/h2>\n<\/div>\nButtons should include a clickable (tappable) area that is a least 10 millimeters in diameter, and larger is always OK. This advice comes from a study by the MIT Touch Lab<\/a> that looked a finger pad sizes in relationship to touch devices.<\/p>\nLet\u2019s put that in perspective. The typical key on a physical computer keyboard is 15 millimeters by 15 millimeters. That\u2019s a good goal. (Just don\u2019t forget to account for different screen sizes so that your button doesn\u2019t get lost on small screens.)<\/p>\n
If you do need to use smaller buttons, consider adding a wide click radius to it. That way if the user misses the buttons itself, there\u2019s enough room around it so that the desired action still happens. (Your website visitors will thank you.)<\/p>\n
7. Use a Familiar Style<\/h2>\n<\/div>\nThere are a few general button styles that everyone is familiar with. Use one of them.<\/p>\n
\n- A rectangular filled button with square edges and text inside<\/li>\n
- A rectangular filled button with rounded edges and text inside<\/li>\n
- A rectangular filled button with a visible drop shadow (above)<\/li>\n
- A rectangular ghost button<\/li>\n
- Simple circle buttons, most commonly used in the bottom right corner to denote support, help, or chat<\/li>\n<\/ul>\n
8. Put in an Expected Location<\/h2>\n<\/div>\nNot only do buttons need to appear and function expectedly, they also need to be located in a place that users will look for them.<\/p>\n
\n- For homepages, this includes button placement below a main headline or block of text. Buttons are generally left aligned with the text or in the center of the screen.<\/li>\n
- For forms, buttons appear after inputs. Some single input forms align the button on the same row to the right of the input.<\/li>\n
- General CTA buttons appear directly below the content they reference.<\/li>\n
- Buttons to play or start a video or game are often in the center of the preview screen.<\/li>\n
- Shopping cart or ecommerce buttons are generally in the top right corner.<\/li>\n<\/ul>\n
9. Don\u2019t Forget Feedback<\/h2>\n<\/div>\nDoes the button respond to interaction? Make sure that there\u2019s an obvious feedback loop included in the button interface design.<\/p>\n
Provide a visual or instructional cue that the button has done its job. Some buttons will require more work than others. Buttons that link to another page or website, for example, provide feedback that the button has worked if the new page loads. A form submission button might provide a \u201cthank you\u201d message on the screen if the information is submitted properly.<\/p>\n
10. Use Buttons Intentionally<\/h2>\n<\/div>\nToo many buttons create chaos.<\/p>\n
Use buttons where they make sense. Don\u2019t overload the design with buttons all over the place. Users won\u2019t have a clear idea of where and what is most important to click.<\/p>\n
Save buttons for use with website goals. They should drive visitors to the elements that are most important in your overall design.<\/p>\n
Conclusion<\/h2>\n
A website button is an element that converts your call-to-action into a result. Take the time to think about this design, from color to function to microcopy. Test button designs to ensure that you have the most functional version in your interface.<\/p>\n
If you have a button that\u2019s working, don\u2019t fall in the trap of trends and change the design. When it comes to buttons, the function should be the top priority.<\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"Great button design is something that most website users never think about\u2026 because when it works well, it\u2019s almost invisible. The best buttons are easy to click or tap, have an obvious function, and help users interact with the design without thinking. It\u2019s a fairly simple formula, but it can be hard to design if… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-72245","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
<\/div>\nAlmost as important as having an identifiable button is making sure that it is easy to see.<\/p>\n
The reason ghost button styles on top of images trended and faded quickly are because the buttons did not have enough contrast to be easily discernable. Users could not find them right away.<\/p>\n
Don\u2019t hide buttons with poor contrast. Make them stand out and shout with plenty of color and space contrast so that they stand apart from other elements on the screen. Leave plenty of padding around buttons so that they can breathe.<\/p>\n
This makes buttons easier for users to find and identify as clickable elements as well as makes them physically easier to click without getting the wrong element by mistake.<\/p>\n
3. Use Color<\/h2>\n<\/div>\nHave you ever noticed how many buttons are red or orange? It\u2019s because bright colors draw the eye to these elements and encourage action.<\/p>\n
Using color is also a pretty trendy design technique. From bright colors to buttons with simple gradients, the color might be one of the easier ways to help people interact with the design.<\/p>\n
4. Write Microcopy That Creates Expectation<\/h2>\n<\/div>\nDon\u2019t make this mistake: A button with the words \u201cClick Here\u201d on it. (How spammy is that?)<\/p>\n
The microcopy within a button design should create a clear expectation of what will happen with a click. Tell users what they will get next. This might be as simple as \u201cSubmit\u201d to enter data, or clicking a link to \u201cLearn more,\u201d or watching a video. Regardless of what the action is, tell users in the microcopy.<\/p>\n
This information can help create trust with users and increase conversions with actions\/interactions that users find desirable.<\/p>\n
5. Engage with Subtle Animation<\/h2>\n<\/div>\nThere is a trend in button design where websites use two buttons side-by-side. One is filled, one is a ghost style. Both include a hover animation that further emphasizes two clickable choices.<\/p>\n
Animation can help bring attention to buttons and even encourages clicks. It\u2019s become a commonly accepted user pattern to include a hover animation on buttons and provides a simple cue to users that they should engage.<\/p>\n
Just don\u2019t go overboard. Swirling, spinning, flashing buttons are more annoying than helpful.<\/p>\n
6. Make It Big Enough to Tap<\/h2>\n<\/div>\nButtons should include a clickable (tappable) area that is a least 10 millimeters in diameter, and larger is always OK. This advice comes from a study by the MIT Touch Lab<\/a> that looked a finger pad sizes in relationship to touch devices.<\/p>\nLet\u2019s put that in perspective. The typical key on a physical computer keyboard is 15 millimeters by 15 millimeters. That\u2019s a good goal. (Just don\u2019t forget to account for different screen sizes so that your button doesn\u2019t get lost on small screens.)<\/p>\n
If you do need to use smaller buttons, consider adding a wide click radius to it. That way if the user misses the buttons itself, there\u2019s enough room around it so that the desired action still happens. (Your website visitors will thank you.)<\/p>\n
7. Use a Familiar Style<\/h2>\n<\/div>\nThere are a few general button styles that everyone is familiar with. Use one of them.<\/p>\n
\n- A rectangular filled button with square edges and text inside<\/li>\n
- A rectangular filled button with rounded edges and text inside<\/li>\n
- A rectangular filled button with a visible drop shadow (above)<\/li>\n
- A rectangular ghost button<\/li>\n
- Simple circle buttons, most commonly used in the bottom right corner to denote support, help, or chat<\/li>\n<\/ul>\n
8. Put in an Expected Location<\/h2>\n<\/div>\nNot only do buttons need to appear and function expectedly, they also need to be located in a place that users will look for them.<\/p>\n
\n- For homepages, this includes button placement below a main headline or block of text. Buttons are generally left aligned with the text or in the center of the screen.<\/li>\n
- For forms, buttons appear after inputs. Some single input forms align the button on the same row to the right of the input.<\/li>\n
- General CTA buttons appear directly below the content they reference.<\/li>\n
- Buttons to play or start a video or game are often in the center of the preview screen.<\/li>\n
- Shopping cart or ecommerce buttons are generally in the top right corner.<\/li>\n<\/ul>\n
9. Don\u2019t Forget Feedback<\/h2>\n<\/div>\nDoes the button respond to interaction? Make sure that there\u2019s an obvious feedback loop included in the button interface design.<\/p>\n
Provide a visual or instructional cue that the button has done its job. Some buttons will require more work than others. Buttons that link to another page or website, for example, provide feedback that the button has worked if the new page loads. A form submission button might provide a \u201cthank you\u201d message on the screen if the information is submitted properly.<\/p>\n
10. Use Buttons Intentionally<\/h2>\n<\/div>\nToo many buttons create chaos.<\/p>\n
Use buttons where they make sense. Don\u2019t overload the design with buttons all over the place. Users won\u2019t have a clear idea of where and what is most important to click.<\/p>\n
Save buttons for use with website goals. They should drive visitors to the elements that are most important in your overall design.<\/p>\n
Conclusion<\/h2>\n
A website button is an element that converts your call-to-action into a result. Take the time to think about this design, from color to function to microcopy. Test button designs to ensure that you have the most functional version in your interface.<\/p>\n
If you have a button that\u2019s working, don\u2019t fall in the trap of trends and change the design. When it comes to buttons, the function should be the top priority.<\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"Great button design is something that most website users never think about\u2026 because when it works well, it\u2019s almost invisible. The best buttons are easy to click or tap, have an obvious function, and help users interact with the design without thinking. It\u2019s a fairly simple formula, but it can be hard to design if… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-72245","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
<\/div>\nHave you ever noticed how many buttons are red or orange? It\u2019s because bright colors draw the eye to these elements and encourage action.<\/p>\n
Using color is also a pretty trendy design technique. From bright colors to buttons with simple gradients, the color might be one of the easier ways to help people interact with the design.<\/p>\n
4. Write Microcopy That Creates Expectation<\/h2>\n<\/div>\nDon\u2019t make this mistake: A button with the words \u201cClick Here\u201d on it. (How spammy is that?)<\/p>\n
The microcopy within a button design should create a clear expectation of what will happen with a click. Tell users what they will get next. This might be as simple as \u201cSubmit\u201d to enter data, or clicking a link to \u201cLearn more,\u201d or watching a video. Regardless of what the action is, tell users in the microcopy.<\/p>\n
This information can help create trust with users and increase conversions with actions\/interactions that users find desirable.<\/p>\n
5. Engage with Subtle Animation<\/h2>\n<\/div>\nThere is a trend in button design where websites use two buttons side-by-side. One is filled, one is a ghost style. Both include a hover animation that further emphasizes two clickable choices.<\/p>\n
Animation can help bring attention to buttons and even encourages clicks. It\u2019s become a commonly accepted user pattern to include a hover animation on buttons and provides a simple cue to users that they should engage.<\/p>\n
Just don\u2019t go overboard. Swirling, spinning, flashing buttons are more annoying than helpful.<\/p>\n
6. Make It Big Enough to Tap<\/h2>\n<\/div>\nButtons should include a clickable (tappable) area that is a least 10 millimeters in diameter, and larger is always OK. This advice comes from a study by the MIT Touch Lab<\/a> that looked a finger pad sizes in relationship to touch devices.<\/p>\nLet\u2019s put that in perspective. The typical key on a physical computer keyboard is 15 millimeters by 15 millimeters. That\u2019s a good goal. (Just don\u2019t forget to account for different screen sizes so that your button doesn\u2019t get lost on small screens.)<\/p>\n
If you do need to use smaller buttons, consider adding a wide click radius to it. That way if the user misses the buttons itself, there\u2019s enough room around it so that the desired action still happens. (Your website visitors will thank you.)<\/p>\n
7. Use a Familiar Style<\/h2>\n<\/div>\nThere are a few general button styles that everyone is familiar with. Use one of them.<\/p>\n
\n- A rectangular filled button with square edges and text inside<\/li>\n
- A rectangular filled button with rounded edges and text inside<\/li>\n
- A rectangular filled button with a visible drop shadow (above)<\/li>\n
- A rectangular ghost button<\/li>\n
- Simple circle buttons, most commonly used in the bottom right corner to denote support, help, or chat<\/li>\n<\/ul>\n
8. Put in an Expected Location<\/h2>\n<\/div>\nNot only do buttons need to appear and function expectedly, they also need to be located in a place that users will look for them.<\/p>\n
\n- For homepages, this includes button placement below a main headline or block of text. Buttons are generally left aligned with the text or in the center of the screen.<\/li>\n
- For forms, buttons appear after inputs. Some single input forms align the button on the same row to the right of the input.<\/li>\n
- General CTA buttons appear directly below the content they reference.<\/li>\n
- Buttons to play or start a video or game are often in the center of the preview screen.<\/li>\n
- Shopping cart or ecommerce buttons are generally in the top right corner.<\/li>\n<\/ul>\n
9. Don\u2019t Forget Feedback<\/h2>\n<\/div>\nDoes the button respond to interaction? Make sure that there\u2019s an obvious feedback loop included in the button interface design.<\/p>\n
Provide a visual or instructional cue that the button has done its job. Some buttons will require more work than others. Buttons that link to another page or website, for example, provide feedback that the button has worked if the new page loads. A form submission button might provide a \u201cthank you\u201d message on the screen if the information is submitted properly.<\/p>\n
10. Use Buttons Intentionally<\/h2>\n<\/div>\nToo many buttons create chaos.<\/p>\n
Use buttons where they make sense. Don\u2019t overload the design with buttons all over the place. Users won\u2019t have a clear idea of where and what is most important to click.<\/p>\n
Save buttons for use with website goals. They should drive visitors to the elements that are most important in your overall design.<\/p>\n
Conclusion<\/h2>\n
A website button is an element that converts your call-to-action into a result. Take the time to think about this design, from color to function to microcopy. Test button designs to ensure that you have the most functional version in your interface.<\/p>\n
If you have a button that\u2019s working, don\u2019t fall in the trap of trends and change the design. When it comes to buttons, the function should be the top priority.<\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"Great button design is something that most website users never think about\u2026 because when it works well, it\u2019s almost invisible. The best buttons are easy to click or tap, have an obvious function, and help users interact with the design without thinking. It\u2019s a fairly simple formula, but it can be hard to design if… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-72245","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
<\/div>\nDon\u2019t make this mistake: A button with the words \u201cClick Here\u201d on it. (How spammy is that?)<\/p>\n
The microcopy within a button design should create a clear expectation of what will happen with a click. Tell users what they will get next. This might be as simple as \u201cSubmit\u201d to enter data, or clicking a link to \u201cLearn more,\u201d or watching a video. Regardless of what the action is, tell users in the microcopy.<\/p>\n
This information can help create trust with users and increase conversions with actions\/interactions that users find desirable.<\/p>\n
5. Engage with Subtle Animation<\/h2>\n<\/div>\nThere is a trend in button design where websites use two buttons side-by-side. One is filled, one is a ghost style. Both include a hover animation that further emphasizes two clickable choices.<\/p>\n
Animation can help bring attention to buttons and even encourages clicks. It\u2019s become a commonly accepted user pattern to include a hover animation on buttons and provides a simple cue to users that they should engage.<\/p>\n
Just don\u2019t go overboard. Swirling, spinning, flashing buttons are more annoying than helpful.<\/p>\n
6. Make It Big Enough to Tap<\/h2>\n<\/div>\nButtons should include a clickable (tappable) area that is a least 10 millimeters in diameter, and larger is always OK. This advice comes from a study by the MIT Touch Lab<\/a> that looked a finger pad sizes in relationship to touch devices.<\/p>\nLet\u2019s put that in perspective. The typical key on a physical computer keyboard is 15 millimeters by 15 millimeters. That\u2019s a good goal. (Just don\u2019t forget to account for different screen sizes so that your button doesn\u2019t get lost on small screens.)<\/p>\n
If you do need to use smaller buttons, consider adding a wide click radius to it. That way if the user misses the buttons itself, there\u2019s enough room around it so that the desired action still happens. (Your website visitors will thank you.)<\/p>\n
7. Use a Familiar Style<\/h2>\n<\/div>\nThere are a few general button styles that everyone is familiar with. Use one of them.<\/p>\n
\n- A rectangular filled button with square edges and text inside<\/li>\n
- A rectangular filled button with rounded edges and text inside<\/li>\n
- A rectangular filled button with a visible drop shadow (above)<\/li>\n
- A rectangular ghost button<\/li>\n
- Simple circle buttons, most commonly used in the bottom right corner to denote support, help, or chat<\/li>\n<\/ul>\n
8. Put in an Expected Location<\/h2>\n<\/div>\nNot only do buttons need to appear and function expectedly, they also need to be located in a place that users will look for them.<\/p>\n
\n- For homepages, this includes button placement below a main headline or block of text. Buttons are generally left aligned with the text or in the center of the screen.<\/li>\n
- For forms, buttons appear after inputs. Some single input forms align the button on the same row to the right of the input.<\/li>\n
- General CTA buttons appear directly below the content they reference.<\/li>\n
- Buttons to play or start a video or game are often in the center of the preview screen.<\/li>\n
- Shopping cart or ecommerce buttons are generally in the top right corner.<\/li>\n<\/ul>\n
9. Don\u2019t Forget Feedback<\/h2>\n<\/div>\nDoes the button respond to interaction? Make sure that there\u2019s an obvious feedback loop included in the button interface design.<\/p>\n
Provide a visual or instructional cue that the button has done its job. Some buttons will require more work than others. Buttons that link to another page or website, for example, provide feedback that the button has worked if the new page loads. A form submission button might provide a \u201cthank you\u201d message on the screen if the information is submitted properly.<\/p>\n
10. Use Buttons Intentionally<\/h2>\n<\/div>\nToo many buttons create chaos.<\/p>\n
Use buttons where they make sense. Don\u2019t overload the design with buttons all over the place. Users won\u2019t have a clear idea of where and what is most important to click.<\/p>\n
Save buttons for use with website goals. They should drive visitors to the elements that are most important in your overall design.<\/p>\n
Conclusion<\/h2>\n
A website button is an element that converts your call-to-action into a result. Take the time to think about this design, from color to function to microcopy. Test button designs to ensure that you have the most functional version in your interface.<\/p>\n
If you have a button that\u2019s working, don\u2019t fall in the trap of trends and change the design. When it comes to buttons, the function should be the top priority.<\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"Great button design is something that most website users never think about\u2026 because when it works well, it\u2019s almost invisible. The best buttons are easy to click or tap, have an obvious function, and help users interact with the design without thinking. It\u2019s a fairly simple formula, but it can be hard to design if… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-72245","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
<\/div>\nThere is a trend in button design where websites use two buttons side-by-side. One is filled, one is a ghost style. Both include a hover animation that further emphasizes two clickable choices.<\/p>\n
Animation can help bring attention to buttons and even encourages clicks. It\u2019s become a commonly accepted user pattern to include a hover animation on buttons and provides a simple cue to users that they should engage.<\/p>\n
Just don\u2019t go overboard. Swirling, spinning, flashing buttons are more annoying than helpful.<\/p>\n
6. Make It Big Enough to Tap<\/h2>\n<\/div>\nButtons should include a clickable (tappable) area that is a least 10 millimeters in diameter, and larger is always OK. This advice comes from a study by the MIT Touch Lab<\/a> that looked a finger pad sizes in relationship to touch devices.<\/p>\nLet\u2019s put that in perspective. The typical key on a physical computer keyboard is 15 millimeters by 15 millimeters. That\u2019s a good goal. (Just don\u2019t forget to account for different screen sizes so that your button doesn\u2019t get lost on small screens.)<\/p>\n
If you do need to use smaller buttons, consider adding a wide click radius to it. That way if the user misses the buttons itself, there\u2019s enough room around it so that the desired action still happens. (Your website visitors will thank you.)<\/p>\n
7. Use a Familiar Style<\/h2>\n<\/div>\nThere are a few general button styles that everyone is familiar with. Use one of them.<\/p>\n
\n- A rectangular filled button with square edges and text inside<\/li>\n
- A rectangular filled button with rounded edges and text inside<\/li>\n
- A rectangular filled button with a visible drop shadow (above)<\/li>\n
- A rectangular ghost button<\/li>\n
- Simple circle buttons, most commonly used in the bottom right corner to denote support, help, or chat<\/li>\n<\/ul>\n
8. Put in an Expected Location<\/h2>\n<\/div>\nNot only do buttons need to appear and function expectedly, they also need to be located in a place that users will look for them.<\/p>\n
\n- For homepages, this includes button placement below a main headline or block of text. Buttons are generally left aligned with the text or in the center of the screen.<\/li>\n
- For forms, buttons appear after inputs. Some single input forms align the button on the same row to the right of the input.<\/li>\n
- General CTA buttons appear directly below the content they reference.<\/li>\n
- Buttons to play or start a video or game are often in the center of the preview screen.<\/li>\n
- Shopping cart or ecommerce buttons are generally in the top right corner.<\/li>\n<\/ul>\n
9. Don\u2019t Forget Feedback<\/h2>\n<\/div>\nDoes the button respond to interaction? Make sure that there\u2019s an obvious feedback loop included in the button interface design.<\/p>\n
Provide a visual or instructional cue that the button has done its job. Some buttons will require more work than others. Buttons that link to another page or website, for example, provide feedback that the button has worked if the new page loads. A form submission button might provide a \u201cthank you\u201d message on the screen if the information is submitted properly.<\/p>\n
10. Use Buttons Intentionally<\/h2>\n<\/div>\nToo many buttons create chaos.<\/p>\n
Use buttons where they make sense. Don\u2019t overload the design with buttons all over the place. Users won\u2019t have a clear idea of where and what is most important to click.<\/p>\n
Save buttons for use with website goals. They should drive visitors to the elements that are most important in your overall design.<\/p>\n
Conclusion<\/h2>\n
A website button is an element that converts your call-to-action into a result. Take the time to think about this design, from color to function to microcopy. Test button designs to ensure that you have the most functional version in your interface.<\/p>\n
If you have a button that\u2019s working, don\u2019t fall in the trap of trends and change the design. When it comes to buttons, the function should be the top priority.<\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"Great button design is something that most website users never think about\u2026 because when it works well, it\u2019s almost invisible. The best buttons are easy to click or tap, have an obvious function, and help users interact with the design without thinking. It\u2019s a fairly simple formula, but it can be hard to design if… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-72245","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
<\/div>\nButtons should include a clickable (tappable) area that is a least 10 millimeters in diameter, and larger is always OK. This advice comes from a study by the MIT Touch Lab<\/a> that looked a finger pad sizes in relationship to touch devices.<\/p>\n Let\u2019s put that in perspective. The typical key on a physical computer keyboard is 15 millimeters by 15 millimeters. That\u2019s a good goal. (Just don\u2019t forget to account for different screen sizes so that your button doesn\u2019t get lost on small screens.)<\/p>\n If you do need to use smaller buttons, consider adding a wide click radius to it. That way if the user misses the buttons itself, there\u2019s enough room around it so that the desired action still happens. (Your website visitors will thank you.)<\/p>\n There are a few general button styles that everyone is familiar with. Use one of them.<\/p>\n Not only do buttons need to appear and function expectedly, they also need to be located in a place that users will look for them.<\/p>\n Does the button respond to interaction? Make sure that there\u2019s an obvious feedback loop included in the button interface design.<\/p>\n Provide a visual or instructional cue that the button has done its job. Some buttons will require more work than others. Buttons that link to another page or website, for example, provide feedback that the button has worked if the new page loads. A form submission button might provide a \u201cthank you\u201d message on the screen if the information is submitted properly.<\/p>\n Too many buttons create chaos.<\/p>\n Use buttons where they make sense. Don\u2019t overload the design with buttons all over the place. Users won\u2019t have a clear idea of where and what is most important to click.<\/p>\n Save buttons for use with website goals. They should drive visitors to the elements that are most important in your overall design.<\/p>\n A website button is an element that converts your call-to-action into a result. Take the time to think about this design, from color to function to microcopy. Test button designs to ensure that you have the most functional version in your interface.<\/p>\n If you have a button that\u2019s working, don\u2019t fall in the trap of trends and change the design. When it comes to buttons, the function should be the top priority.<\/p>\n Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":" Great button design is something that most website users never think about\u2026 because when it works well, it\u2019s almost invisible. The best buttons are easy to click or tap, have an obvious function, and help users interact with the design without thinking. It\u2019s a fairly simple formula, but it can be hard to design if… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-72245","post","type-post","status-publish","format-standard","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t7. Use a Familiar Style<\/h2>\n
<\/div>\n\n
8. Put in an Expected Location<\/h2>\n
<\/div>\n\n
9. Don\u2019t Forget Feedback<\/h2>\n
<\/div>\n10. Use Buttons Intentionally<\/h2>\n
<\/div>\nConclusion<\/h2>\n