Difference between UX and UI

Right. So here we go again. I'm writing. Be careful.

So in order to enlighten you great minds and thinkers, we've had a lot of questions around the abbreviations for UX (User Experience) and UI (User Interface) design. Most of the time when we pitch clients or send proposals, we do our utmost to break it on down as simple as we can.

It's pretty easy to understand but I thought it worth some time to throw something zhush mush (as my grandma would say) together to help explain.

(Masters of the arts, correct me if I'm wrong, but I think I'm pretty on point.)

Both of these work together but I wanted to take the time to illustrate how and their importance in the web world in particular.

So with that said Imma' take you on a date:

 

User Experience is the greeting on entry to the resteraunt, the atmosphere, smells, eating the wonderful meal, and feels of satisfaction when you hand over your cash money.

 

User Interface is the door, the decor, the polite waitress, the plate, the Sirlon 350gram (sorry vegans) served with grilled zuchinni and roasted heirloom carrots, the cuttlery, laser engraved glasses, embossed servietes, wine, and the fancy door handle you grabbed on the way out.

 

UX - User Experience

 

Now that I've made you hungry, UX is the beast that embodies everything. User experience is exactly that, it is what the user experiences. I know it is broad, but essentially, it is all about the experience from start to finish within your application or website. From the time they click your URL to the time they send their enquiry or make a purchase and everything in between. The User experience is the combination of elements that make things awesome to use.

It ALL starts with Reseach, Content and Strategy. Taking into account your business message and feel, competitors, market challenges and problems. Your audience and formulating a strategy on how to tackle the problems. Once all of this magic is done, we usually get right into the Wireframing. Wireframing allows us to build out quick sketches of how the interaction and flow will work. It allows us to do all the testing and iterations to work out how we will direct the customer through, what they will see, feel and how they will interact. (side note: Interaction specialists can be specialised) We can usually test the Experience on users before heading into any development and this is the best way to get user feedback on your website or application before the world come in to eat.

With user experience, we usually get all the team and clients involved, in the initial phases and prototyping. What this does is it makes sure everyone knows where everything is at all the time. No ones left in the dark. We also ensure we have all the right tools in place here, to track analyse and further improve the experience once we run the heard through the funnel.

 

Now to the other partner:

UI - User Interface

 

Now that you're all up to 'date' (pun intended). All the items you interact with through your epic meal time are what help with the overall experience. The User Interface is all about the 'tools' you just used to consume that meal that you indulged in.

When we approach User Interface design it all starts with the brand. We throw in a pinch of reference from the Atomic Design Methodology and refer to the UI as the Atoms, that basically make up everything.

The user interface design is the process in which the User Experience is translated to the user. In simple terms the interactional components. Taking it back to the date it is the; door, the decor, the polite waitress, the plate, the Sirlon 350gram etc.

With the user interface design, we need to know about the brand. (If we haven't designed or developed it) we need to deeply understand the customer. We do that through Research. Design research, brand guidelines, the brand landscape, colours, typography etc. We use all of these elements to translate into the User Experience to create the look and feel.

We are continually doing research on and keeping up to date with developments in technology and it's advanced to ensure your customers' meals look as delectable as they are to consuming.

Here is where we 'dress' the prototypes we developed above prior to going into development. We call this UI Prototyping and are known for using tools such as Invision Sketch to showcase the functions for further research, testing and approvals. UI design also encapsulates the interactivity and animations used to give users the extra 'spice'.

It's also important we design the interface to work on all devices. With the ongoing growth in technology and variations in devices and attention, it's important we keep each experience unique. Google also keeps up on these things and ensures those who use the right 'recipe' are kept top-shelf in their cake.

Once the Interface is done, we hand it over to our wizard to put it in the oven and use science to cook the experience so you can deliver it to the customers' table as quick as possible.

And there you have it. A tasty delectable experience is lovingly crafted in the kitchen for your projects.

I hope I have left you full and satisfied with this article. If you have any questions or want to know more about UX and UI, or hit us up here.