What Is The Difference Between UI and UX?

Tell me if this sounds familiar. You’re having a conversation with a marketing person/web geek/digital marketing expert (or some other ambiguous title that may or may not include the word “guru”) and they make a reference to UI/UX. When you ask for an explanation, you’re told that it is an acronym for User Interface and User Experience – as if that makes things crystal clear. Like, bro, have your CRO adjust your UI and UX for max ROI, right?

Fear not: I can tell you that a good number of people using the UI/UX acronym only know it as a buzzword, and aren’t even sure themselves of its real meaning. When pressed, some will simply respond, “It’s the design.” That’s closer to the truth, but only in the way that a nail is part of a house.

As a digital marketing company, we often make the mistake of using acronyms with zero context. There are certain phrases that we use every day without thinking, never realizing that, outside of these walls, they are fairly meaningless. So let’s break this one down a bit.

Start At the Beginning: Design

It is accurate to start with the premise that UI/UX are part of design, in much the same way that interior decorating is a part of building a house. Conscious, planned UI/UX implementation is technically optional, but in the same way that refusing to make a decision is itself a decision, ignoring UI/UX is also a choice. It doesn’t go away; it just gets executed by chance.

To better understand what I mean, let’s talk about the design process. Since we work quite a bit with WordPress, I’ll pick on that platform a little.

As it pertains to design and WordPress, when you begin you have two primary options: using a pre-designed theme, or creating a custom design (the pros and cons of which are described in this post). If you go the theme route, a good deal of the design is already done for you; some themes have an abundance of options to revise the design, while others have fairly stringent layout. At the other end of the spectrum is custom design, where you start with a blank canvas. Either way, someone – either the theme creator or the custom designer – has dictated the overall look and feel of the site.

While design is inherently subjective, there are quite a few best practices that expert designers should follow (a topic for another blog post). These practices encompass a wide range of tactics, including color theory, spatial alignment, use of white space and even more esoteric concepts such as the golden ratio. In short, there is MUCH more to creating a high-quality, highly appreciated website design than simply arranging images and blocks of content.

So, with this in mind, we’re ready to tackle the first part of the acronym.

First Up: User Interface

You may also hear this referred to as “User Interface Design,” which leads to the logical question: What is the difference between regular ol’ web design and user interface design?

The oversimplified answer is that web design is the overall look and feel of the entire website. User Interface is the intelligent design of the controls that users use to interact with the website. Admittedly, it’s a fine distinction with lots of overlap. The key is the idea that UI designers go the extra mile to consider actual humans when designing elements.

Taking this a bit deeper, there is a fundamental difference between a site that simply looks nice and one that is easy for the user to understand. There are scads of “inspiration sites” that designers will sometimes refer to when researching designs and keeping up with the latest trends. Quite often, these are filled with sites that are visual bombardments. There are sites that can be absolutely mesmerizing to look at, but then you find yourself stuck with no idea how to get to the next page. This is a classic example of a sizzling web design with zero concern for usability – or, more accurately, user interface.

Have you ever visited a website, then later thought to yourself, “Wow, I really liked that site” without really being able to articulate why? Chances are you just were on a site with a well planned user interface. Sites like this cater to each individual, even if users come to the site for vastly different purposes. Many times, the tactics are very psychological and subtle in nature, such as proper color theory. But it’s those subtle touches that guide users to the right button, the natural flow of content reading and, ultimately, the conversions that all site creators strive for.

Next Step: User Experience

Here’s a shocker: You can be a UX expert without having ANY design experience (not that it would hurt). With UX, we turn the corner from theory and technique to actual functionality. As mentioned, it stands for User Experience, which is a pretty decent short definition.

A UX expert is tasked with making the site, app, software, etc. as pleasant to use as possible (in other words, the exact opposite of most government websites). These folks bring a host of tactics and knowledge that most web designers don’t possess, such as experience with:

• Content strategy
• User research
• User personas
• Wireframes and prototyping
• A/B testing
• User psychology
• Usability testing

And much more!

Here’s another way to look at it. Think of the Jeep – the iconic design that was introduced in 1941. While Jeep has had competitors through the years, the company has essentially owned its category for more than three decades. But next year, Ford will start selling its new version of the Bronco, and it’s designed to go head to head with the Jeep.

Jeep has had 80 years to improve its vehicle, and improve it the company certainly has. But as a Jeep owner, I can tell you that there are a number of things that you just have to learn to live with, since there is no alternative. The tops (both hard top and soft tops) are ridiculously difficult to get on and off, gas mileage is terrible, and when you take the doors off, you no longer have side mirrors (to name just a few things).

Well, Ford put UI/UX folks to work (whether or not those people knew they were UI/UX folks). The new Bronco shares an overwhelming percentage of its design with the Jeep but, as they say, it’s all about the details. In addition to a multi-piece hard top to make it easier to remove (UX), engine options with reasonable mpg (UX) and body-mounted mirrors (UI/UX), the new Bronco features:

• A bold new front-end design (design)
• A more modern, rounded body that reflects current trends (design)
• Center console-mounted window controls (UI)
• 8-inch touchscreen to control music, phone and navigation (UI)
• Wireless charging (UX)
• Rubberized flooring and washable interior (UX)
• Slide-out rear tailgate table (UX)

Here’s the thing. There is nothing inherently wrong with the design of the Wrangler; obviously, it has more than stood the test of time. But by ignoring the humans that buy them, Jeep has left the door open to someone taking that very design, adding UI/UX and producing a “better” product (acknowledging that the definition of “better” is also subjective, as seen in the flaming that the Bronco is taking in the Jeep forums!).

Wrapping Things Up In a Pretty Bow

When you really get down to it, there is a tremendous amount of overlap between design and UI, and even more when you throw UX into the mix. That being said, the disciplines are unique enough that there are specialists in all three. We do it here at ForeFront with folks who specialize in design, others who concentrate on UI and yet others who are wizards at UX. That being said, there is much crossover between them, and we all work together to produce great results, kinda like the Ford engineers.

Just don’t tell them that I still like the Jeep better…

Scott Kasun started ForeFront Web in 2001 and specializes in strategy, design and UI/UX. He still likes to dabble in programming, and our actual developers have locked him out of more websites than we can count. You can follow him on Twitter @scottkasun.