UX vs. UI: What’s the Difference?

UX (user experience) and UI (user interface) are two related but separate concepts. They both contain the word “user” and are integral parts of any digital design project. So, what’s the difference?

Concisely, a user interface design is just one part of company’s overall digital user experience. That is, user experience is greater than and includes more than the user interface design. However, user interface design is incredibly important; in fact, a solidly crafted interface design is essential to a successful user experience on the web. One cannot succeed without the other. In order to explain this relationship further, let’s first define both concepts:

“User experience” is a loosely quantifiable but mostly qualitative measure of how well a user’s requirements are met by a product or service. NNG defines user experience as all aspects of the end-user’s interaction with the company, its services, and its products. That means a user experience practitioner can work to optimize any service or product to its users’ requirements. For example, a UX practitioner could work to optimize the user’s experience of a website, a phone call with a customer service representative, a storefront design, and a pamphlet. UX practitioners can even help to optimize international relief efforts in war torn countries.

At MBB, we specialize in the optimizing the user experience of digital properties; our goal is to craft the best possible user experiences through our website design, mobile design, and integrated digital campaigns.

A user’s requirements will be met by optimizing both utility and usability. Utility is how functional the product or service is at meeting user’s needs and expectations. Usability is the valuation of how easy and pleasant the product or service is to use. Both are essential to the UX practitioner.

For example, a customer service representative could be friendly and easy to talk to (good usability) but have absolutely no knowledge of how to answer a user’s question (poor utility). Conversely, a representative could have all of the answers (good utility) but cannot be understood at all because of poor connection quality (bad usability). Both of these scenarios result in less than optimal user experience, as the user’s requirements for both utility and usability are not being met concurrently.

A “user interface” is a tool designed to facilitate human-computer system interaction. In particular, a user interface design relies on the use of input devices and software. Common examples of a user interface design are a touchscreen interface on a vending machine, the buttons on a thermostat to adjust the temperature, a remote control for a cable box, and a navigation menu on a website. In order to interact with a machine, the user needs to supply inputs into its computer system, such as a click, press, or voice command.

Since the only way humans can interact with the internet is through a series of interfaces, a user’s experience is entirely dependent on how well each interface is designed for their requirements. That is why UI design is critical to successful UX design.

For example, a site could have a clear and simple interface design (good usability), but a poor user experience if the content does not answer a user’s questions (poor utility). Or, a site could contain all the information a user needs (good utility), but if it is difficult to navigate, the information might never be found (poor usability).

At MBB, we work to craft our user interfaces around users’ requirements.

In regard to utility, we design websites so that the most important information to the user is found first. We make sure that the content is labeled and structured in ways that the user recognizes. This is called a user-centric information architecture. We test our products to ensure that the user is finding what they need quickly and without frustration.

In regard to usability, we make sure our design patterns are accessible and clear. We use large buttons, text, and commonly understood interaction design patterns (for example, blue text with a carrot (>) is an interaction pattern that designates that the user can click or press to navigate). We stay informed in the latest trends in responsive design. We test our products to make sure each button, link, and menu is clear and easy to use.

So, to answer the question: user interface design is an essential component of an optimized digital user experience.

To learn more about how we can provide both for you, please contact us for a consultation.