Aesthetic vs. Function: nailing the balance in UX design
According to Wikipedia, 56.1% of the world’s population has access to the internet. That means billions of people are visiting websites and using apps every day.
Have you ever wondered why we want to escape some websites the moment we land on them or why some get us glued for longer? The reasons can be many, but most of the times it’s the site’s design and UX that make such a huge difference.
Whether it is a simple website like Google, or an intricate one featured on awwwards, it’s not an understatement to say that UI/UX is an important aspect of the website. Another important thing is to create the right balance between usability and aesthetics.
However, aesthetics are more prominent than the usability of a web layout and the latter can be easily overlooked in the glitz and glamor of eye-pleasing designs. One can categorize the aesthetics into art and design. There are so many designers who create art instead of design and they can’t determine the fine line between both.
Art vs. Design: Where’s The Line?
Merriam Webster defines design as:
“to create, fashion, execute, or construct according to plan”.
It defines art as:
“produced as an artistic effort or for decorative purposes”.
There are similarities in the two concepts but they are different in their own ways. Design is a deliberate practice with intentions to create with a purpose and plan. Art is an expression of the artist for decoration.
Good art is always interpreted, leaving the viewers to find the missing pieces dropped on purpose. Whereas, good designs should never be interpreted; they should be understood. The viewers would never love the idea of working up their brain to get the message your design aims to convey.
The painting of Mona Lisa’s painting is sheer art. It leaves viewers wondering about the reason behind her mysterious smile. Different schools of thought have come up with their own speculations and each of them is right.
In contrast to the painting, Google website is a great example of design as it directly steers all the visitors towards its one and only purpose, i-e., to search. No comprehension required.
Takeaway: Remember that a successful website is the one with great design, not great art. Keep intended users and their behavior in mind when designing a website.
Aesthetics: Does It Look Pretty Or Eye-Catching?
Humans’ strongest sense is their vision. We are 90 percent visual creatures by nature and our brain are hard-wired to receive visual input. This is a reason why social media has become so image-oriented.
When humans were living in the jungle, our vision was what kept us alive. Our vision helped us find fresh fruits to eat, find safe places to rest, and to find predators before they found us.
Today our vision is used to read Facebook updates from a person we never talked to in high school, or read a Twitter thread about political commentary. Our lives aren’t at risk when we look at our phones but the nature of vision that brought us here is still in play.
As our environment evolved so has the way we use vision. When we stopped searching for fruits from trees and started searching for fruits at the market, vision became a source of pleasure and not survival.
Aesthetics as a concept was born in the 1700s as humans began started to add art in their culture in significant ways. The study of what it meant to be beautiful arose naturally near the end of the Renaissance.
At present, aesthetics has a large role to play in the usability of a design, such as creating the aesthetic-usability effect. This paradox states that users get so much attracted towards aesthetically pleasing designs that they sometimes ignore some flaws. According to a few studies, the early impression of a layout affects how users will feel about the product it belongs to in the long-term. According to Kinesis Inc, “75% of customers admit to judging a company’s credibility as per their business website.”
Moreover, If your design isn’t aesthetically pleasing then it will drain the user’s emotion and they might never return to your site or even worse, they may escape your competitor’s site. Aesthetic designs can spark positive and productive emotions and increase the user’s tolerance towards design problem.
Takeaway: If your goal is to attract a multitude of people, it is in your best interests to provide an aesthetically pleasing design.
When functionality takes charge…
Since we’ve established the importance of aesthetics in UX design, let’s look at two examples that defy the importance of aesthetics.
These two examples are hacker news and craigslist.
According to alexa rankings, craigslist is ranked #115 and hacker news is ranked #2883.
These two websites are some of the most visited and highly ranked websites in all of the internet. Yet their aesthetic design is not so impressive to say the least.
These websites have been the subject of many experimental redesigns and makeovers yet their product remains the same as it has been for years. Is their popularity dying? No. Is their usability and ratings lower? No. Are they aesthetically pleasing? No.
Then what is their secret? It’s their functionality.
The functionality on Craigslist is clear. It’s a classifieds website. As soon as you land on their website you can see all of the options available and you just have to click a link.
No header is necessary, no pop up links asking you to sign up for their newsletter, no notifications, or flashy items. Just content and links to where you want to go.
Hacker news acts in the same way. It’s a discussion forum with links that hackers would be interested in. No header is required, no explanation is there when you visit the website.
Again take Google as example.
It’s very simple, nothing flashy. You are there to search for some keywords and so there is one input area and two buttons aimed at fulfilling that requirement.
Just like the aesthetics, functionality of your website or app cannot be undermined. Without it, your website is an art project without a purpose.
The largest websites in the world have mastered the right balance between the design, functionalities, and user experience and you can see it reflected in their designs.
Factors That Contribute To Aesthetics and Functionality …
Aesthetics and functionality are two sides of the UI/UX coin. What are some factors that you can learn to add to your designs?
Contrast:
Our eyes are drawn to things that stand out. Red fruit in green trees stands out to us because fruits were essential to survival. But what is it about red fruit in green trees that can be applied to designs?
The concept of contrast is what is important here. A single red apple stands out against a background of green leaves because red is juxtaposed against the green background. This catches our eye.
Designers often use the principle of contrast when designing their interfaces.
Here are 5 ways you can use contrast to spice up your designs:
- Color contrasting
- Shape and size
- Style and influence
- Font pairing and typography
- Depth and shadow
Le Femme Fatale is the best example of all the possible uses of contrast. The dull mauve background brings the deep blue Femme Fatale to the spotlight, showing up the right contrast. The soft green fonts pairs so well with the overall imagery; whereas, the contrast uses background/foreground distinction to the fullest.
Typography:
Unless you plan on having no words on your layout, typography is critical. Different fonts convey different tones and choosing the right font can have a profound impact on the personality of your app.
With fonts, there are two distinct categories: sans-serif and serif. Serif is a small line attached to the end of a letter. Its purpose is to make the reading experience easier by providing a small transition from letter to letter. Sans serif fonts are simply fonts without this leading line.
If you wish to convey a more professional tone in your website, choose serif font. For a more casual vibe, most apps use sans serif font.
For maximum readability for your fonts, serif is the way to go. Inkbot has highlighted some of the best fonts to use in 2019.
In Hix Snedeker, the designer uses Proxima-Nova, sans serif typeface to add character to the headings and subheading. Rather than being colored, the font is filed with a mosaic type pattern than moves along the cursor.
Space:
Space is crucial for designs that are pleasing to the eye. If all of your elements are next to each other with no space in between then your eye will have trouble focusing on one particular element.
If your content is spaced too far apart then that can impact the usability in negative ways as well.
There is a balance that needs to be maintained when it comes to spacing the elements in your design. Too much spacing and your design looks empty. Too little spacing and your design looks cluttered and unpleasant to look at.
You want to add strategic spacing to your designs. Space things out to create enough separation to organize your layout.
The WealthSimple website flaunts a simple yet appealing layout. The tastefully positioned elements entice the visitors to navigate the website till the end; while, the well-spaced text is legible enough to grab their attention.
Aesthetics vs. Functionality, Which Is More Important?
It would be easy to say functionality is the most important factor. Without the aesthetic usability effect, the winner could easily be functionality.
But this effect is too powerful to ignore and works in exceptional cases. If you’re building a new site or app, you definitely need to take aesthetics into account. Without a well-designed layout, your users might not take your business seriously and forget about it.
Remember what we mentioned at the start when discussing aesthetic usability effect? The power of aesthetics can conceal the shortcomings when it comes to functionality is lacking.
However, it is recommended to find an equilibrium between design and functionality. Sacrificing one for the other is not a good idea, especially when you are just getting started. Also, while designing the layout, you need to focus on your goals like engagement, metrics, traffic, user experience, and other factors.
