The Influence of Circles in Web Design
If you’ll observe the things around you, you will discover that circles are ubiquitous (in your room, in the streets, inside malls, etc.). In web design, the powerful influence of circles can be directly noticed – at the headers, menus, even at the center of the page.
Despite the abundance of the circle shape, there is little discussion about the psychology of using circles in web design and their successful application in mobile devices.
Of course, we are drawn to this particular shape, but does one know the exact reason why? As a web designer, how will you apply this shape in order to fully exploit its potential in responsive design?
Circles and the human brain
Cognition and perception
The study supporting this notion was conducted by a Swiss physicist and mathematician named Jurg Nonni who pointed out that taking away hard edges of shapes will immensely improve your perception of it. Nonni explained, “A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example and ellipse of the same size. Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.”
Responding to natural familiarity to curves
Besides the cognitive nature of the human brain to discern circles a lot faster than squares, it also has the natural propensity to understand faster familiar information as opposed to unfamiliar once.
By nature the human mind recognizes circles. We even tend to associate a certain shape to a specific action and its consequence, as in the case of the universal sign “STOP”, which is a red octagon. Apple’s OS X Human Interface Guidelines explains how people can easily connect a specific action from an object’s shape or form. Take for instance, a rounded shape object is quickly perceived as a push button.
Round shapes are naturally regarded as warm, friendly, and non-threatening. This is universally accepted by every culture and environment. Poets and artists express their sentiment and joy over elements of nature that bear this shape, the sun, moon, clouds, etc. Round shape is visually pleasing while hard-edge shapes look menacing and therefore a threat.
Circles and the user experience
The influence of circles in web design is widespread because online users are notably demanding and unwilling to wait. Since circles are easier to comprehend, information processing, therefore, takes lesser time. Patience is even cut significantly shorter with mobile users who are always on the go juggling task here and there badly wanting the information to pop right away on the mobile screen. Circles in web design can help enhance efficiency in search.
Circles and thumbs
The finger tip is considered the primary tool used when interacting with capacitive touchscreens in smart mobile devices and tablets. The swiping, tapping, and pinching action of the finger makes it very ideal to incorporate circle shapes in web design to guide the user. Interactive processing would be more efficient when users naturally catch the idea that rounded elements represent pushbuttons. You may design the rounded buttons at 44 pixels the actual size of a finger tip.
Circles and screen space
Implementation of circles in responsive design, however, has its drawback. Although CSS3 proved handy in the coding process, but circles do obtain plenty of space on the screen rendering an open area outcome. When this situation is applied on small devices like smart phones and tablets, the circles shrink to diminutive size.
Simplistic smartphone interface
The influence of circles in your web design promotes a simplified program interfacing as you won’t have to embed unnecessary elements that you know will only be ignored when the user’s eyes are directed to the circle elements. Be careful not to over emphasize circles on the entire page, one to two is enough. Also, use circles in your call to action buttons.
Backgrounds, icons, and social media share buttons
In cases when you have to drop any call-to-action in your site, or when navigation items fail with circles, don’t despair you can still devise a clever way around this limitation. What you will do is apply a bigger low opacity semi-transparent circle design in the background at an area where you want viewers to direct their attention to. Let it sit behind the text(s) you want to emphasize.
Visitors of your site read your contents and if they like it, they will share it with their friends and families through social media share buttons that you will have to provide. Make sure these too are designed rounded not rectangular.
Another clever way to save space, minimize texts, and implement circles in web design at the same time is to make use of rounded icons in the navigation.
While it is wise to heed this article’s advice about incorporating circles into web design, you must never forget that the ultimate reason visitors flock onto your website is because of the great content you produce. Content should be the primary focus, the rest are supplementary. When you have a great content, you have little to worry about the design – it is easy peasy to fix.