4

Generally, buttons shown together are also visually similar.

Are there situations where it might make sense to show together buttons of different shapes? E.g. a rounded rectangle button together with a circular button?

As a crude example to analyze, here is a sketch. enter image description here

  • 1
    If looks intuitive and nor strange for the user should not have a problem. Post an example for we can analyse. – BraDev Sep 4 at 7:52
  • @BraDev not allowed to post actual screenshots, so I just uploaded a rough sketch... – Yogesch Sep 4 at 8:02
  • 1
    Sorry, I don't understand the difference between upload and browse pic actions. For me looks that both are doing the same thing. – BraDev Sep 4 at 9:40
  • @BraDev the button "browse pics" = browser pics uploaded by other users. the other button is to ask the user to upload their own pic. Could the copy be better, while still being terse? – Yogesch Sep 4 at 10:20
  • 1
    In this case, I suggest you to do like the most websites. Same shape, side by side, different colours. Highlight and put first the main used button. My suggestions below are good examples. – BraDev Sep 4 at 10:34
10

I suggest you to do like the most websites. Same shape, side by side, different colours. Highlight and put first the main used button. See good examples below.

I know that you ask just about the format and my answer is a bit more complex but this definitely could help you.

Make buttons intuitive changing their positions

More buttons, more option, more decisions. Easy to take no action or the wrong action.

We should influence the users to take the right action giving the right priority for each link or button. We can use font-weight, font-size and colours for it. Of course, the biggest button should be the most important.

The position is absolutely important to help user preventing the reverse page scanning. Reverse page scanning is not good and breaks the natural flow, generating unnecessary scrolls and possibly will result in doubts. And again, the user with doubts or too many options tend to take no action or the wrong action.

See some examples:

PS: It's a mobile example, but works quite similar on desktop. The most important thing is the concept.

enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

I found these images a few months ago in the UX Movement post but unfortunately, I did not remember the name.

  • @Yogesh if this answer helps you, please, check as the answer to your question. – BraDev Sep 4 at 12:54
  • It would be helpful if along with the logic, you could answer his question as well (specific to shape) - "Are there situations where it might make sense to show together buttons of different shapes? E.g. a rounded rectangle button together with a circular button?" – Omkar Chogale Sep 5 at 9:15
  • @OmkarChogale Thank you for your suggestion. I already answered him on the comment but now I added to my main answer here. – BraDev Sep 5 at 10:15
  • Yeah, now it looks complete. Generally people just go to answer directly (that is highly voted) and thus it needs to have compete resolution to question asked. Thanks. – Omkar Chogale Sep 5 at 10:24
  • 1
    The article your images are taken from is written by UX Movement. You may update your answer with the source (though I'd recommend taking their suggestions with a grain of salt—*certainly* this last image is still accessible to color blind users without the icon. Visual weight of the primary CTA is well established by the button's shade alone.) – maxathousand Sep 6 at 14:54
2

Consider the metaphor you're using and its roots. Buttons. What are buttons? They're an element you can "press" or "click" to take some action. Where does this metaphor come from? From physical machines.

Do physical machines have buttons of different size or shape near one another? Yes! Look down at the keyboard in front of you. Assuming you aren't using a grid-layout Planck or Preonic or other otholinear, you'll notice keys with 1u (one key-unit), 2u, 1.5u, 2.25u, 6u, and maybe other lengths all on the same board. If you look at the dash in your car or the HMI in an industrial setting, those typically also have buttons of different sizes and shapes (not to mention color, height, texture, labels, etc.).

So, yes, I think that sometimes, perhaps often, it can make sense to have buttons of different shapes (including buttons that are variations on a shape or from the same shape family), especially if you have many buttons present or wish to differentiate the buttons to a greater extent.

2

If buttons are semantically/functional related, then they should be in close proximity regardless of their appearance.

An example would be a window/screen that has a 'cancel' button and a 'submit' button. A common practice is place them at opposite sides of the window/screen, but that's not ideal because people have very limited central vision.

Even though each button has a distinct function, they have a common effect that's much more palpable: they both close the current window/screen. They should be beside each other in the center, although one could be made to look more salient.

Think of the buttons in this example as siblings. They should go together because of their underlying commonality despite maybe not having identical appearances.

2

There are limited shapes we can use for buttons - rectangle, rounded rectangle, circle.

If we use too many shapes for buttons, it wouldn look more like icons rather than buttons.

It is necessary to keep consistent shape for action buttons as people generally scan interface and consistency helps to fix user attention towards action. Again, if some buttons have pre defined meaning in user's mental model like Arrow shapes for navigation, rounded button with + for adding something, square button with + to expand, then it makes sense to use these shapes.

However, buttons with text on it as action should be consistent in shape. Their state, affordance, availability can be depicted through font/color effects.

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.