Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Firefox OS is using circular icons –  Steve May 12 '13 at 20:59
add comment

5 Answers

up vote 17 down vote accepted

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

share|improve this answer
    
Your link to a Nokia example is returning 403. –  Dan Neely Mar 15 '13 at 21:01
    
Thanks, I have re-uploaded it and updated link in my answer. –  Dominik Oslizlo Mar 15 '13 at 21:25
1  
ah yeah, the nokia squircles –  frozenkoi Mar 15 '13 at 22:21
add comment

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.

share|improve this answer
3  
This, sir, is utter mess. –  Devfly May 12 '13 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 '13 at 9:49
    
Android should require all icons to have the same size. –  Mircea Chirea May 12 '13 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 '13 at 22:23
1  
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
show 9 more comments

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

share|improve this answer
    
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 Neely Mar 15 '13 at 21:06
add comment

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.

share|improve this answer
    
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
add comment

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

share|improve this answer
    
and in what sense you are saying this...? –  Ankit Mar 16 '13 at 8:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.