Buttons — Rounded corners or sharp?
Button theory #01
Buttons are everywhere. There are square buttons, circular buttons, rectangular or rounded buttons, star-shaped buttons maybe?
Is there any difference in meaning between these different shapes? Can we use buttons with any shape, anywhere? Or are there specific places to use buttons of a particular shape?
Before moving into that, take a look at one of the most fundamental concepts in UI design, which is...
Consistency
One of the most fundamental rules in UI design is consistency. It means, every element in the design should feel like it is of the same family. Examples are the same fonts used everywhere, the same style of images used for the feel of the design, and mainly, buttons with the same radius.
Using different fonts in a single UI design project makes the whole thing lose the feel it was going for. It will look out of place, some may even say weird!
It's the same with buttons. If you have buttons of many different radiuses in your design, you will not be able to maintain an overall feel in your design. It is common knowledge in the UI design community, to keep the radius of all the buttons, the same to the exact measure.
Now. Where to use round buttons? Where to use buttons with sharp corners?
Sharp corners signify danger/caution, whereas rounded corners are comforting/fun. In short, sharp-cornered buttons are used when a permanent action takes place because of the button. To state an example, payment gateways or banking apps.
GOOGLE PAY HAS ROUND BUTTONS!!!
In spite of being a banking app(kinda), Google Pay has round buttons. Why is it so?
There are other things that come into play in these situations. More on that later. Coming back to the matter at hand, let’s move on to an example.
Gmail
Have you noticed the ‘compose’ button in Gmail? It is the button that is used to open up the window to type or compose a new mail to be sent to someone.
This button is completely round. Now, remember we talked about consistency? Keeping that in mind, take a look at the following image.
The ‘send’ button. It is not as round as the ‘compose’ button. Is this a mistake? Did Google, fail to follow one of the most fundamental rules of UI design?
No. As said earlier, roundedness and sharp corners convey different meanings.
Clicking the ‘compose’ button can do zero harm! It just opens up a new window for us to type/compose a new mail.
Whereas, the ‘send’ button is different. Clicking it sends the mail to the recipient. This is a permanent action and cannot be reversed. This is why it is not as round as the ‘compose’ button.
Why is the ‘send’ button not completely sharp then?
Making the send button completely sharp, reduces the little friendliness portrayed by the rounded corners. Right now, it is in the sweet spot; aka perfect!
Coming back to Google Pay and it’s rounded buttons in spite of being a banking app(kinda);
The same theory is applied here as well.
The main aim behind Google Pay is to have more people use it. The reward system is a great example that assures this fact. The Rounded buttons in the app give the users a sense of comfort. This is why most people use Google Pay instead of their own banking apps!
Thanks for reading the whole thing! Appreciate your effort.
Visit creativcuckoo for more content!
