If the title of this article drew you in, there’s a good chance you’ve seen some kind of Venn diagram with a dozen circles showing the overlap between user interface (UI) and user experience (UX). This article doesn’t dispute any of that. But it does explain UI vs. UX in an alternate way.

One of the most powerful techniques a UX designer can wield is storytelling. Stories allow an audience to relate to a subject in a more meaningful way and hopefully help them understand it better.

The Cooking Analogy

Let’s start by stepping out of the digital world.

The experience and the food are connected, yet separate.

Consider the thinking that goes into preparing a meal. Good ingredients increase the likelihood of making a tasty dish; however, the way those ingredients are prepared and combined is also very important. Additionally, the pairing of dishes in a meal or across courses matters.

A good meal is comprised of ingredients assembled and manipulated intentionally to create an appealing flavor that is greater than the sum of its parts. This is what a good user interface does.

And yet, the experience goes beyond the meal!

By focusing on the food, we haven’t talked at all about the customer’s goal for the meal, or their expectations given the money they’ve paid. A four-star meal may be appropriate for an anniversary dinner, but totally wrong if the diner is primarily interested in getting a quick bite before heading into an important meeting. And your level of satisfaction from a hamburger depends a lot on whether you paid $5 or $50 for it.

The experience and the food are connected, yet separate.

Think about the restaurants in your area. Why do some of them stick around for decades while others come and go? Is it because the long-lasting ones have the best food and the others have the worst? That is certainly a factor, but the larger experience is a better indicator. How is the service? What’s the ambiance? Is the location convenient? Do they entice you with coupons or “happy hour” discounts? Do you feel that you get what you pay for?

And now, let’s move from the culinary plane to the 2D world of screens.

ux-culinary-1024x415 UI vs. UX: A Culinary Comparison design tips

A Deep Dive Into UI Design

So, what is user interface design? It’s surprisingly hard to define. The crowdsourced (i.e., Wikipedia) definition essentially says that “user interface design is the design of software user interfaces,” which isn’t very enlightening.

A better way to understand it is through the process of deconstructing a user interface into the areas that a UI designer is concerned with. There are actually multiple layers of UI design and multiple factors that a UI designer considers when creating a user interface.

UX Is About (Perceived) Performance

Wait, isn’t making the application fast the developer’s job? What does UX have to do with speed?
Let’s say that the UI designer is the cook in a restaurant. Clearly, they are the key determinant in how fast the food comes out.

But think about what the waiter/waitress does. They usually ask you if you want something to drink first. This doesn’t take any effort from the cook, and it gives the customer something to do while they wait. Then, after you order, they bring you some bread that’s been prepared in advance. Within minutes of sitting down you are drinking and eating something, you are already having a restaurant experience, and you haven’t even tried any of the real food yet. Lastly, if the food is taking an extra long time, a good waiter or waitress will update you, possibly telling you how much longer you can expect to wait.

Even in a casual restaurant, you get an order number, which gives you an idea of how long you’ll have to wait.

Waiting 20 minutes for your food with nothing on the table feels a lot longer than 20 minutes with a good glass of wine and some snacks. It’s not the absolute time that matters as much as the perceived time.

Ready for More?

This excerpt was taken from Springboard’s blog. Head on over to Springboard’s blog to read the full article on UI vs. UX a Culinary Comparison written by Leon, Springboard Mentor and designer and writer for Balsamiq.