RedUX : Rounded User Interface Elements (Part 1) : UX Patterns
From an early “web developer” age, or about 3 years into that part of my career, someone told me…”You always create such nice looking user interfaces.” At the time, I accepted it as the compliment it was intended to be, and went back to coding ( with a smile on my face ).
Much later in that part of my career, I began to specialize in Interaction Design and User Experience. Turns out that creating User Interfaces ( UI ) was not just something I enjoyed, but a passion of mine. Indulging that passion has brought me some wonderful insights into the science behind human interactions with technology. Understanding the science, allows us to elevate feelings into data.
In this case, it’s about rounded web-page elements. Rounded corners have always felt more comfortable to me than sharp corners on web UI elements. So much so, that I explicitly call for a minimum of 5px border radius on all elements when I craft a design. So I decided to unpack that feeling, and understand the science behind it…
A quick search lead me to a couple of good articles that describe my preference for rounded corners. Turns out this is called “contour bias” and it is simply defined as “A tendency to favor objects with contours over objects with sharp angles or points.” There is a lot more info and lots bigger words at this link to a book titled “Universal Principles of Design : Contour Bias”. What it boils down to is sharp points are threats ( and more noticeable ), while contours are friendly. Given my natural avoidance of conflict, this explanation feels right to me. Another link, aptly named “Humans Prefer Curved Visual Objects” is a published paper about testing this bias. More good info there…
So when trying to leverage the look and feel of UI elements, to lead the user through the experience, what shape do I choose? It depends. A user completing a form on the web is trying to get through the fields so they can click the submit button. That particular submit button is their reward. Web designers call it a “call to action” or “primary action”. This is often the most prominent clickable element on the page. I can hear you now….”Well then should it not have sharp corners to draw stronger attention to it?” I would answer “Perhaps. It depends on the urgency of the action.” This was summed up nicely by Roger Attrill, when he commented…
” There are many more cues and affordances in the designer’s toolbox, so call-to-action buttons can be made noticeable without the angles, and kept more inviting by the rounded corners — thereby achieving both desirables.”
Although elements of high urgency may demand sharp angles, for a regular submit button, I’m going with rounded corners. Leverage some of those other properties ( color, etc ) to clearly define the call to action, and keep things friendly with rounded corners. There.
Whew, now I understand a lot more about the “why” behind the “feeling”. Next I need to come up with some basic guidance for the development team. Crafting something simple to follow, will alleviate me from having to add border-radius specifications for every element they might employ.
To do this, I created a quick mockup of buttons with varying amounts of border-radius. I varied them from square to 12px.
At 3px, the radius is almost invisible. Bumping it to 5px or even 8px, further softens the appearance. Going to 12px gets a little much IMHO. My personal preference is for 5px in most cases. This brings us full circle to where I stated earlier that I call for a minimum 5px radius on all elements when designing. And I think this is a good basic rule I can pass along to developers, or in a style guide if the project has one.
One last thing. I think that radius is important, sure. But I also get nudges of feeling in regards to padding as well. I think padding and radius are needed in concert, in order for the elements to look “right”. It’s important that there be symmetry in both. In the above example, the text inside the buttons had less “white” ( okay, blue ) space on the ends, than they had above and below. This appeared crowded to me, so I added left and right padding until there was symmetry. Here is an illustration of how that looks.
Since button height is defined at 36px, and remembering that I am trying to craft an easily applied guide for development teams, I tried out a simple idea of “add left and right padding equal to 25% of button height”. This came out to 9px in the above example. BTW, All buttons above have 5px radius.
The idea being that if you divide the vertical area of the button element into quarters, the text would consume 18px… or two quarters, and the padding above and below would each take a quarter, or 9px. Adding this 9px to the left and right padding should bring symmetry to the appearance. But….as you can see above, while 9px is much better than 0px or 5px, which appear crowded, 12px actuall “looks” the most symmetrical.
I think this is due to the varying heights of the letters. The capitals take up the most vertical height, but are less frequent in the text. This means the eye apparently divides up the space along the tops and bottoms of the lower-case letters. I’ll bet there is another big word for that, and I will most likely research that, but this article is long enough already. I will adjust my math and move on. Luckily 12px, just happens to be one third of 36px. Easy. So my guide to developers will become… “Add left and right padding equal to one third of button height.” Done.
If you have thoughts on this subject, or other big words I should know, please comment!
