4

We're trying to incorporate a style guide which helps developers understand and build CSS across different resolutions. After reading these:

  1. https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e (Nick Babich)
  2. https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632 (8pt grid system)
  3. https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
  4. https://developer.apple.com/design/tips/
  5. Bootstrap, Foundation, iOS and Material Design guidelines

I came to a question do bigger buttons on 1920x1080 (desktop) and above improve usability and do they ruin or fit into design at the same time? Is there any standard rule/research on this topic or does it apply only to particular scenarios?

[CASE] Our case is a website for a car dealer whose main clients group is consisted of 40+ years old businessmen leasing the vehicles. On the other hand, we want to build a site that also attracts younger group so poor eyesight shouldn't be a factor. In the end, we get to the question above - does it improve the design in terms of usability or not?

(the red frame is a full HD viewport)

buttons dimension

buttons compared

4

If your buttons are bigger users will be able to select them faster which increases usability

This is actually a law! It was proven by Paul Fitts in 1954. Fitts's Law provides a mathematical model which can accurately predict the amount of time taken to move to and select a target. Although, originally developed for movement in the physical world, UX practitioners successfully apply it to graphical user interfaces using a mouse cursor or other pointers.

enter image description here

Basically, the Fitts's Law states:

The time to acquire a target is a function of the distance to and size of the target.

  • The higher the distance between the mouse cursor and the target button the more time it will take for the button to be selected.

  • The smaller the size of the target button the slower the selection will be.

This basically means bigger click area = faster selection times. However, don't be tempted to use Gorilla buttons covering half of the screen.

Advice: use bigger button size's in higher screen resolutions

In higher resolutions (>=1080p) the buttons and UI elements appear small. Thus, the time to select them and the effort is higher, which decreases the usability. So, it is a good idea to increase the size of buttons and other controls for higher screen resolutions.

  • 1
    +1. I thought that almost any UX developer or designer knew Fitt's law, since it is basic to this discipline. Until last month that I was part of a panel at a UX conference and most of the attendees were completely unaware of the existence of it, or how to use it. – Devin Sep 12 '17 at 17:48
  • @Devin True, true, same thing here. People claim to be experienced UX-ers but haven't heard of basic stuff, like Hick's, and Fitts's law. – Kristiyan Lukanov Sep 12 '17 at 20:42
  • Has anyone seen this in practice? I'd love to see some examples of UI affordances like buttons scaling up. – Mike M Sep 13 '17 at 2:49
  • 1
    @psoiree Fitts's law basically says the bigger your buttons the faster they would be selected. I cannot tell you exact dimensions to use and whether the one's you've pointed out will have good usability. You just have to go through the different resolutions and look for buttons and controls that appear too small and make them bigger, that's it. Otherwise, we need to do a nice study with click heatmaps if we want to give exact dimensions to use for the different resolutions. – Kristiyan Lukanov Sep 13 '17 at 11:16
  • 1
    @KristiyanLukanov seems like a way to go - we'll definitely install a heatmap on this site. Will get back to you with results, guys. – psoiree Sep 13 '17 at 15:15
1

came to a question do bigger buttons on 1920x1080 (desktop) and above improve usability

Bigger area to click -> better usability

and do they ruin or fit into design at the same time?

They look less aesthetic, they look heavy and slow, i wouldn't use big fat buttons on a ferrari website but when it comes to a SUV website they might fit.

Just a question: have you tested that? Why do you think 40 year old man have problems interacting with a 20px button?

When it comes to tapping on the other hand, 40px tappable area is recommended.

  • Thank You for the answer. I did NOT say that and I'm not against 40 years old men and their eyesight problems! (just kidding ;p) To be honest, we had signs the chairman of the company could have problems with them and overall he wants everything as big as possible - we're preparing an explanation why smaller buttons aren't the issue and they look better, one of the reasons why I'm looking for sources. There's a standard for mobiles, as You noticed, but noone says anything about big desktops - I assume it's more of an aesthetics problem then. – psoiree Sep 12 '17 at 14:08
  • 1
    If you have a lot of resources and want to focus on the best usability you can provide your visitors the option to change the sizing of text and/or overall site elements, that would mean that you need to layout a few more options for different sized text/buttons, that way you would not restrict any user but provide additional UX to people which like it bigger. My mother has an eye-illness and she usually puts her browser to around 200% sizing, everything looks ultra bad for people like me, but that does not matter since she's able to browse... even if its still hard. – Pectoralis Major Sep 12 '17 at 14:13
  • Definitely a good point. Although we're creating this style guide to be more efficient in terms of time instead of adding another layer of UX option. The thing is that when it goes to aesthetics the bigger buttons look better on most of the sections, especially the ones with only one single CTA. A small thing became a big dillema. – psoiree Sep 12 '17 at 14:19
  • 1
    "They look less aesthetic, they look heavy and slow..." I get where you're coming from, but I think that's just one opinion. One example of, IMO, a really well-designed (both aesthetically and functionally) is TurboTax. They use buttons of several sizes, but I'd describe most of them as medium to large. I wouldn't say that this single factor takes away from the site at all... In fact, I'd say the opposite--it helps to create a clear pathway for the user, almost as if the size corresponds to the likeliness of it being what I need. – maxathousand Sep 12 '17 at 14:57
  • 1
    Its not even about the site design but also the product and message you are trying to deliver, thats why i used the car example.. brand message is really important too. Im not saying big buttons cant look good. – Pectoralis Major Sep 12 '17 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.