Lesson Outline

The Difference Between UI and UX

The terms User Interface (UI) and User Experience (UX) are often used together, and sometimes interchangeably. Although similar, and they often go hand in hand, they are not the same thing.

It is quite easy to simplify this concept. User Interface is the interface for an application - the screens, text, buttons, animations, and so on. User Experience is the subjective experience the user has when using the application. The UI relates specifically to the application, the UX relates to the user. The user interface can help shape the user experience, but they are two distinct concepts.

That may not be an all encompassing definition, but it encapsulates the spirit of the difference between UI and UX. User experience is not specifically limited to interactions with the user interface. User experience concerns also include everything connected to your application, for example:

• The installation process
• The discovery process
• Customer support
• Interactions with other users of the product

None of these have anything to do with the interface of the application, and in the case of interactions with other users this might be something that is very difficult to improve, but they all still affect a user's experience in using your product. If there is a frustrating installation process, then the user can have a negative experience before they even open the application.

Let's consider an example of user experience versus user interface using a tool we are all familiar with: the Ionic CLI.

If we want to use the Ionic CLI, we must interact with it using commands through a command line interface. It basically has no user interface in the traditional sense of a GUI (Graphical User Interface) application.

The focus should be on user experience before user interface, the user interface is just a way to facilitate a good user experience. You can have the prettiest looking interface in the world, but it may still provide an awful user experience. In the case of the Ionic CLI, you have to keep in mind who this is designed for.

If you were to present a person with the Ionic CLI and told them to generate an application with it the experience would be terrible, they would have no idea what to do. However, that is not typically how the discovery process for the Ionic CLI happens. When you install the Ionic CLI you are likely reading the documentation, or a tutorial, which will walk you through the process of what you need to do. So, an element of discoverability plays a big role in the user experience here.

If you do know what you are doing when using the Ionic CLI, then it is a very powerful tool, and the fact you don't have to use a Graphical User Interface (GUI) allows you to work faster. The fact that there is a very limited user interface in the Ionic CLI actually improves the user experience for a lot of people (arguably, the lack of a GUI likely also makes things harder for some people).

Would the Ionic CLI benefit from having a GUI? For some people, absolutely. The Ionic CLI provides a fantastic experience for people who know how to use it, but for people who are not as comfortable with using a command line interface, a GUI would improve the user experience for them. As we will discuss later, knowing who you are designing an application for is important to creating a good user experience.

Summary

The important thing to keep in mind from this lesson is that user interface and user experience are two different concepts. A good user interface is one that helps create a good user experience, but there are also other important factors outside of the user interface that will impact user experience.