Since Adam was a boy, three questions disturbed humanity - is there life on Mars, what appeared first - a chicken or an egg, and does a good UI make a good UX?
If you came across this article and decided to have a look, I bet the last question is what intrigues you the most.
On the one side, we live in the era of visuals and tend to give more attention to attractive and aesthetically pleasing things. But from the other side, under time constraints, we demand interaction with a product be a no-brainer. If we can quickly and easily find the information we’re searching for, subscribe for a service, or make a purchase, we’re even ready to forgive the product for some interface flaws.
Having good UI and not-so-good UX or vice versa - what is more critical for a website or app? Does a good UI imply a good UX? And how to measure UI/UX effectiveness?
I gathered noteworthy opinions from Eleken experienced UI/UX designers and illustrative design examples in this blog post to help you understand the UI/UX issue deeper.
So, let’s move on.
UI vs UX: The distinct difference to mind
The different nature of UI and UX is the biggest reason why these two concepts, being interrelated though, aren’t necessarily interdependent.
User interface (UI) stands for a digital product’s graphical user interface (GUI) a user interacts with. UI embraces high-level components such as screens and pages and all the filling inside them: buttons, icons, color schemes, typography, and images.
The first UI design goal is to lead a user through an interface in a way they intuitively understand a flow. The second goal is to display the brand identity, communicate its uniqueness via visual elements, and ensure the design is logical and consistent.
In a nutshell, UI is all about how a person feels when looking at a product.
User experience (UX) denotes the experience a customer gets when using a product. The positive customer experience depends much on the product’s structure, user flow, usability, and accessibility. The main task of UX is to make customers enjoy the product and ensure their interactions are effortless and hassle-free. To reach this goal, designers check UI/UX trends, conduct UX research and UX audits, and carry out usability tests.
How to measure UI/UX design effectiveness?
Almost everything in this world can be measured, and design isn’t an exception. Behavioral, attitudinal, and business KPIs are those metrics that help you gauge how the UX design works.
Simply put, behavioral indicators show what users do with your product, whereas attitudinal KPIs reveal what users think (and say) about your product. And business metrics, I’m sure, you’re definitely familiar with.
Let’s go one by one, though.
Behavioral KPIs
A task-based usability testing is a way to track users’ behavior. It usually evaluates people’s interaction with a product from task success, task time, possible obstacles and frustrations perspective. Let’s briefly touch upon these three parametres.
If eight out of ten users managed to complete a task, task success is 80%. It’s that simple. Task time is a time period a user needs to accomplish a task. And the last parameter, problems and frustrations, is qualitative. It’s based on the feelings the users’ have when interacting with an app or a website. All these indicators can give you a holistic idea of how people perceive you product and whether it’s easy to use.
Attitudinal KPIs
Attitudinal performance indicators are where we’ll stay a little longer since they’re not as straightforward as behavioral ones.
To understand your customers’ attitude to your product, you can use three main metrics - Net Promoter Score (NPS), System Usability Scale (SUS), and Customer Satisfaction (CSAT).
- Net Promoter Score points out customers’ loyalty by only one question “How likely are you to recommend this product to your friends/colleagues/relatives?” Users who reply with nine or ten points are your brand promoters. Conversely, those who put six and fewer points for your product’s promotion probability are “detractors,” lowering your total NPS.
- System Usability Score helps define whether your product is easy to use. After a usability test, a questionnaire collects people’s opinions about the product workability and ease of use.
- And finally, the Customer Satisfaction survey gathers the data regarding overall users’ experience and satisfaction with the product.
Business metrics
Common business indicators that will give you an idea of whether your website or app design works are:
- monthly recurring revenue (MRR)
- conversion rate
- total traffic
- on-page time
- bounce rate
If you aren’t happy with the figures these metrics show, perhaps, the time to redesign your website is close.
Having read down to here, an attentive reader might notice that all these metrics are about UX, but not UI design.
And here is why. It’s difficult to detach the impact the user interface has on user experience. These two design dimensions are so firmly melted together that, to build a successful product, you should pay attention to them both.
Does a good UI entail a good UX?
A good UI design does amplify the user experience. However, a good UI doesn’t automatically imply a good UX. The website can have a modern creative interface being at the same time inconvenient and non-accessible for the users.
Opposite cases also take place. Users may love the product with bad UI yet good UX because a smooth and intuitive customer experience prevails the interface beauty.
It doesn’t mean a pleasant interface won’t influence users’ attitudes to the product, though.
The aesthetic-usability effect claims that people tend to opt for a visually appealing product. If the interface is attractive, users can often disregard minor usability issues. And here the accent would be on minor as whatever beautiful UI is, it doesn’t have enough power to compensate for significant usability flaws. Users will quickly abandon an awkward product they need extra effort to interact with.
Good UI and good UX make a winning combination that underlies any product success. A good website or app is something that makes joy because it's not only a pretty postcard (good UI), but also something that doesn't make your head hurt (good UX).
And what do UI/UX designers think?
🎤 To shed more light on a question "When having a good UI, do we need to invest into good UX?", I held a small Q&A session with Eleken designers where we discussed:
- Does a good UI always mean a good UX?
- Is it possible for a product to have a good UI and bad UX (and vice versa)?
- What is the main task of a user interface (UI)?
🙌🏻 Meet Maksym, Kseniya, and Ihor.
Maksym, a user experience designer:
- Beautiful website isn’t always usable. But usually, good UX incorporates good UI as well. On the other hand, we know many successful projects, like Amazon, that look quite unappealing but doing great. So, the question of what matters more - good UI or good UX - is quite philosophical.
- I saw many really nice interfaces, which can’t be considered good ones in reality, though. They have a poor UX design (for example, they lack inclusivity, necessary buttons, and elements) but do look great! Whereas a beautiful interface is nice to have, a good user experience is a must-have.
- If to measure UX design we can refer to Nielsen heuristics and other metrics, to gauge UI is way more complicated.
Kseniya, a product designer:
- I would add that users generally ignore the aesthetic design components, but if they receive a bad user experience, they will immediately go...to competitors. And I agree with Maksym. It’s not quite an easy task to evaluate the UI solely as, except the design itself, there may be, let’s say, a bad copywriting that would also deteriorate an overall impression.
- The user interface’s task is to create a product feel even though a user may not quite realize it. Sometimes, this approach is used with the purpose to “filter” the audience. For example, gambling websites are such... specifically-looking just for a reason. These websites aim to attract their typical audience that more likely won’t react to a “pretty” website. Once, we worked on a UI/UX website design aimed at tech-savvy users, so we made it intentionally not fancy to attract the target audience and convey the company’s philosophy and values in an appropriate manner.
Ihor, an interface designer:
- Beautiful UI may nudge users to spend a bit more time and effort to clarify how an interface works. The good UI helps diminish some friction in UX to a certain extent. However, if a person can’t understand why they need this website or app, a good UI never helps.
- If a user interface doesn’t fulfill its purpose, it can hardly be considered a good one, whatever beautiful it is.
And following the opinions above, let’s look at some examples.
Design examples: Bad UI with good UX
Truth be told, it was pretty difficult for me to find examples of a bad UI design. Tastes differ, and in most cases, it’s very subjective to claim that this or that UI is bad. As we already know, there are almost no metrics to evaluate the UI. In my examples, I would rather say the user interface is not that attractive, creative, and aesthetically pleasing as I would like it to be, so you may agree or disagree with my judgment.
Zurich web agency decided to go with strict and conservative UI design, although from a structure perspective, everything is clear. A user can easily navigate through the website, which is one indicator of a good user experience.
Though, as a design agency, they could be more creative, making a user interface more attractive.
In the next example, everything could be more or less fine, if not the weird right-aligned text that complicates the reading of the text.
Design examples: Good UI with bad UX
You’ll never guess what to do with this webpage until you start perplexedly scrolling down.
Although the UI is creative and intriguing, the usability level tends to zero, resulting in a bad UX.
Another bad UX design example is the following.
Designers did a really great job applying all the modern design solutions into the UI. However, how much time did it take you to recognize that those blue circle on the right-hand side is a button with the most important CTA?
And one more example on top.
Accessibility? No, I didn’t hear about that. The website’s interface is not at all intuitive, and it’s hard to understand at first glance what a user should do next. It’s quite captivating scrolling up and down seeing colorful, well-designed images. But what if users simply don’t have time for this relaxed website tour? The chances are high that they will quit soon.
Closing thought
For building a product your users will enjoy, it’s crucial to find the right balance between UI and UX, making both of them good. Humans love beautiful things and can be easily attracted by interface aesthetics. But even the most creative UI won’t help if a product’s usability leaves little to be desired.
Ready to build your winning UI/UX design? We’re waiting for you. Meanwhile, read next about UI/UX design principles to create a successful product.
