UX is not UI

if you deliver the UI project and the clients asked where the UX is and you don’t know what to deliver next, read this.

I saw a joke going around recently, where people still struggle to differentiate the difference between UI and UX.

Let me explain what you should deliver as a User Interface (UI) Designer or generally known as a Product Designer. All designs should come with a compulsory UX guideline once you’re done. It is the guiding principle of any visual, in this aspect, the User Interface (UI). This is why if a graphics designer, designs a brand identity or a logo it comes with a guideline to guide whoever will be applying the application. Your guideline for User Interface (UI) which you can call annotation or wireframes documents in this aspect is your User Experience (UX) guide, you just don’t hand off your pretty UI and tell your team that you’re done with the project and that they should develop it without defining basic interaction. It’s not done that way.

How your flows and interactions work together to help your users perform an action with your design is what you add to this guide.

And this comes with basic principles of every interaction which are; the intention, the action performed and the feedback the user gets, plus rules to guide the interaction. For example, you shouldn't match the break of your car while accelerating without slowing down, you know what could happen.

Let me explain how interaction works:

• The intention, for every interaction there’s an intent, just as you would expect if you insert a key into your car ignition and turn it that it should start. That’s your intention, to start your car.

• The action, this you must perform if you want your car to start, you want to hear that “dasumsuumsum” sound. What is happening in your car to hear that sound is the work of beautiful electrical and mechanical UX;

“You bring out your key, you insert the key in to your ignition, turn the key in your car, the starter motor "turns the engine over," which means it turns the crankshaft which in turn gets the pistons moving in the cylinders. This starts the engine cycle. Air and fuel is drawn into the cylinders, it is compressed and the then the spark plugs fire. This begins combustion and your car moves.”

This simple action here is designed by electrical and mechanical engineering using solid UX principles, to make everything easy for the driver. But most drivers don’t care about this, just make the damn car start.

• The feedback is how your car is designed to tell the driver that her car has started, so they don’t lose focus or start doing something else. The “dasumsuumsum” is the feedback.

This simple interaction happens day to day in our lives. It happens everywhere, even when you tap the large green rectangle “the dial button” on your phone after inserting a 9 to 11-digit numeral, and you expect your partner, friend, or boss gadget to ring somewhere. This is you performing an action, with intent and expecting feedback the word “Hello”. For you to enjoy all this little interaction is where UX comes in, and they are governed by UX guidance and rules.

Your UI wouldn’t tell you if your partner's phone is not reachable due to network issues, these are all work of UX. You’re getting this feedback because of the guidelines and rules that are in place. If not you won’t ever know when to stop dialling.

And these my friend, are what you to define in your UX guide to show that your product is functional, when your user taps this button this should happen. It is how every complex interaction works and this must be communicated clearly. At the end of your design process, your job is to inform your developers what they need to do.

In the end, they need to understand:

• The information hierarchy - Through your information architecture overview

• The product structure - Through your user flows

• The content - This will be inside the wireframes

• The rules - These will be your wireframes’ annotated notes

These are the key main information to include in your wireframes/annotation document, and the guideline when handing it off.

And this is what UX is!