What would be the better option for Grid items in App, Circular buttons or Rounded Rectangular buttons?

Question

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.

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

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 !

Answer 1

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.

Answer 2

...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.

Simplicity

In container and content

Oneness

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.

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:

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.

Answer 3

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.