UI VS UX: How to Differentiate between User Experience and User Interface


As technology has progressed throughout the last few decades, so have the roles that have been continuing this technological revolution we find ourselves in today. The roles and requirements of UI and UX designers and developers are no exception to the industry’s rapid growth, as UI/UX developers today work on projects spanning from computer applications and websites to wearable technology.

Before discussing the intricacies that separate User Experience (UX) from User Interface (UI), it is important to first gain a general understanding of what these terms mean outside of their vague, standard definitions. These two aspects of design go hand in hand, and both need to come together seamlessly for the final product to be a complete, intuitive experience, but what are the differences between the two? Well, there really is no correct answer to that question because the two are not comparable to each other. Let me explain.

Imagine someone asking you the difference between a shoe and the material that makes up the sole of the shoe. Simply put, there is no difference. The material that makes up the sole is part of the shoe itself. Similarly, User Experience is made up of many different components, with User Interface being just one of them. Still confused? You are not alone.

As Rahul Varshney, Co-Creator of Foster.fm puts it:

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.”

So lets take a look at what UX and UI actually entail…

What UX Design Is All About

The acronym UX was actually coined in the early 1990’s by the VP of the Advanced Technology Group at Apple at the time. His original definition is as follows:

“User Experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

UX is not only limited to the way your product looks, but instead includes all the layers behind your product including how it feels to use, the process that a person goes through to discover your product, how easily you can navigate through it, and the impressions that a person takes away from the experience.

Responsibilities of UX Designers/Developers:

The main responsibilities of a UX designer come down to the creation of the product’s “logic” and to combine their research and design skills to understand the needs of the user and create designs that people want to use. Because UX designers are primarily concerned with how the product feels, they spend a great deal of time meticulously researching and thinking out their decisions. If your final product, whether it be a website or an app, is difficult to use, users will become irritated and move on to something else. On the other hand, if their experience is positive, they are likely to continue using it and refer their friends to it as well, which is the goal of any UX designer.

While a designer mainly envisions the final product, developers are the ones that implement it via wireframes and prototypes. These are commonly developed in software such as Axure, JustInMind, Mockplus etc.  The wireframes are essentially a blueprint for the product and a visual representation of the user interface, without any content or visual design (that is where the UI steps in). Although technical skills are important for any UX developer, communication is also a critical skill, as UX developers conduct research and competitive analysis before the project begins as well as usability testing and A/B testing after the project has launched.

Skills: Design software (i.e. Sketch, Axure, Mockplus, Fireworks, UXPin) and an understanding of programming languages

Education: Most positions require a bachelor’s degree, and some positions may require a master’s degree.

What is UI Design?

When you look at the first computers developed in the 1970’s, the first thing you may notice is the fact that there are no colors, graphics, icons, or even a mouse. To use a computer back then, you had to use the command line interface, as pictured below:

About a decade and a half later in 1984, Apple modified Xerox’s original graphical user interface (GUI) and released the first Macintosh. This was the first commercially available computer to have aspects of user interface never seen before, such as a mouse and icons, with the ability to open, relocate, and remove files as well. Thus, UI design was born.

Responsibilities of a UI Designer/Developer:

User Interface Design is a crucial subset of UX design; therefore, these designers work together closely to provide a positive experience for the user. In layman’s terms, UI design focuses on the user’s visual experience. UI designers determine how a user interacts with an interface to get from point A to B, whether it be an app, video game, or website. UI design focuses heavily on what the user sees as well as how the user navigates through visual touch points. Think about tapping a button or swiping through pictures on your phone for example; whether you hold your finger down on a screen, tap, swipe, or click are all decisions made by UI designers. UI designers also decide on the layout of pages, including what should go where, spacing between different elements, visual patterns, buttons, icons, sliders, scrollbars, etc.

While the UI designer focuses more on envisioning what the user sees as he/she interacts with the product, UI developers are mainly concerned with the actual implementation through web development and scripting techniques. The words “designer” and “developer” are often used interchangeably, especially when discussing UI/UX. What makes this even more of a grey area is the fact that their responsibilities often overlap as many designers have development abilities and many developers have design abilities.

UI designers plan and develop the pages that the user interacts with and make sure that the UI can visually communicate the path that the UX designer had laid out. Essentially, UX draws out the blueprint, and UI brings it to life through visuals and touch points that make the user’s experience as intuitive as possible. At the same time, a UI designer must also work with human behavior in mind. What this means is that UI designers must spend time making the product easy to understand and navigate through visual and touch sensations. Think about applications you use on your phone every day. The best applications are those that did not take hours to figure out, right? That is because the UI was designed in a way that kept human behavior in mind through extensive prototyping and testing.

Skills: Excellent web development and technical skills including Adobe Illustrator, Photoshop, HTML, and CSS. Strong interpersonal, communication, and collaboration skills are also crucial.

Education: Bachelor’s Degree



Blog Categories:

Add new comment