UX and UI: What They Are and How They’re Different

Whether you’re a designer or just someone who is interested in web design best practices, you’ll most likely have overheard conversations about UX and UI (User Experience and User Interface). In fact, both UI and UX are being talked about and used more than ever.

Although both these terms have been around for ages and sound simple, many people (especially laymen) fail to understand their exact meaning.

This post will explain you exactly what we mean by UX and UI. But, before proceeding further, I would like to say that this post is based upon my personal opinion about UX and UI. It should not restrict you from forming your own opinion.

UX and UI – An Overview

When you’re looking for an answer to what a UX and UI exactly is, you’re likely to get several different responses. Below are two of the best definitions of User Experience and User Interface collected from the most credible sources:

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
— Jakob Nielsen & Don Norman of the Nielsen Norman Group

“The user interface is the space where interactions between humans and machines occur.”
Wikipedia

Despite a wide variety of different definitions available on the Internet, many people often misunderstand the meaning of UX and UI. What’s even more surprising is that a lot of them (even designers) use these terms interchangeably. The confusion might be caused by the use of the letter “U” in both terms – something that an amateur is likely to assume. More likely, the bafflement can stem from the use of the same skill-sets involved in UX and UI projects.

No doubt, UX (user experience) and UI (User Interface) are not same, but can be called as related areas.

The user interface is what users can see and interact with, using physical movements. More significantly, UI refers to the elements that enable us humans to interact with a system. However, it doesn’t address the details regarding users’ reaction to the system. This is what brings us to focus on the UX (user experience). Basically, user experience is about creating solutions that require attention to detail – with a goal of maintaining users’ interests.

Understanding the Basic Differences Between UX and UI

1. UX vs UI – In Terms of Designers Role

As a designer, it is very important to understand which aspect of web design you would like to focus on. UX, UI or both. But, you need to be exceptionally talented to work on both UX and UI designs together (full stack designers). For this, you’ll first need to become familiar with the tasks you need to perform as UX or UI designer.

  • UX Designer (or User Experience Designer): UX designers are the ones who’re primarily concerned with how their product feels. They need to explore many different approaches to address and solve user issues. To create a great UX, designers need to focus on several key aspects such as design, content and logical (on-boarding) flow of the product. Also, UX designers are required to conduct tests and observe user’s behavior towards the product to evaluate how it works.
  • UI Designer (or User Interface Designer): Unlike UX designers who focus on improving the overall feel of the product, UI designers pay attention to how a product is being created. Essentially, UX designers are the ones who are mainly concerned about designing a great product – that is the perfect combination of visual design (appearance) and interaction design (concerned with how it works). UI designers are accountable for creating a design deliverable that serves the wants and needs of a user.

2. UX vs UI – Elements Involved in UX and UI Designs

When working on a web design project, UX and UI designers have different roles to play. Here I’ll be exploring the different responsibilities of a user interface designer and a user experience designer.

UX designers mainly focus on creating an information architecture and wireframes, as discussed below:

  • Information architecture. UX designers usually work towards achieving the goal to identify the important content that will be present on each page, such as a sitemap, design elements, links, and much more.
  • Wireframes. Nowadays creating wireframes has become an inevitable part of almost every design project. They help in representing the functional elements (ideally skeletal framework) of a web design – with or without graphics. They’re considered akin to a “blueprint for a building”.

In contrary, UI designers pay heed to creating product branding and final mock-ups:

  • Product Branding. UI designers need to ensure creating brands that encompasses all the necessary items (like logos, color schemes, typography, etc.) that makes it interactive and engaging.
  • Final Mock-ups or Deliverables. User interface designers are the ones responsible for preparing the final mock-ups (or deliverables) that combines both wireframes and graphical elements (if needed) together. The final mock-up represents all actionable elements, helping you understand the overall functionality of your product.

3. UX vs UI – Which Cost Offers Better Job Opportunities

Perhaps, you will find that most of the UX and UI jobs offer similar salary packages. However, UI designers can look forward to better job opportunities beyond the web and mobile landscape. One possible reason could be that the UI field appears to be more established.

Below is a chart that will help you get a fair idea of the user experience designer and user interface designer. Webdesigner has been added as comparison.

The job trends according to indeed.com

According to the notable interaction designer, Dan Saffer, salary package of the UX Designer for new designers in the Southern city is estimated to be roughly around $30k. In the Bay Area, Boston the salary package of senior/principal level designers is around 100k-120k and so on, while the mid-level designers are usually offered a salary package of $70k-$85k.

The expected yearly salary in the US, according to Payscale.

Conclusion

Although User experience and User interface are different terminologies in web design, both terms are used interchangeably and inaccurately, resulting in confusion among both novice and professionals alike. There are a lot of misconceptions associated with these terms. Hope that this post will provide you with a fair understanding of UX and UI.

Sophia Phillips

Sophia is a trained WordPress developer working with WordPrax Ltd. - A leading HTML to WordPress conversion services company. If you're planning to convert HTML website to WordPress for a brilliant online presence, she can help you. Some stunning articles related to website markup conversions can be found under her name.

View Comments

  • In my view UX work involves Requirement Gathering, Field Research, User Research, User Interviews, Usability Plan, User Profile Creation, Persona Creation, Conceptual Design, Information Architecture, Wire framing, Prototyping, Graphics, Branding, Interface Design, Visual Design, Work closely with Development Team, End Product Testing for usability issues.

    UI(Graphics, Branding, Interface Design, Visual Design) is a part of UX

  • User Experience Design starts with a solid understanding of your user-base, generating 'personas' for the dominant character types within you user-base, then setting specific requirements for the project at hand. Sort out your Information Architecture through generating a data inventory and organize a solid information hierarchy which would help a ton once the prototyping process begins. Choose the best prototyping method that would be both cost-efficient and and would allow you to gather feedback and reiterate in a fast and easy fashion. Prototypes could be Horizontal (broad feature-set, less depth functionality-wise), Vertical (deep functionality, narrow set of features), T-Prototype (much of the design is done at a shallow level while some features are implemented in great depth) and Local Prototype (used to come up with design alternatives for particular interaction model). After choosing an appropriate prototype the iteration process begins. This usually varies greatly between working on software products, services or industrial design projects.

    User Interface Design is the actual design of the interfaces that would best facilitate for great, seamless, pleasurable and rewarding interaction between the user and your product. Observing user behavior and making informed decisions based on data collected during your observation is a large part of the UI design work. There's really no point in making empty presumptions when it comes to either UX or UI since the chance you'll get it right decreases greatly. To me UI design feels more like a craft, since you are actually building something beautiful and tangible using skills, knowledge and techniques acquired through experience. I usually use tools like Photoshop, Illustrator, Fireworks, Cinema 4D, ZBrush and lots of pen and paper to get things done. I think it's not possible to be a good UI designer without having a grasp on what UX is.

Recent Posts

How To Use Behavioral Research To Improve Your Product’s UX

Traditional research methods are by no means dead, as data analytics and attitudinal continue to…

3 years ago

The Future User Experience of the Self-Driving Car

We’re at an inflection point with personal transportation. Driving by hand is old-school. Driverless or…

4 years ago

5 Things Digital Marketers need to know about UX

Many designers and digital marketers are giving user experience more and more emphasis as the…

5 years ago

Importance of Storytelling in Creating Perfect UX Design

Storytelling is no longer limited to our childhood memories. I mean who doesn't love to…

5 years ago

5 Things UX Designers Need to Know About Wearables

Wearable technology is making it easier for consumers and businesses to access, gather, send and…

5 years ago

The Dark Patterns of a Webshop

Special offers that can expire at any moment. Little extra's getting into your shopping cart…

5 years ago