Understanding the Difference Between UI and UX Design

Whether or not UI and UX design are a mystery to you, it's safe to say that each workplace has a slightly different approach. Here's a look into the essence of both disciplines.

UI and UX design: the basic definitions

It’s true that a UI or UX designers’ main aim is to enhance users’ satisfaction, by creating products and interfaces that are intuitive, simple and efficient. And many people have a part to play in this, including developers, content writers and more. But what exactly is each designer’s role within this overall aim? In general terms, UI is about the visual design of the product interface. Depending on the nature of the product, this normally includes the layout, icons, buttons, information architecture, colors, typography, animations and illustrations. And as the name suggests, UX is about the user, or rather, human experience. It’s about analyzing people’s intents when they use the product – what they should feel, what they need to understand and what action they should eventually take. In most cases, this part is done first, followed by the visual design.

To summarize with an effective metaphor, you can think of it as a house: UX is about providing the skeletal structure, deciding where each room should be placed, planning the electricity system and other structure-related aspects. The UI is more about the details, such as the doorknobs, curtains, colors and more. In the end, all these elements come together to make up a whole experience and atmosphere.

These might sound like two very separate areas of expertise, and it’s true – they are different and each one requires a wide array of skill sets. However, just like coffee and cake, they complete one another. Imagine, for example, an instruction manual for a complex coffee machine. It could be the most beautifully designed thing in the world, with the most stunning color palette and on-trend fonts, but if it the user doesn’t manage to understand what they’re supposed to do, they may as well throw it away (or hang it up on their wall). That’s exactly where UX comes in.

Is UX just about functionality?

A large part of UX is about making a product functional, but the road to perfect functionality is long and winding. When it comes to the house example (hint: look up!), certain things might be obvious to us, as we have personal experience of them. We know that it makes no sense for the electricity sockets to be too high up to be reached and that a kitchen sink that’s far away from the dishwasher is a nuisance, not to mention having to get out of bed to switch the light off. But when it comes to developing other products of whom we’re not users, further work and investigation is required. As well as the structure and functionality, many products also involve visual and textual experiences, which is why UX designers and writers work together closely, especially at the beginning of a project. Without the right text, it’s difficult to test the product, so taking care of the text from the start is important. On top of working with UX writers, designers from this field also collaborate with a number of other team members, such as product managers, engineers and more. Together, they conduct the following research and processes, while constantly keeping in mind the desire to create a product made up of an optimal mixture of business goals and user needs:

– Product analysis: gather BI (Business Intelligence) to understand more about your users’ behavior, know support issues users have faced in the past or are likely to face, do competitive analysis, pinpoint the pain points and determine the goal of your product. As soon as you have a goal, you can create a plan and stay focused on your purpose throughout the process.

– Create low fidelity wireframes and interactive prototypes that include user flows, focusing on allowing users to fulfil their desired goals. To do this in the best way, know which personas will be using your product, what their aims are, and what their entry points are. Creating various iterations will help you understand the different scenarios of the product and which screens and panels are required. This preferably comes before the visual part of the design and even more importantly, before the technical developments are too advanced.

– Conduct usability tests throughout the project (as well as once the product is live) so that you can make the right decisions. It will also enable you to save design and development time.

– Once the product is live, further tests and analysis are done, so that the product can be refined. Also conduct A/B tests to get insights into how your users interact with the prototype (or live product) you created. You can discover what they liked, what they found challenging and ultimately – how you can improve the product.

Is there more to UI than beauty?

When there’s a final structure and prototype that has been tested and approved, the UI design begins. Of course, the name of the game is to create a beautiful product, but that’s not all. In fact, the appearance of any product has a much deeper, psychological impact on the user. Imagine, for example, how a room with cream-colored linen curtains blowing in the breeze would make you feel, in comparison with dark heavy velvet ones. And pressing a smooth touch-screen light switch will feel completely different than a standard switch. These are just a few of the decisions UI designers take into account. Depending on whether they’re working according to a design system, or for a newer brand whose visual language may not be as clearly defined yet, here are some more details that their work entails:

– Gathering inspiration and exploring various concepts. – Designing various details, such as buttons, text fields, drop down lists, menu bars, search fields, icons, accordions, pop-up boxes and more, keeping aligned with the brand’s language and the product’s style guide. This means that all visual elements will be consistent and will come together to form the desired look and feel.

– Choosing a color palette that’s in line with the branding.

– For digital products, UI designers add extra elements (or “delighters), such as animation, video, illustrations and micro-interactions, to complete the overall experience and achieve the desired vibe.

– Making sure any online assets are responsive, working well on desktops and mobiles of different screen sizes.

Creating emotional connections with users

As already mentioned briefly, the visual aspects of an interface can evoke different emotions, as can text, that has a crucial part to play in the user’s overall experience. Let’s examine this topic further, from a UX perspective too. The aim here is to spark a connection with the user, creating something that they can really understand. By basing a website or app’s structure on a mental model (or in other words, something that we’re familiar with from our everyday lives and experiences), the user is more likely to feel a cultural or emotional connection. What does this mean in concrete terms? You can try replicating a familiar situation, like strolling around a city aimlessly, into your online design portfolio, for example. Just like you might discover surprising spectacles when walking around city streets, you can make the online browsing experience fluid, with fun little surprises along the way, such comical animations, interactions and more.

When it comes to visual design, there are infinite ways to conjure up emotional connections with users. UI designers aim to develop a whole language that will be consistent throughout every detail of the brand’s products. Anything from color choice, to illustrations, videos and sound can be used to evoke sensations and communicate a specific vibe. A website featuring cute hand-drawn illustrations and pastel colors will make the user feel one thing, whereas a website with a dark fullscreen video on the homepage will create quite the opposite sensation.

User experience beyond the four corners of your screen

What’s the first thing that comes to mind when you think of UX? If your answer was anything involving websites and mobile apps, you’re right. But these days, the scopes of both UI and UX are broadening. Companies have a growing awareness of the importance of understanding their users and how these methods can improve their experiences – ultimately, impacting retention. UX is now employed across a variety of products, interfaces and services – and not only those with a web presence. It’s not just about the interface but rather about the product’s experience as a whole.