The size CSS at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable. Size may either be defined with a 'scalable' keyword (in this case the page will fill the available dimensions) or with absolute dimensions. HTML Button Size Button in HTML is used to submit HTML page. Understand with Example. The Tutorial illustrate an example from HTML Button size. In this Tutorial we create a HTML page, which display you HTML Button with attribute width and height specified. Here is the video tutorial of 'How to specify button size in HTML?' Color, size, placement, and other visual elements of site buttons can influence click-through and conversion rates. 3 best practices for button styling To maximize the marketing results of your website’s buttons, consider how the buttons’ design elements contribute to your WordPress.com website user experience (UX).
Tap, tap, tap! Are users able to hit your mobile buttons with high touch accuracy, or are they missing their target? Before you blame the user, check the size and spacing of your buttons.
If they don’t have an optimal size and spacing, it’s no wonder users are missing their target or hitting the wrong button. If you’re not sure what’s optimal, this article will reveal the answer. The measurements below are in CSS pixels at 96 DPI.
Button Size Standard
It’s hard to know if your buttons are optimal without a standard to go by. Luckily, research on button size and spacing has discovered a standard that works for most users, including the elderly.
The study found that users had the lowest touch accuracy on buttons that were less than 42 pixels. Buttons that were over 72 pixels also had low accuracy.
The highest accuracy was found with buttons between 42-72 pixels. This means that 42 pixels is the minimum and 72 pixels is the maximum button size that’s most optimal for users.
The most preferred button size was 60 pixels, which is about the middle of the range. The 72 pixel button produced the highest touch accuracy and was preferred by older users.
When using an array of buttons, it’s important to indicate priority. This way users know which actions will lead them to the most desired result. By following the button size standard, you can indicate priority in an effective way. No longer do you have to pick an arbitrary size and hope that it’s user-friendly.
The example demonstrates the use of the button size standard to indicate priority.
- High priority button = 72 pixels
- Medium priority button = 60 pixels
- Low priority button = 42 pixels
The buttons users use the most frequently are now easier to spot and tap. They’ll be able to tap it with a faster reaction time and higher accuracy. This is especially useful if the user’s attention is divided between different tasks.
Button Spacing Standard
When the buttons were too far apart, users moved to the touch target much slower. And when the buttons were too close together, users had the lowest touch accuracy.
The study concluded that a range of 12 to 48 pixels is the optimal button spacing. This wide range is useful because you can apply it to different button sizes. When you divide the wide range into smaller ranges, you get a button spacing standard that corresponds to the standard button sizes.
CSS Buttons - W3schools.com
- 12-24 pixels for a large button
- 24-36 pixels for a medium button
- 36-48 pixels for a small button
Cached
A larger button allows users to hit their target accurately even when their finger is slightly off target. But if they’re off target with a smaller button, they’ll miss and hit an adjacent button. This is why smaller buttons need more spacing than larger buttons.
The example shows how following the button spacing standard improves touch accuracy. The user’s finger can be slight off target and they’ll still be able to hit the button no matter what size it is.
Implications for Text Buttons
Can these standards apply to text buttons? These standards can apply to the height of text buttons, but the width will vary.
For example, a text button with the height of 60 pixels will have a larger width than a 60 pixel icon button, but it’s just as easy to tap. In fact, it’s easier to tap because the larger width requires less precision.
The button height is what matters more for accuracy. You can see that the touch accuracy of text buttons remain consistent with icon buttons.
The button spacing standard doesn’t apply to text buttons due to the larger widths. But a spacing of at least 12 pixels is good to have for visual separation.
Sizing Up Your Buttons
Do your buttons have an optimal size and spacing? Following the button size and spacing standards will guarantee that your mobile interface has high touch accuracy.
Going by your feelings to decide on proper size and spacing leaves room for uncertainty. It’s better to establish an optimal standard you can rely on. This is how design systems are formed and why many companies use them.
Think about what standards you and your company follow. If you don’t have any, establish some and you’ll be able to scale a great user experience across platforms.