The difference between UI and UX

I have been a web developer for over 6 years, and during my work life, I have worked both on front end and back end web development.

In the past 6 years, I have seen innumerable people interchange UI(User Interface) and UX(User Experience), some even mid-sentence, thinking they are the same. They could not be more wrong.

Both these have a world of difference between them, and what is remarkable is the difference between the people who work in these fields. The people in UI and UX have different mindsets, different way of thinking, and they ride completely on different trains of thought.

Source: Cdm.ca

Therefore, here is a clean explanation of the difference between UX and UI:

UI = UX

This is the most common misconception you will hear in the workplace, client meetings, and often in job postings. The confusion may stem from the overlap of the skill-sets involved in both disciplines. They are certainly related, and in fact many designers are knowledgeable and competent in both.

However, despite the overlap, both fields are different in their overall objectives and scope. The following diagram explains the difference between the two fields:

Difference between a UX designer and UI developer

Both UI and UX are different fields, therefore, the skill-sets in these roles are also different. This distinguishes both the roles as precisely as possible.

A UX designer’s prime responsibility is to combine research and design skills to understand the needs of the user, and produce concepts/ designs/ solutions that people want to use. This requires a focus on psychology, user behaviors, and understanding why people do what they do. Most UX designers can tell you what it should do and why it should do it, but can’t actually build something that works.

Application developers

They are programmers who are familiar with HTML, CSS, Java Script, and other back-end programming languages (Python, PHP, etc). It’s all about code, logic and the left-side of the brain. They are capable of building something that will technically work, but it might not create a very good impression for an average end user.

UI developers

UI Developers fill the middle ground. They are equipped with both technical and design skills. They are skilled at making something that looks good and function in a browser/ device at the same time. They can produce beautiful designs in Photoshop and convert the same into HTML code. This requires in-depth understanding of browser capabilities.

The design section in diagram 1 can be split into three parts:

• Visual Design
• Interaction Design
• Information Design

Visual design is the use of imagery, colour, shapes, typography, and form to enhance usability and improve the user experience. Visual design as a field has grown out of both UI design and graphic design.

Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviours and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.

Information design is the practice of presenting information in a way that fosters efficient and effective understanding of it. The term has come to be used specifically for graphic design for displaying information effectively, rather than just attractively or for artistic expression.

The line between these three design disciplines is very blurry and rarely possible to separate entirely ( They are articulated best in Jesse James Garret’s JJG Elements of UX.

I would expand the diagram as follows:

To further expand the distinction between the roles:

• UX designers use site-maps, prototypes, wireframes to decide the structure, layout of content, navigation and how users interact with them. The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.
• UI developers decide the way in which the functionality is displayed, and how users interact with the interface. They produce the visual components and the complete front-end code.

The other role I have added to the expanded version of the diagram is the “Graphic Designer”. It’s worth mentioning that there are specialists who tend to work solely in Photoshop to produce static visual components. This starts to talk to the area of illustration, fine arts, print media and the more creative stuff.

Job responsibilities of a UI developer and UX designer

The goal of a UX designer is to connect business objectives to user needs through a process of testing and refinement to that which satisfies both sides of the relationship. The UX role is complex and challenging as it involves analytical and creative skills.

UX responsibilities

The responsibilities of a UX designer are as follows:

Execution and analysis:

• Coordination with UI designer(s)
• Coordination with Developer(s)
• Tracking goals and integration
• Analysis and iteration

At the beginning of the project:

• Competitor analysis
• Customer analysis
• Product structure/ strategy
• Content development

While the project is underway:

• Wireframing
• Prototyping
• Testing/Iteration
• Development planning

Therefore, a UX designer may not necessarily have any experience in graphic design, but it is common for someone working in UX to have at least some graphic design knowledge. The UX role is challenging, complex, and multi-faceted. The ultimate goal of a UX designer is to connect business goal to user’s needs.

Let us have a quick look at the UI Designer’s responsibilities:

• Collaborate with product management and engineering to define and implement innovative solutions for the product direction, visuals and experience
• Execute all visual design stages from concept to final hand-off to engineering
• Conceptualize original ideas that bring simplicity and user friendliness to complex design roadblocks
• Create wireframes, storyboards, user flows, process flows and site maps to effectively communicate interaction and design ideas
• Present and defend designs and key milestone deliverables to peers and executive level stakeholders
• Conduct user research and evaluate user feedback
• Establish and promote design guidelines, best practices and standards

As a visual and interactive designer, the UI role is crucial to any digital interface.