What is the Difference Between UX and UI?

UX (user experience) and UI (user interface) coexist in the digital marketing space, but they’re frequently misused. While they can’t exist without one another, they’re actually extremely different.

“It may be a bit of an oversimplification—and of course, the lines are always blurring—but it’s helpful to think of UX and UI as left and right-brain, respectively. Thinking of it in this context clarifies how complementary the two disciplines really are—and just how important it is to employ them both.” – Matthew Edwards, Art Director at eCity Interactive

The Origins of UX and UI

The term UX design stands for “user experience” design. Don Norman, the first UX designer and author of The Design of Everyday Things, coined the term in 1993 during his time at Apple. At the 2016 UX Conference in San Francisco, Norman commented on the state of UX:

“Today that term [UX] has been horribly misused. It’s used by people who say ‘I’m a user experience designer; I design websites,’ or ‘I design apps,’ and they have no clue as to what they’re doing, and they think the experience is that simple device: the website or the app or who knows what. No! It’s everything. It’s the way you experience the world, it’s the way you experience your life, it’s the way you experience the service, or yeah an app or a computer system, but it’s a system that’s everything.

The term UI design means user interface design, and it originated in the 1980s when Apple created the Macintosh, which was the first computer to have a graphical user interface (GUI) with more than one window, calling into existence the UI designer.

Related: Download our eBook to learn 7 UX laws to improve your website’s first impressions.

Intro to UX Design

According to Don Norman, user experience is that “moment of first discovery.” It’s everything that touches your experience with a product that may not even be near the product itself. For example, Norman says the user experience of a product begins before you even open up the box.

When it comes to your website, user experience involves the invisible elements that affect how easy your site is to use and navigate and how enjoyable it is for visitors to interact with each element on any given page. This means everything from your site’s reaction when you click on a button to how long an image or video takes to load.

UX Design Wireframes

“UX concerns itself primarily with logic and problem-solving: functionality, user paths, content planning, data. UI on the other hand is how that content and functionality is brought to life.”
– Matthew Edwards, Art Director at eCity Interactive

When you deliver exquisite UX, all of the invisible elements harmonize creating a symphonic effect. In a sense, your website visitors should be so enchanted by the experience that they never even notice the discipline exists. Apple is the prime example of this. All of Apple’s products exude an amazing user experience that is definitely worth emulating.

But UX is everywhere. Think of the operations of a restaurant. When a waiter anticipates the needs and expectations of those he serves, he delights his customers. Often, a server refills your drink before you even notice it’s empty, and if something actually does go wrong, the restaurant might offer the meal free of charge or delight the customer with a free dessert.

Going above and beyond your customers’ expectations and dreams creates a seamless experience, and it’s exactly the same online. The best UX designers anticipate their visitors’ needs and design to ensure their delight.

On the other hand, if your UX is poor, your website visitors will notice the discipline right off the bat because it’s just irritating. We’ve all encountered sites like this. They’re the ones you click out of right away because you can’t find the information you’re looking for quickly enough or clicking on a button doesn’t take you where you actually wanted to go. Poor UX creates a confusing, cumbersome, and counterintuitive experience driving your website visitors towards competitors’ pages.

Related: For practical tips to enhance your UX, check out our next article in this series to learn industry best practices of UX design.

You might be wondering, well, isn’t how a website looks also part of the overall user experience? And the answer is yes. Definitely. And this is where it gets a little bit messy.

UX Bleeds into UI.

To create a cohesive user experience, it’s essential to be mindful of both UX and UI. After all, they’re two sides of the same coin. Stick with us as we demystify the beauty of UI.

Intro to UI Design

An unfrosted cupcake just isn’t as enticing as a frosted one. Am I right? When you hear the term UI design think of the frosting, the visuals, the je ne sais quoi of your site. Similar to graphic design, user interface design is all about the visual elements of a website that draw the viewer in and communicate information clearly.

User Interface Design

“UI designers aim to provide users with an overall more elegant and human experience by employing color, imagery, typography, and the grid system.” – Rachael Ketterer, Designer at eCity Interactive

UI design demands a visceral response. In less than one second of their first impression, website visitors will either decide your website meets their needs or they’ll move on to find one that does. While, yes, UI is definitely a key piece of the overall user experience, it’s also its own art.

UX and UI Design Are Inseparable And (When Done Well) Irresistible.

Try as you might, you just can’t have an exquisite user experience without an elegant user interface. Neglecting just one of these disciplines will leave your visitors feeling frustrated.

Without elegant UI, you’ll have a highly functioning website that looks frightful, and without top-notch UX, you’ll be left with a gorgeous website that isn’t actually helpful. However, if you skillfully craft products that are both functional (UX) and beautiful (UI), you’re guaranteed to enchant your website visitors with lasting first impressions.

Want some practical next best steps to improve your UI design? We’ve got you covered. Check out our UI design post as part of this series to learn best practices of UI design.