User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
In an app, when using icons, we can have place it on a button, or have the icon borderless. I would think that having it on a button gives better affordance, but it seems that many reputable companies are choosing the borderless route.
What are the advantages and disadvantages of each approach in UX terms?
To me, especially with an app with a touch interface, the borders serve a clear purpose of defining the area that is able to be used to touch/click to trigger an action.
Take the pink quiver icon. Without that border, the apparent touch area of that icon would be small, even if the actual touch area was larger, and it might give a user pause as they try to position their finger in order to hit a small icon area that doesn't actually exist.
Of course, this only really starts to matter if your icons are actually thin or small, and thus cover only a small area. And in all such cases, there's no reason the border/background couldn't be a very subtle one anyway.
It clearly depends upon the space you have between the icons, for example in your PayPal app you have a dashboard with lots of space - so you can have borderless icons. So that user can tap on any icon without any mistake.
Whereas in your Locals app, all your icons are cluttered in small space, so that requires icons on buttons or some borders representing the clear separation between touch areas of each icon.
It also depends upon the guidelines provided by the platform. for eg. new guidelines for Android ICS. They never have any icons within borders.
In my humble opinion,
flat or bordered buttons are not so much a matter of the tapping area or white space between them. I think it's a primer problem of whether the user can understand in the first place if something is a button or not.
You see, the traditional interaction cases so far on the web and desktop applications, usually included a mouse so there was something possible, that certainly doesn't apply on touch interfaces: hover. If hovering over an UI element is possible, the element can respond in many ways to say "hey I'am clickable" or provide a tooltip with a call to action. In mobile devices, it's just trial and error. You tap on things and if they respond you learn they do something. Bordered and embossed things are known to be buttons (well most of the times), so a user can create an interaction scenario prior touching anything.
Finally, maybe it actually relates somehow to white space since non-bordered buttons definitely require a more explanatory call to action like i.e "show me the money" whilst a bordered button could only be "money".
