Mobile Button Shapes for Main Navigation? Circles vs. Round Cornered Squares?

9 Aug 2011 - 3:28pm
2 years ago
3 replies
1997 reads
aronoff
2010

Hi Everyone,

I'm designing a mobile application and M site. We currently are using round circle iconography to denote specific user interactions and sections of the site. I'd like to reuse these icons visually, but then have them as rounded corner rectangle icons. My gut reaction and decision for this is that it fits more with the icon paradigm (for the most part) with iphone and Android apps and devices.

This being said, I need some research to back up my claim. A colleague is wondering how I came to my initial decision and i need research to point to.

Any suggestions?

Thanks in advance!
~Josh

Comments

10 Aug 2011 - 1:24pm
aronoff
2010

Anyone? Bueller?

10 Aug 2011 - 1:24pm
aronoff
2010

Anyone? Bueller?

18 Aug 2011 - 6:43pm
uxmovement
2010

An icon without a border is faster to visually process. This is because the icon shape and outlines is more distinct to users when they scan. If you want to make visual processing efficient, it's best to have no borders at all, but then show the borders on mouse hover like how Chrome does it.

If your icons are on a navigation bar, it's best to use rounded square borders so that way the icon border blends and meshes well with rectangular nav bar. However, if you have a button that does a special action, giving it a circle border can make that button stand out above the rest.

Here are some articles that go into detail of what I'm talking about:

http://uxmovement.com/content/why-distinct-icon-outlines-help-users-scan-faster/

http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/

Syndicate content Get the feed