Before you go, check out these stories!

Hackernoon logoThe UI and UX introduction you never had by@ohansemmanuel

The UI and UX introduction you never had

Author profile picture

@ohansemmanuelOhans Emmanuel

Looking through the glass in the conference room, I couldn’t help noticing that the Dubai hotel was pretty badass — got to be the most opulent place I’d ever seen.

The sight through the corridor on the left wing was particularly amazing. Oh, yeah — a designer knows how to catch some fun too.

I was trying to make a couple friends there but I mostly just bent over on my side, drinking my free champagne when it happened.

Oh my gosh, the red dress she wore was killing.

She was tall. Six foot I guess.

Early 20’s, maybe 24 at most.

Her long dark hair was looking “photoshopped”, and her deep glowing (or rather mischievous) eyes were calling out to me.

Was I going to just seat back?

I braced up to make a move, and when I thought she was just walking past me, she looked and gave a rather soft smile — like those sweet gradients drawn on the Sketch app.

I couldn’t hide the blush.

Immediately, I was like, damn she’s so soooooo hot!

Please try to forget what happened afterwards…

So what’s in a User Interface?

The User Interface in very basic terms, refers to everything you can see or touch.

Back to the story.

The hot red dress, long dark hair, and mischievous eyes may be called user interfaces (UIs).

If she were blonde or wore a blue dress rather than red, that would have been a change in the “user interface”.

With regards to an application, the colors used, buttons, sliders, and other components, make up the user interface.

Okay, and the User Experience?

Remember the feeling, “Immediately, I am like, damn she’s so soooooo hot!” ?

What I felt then could be likened to a delightful user experience.

How you make your users feel or behave refers to the User Experience.

How easy your product makes the user get their problems solved, the frustration or joy they feel when using your product (hopefully not the former )— that’s the core of the user experience of any product.

Carefully thought out User Interfaces.

In the opening story, there probably would have been no “zing moment” without some elements of admiration.

I did see the hot red dress, great hair, and every other asset I refer to as “user Interface elements,” then the admiration set in.

Do you see how user interfaces equally play a major role in crafting delightful user experiences?

This is exactly the role user interfaces play and it is why UI designers are important allies to every UX designer.

They always will work together to achieve the same end goal in any product design.

It’s important to note that the choices made in UI designs should be carefully thought out and planned with the user in mind. This is to foster a great user experience — that’s the petition of every UX designer.

A simple practical example.

Some months ago I was hired to do a redesign.

The client from Toronto, helped African students gain admission into schools in Canada, so they wanted to redesign their poorly converting website.

I could have made a lot of design choices, but after a bit of research, most users wanted to do one of two things when they first got on the website.

  1. Apply to get on the admissions process (having heard about the company)
  2. know more about how the admission process worked (if they never heard about the company)

These options defined my choice of having the “Apply now” and “How it works” buttons within the initial viewport of the users’ device. (see below)

The Industry’s Definition

User Experience design is a broad field that looks like this in real life…

For web based products, this graphic above helps illustrate the difference between UI and UX. Adapted from:

Apparently, I have not attempted to explain all there is to User Experience design.

This is just an interesting introduction to how it differs and comes to terms with User Interface design.

Key takeaways

  • Every product is got some sort of user interface. They may not necessarily foster a great experience though.
  • Great user experiences are built on carefully thought out user interfaces that enables the user achieve their end goal easily
  • Understanding the user’s needs and product objectives are the foundations for crafting a successful user experience
  • You want to get your product users in the “zing” zone? — craft a delightful user experience!

If you loved this article, I’d appreciate it if you hit the heart icon below. It’d certainly be a delightful “user experience” for me :-)


The Noonification banner

Subscribe to get your daily round-up of top tech stories!