Unpacking UI and UX: Exploring language and applications

10 April, 2018 09:57 Published by Santiago

Home

Blog

Let’s talk about UI/UX

Unpacking UI and UX: Exploring language and applications

Alex Contreras

April 10, 2018

These days with so many concepts and acronyms surrounding UI/UX development, it is difficult to keep up. In this blog post, I will discuss the difference between UI and UX, and what the terms really mean.

What is UX?

UX (User Experience) is the experience and perception that a user has when interacting with a product or service. One can generate a good UX by focusing upon designing a functional and desirable product that the user will enjoy.

UX Design (User Experience Design) is a design philosophy that aims to create products that will solve the specific needs of its end users. The goal is to achieve high satisfaction and better use experience with minimal effort. It is a process in which a series of multidisciplinary techniques are used and where each decision is based upon the needs, objectives, expectations, motivations and capabilities of the users.

Most of the processes that use UX Design have the following conditions:

The use of quantitative and qualitative investigations to better understand the end user
Design a product that adjusts to their needs, capabilities, expectations and motivations
A comprehensive test of the design

In many cases, UX tends to get confused with Usability or UI. However, usability is in fact a characteristic of a good UX, whereas a UI or User Interface is the medium with which the user interacts.

Thus, we can create a good UX by planning an optimal experience for the user. While the UI drives me to make a purchase, usability allows me to prevent errors, and UX is the level of trust that a user has in an application.

¿What is UI?

UI (User Interface), is the window that allows the user to interact with an application effectively. It is the sum of information architecture + visual elements + interaction.

UI provides the design that determines the visual aspects of an interface, as well as the user experience inside the application or website. It also provides the product with the necessary structure through the interaction of the elements within the interface.

UI Designer is responsible for visually creating the interface of the product to fit the user experience. The task is to create interactive elements that will look good in a variety of platforms (mobiles, tablets and web). A UI Designer works hand in hand with the development and/or design team, providing style guides and usage patterns.

A UI Designer is in charge of the following:

Interactive design (how the system responds)
Interactive status reporting (system status)
Element design (buttons, registration forms)
Visual design (images, icons)
Style guides (fonts, color palette)

Generally, the UI Designer will have a background in:

Graphic design, visual arts
Industrial design
Technology, Digital products development

As you can see, UX is what a brand or product makes you feel when you are interacting with it, while UI covers the more visual aspects (colors, textures, forms and elements) of the application. UX is not the same as UI.

Behind an incredible product or app, there will be a design phase in which the team will design strategies that will result in an attractive, intuitive and usable interface.

Interface design trends for 2018

Trendy interface designs are always changing and improving according to the evolving needs of users. Let’s take a look at some of those trends for 2018:

Overlapping effects

The overlapping of graphics, colors and fonts not only gives the user a disruptive and eye-catching interface design, it also provides a sense of space. That overlapping effect combined with shadows will also provide a more appealing design to the interface.

Gradients

In recent years, the use of gradients has become a fundamental step in product design. They are used in buttons, icons, lists, backgrounds, and more. With gradients, almost every UI element can have it in its design. Its use provides personality and uniqueness to the product. The combination of styles is what makes it remarkable, veering away from plain black and white.

Opacity

Transparency is a paradox – hated and loved at the same time. It allows us to provide a touch of detail and not just a plain background.

Applied to both products and logos, transparencies provide “texture” to a product; texture that we can combine however we like.

Voice interface

Voice activation in mobile app interfaces simplify user operations. Just like Siri, you can login into an app with voice commands, and never need to lift a finger. There’s no need to press a button or enter a password.

In 2017, mobile applications with voice commands became some of the most popular internet applications. I expect that this trend will continue in 2018.

In addition, I expect this phenomenon to extend to fingerprint-commands interfaces in 2018.

Custom Illustrations

Personalized illustrations play a big role in the design of user interface for mobile applications and will be popular in 2018.

The idea is that mobile application interfaces are created with different illustrations styles, such as hand-drawn, simple, cropped and clean pictorial style illustrations. This will not only make applications more interesting and distinctive, but also provide personality and make them more appealing.

Personalized Experience

It is not enough to offer a good user experience. New products should also be personalized for each class of user.

A “millennial” user is not the same as a Generation X user, for example. In the extreme case, some application development companies have chosen to make a specific product for each generation, thereby maintaining two or more “versions” of it. However a product does not need to have an entirely different interface, but instead could use different access forms, sources and font sizes. It is critical to understand your user when developing applications.

There are many tools one can use for product prototype and design. Over time, they have become more friendly and easy to use so that the designer can focus on how to better satisfy the needs of the users. We recommend the use of tools such as: InVision, Sketch, Webflow, UXP and Prott.

I hope that you now have a clearer understanding of the differences between UX and UI. Don’t forget to share this post with others!

Written by Alex Contreras