What is the difference between UX and UI Design? A Beginner’s guide
Have you ever heard someone saying, ‘ UX of the product is very good’ or ‘ UI of the website was very bad and I had a very bad user experience (UX) with it’.
What does it mean? Why people are using two different words ? What are they talking about?
User experience (UX) and User interface (UI) are two terms which every designer is familiar with. Normally paired as UX/UI design, they’ve been growing popular in the Design industry to build winning products.
We often get confused because we consider that UX/UI talks about the same thing. Not just that, even lot of time the industry also creates confusion by using the terms interchangeably.
But is it really so? Does UX/UI is the same?
The answer is No. UX and UI are as different as Chalk and cheese. However it is interesting to know that at the same time they are dependent on one another too.
To clear out the confusion, in this article we will explore in detail
- What is the Difference between UX and UI Design?
- How does UX and UI works together?
So, lets dive in. It going to be an interesting read
What is the Difference between UX and UI Design?
Don’t you want to know What does UX and UI actually mean? Lets start with basics first
What is User Experience (UX)?
First things first, UX stands for User Experience simple. Coined by the Cognitive psychologist and designer Don Norman in the 1990s, User experience (UX) refers to the Interaction a user has with a product or service and the experience they get with the interaction.
It is in fact a person’s feelings, attitude and emotions they feel while using any product or service. A good User Experience firstly emerges by meeting the exact needs of the customer. And then it encompasses simplicity and elegance in its design which brings joy to the customer.
In fact, a True User Experience is a seamless integration of engineering, User Experience Design, marketing and so on.
lets just say that you visit a Movie theater. What was your first impression as you walked in?
How about the seating arrangement there? How about the food counter? Would you like to go back again?
All this, encompass the user experience (UX) with the Movie theater.
It is moreover interesting to know that history of UX can be traced all the way back to 6000 years — if not earlier.
A great User experience (UX) is rooted in having a deep understanding of users. It focuses on, what they need? What are their abilities, and limitations?
What is User Experience (UX) Design?
‘UX Design’ stands for ‘User Experience Design’
Since decades Design has been associated with the graphic design which mostly includes How the Product Looks. However, a Good Design is not only about how it looks but also includes the experience that a user has while interacting with a product.
And UX Design is the process by which a UX designer builds that experience around the product.
User experience (UX) design is process of creating a product or service which provides the users with a Pleasant experience which ultimately enhances the satisfaction & loyalty within the user.
UX design considers all the elements to shape up a great User experience (UX) .
So from touching the physical product with your hand and feeling it; to navigating through an app; to purchasing a T-shirt on a website and being able to do a smooth checkout; User experience (UX) Design is about creating a design that makes an easy, efficient and Pleasant experience for the user.
From Functionality, to Graphic Designs,to the emotions, to Usability of the Product and so on, a UX Design is an integration of all these aspects.
And a UX designer seeks to design products so as to create a Great User Experience (UX) through design thinking process .
What a UX Designer Does?
1. Conduct UX Research — A UX designer first seeks to understand and observe the User by conducting Empathetic research and studying competitor as well.
A UX designer does UX research with the help of a UX researcher in bigger organizations, or even independently in smaller organizations.
2. Create User Persona– They use the observations to build User Persons by identifying user’s goals, emotions, pain-points and behaviors.
3. Brainstorm to build ideas- After identifying the Design Problem, UX Designers Brainstorm with the Team to form solutions.
4. Create Prototype– UX Designer then creates wireframes and prototypes of what the final product might look like.
5. Conduct Test — In addition to that, UX designer also conduct user tests with target users to learn about validity of the solution and use the feedback to iterate the prototypes unless UX designer has built something which is loved by the Users.
So, now you know that a UX Designer essentially has to wear multiple hats in the Design process however, in large organizations a team of designers are hired to complete a specific part of the process.
What is User Interface (UI) Design?
‘UI Design’ stands for ‘User Interface Design’
A user interface UI is about the point of interaction between the user and a digital device or product. In Digital world it represents each visual element on a technological device, that a user might interact with. A technological device can be any computer or mobile device, applications and websites.
And in very simple terms User Interface (UI) design is the process of creating look and feel of the Interface. Additionally, Main aim of a UI design is to design a User Interface so that a User has a good experience by interacting with it.
User interface (UI) design looks in the aspects of how each element of the product looks, which includes placeholders, buttons, text, check boxes, images and so on. Basically any visual interface elements that people interacts with.
Think of it like the touchscreen on your smartphone, or the touch pad you use of a microwave. If we talk about the UI in relation to websites and apps, it is about the look, feel, and interactivity of the product.
And the UI designer considers all the visual, interactive elements of a product interface and designs it.
Lets quickly review what UI design is
- UI design is about how the product’s interfaces look and function. What the user sees and How they interacts within the product.
- End goal of user interface (UI) design is to make the user’s interaction as simple and efficient as possible so that they are able to accomplish their goals.
- It is specific to digital experiences. And considers all the visual and interactive elements of a product interface including icons, buttons, typography and color schemes, imagery, and responsive design.
Difference between UX and UI Design
Let me simplify the difference in one sentence UX design is about the overall feel of the experience with product, and UI design is about how the product’s interfaces look and function.
1. UX is about Usability, UI is about Beauty.
Usability refers to the ease with which a user can use a product in order to achieve his/her goal a. A product which is high on usability makes it easy for user to accomplish his/her goals.
Furthermore, Usability is one such Important principle of UX and it is the job of UX designer to conduct competitive analysis and ideate solutions to develop prototype which would be most usable to the customers.
Additionally, A UX designer conducts rounds of usability tests by iterating the prototype to make it most usable. Here comes the UI designer whose job is to make sure that UI of the product aesthetically pleasing, simple to navigate and use.
And the UI designer considers all the visual, interactive elements of a product interface including icons, buttons, typography and color schemes, imagery, and responsive design. Furthermore, the goal of UI design is to visually guide the user as to where & what to do, so that they meet their objectives.
2. UX is broad, UI is specific To Digital Interfaces
It is also important to note that Unlike UX which is a broad field and applies to all products and services or any experience, user interface (UI) is specific to digital products and experiences.
As UX and User experience (UX)design is getting more more popular , business are realizing that Just creating a Beautiful Product doesn’t work anymore. In fact, a Good Design starts with considering needs of human beings and designing the solution tailored to their individual needs.
User Interface design is about digital interfaces. Having said that, it doesn’t mean that digital interface is only limited to designing applications, website or designing the graphical user interfaces (GUI) of computers.
However, there are lot of technological products like interactive digital kiosks or a modern microwave with digital screens , an apple/Samsung watch or just think about IOT devices and many more.
3. UX is data-driven UI is looks driven.
UX follows a design thinking process of conducting User research, ideating solutions and testing prototypes to come up with a product which is most useful to users. Each step in the UX process generates data which is analyzed & synthesized to fed into the next step of the UX process.
Its important to note that that Data can be both quantitative as well as qualitative. And a UX designer requires skills of analytics, psychology, strategic business planning and more to make a use of data.
UI design follows in after the analytics part is done and bare bones of the product is designed and UI designer then fills it in with visual and interactive elements.
4. Difference in the Deliverable
A UX designer goes follows the journey of a user by conducting User Research to solve a problem. They learn about What tasks do they need to complete? what steps they take complete the task? And so on.
They focus on finding out the problems User have how a certain product might solve them. Furthermore, the information is used to map out the user’s journey across a product by creating a User Journey Map.
It is the job of a designer to the Information Architecture of the product. Do not get scared by the word. It simply means How the content is organized and labelled across a product.
Additionally, It also identifies and defines the major features the user might need. The inputs from Information Architecture (IA) are then used to create a blueprint or skeletal framework of the product which is known as creating wire frames.
So some of the Key Deliverables of a UX designer are
- Empathy maps/ User Personas
- User Journey Map
- Wireframes
This is when UI designer comes into the picture to design the UI of the product. The UI designer first sits with UX designer to understand the wire frames and learn about the key visual aspects of the user’s journey.
And then UI designer designs the UI of the design which includes individual screens and various user touch points.
Touch points is a jargon which simply means the point of interaction between the customer and business. For example, visit your website, and checks out a product or contact your customer service.
Some of the examples of designing touchpoints are tapping a button or scrolling down a page or swiping through an image gallery.
Key Deliverables of UI designer
- Style tiles
- layout mockups
So you see while UX designer maps out the journey, the UI designer focuses on how to make this journey possible. They will look into different aspects on designing the UI for example what colors soothes the eyes? What icons would be understood by users? what fonts are readable? and so on
5. Difference in the tools used by UX and UI Designers
Because of their job responsibilities and areas of work the kind of tools they use are different as well. A UX designer follows the entire design thinking process which ranges from creating empathy maps, personas, customer journey maps, user flows, storyboards, wireframes and so on.
There are different online tools available (free or at a cost) to create them. Some like me goes the old school way and use PPT to create different assets.
For UI designers, designing the interface and looks are of prime importance. UI design creates the skin and appearance of a product. Hence, tools like Sketch, Adobe XD, have an advantage.
Graphic design tools like Illustrator, Photoshop are used as well. Figma is emerging as a new star with a team collaboration function which gives it a competitive option. Infact, the cherry on the cake is that Figma offers free version as well.
How does UX and UI works together?
Though, UI and UX design are different and requires different skill sets. However for a Product success both are integral to each other. Infact, in order to create an astounding user interface/experience both UI and UX designers need to align together.
You need to have the best of both worlds. Because just like a beautiful design can’t save an interface which is confusing to understand and navigate , similarly an easy to use Interface can lead to awful experience if the visual interface design is unpleasant.
While a UX designer makes sure that the product is built in the most efficient manner and useful to the user, a UI designer makes sure that the product is such that it keeps the user engaged and glued to the product.
Or in simple terms User Experience (UX) is design about making a Product Useful and User Interface (UI) design is about making that useful product beautiful.
Think of it like, UX design is the ingredients for a cake, the UI design is the icing and decorations on top.User Interface design adds the beauty and spice to the User Experience design already in place.
While the icing and decors like the color, icons, shape and style of a button or selection are decided by UI design, the placement of the buttons and what would happen by clicking on that button is decided in the UX design.
So you see, UX and UI designers need to work together from the beginning to make sure everyone is on the same page.
Key Takeaway
Though UX and UI design needs different skill sets, however Sometimes UX and UI are done by the same person. If you are working with a startup or as a freelancer then UX and UI is done by the same person as budgets are often tight.
Having said that, it is very common to see that in bigger organizations times you’ll find companies recruiting multiple designers who specialize in each area.
Remember i said before UX and UI are as different as Chalk and cheese. However at the same time they are dependent on one another too.
Hope now things are clear
Thankyou for Reading. 😀
