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?

elemjay19
  • 1,288
  • 12
  • 25
Ankit
  • 896
  • 1
  • 9
  • 15

5 Answers5

29

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.

JohnGB
  • 68,376
  • 26
  • 180
  • 294
  • 4
    This, sir, is utter mess. – Devfly May 12 '13 at 09: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 '13 at 09:49
  • Android should require all icons to have the same size. – Mircea Chirea May 12 '13 at 12:08
  • @MirceaChirea they require them to fit within a defined size, but they don't all have to fill the entire space like for iOS. – JohnGB May 12 '13 at 12:15
  • 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 '13 at 22:23
  • @Kayo which claims are being made that aren't well established? – JohnGB May 12 '13 at 22:29
  • I wouldn't want to look at that grid-ish collection of icons and chopped text ever! –  May 12 '13 at 22:29
  • @Undo I've changed the image to one that hopefully makes it easier for you to see the point of the answer. – JohnGB May 12 '13 at 22:34
  • @JohnGB That's better :) (iOS Dev here) –  May 12 '13 at 22:54
  • @JohnGB, That icons should neither be round nor square for Best UX, that it is a significant UX improvement, that it improves scan-ability and are thus easier to use. New image is nicer, but still looks wrong to me ;) If they are well established, I would appreciate some links to follow up. – Kayo May 13 '13 at 08:35
  • @Kayo That has already been answered well with references here: http://ux.stackexchange.com/questions/8040/do-unique-icon-contours-help-people-scan/8048#8048 – JohnGB May 13 '13 at 09:43
  • 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. – plainclothes May 13 '13 at 18:46
  • @JohnGB you're right in theory, but in practice I'm not sure it works that way. At least for me it doesn't, I vastly prefer iOS when it comes to finding the app I need. Perhaps it's because with all these different shapes, sizes and colors (plus garish backgrounds) there is so much visual information on the screen it's hard to focus on finding the icon you need. The link to the other related question hardly proves these claims and offers mostly untested theory and speculation. I'd like to see some actual research here. – Koen Lageveen May 28 '13 at 06:30
  • What's interesting is that with OSX Apple has thus far stuck with the approach that icons can have any shaped outline. – rdellara Aug 29 '13 at 02:52
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

JohnGB
  • 68,376
  • 26
  • 180
  • 294
Dominik Oslizlo
  • 13,849
  • 2
  • 30
  • 57
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).

Graham Herrli
  • 7,416
  • 7
  • 38
  • 58
  • 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. – Dan Is Fiddling By Firelight Mar 15 '13 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.

obelia
  • 11,514
  • 23
  • 39
  • 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 '13 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 '13 at 16:59
-4

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

Schilcote
  • 135
  • 4