In the wild world of web design, terms like UX and UI get thrown around all the time. But what do these mean exactly? While UX (User Experience) and UI (User Interface) design are both crucial components of delivering an exceptional web experience to end users, they are not the same. We’ll quickly break down the key differences between the two and talk about how the two integrate with each other.

Image for post
Image for post
UX Movement

UI primarily encompasses the visual aspects of web design. It develops different layers of presentation and interactivity, giving a product an overall look and feel., an important resource for web best practices and guidelines, categorizes the different UI elements as:

  • Input — Text field forms, date field forms, dropdown lists, checkboxes, list boxes, clickable buttons, etc.
  • Navigation — Sliders, search field forms, pagination, sidebars, tags, icons, etc.
  • Sharing — Friend lists, follow buttons, like/promote, share buttons, invite friends, etc.
  • Information — Text content, tooltips, message boxes, notifications, icons, progress bar, etc.

User interface design does not just cover what you see when you first come to a page, but also includes the design of what these elements do when a user interacts with them. This weather app below is a prime example of the interactivity component of user interface design being played out:

Image for post
Image for post

If UI covers these elements, what is left for UX? User experience design is defined as the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. In order to create this high-quality experience between a company and user, user experience designers focus on the processes of research, usability testing, and other aspects of understanding the customer. For example, many UX researchers use A/B testing in order to figure out which of two designs resonates better with an end user.

Image for post
Image for post

So, how are these two related exactly? Effective UI and UX design work hand in hand to create an overall pleasing experience for users. If one of them is not up to par, it will significantly affect the performance of a website. For example, a website will feel off if it has great UI and poor UX because it would look amazing but would be terribly difficult to navigate. On the other hand, something that is very usable that looks poor is exemplary of great UX and poor UI.

For more on UX, UI, and Usability, check out:

Originally published at on May 28, 2015.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store