17

I'm designing a web application in which I'm having different button sizes for different functionalities.

For example, the login page has a full width button:

enter image description here

Small edit button for editing city information:

enter image description here

And Save/Cancel buttons a little bit bigger than the edit button:

enter image description here

Should I have to follow the same button sizes throughout the application? If yes and how it benefits the user?

3
  • I'd say a consistent color scheme is more important. Why does your "Log In" button appear to be a different shade of greenish blue than your other normal buttons ("Save", "Edit")? Apr 26, 2017 at 8:57
  • It might be some mistake while taking the screenshot. The color is consistent throughout the website. Apr 26, 2017 at 9:29
  • Related: Should all the buttons throughout a website have the same text?
    – xDaizu
    Apr 26, 2017 at 14:46

2 Answers 2

19

There is no need of maintaining same button sizes all over the site. you may need to have same sizes for similar functional buttons.

the idea of the same size of the button is to maintain similarity so that user might understand in the first look. but in the scenario, as you have mentioned above is no need of maintaining same sizes in this case.

you can do few things to maintain that harmony such as.


  • maintain the same Padding in left-right positions if possible (button width).

  • maintaining a 3 or more different button sizing sets and use them according to their requirement i.e., in (button heights).

you can follow some style guides such as.

http://harmony.intuit.com/buttons/

1
  • 3
    I hate being that person, but for people who are developing buttons, make sure you mean PADDING instead of MARGIN. Padding is within the button width, but margin will potentially screw up the alignment.
    – Majo0od
    Apr 26, 2017 at 18:22
4

Information hierarchy applies to buttons too

Variable button sizes are an excellent way to reinforce action hierarchies. If every action was triggered by an identically sized button, your UI is likely to become a mess. Users would have a hard time finding the primary and secondary actions that answer their needs 80-90% of the time.

Create rules and follow them

You want to have a logical, planned system of tiered button styles. At the lowest level, you may have text in a different color. At the highest, you may have a brightly colored button with large text and large padding. Figure out where each style fits and use them consistently throughout the experience.

Here's an example from an app I'm working on showing primary and secondary buttons, as well as our bottom tier action for stepping back in the nav.

Various button styles in one interface

We also have a larger button for "critical path" actions, basic text links, and some actions in small modals that use the full column width.

Here's another example from a mobile workflow (generalized for the client's sake) where you can see a number of button types in one view. This is a dense UI with a lot of elements that, unfortunately, can't be reduced further. Identically sized buttons here would put unnecessary burden on the user to figure what the most important actions are at any given time.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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