8

If you take a look at the app page of any mobile OS, for example iOS, Android, Ubuntu, Win8, BADA, etc., they all have square icons, either with rounded corner or sharp corners (shown in the first image).

I would like to know why companies are not trying to use circular icons (example shown in the second image).

Image of iPhone with rounded corner square icons Image with circular icons

What could be the reason behind this?

1

5 Answers 5

28

You are confusing mobile phones with iOS.

The icons should be neither round nor square for the best UX. They should be allowed to have a unique outline to improve scanability and hence make them easier to use.

This is exactly what Android has done, and it is a significant UX improvement over iOS.

enter image description here

Edit: It appears that many people are unable to focus on the shape of the icons and not on the other aspects to the image, and so I have changed the image to one that is more modern Android, but shows the icon shapes less well.

14
  • 4
    This, sir, is utter mess.
    – Devfly
    May 12, 2013 at 9:30
  • 1
    @Devfly That it is, but it's the best example I could find with different shaped icons. Definitely not my home screen :)
    – JohnGB
    May 12, 2013 at 9:49
  • Android should require all icons to have the same size. May 12, 2013 at 12:08
  • 1
    I don't know why this was given so many votes (apart from to support iOS bashing). It would be nice to have some links to back up those claims.
    – Kayo
    May 12, 2013 at 22:23
  • 2
    JohnGB is absolutely correct, not sure what the complaints are about. As with most things, Apple chose to make an interface that looks slick and organized for marketing purposes. It's totally workable but not quite as fast as the Android model. May 13, 2013 at 18:46
18

The reason may be the better space usage within the icon badge. Having square, or rounded square, you can place a bigger icon inside, with less space wasted:

Icon shapes rounded square vs. cicrular

The dashed line represents the placeholder for an icon and app name within the interface. The badge itself within this space can be bigger if it's square-ish than when it's round. This gives more space to use.

At the same time, the image/icon on the badge is even bigger (however, there are also icons that are round, that would almost perfectly fit the round badge - however this puts a requirement for the icon to be round only - in any other case it needs to be shrunk or cut - you can see it even in the example you have used). Having the icon big is important for keeping its details and making it more recognizable for the user.

There are, however, interfaces with round or almost round icons, however. One of the examples may be Nokia:

enter image description here

3
  • Your link to a Nokia example is returning 403. Mar 15, 2013 at 21:01
  • Thanks, I have re-uploaded it and updated link in my answer. Mar 15, 2013 at 21:25
  • 2
    ah yeah, the nokia squircles
    – frozenkoi
    Mar 15, 2013 at 22:21
4

Although visible area and clickable area can be different, if an interface is going to do what a user expects, they should be as closely aligned as possible. If you tap the corner of a rectangle, you expect the device to acknowledge that you've selected the rectangle. But what happens if you tap the large area diagonally between circles? If the program was built well, it would probably still select the nearest circle, but you would feel a disconnect. It wouldn't feel like you'd really pressed the button because you would have selected it without actually touching inside its area.

The Gestalt principle of closure also comes into play. The phone OS designers probably wanted their interface to appear coherent, and the edges of the rectangles make the implicit lines between icons clearer (which probably again makes it easier to tap where you intend).

1
  • You could minimize the wasted space between circles by offsetting them in a honeycomb pattern; but you'd either end up with a half icon/row of wasted space per row; or have to switch from discrete screens of icons to a single scrollable area with half icons hanging off the edges. Mar 15, 2013 at 21:06
1

The icon styling is mainly a design decision concerned more with brand identity and consistency, not really a UX or usability decision. Apple's iOS brand identity is about shiny rounded things (when you create an icon for an iOS app you can make it square cornered and flat and iOS automatically converts it to be rounded and shiny), but other brands had their own visual style/identity.

2
  • Actually the question is why companies are not trying to go for circular style of icons designs.... What could be the reason behind this?
    – Ankit
    Mar 15, 2013 at 16:36
  • @AnkitSharma - my guess is that circles are harder to design for than are squares. Also they make less efficient use a space. I still thinks it's style/design issues, not UX issues driving the decision.
    – obelia
    Mar 15, 2013 at 16:59
-4

There's also a technical reason: it's far easier for a computer to work with rectangles than with circles.

1
  • and in what sense you are saying this...?
    – Ankit
    Mar 16, 2013 at 8:33

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.