Design with a Punch: Comic Books and the Difference Between UX & UI

The best way to explain any complex topic is to think about how you would explain it to a 10-year-old. So we asked Brooks Bells’ Senior Experience Designer, A.J. Bikowski, to use this approach to tackle a question that we encounter a lot: What’s the difference between UX and UI?  Here’s his take. 

Many people have trouble with the distinction between user experience (UX) and user interface (UI). When you need to get to the heart of something, I find it’s best to stick with an analogy that is personal to you. And as a guy who loves all things dorky, I immediately think of comic books.

For those of you who have never read a comic (first of all, shame on you), they have so much UI they practically KAPOW you in the face with it! The pages, the binding staples, the frames the artwork—the list goes on. These are all elements that make up a comic books’ UI.

But there are outside elements that make up an interface: things like the pages you have to turn, the words that are in each bubble or even how much light you need to read your comic book. Simply put, the user interface is made up of all the stuff you have to touch and interact with to accomplish what you’re trying to do (which is to read some killer comics, of course).

On the other hand, the UX, or the experience, is the feeling you get when you’re finally reading that amazing new comic. In the end, your behavior was influenced by the UI, but how you felt while doing it—that’s your UX.

This metaphor also applies when we consider the user journey in the digital realm.

Just like a comic story arc, your users have to follow a linear progression of tasks in order to accomplish their goal. In a comic book, the superhero’s goal is to defeat the bad guy; for your user, it may be purchasing a new product or signing up for a new service.

Throughout their journey, your user will need to interact with countless interfaces: the navigation, the buttons, radio toggles, form fields, font sizes, colors and more. All of these elements work to help your users along their way to accomplishing their goal.

But when a single UI is out of place or broken, what happens to your user journey? How does it make them feel? And will that feeling make them complete the task at hand, or will they abandon their mission?

Understanding that the difference between UI and UX is important, but it’s more important that you understand how these elements work together: every user will have to use your UI to accomplish the task at hand. How they feel while using your UI is critical to whether or not they’re successful, and whether they’re willing to come back for more.