In the industry of building digital products such as web or mobile applications, the term UI/UX and Graphic Design are commonly used, sometimes together or sometimes independently, and some people wonder if they are the same, or what role each one has within the construction process of a digital product. 


In this article we will go through the definitions of these aspects of design, how they are articulated and what their importance is for end users and the companies that build them. 


UI (User interface)


created by sentavio 

 

Let's begin with the definition of the first term, based on the fact that we interact with machines, a computer, a tablet or a smartphone are essentially machines, to which we give instructions to perform specific tasks, and our way of communicating with this machine is through a user interface (UI). 


This interface is made up of a physical input component, that sends information to the machine (device such as keyboard and mouse), and a physical output component that sends information from the machine to us (devices such as a monitor or speakers) , establishing a bidirectional human-machine communication, which allows us to control and make use of the machine. 


There are many types of interfaces, and for the case of digital products we have the graphical user interface (GUI), which allows interaction through visual elements such as buttons, drop-down lists or menus. 


In a digital product, this aspect must be designed by someone, to guarantee access to all the functionalities and characteristics of the product, which must at least have the following features: 


  • Clarity: The purpose of a visual element must be clear, so the user can make use of it without having to search for additional information.

  • Familiarity: Every time a user starts using a digital product, they must learn how to use it, so there must be common elements in all the components that make easy to user (the user already knows how to used it).

  • Consistency: It is related to familiarity and consists of maintaining a general way of interacting, building patterns that allow the user to recognize and identify how to interact. 

  • Undo: Making a mistake is common in a human being and the user interface must allow going back to a previous state or undoing a wrong instruction.

  •  Efficiency: A good user interface should allow the user to make the minimum effort to obtain the desired result, making the user more productive. 


UX (User experience)


Photo by  SHVETS production at Pexels 

 

UX or user experience refers to the path and emotions that a user goes through when interact with a product. The term was introduced by Don Norman in the 90s when he was working at Apple and it goes beyond the user interface and includes all aspects of an end user's interaction with the product, the service and the company. 

 

In consequence, a design concept that focuses on the user is born, so that user-friendly, valuable and pleasant products are built for users. This requires studying and researching the user in depth, to understand their needs, desires, abilities and limitations. It also takes in consideration the objectives and goals of the companies that manufacture these products. 

 

So, our goal is to generate the best possible user experience with a product, which means intervening in the following: 


  •  Think. What does a user think of the product? Does it have a worthwhile purpose?  Is trustworthy? 

  • Emotions. What does the user feel when interact with it? does it enjoyable? Do you feel calm and confident in its features and functionalities? 

  • Use. is it easy to use and navigate?  has it tools for people with some type of disability (for example, visual or hearing impairment)? 

 


Graphic design


Created by xvector 


This is responsible for the identity of the product, which means, connect the product with a name, symbol and characteristics that make it recognizable. To achieve this goal, at least you must have a name, logo, font and color palette. 


Some of the advantages of having an identity in a digital product are: 


  • Facilitate the initiation of interaction, by easily identifying the product among other products, which share a space, such as the tabs of a web browser or the application view of a smartphone. 

  • It allows people to refer to the product effectively since it has a name, if it doesn´t have it, each person will be able to give it a name or use a generic one, which generates confusion, as they are not sure of the product to which it refers.

  • It can build familiarity with other linked products or the company that supplies it. 

UX vs UI vs Graphic Design


As we see it, these 3 terms are far from be the same, each one brings unique characteristics to the design of a product, and during the process, these are combined to generate the best possible features. 


In the process of building an application, each of these aspects must have a professional in charge, in our exercises we begin with the UX (User Experience) design, conducting user research to explore their needs and desires, we also look for references in the market and we locate the product that we are going to develop within that market, to finally make a design proposal , that consist on a skeleton of the structure, navigation logic and the functionality of the elements with which it interacts. 


 Next, the graphic design professional develops the identity elements of the product and the manual for their correct use, which gives way to the UI/GUI (User interface) professional to develop the product´s aesthetic, applying color, identity, creating shapes and interactions to the product structures that have been previously designed. 


UI / UX / Graphic design, are they important


After analyzing each of the terms, the advantages of judiciously developing each of these aspects are visible, which are inherent to the product and should not be ignored. Ignoring them can result in products that are irrelevant, unattractive, difficult to use, creating confusion and frustration in the users, which will force them to look for a better option, in the case of the market they will use a product from the competition, in the case of internal products for a company, they will stop using it because it makes them unproductive. 


 In contrast, an excellent design can catapult you to success, as is the case of Airbnb that went from being a startup in decline, to a successful company valued at billions of dollars , thanks to a good UX design (User Experience) , which involves the UI and Graphic Design. 


 We at DEJ Software understand the importance of design and we have methodologies and tools to provide you with the best possible UI/UX/Graphic Design, we encourage you to contact us today to discuss your project. 


Author

Juan Carlos Valderrama González

Web/mobile development team Leader - DEJ Software
Juan Carlos Valderrama González - DEJ Software


References

https://xd.adobe.com/ideas/process/ui-design/ui-vs-ux-design-understanding-similarities-and-differences/

https://uxdesign.cc/optimizing-the-ux-honeycomb-1d10cfb38097

https://review.firstround.com/How-design-thinking-transformed-Airbnb-from-failing-startup-to-billion-dollar-business