Aesthetics vs Functionality in UX Design – Mistakes that Keep You Away from Creating Better Apps

A few years ago, I was given a rolling pin. A plastic one, with measurement guides and some additional conveniences. In theory, it was very functional.

This illusion was shuttered when I first tried to use it. Guides were turning along with the rolling pin, so the dough was unevenly thick and it was hard to unstick it. Even the flour didn’t help. The joy of baking was gone.

But what do the rolling pins have in common with apps? This example illustrates the problem of sacrificing functionality for form. Although the product looks nice, it is not useful. Unfortunately, I observe this quite often in mobile apps.

How do you keep the balance between usability and aesthetics? Find out how can you avoid mistakes when designing your apps.

Nice design or a way to hide UI errors

It seems obvious that people should get rid of useless apps right after the first launch. But that’s not necessarily what really happens. Sometimes they give them a second chance. Why?

The cognitive problem is the answer. The aesthetic-usability effect, one of the UX laws described by Jon Yablonski, explains it well. It says that “Users often perceive aesthetically pleasing design as design that’s more usable.”

That’s the reason why I assumed that a nice-looking rolling pin must be great. Users react the same way when they see aesthetically pleasing apps.

Why can’t we resist aesthetic products?

People like to surround themselves with beautiful items. We often want to believe they’re practical – even when there’s no reason to think so. It’s related to our need for art in its various forms. Aesthetic design positively impacts the response to the product, as stated by the authors of the article Effects of Design Aesthetics on the Perceived Value of a Product: Aiqin Shi, Faren Huo, and Guanhua Hou. According to their research, the product’s aesthetics evokes emotions and makes people perceive it as more valuable, among others. Interesting, isn’t it?

It gets better.

The aesthethic-usability law says that users have a tendency to turn a blind eye to small flaws. When they deal with a nice-looking product, the aesthetics can draw their attention away from smaller usability problems.

Sounds perfect, right? Small flaws move to the second plan. It’s not as good as it might seem, though. Just because you cannot see the problem, doesn’t mean it doesn’t exist. People will be more and more frustrated when using such a product. Eventually, they will abandon your app and go to the competition that has taken care of both functionality and looks.

That’s why you need to know how to keep the balance between these two elements.

How do you create a nice design?

The Cambridge dictionary defines beauty as “a quality very pleasing to the eye, ear, etc.”. But how can you tell if something is pleasing or not?

There are some patterns that – in different cultures over the centuries – were always perceived positively. For example, the golden ratio, symmetry, and rhythm (repetitiveness). You can notice these patterns when observing nature – on cockleshells left on the shore or looking at the tulip’s intersection.

But let’s not forget about trends. When designing interfaces, it’s best to combine timeless patterns with knowledge about the current standards. 

This way it should be easier to create aesthetic projects.

3 cases when we give up usability for aesthetics (and how to avoid this)

Even if you think that you always remember about keeping the balance in the project, in some cases, it’s easy to let your guard down.

1.   When you forget about the technology, it impacts the performance

Beauty doesn’t always go hand in hand with high performance. Designers often forget about it when they get inspired by nice-looking interfaces on Behance or Dribbble. As a result, they create projects full of components that slow down the app. It impacts the way people perceive the product and may discourage them.

Solution
When designing the mobile app, it’s essential to think about the operating system it will work on. Hence, I recommend cooperating with developers from day one. They know their programming environment perfectly and can tell you what slows down the app. With their help, you will be able to choose the ideas that won’t significantly affect the app’s performance.

2. When instead of simplicity and intuitiveness you choose originality

Do you sometimes feel that all eCommerce apps are alike? You want to design something others don’t have? It might be tempting. Especially, if you like to show some creativity in your projects.

Unfortunately, it often results in problems with the intuitiveness of the interface. Have you ever seen an app menu that makes finding important views a mission impossible? Forms no one knows how to fill correctly? Misleading layouts and labels? When creativity goes too deep, at the end of the day, users get confused and frustrated.

Solution
People like patterns. They let them find desirable information faster. And although some creativity is necessary when designing UI, balance is the key. What can you do to take care of it?

• Create the style guide with detailed info on the elements you use, such as fonts, text size, and color palette. Even the rules describing the usage of shadows will come in handy. It will help you keep the design consistent. Then it should be easier for people to learn how to use the interface.
• Take some time on the research. See what are the design standards in the apps similar to the one you’re designing. Focus on the most important features. Take screenshots and take notes. This approach will make you see what elements should be based on the known patterns and where you can let yourself be more creative.
• Analyze the hierarchy of the UI elements to see if it doesn’t confuse users. You’re not sure whether the most important elements are clearly visible? First, write them down and divide them into types of views. Next, check if the elements you described as priorities as also the ones that are highlighted on the designs and have proper colors or sizes.

3. When you focus too much on aesthetics and forget about accessibility

Your project catches the eye, you rely on popular UI design patterns and at first glance, everything looks good. But are you sure the interface will be perceived the same way by all the users? Even though it sounds banal, everyone is different and it plays a significant role when it comes to the app’s design.

Did you know that at least 2.2 billion people have some type of vision impairment, according to WHO? But many apps still aren’t adjusted to their needs. It’s similar in the case of people who struggle with problems with motor or hearing impairments.

Solution
Your job is to ensure accessibility, so more people would be able to use your app. Check the accessibility guidelines and verify if your design meets the requirements.

• Make sure that distances between the elements are big enough that even people with fingers larger than yours could tap them.
• Take care of color contrast – it makes differentiating the elements easier. Use the tools that verify if the applied contrast meets mobile accessibility standards.
• Write alternative texts to images and add transcriptions and audio descriptions in case of audio and/or video materials.
• Remember that gestures play an important role when using the app. They shouldn’t be too complicated.

These are only some selected accessibility requirements. Get familiar with a full list of such recommendations for Android and iOS. Have them in mind when working on your projects.

Next steps

If you’re not sure whether your design is functional and user-friendly, run some simple accessibility tests. At the early stage, you can also conduct guerilla testing with your co-workers who aren’t directly involved in the project. This way doesn’t require an additional budget and won’t take you too much time.

Later, you can consider usability testing or A/B tests, too. The choice of methods depends mostly on your project’s goals, the stage you’re at, and the budget. Such tests should let you quickly discover the potential usability problems.

Find out more:

• UX audit – a way to find answers to usability problems
• UX research and its impact on designing useful apps
• Product Discovery stage – get to know the needs of your target group