Understanding UX Design - Part 3

In this post-read on the subject of User Experience and User Interface (UX/UI), we explain the differences between the two terms, what exactly they mean, and why they are so important in product design.

User Experience (UX) accompanies us every day and has a major influence on our decisions. In addition, the user experience can also have an impact on business success. A strong user experience, for instance, increases conversion rates in online stores. The conversion rate indicates the ratio of site visitors to purchases, or customers who buy. The ability to make this purchase requires a suitable, well-designed User Interface (UI).

Exactly what that means and how both concepts intertwine are explained in more detail below.

The User Interface (UI)

Humans have found many different ways to communicate information. The most well-known tool is language. Natural language has been helping us humans to communicate with each other for thousands of years.

However, machines such as computers speak a different language than we do. So in order to be able to operate a machine, we need an interface that mediates between the mechanical functions and us humans.

Using the example of our shoe buyer Tim, complex calculations are translated into elements that we can understand and click, which carry a clear command, e.g., “buy now” or “add to cart"—so-called “call to action” interactions.

A good user interface can shape the most complex processes into a framework that we can easily carry out in our everyday lives. Various aspects are important here. These vary depending on the area of application. Using the example of a website, as described at the beginning, the following aspects are particularly important:

? Color and contrast are responsible for the basic recognizability of the elements in the UI design.

? "White Space" ensures that the various elements of the website do not "overwhelm" the user with information overload. It is also known as "negative space" or "empty space."

? Visual hierarchy describes the arrangement of the elements in terms of their importance and the related colors, sizes, and placements.

? Complexity vs. simplicity is intended to indicate that less is often more. An attempt is often made to attract a great deal of attention through an abundance of different visual design elements (shadows, blinking, animations, etc.).

? Consistency gives the user a consistent experience and allows for faster navigation through familiar environments. Using an example, this means: A person who only uses Apple products will most likely have problems using Windows or Android interfaces because the usual consistency of the Apple environment is not available.

? "Scale" deals with the correct sizing of the content within the elements and includes, for example, font sizes, spacing, thickness of the borders, etc.

? Typography represents the typeface and should be chosen depending on the content conveyed. Playful content can certainly be visualized with appropriately playful fonts, while serious content often has serif fonts; modern content, on the other hand, is currently mostly displayed with san serif fonts (French for "sans serif" or "sans serif"). Two well-known examples are Times New Roman for serif fonts and Arial for sans serif fonts.

The User Experience

User Experience describes and encompasses all types of impressions and the user's experience when interacting with a product.

The term is often associated with the design of websites and apps. Overall, however, the term should be considered for any type of interaction with a product. Like the UI, the user experience has various aspects that work towards the overall result. These are briefly outlined below.

The first aspect is directly related to the UI and is referred to as "visual design." From the UX point of view, however, the main focus is on the interaction of the individual visual elements such as color, images, and symbols in order to enable a "coherent" and good user experience. The individual aspects of the UI are therefore considered as a whole with regard to their effect on the recipient. Therefore, even small changes to the UI can have a big impact on the UX and lead to a significantly better or worse user experience.

Figure shows that the example on the right shows how it works much more clearly than the example on the left, caused by small changes to the color scheme or different buttons.

Often upstream, the UX deals with the area of information architecture. In the sense of this term, it is about the structure and organization of information. In the context of websites and apps, a coherent navigation concept for the menu is also important.

In addition, the categorization and designation of content is dealt with.

Wireframes, for example, can be used as a possible method or tool for designing the information architecture as a preliminary stage or partial aspect of prototyping (more on this topic in our reading From the idea to the app).

In addition to the first two points, the interaction design also plays an important role in the UX. It focuses on any interaction between the user and the product to make it intuitive and efficient to use. The designation of the design of human-machine interfaces (HMI) is synonymous. The research area therefore focuses on researching the expectations and needs of users in order to optimize the MMS based on the knowledge gained.

The last aspect of UX, usability, is closely related to interaction design. The most important point of differentiation from the previous points is the clear target orientation. The usability of a product or part of a product is always aimed at a specific goal that the user has to fulfill. In our example, the overarching goal would be to complete the purchase of a shoe. Subordinately, however, usability could also refer to the process of selecting a suitable shoe or the payment process. Accordingly, a clear context of use must be defined in order to be able to carry out the evaluation and tests with regard to usability.

Conclusion

In summary, it can be said that the UI and the UX are closely linked and directly influence each other. Nonetheless, they can be distinguished from one another. This rereading allows you to understand the terms better and to be able to separate them from each other.

In simplified terms, the difference between UX and UI can be described as follows:

The User Experience (UX) addresses the feelings and experiences of the user when using the product.

The User Interface (UI) revolves around the visual aspects of the product, giving the UX an aesthetic and pleasing look.