4

Currently I'm designing a mobile application where I need to display various categories for the user to choose and for that I have created two variations.

First Option is Item within circular shape with icon & label. See attached image.

Six round buttons with label outside of each button


Second Option is Item within Rectangular shape with icon & label. See attached image.

Six rounded rectangular buttons with label inside each button


I'm trying to achieve 2 things from this layout,

  1. User can browse these category options easily.
  2. Each category should be easily recognisable.

So, here are my questions,

  1. I would like to know which option is better & why?
  2. If you could share any information related to this topic. Especially, surveys, researches, scientific data.

Thanks !

6
  • Not everything needs to be justified by studies and research, sometimes you just get to choose what you think looks best visually. As the designer, this is where you get to make your creative contribution, and choose what you think looks good.
    – musefan
    Jun 23 at 11:12
  • @musefan thanks for your feedback. Reason behind asking is, I couldn't able to decide which one to choose as both are looking good from my perspective.
    – Deep Shah
    Jun 23 at 12:22
  • If you think they both look good, then it doesn't much matter which one you choose. Take some responsibility and make a decision on the matter, that's your job! Personally, I prefer option 1 with the circles. Not sure why, but I think it's cause my eyes can scan the text options easier.
    – musefan
    Jun 23 at 12:28
  • I would personally go for the rectangular buttons. They look better, and they seem easier to select because they cover more area, even if tapping on the empty 'corners' around the circles also works. Jun 23 at 14:12
  • This is a psychological question and it is fair to ask for resources. But a better question is which shape performs best if I want to achieve a certain result. Can you add details about usage and what you want to achieve? Otherwise it is just a matter of taste and opinion and it shouldn't be posted here.
    – jazZRo
    Jun 24 at 10:58
2

The square shape includes the label, making it more obvious which icon belongs to which label, causing less confusion. Gestalt principles explain this.

Secondly the clickable area is larger with the squares so would be quicker and easier as described by Fit's law.

In my view, this makes the squares a better solution.

1

...surveys, researches, scientific data?

Well, I will develop my answer only from a perceptual / formal point of view

The following parameters are relative (not absolute), everything depends on the context, and talking about flat buttons, no hyperrealism or skeuomorphism.

What determines that a shape is a button? or what's the best that define a button?

Regularity

The more regular the shape, greater ease of perception.

Regularity

Simplicity

In container and content

Simplicity

Oneness

Oneness

Isolation

Isolation

In the example images of the question, the first two points are well exposed: they are regular and simple shapes. As for the next two the result is more controversial.

The rectangular buttons leave a little margin by the characteristics of the shape, so it's more immediate to interpret it as a grid more than a group of buttons. This perception is accentuated by the content, it's a contact sheet.

Contacts

As the statement of the question says that it's a group of buttons, the sense of uniqueness is a bit difficult to define, so isolation is the option to achieve.

Comparing both figures, the circle not only offers greater isolation space but also breaks the cartesian axes that establish the grid, strongly marked by the rectangles:

isolation 2

The final decision depends on the design guidelines, but from a formal point of view, in a grid of buttons, the ones with the best visual perception are the ones that provide the greatest isolation: between a vertical rectangle and a circle, the second one is the best option.

3
  • Thanks @Danielillo for this detailed answer , just a small confusion. Here at the end of conclusion "between a vertical rectangle and a circle, the second one is the best option" so , as per this Circle button is the best option?
    – Deep Shah
    Jun 23 at 16:32
  • 1
    Under these parameters and analyzing only the formal aspects, yes.
    – Danielillo
    Jun 23 at 16:39
  • Okay , got it . Thank you for quick answer !
    – Deep Shah
    Jun 23 at 16:41
0

I'm sure someone else can describe this better, but I also notice the complexity of the illustrations. The circle separates the elements, implying the icons can exist on their own, which would be inappropriate for complex illustratons. Cards feel more appropriate to me for this reason, as they present the image and caption as a group.

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.