UI vs. UX

You can have a pretty, glass ketchup bottle on your table at a restaurant and if you never use it you will appreciate it more than the uglier, upside down plastic ones. As soon as you want ketchup though, you will wonder why so many restaurants still use the glass bottles.

For as long as humanity has had the audacity to create and the pragmatism to amend, there has been a debate between creatives and engineers that will never come to an end. If you are designing something that also has some practical function, you will almost undoubtedly have to make sacrifices in one direction or the other. With the advent of the computer and the internet it’s a problem that has become even more prevalent, one that everyone who uses an ATM, computer, smart phone, anything with a screen and an input, has to deal with.

In the context of applications, the problem can be framed as a competition between having a clean and attractive user interface (UI), while also providing an intuitive and enjoyable user experience (UX). While essentially everyone is the target of these interfaces and experiences, many people don’t actually understand the difference between those two concepts. It’s very difficult to understand in today’s age as well; with the recent trends towards minimalism in design, there is a sincere marriage between UI and UX and they can seem synonymous.

I like to use the analogy of a glass door to describe that marriage (and it’s difficulties) in the context of a real world experience that we have all gone through.

Below is a glass double door as the entry point of an office. It’s very pretty, very modern. It is a perfect example of minimalism and practicality in design. Being that it’s see-through you can see if there’s anything blocking the doorway, and also who is in the office.

If this door were a program, the fact that its see-through would be UI and the fact that it allows the user to know if the office is occupied would be UX. The grey dotted accent running across it is UI. The fact that those dots don’t obstruct your view of the office is UX. The UI is purely the design of the app(aratus). The UX is how that design affects you while using or even just looking at it.

It looks a way. It functions a way. UI and UX.

In the examples I provided, UI and UX complement one another pretty well, but that isn’t always the case. Let me ask you something; is this door push or pull?

At first glance, there is no way of knowing. The handles have no indication of how the door should be opened, and handles are the place most people are accustomed to looking for that kind of information. If you were introduced to this door, you would probably just try both and risk a 50/50 chance of looking kind of dumb to everyone on either side of the door. Or maybe it swings in either direction, we can only hope so.

The fact that the handles are the same on both sides is UI, and a clean UI at that. The fact that they don’t tell you anything about how you should open the door is UX. Poor UX, unfortunately.

Upon closer inspection, though, we can see that there is a door closer in the top corners. If you happened to have ever paid attention to the thousands of door closers on the thousands of doors you’ve walked through, you may be able to ascertain that this door in particular would prefer to be pushed from the direction we are approaching it.

If you did reach that conclusion, I wouldn’t actually be able to argue because I’m not actually sure how door stoppers work. Why should I have to pay attention to a door stopper?

Trick question; I shouldn’t.

Those little “PULL” signs are atrocious, but I do appreciate them.

Therein lies the difficulty that occurs when creating a product, program, or device for other people to use. There is an eternal argument between design and function. UI only wants to be pretty, UX only wants to work. As such, they can not always be made to work perfectly in harmony. The door in question has done nothing wrong, it’s a perfectly good door, and people who use it all the time would attest to that. On the other hand, people who don’t use this door all the time may not enjoy how little it has to say about how it actually works, and as a result they may never want to use it again.

UI and UX are all around you, and not just on all of the screens. Where there is form there’s a parallel to be drawn alongside UI, and function follows the same rule. Keep an eye out and you’ll understand the relationship more and more every day.