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.
Yin and yang are similar to UI and UX in more ways than one. Not only are the pair inseparable, unable to exist without one another, but there are also very few people who can tell the difference between the two. Okay, this might be an overstatement for UI and UX design, but who here actually knows which is yin and which is yang? Without further ado, let’s take an in-depth look into the profession. We’ll clarify what the difference between UI and UX design actually is and go over some of the key stages involved in each one:
UI and UX design: the basic definitions
It’s true that a UI (user interface) or UX (user experience) 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. As the two professions are so intertwined, at Wix, designers specialize in both UI and UX – a requirement that is brought up right from the initial design interview. This allows them to package an optimal product experience, that includes spot-on functionality, content and visuals.
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 or microcopy 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. See how The Entropy Project’s design portfolio, built on Wix, does just that, with powerful visuals that draw you in and create a mysterious and intriguing feeling.
The Entropy Project's online portfolio
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 user experience – 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. Referring to the Wix eCommerce product for example, UX designer Israel Martin Alberto explains that “the experience involves every detail, from start to finish. It’s not just about the online part. It’s about the moment the user clicks onto your site, all the way to the moment they receive their purchase at their doorstep and open the package.” The idea is to accompany the user throughout their whole journey and through different obstacles. “That’s how you can build a strong relationship with the user,” explains Israel. You can take a look at the case studies on these UX design portfolios and these websites for UX inspiration and research to gain a better understanding of the full process a designer goes through, as well as these UX design trends.
UI is no different in that it’s also used for a variety of interfaces, whether they’re online or not. Any product that involves a point of contact between the object and the user, such as coffee machines, keypads and car dashboards, should be designed with UI in mind.
Want to rest your minds and just enjoy some eye candy? Take a look at this inspirational selection of websites that nailed their UX design.