Which comes first – UI or UX?

EBS Integrator
Mar 6, 2018,

UI, UX – what’s all the fuss about?

One of the fiercest subjects across web and mobile development communities… Which should come first: the User Experience (UX) or the User Interface (UI)?

Most engineers see this dilemma as a “hen and egg” riddle, others relate to the more or less accepted formula of these acronyms (UI/UX) placing UI upfront. There are a few though, that believe the User Experience should come first.

The above debate is also subject of a discrepancy we’ve noticed. Most developers fail to understand UI and UX as separate entities. It is only natural. After all, the end result of UX/UI is a friendly user interface that enables stakeholders to perform their daily tasks faster and more reliable. The answer hides among product owners, that perceive UI and UX as two different entities that require segregation.

In fact, they have two different definitions for each term. The UX represents the overall experience of a person using a product. Think of using a webservice or computer application. How how easy or pleasing it is to use? Well, this is what User Experience is about: the “emotional” design of an interrace, it’s add-value and ease of interaction. If an app makes you mad, you’ll avoid using it at any cost.

Now, the User Interface represents means by which the user and a computer system interact. In particular, the use of input devices and software to orchestrate a system. UI elements are mostly focused on the looks – think of it as some make-up for the UX.

These definitions make sense when you get down to them – but this is just scratching the surface of our dilemma.

Different Perspectives for both UI and UX

Compared to a Product Owner/Designer, an engineer receives the User Interface as a deliverable. It implements it according to best practices, a user-story and/or usage scenarios, without caring much about the “emotional” part. UI designers build User Interfaces in base of wire-frames and these are most of the times, taken as granted. Under these circumstances, the User Experience process is somehow hidden from the engineer’s view. This might be the reason why most of them perceive UI as UX and vice-versa.

At the opposite side, Product Owners/Designers perceive UX and UI as separate entities. This might be due to the their craft having it’s roots in the Ergonomics Practice (from Greek: ἔργον /ergos/- work, νόμος /nómos/ – natural law). This one is a science that relies on understanding the natural ways of performing a particular action. It develops algorithms and/or optimized tools useful in completing day-to-day tasks. Product Designers are also more familiar with the User Experience term since they were the first ones to need and apply it.

As soon as Ivan Sutherland (the inventor of Sketchpad / 1963) and Doug Engelbart (the author of NLS / 1965) delivered the first prototypes of Human Interfaces as means of interaction with a computer things had to change. These means of interactions (later called as User Interfaces), were too specific. They could not fit the ergonomics broad spectrum, and this is how Product Designers had t come-up with something new

The UX term and it’s origins

In the late ’90, Don Norman (an expert in fields of design, usability engineering, and cognitive science) introduced the “User Experience” term. He did that in one of his books “The design of Everyday Things”. Mr. Norman argued that the “human interface” term would simply not suffice in building efficient ways of interaction.

I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction

From this point on, the User Experience term caught on within the Informational Technology community. It was tightly related to developing User Interfaces based on cognitive science practices, design, and usability engineering.

Considering the above, it is safe to assume that the UX comes first in building User Interfaces, but still, the confusion prevails.

Going back to our initial statement, the “which comes first”. This dilemma is somehow powered by a tendency of developing “full-stack” developers. They stay behind the code and focus on performance. Cognitive user experiences are in fact, out of their job description. Luckily when Product Designers get involved in full-stack teams, this dilemma collapses. This is how you get a powerful system without compromising on usability.

That’s is exactly how we’ve got to understand the UX and UI segregation better and here’s what we’ve found. Getting to know your user will always result in a great Customer Experience. This implies understanding the personality behind each user role on a given platform.
No wonder creating users views is not as easy as your piece of cake. You need to represent a target audience, a particular background, skillset, age, etc. Defining these roles instead of imagining them, really pays off on the long run. These details, might be the key to a successful journey or a Google Glass fiasco.


Understanding usage scenarios for each role is paramount when target roles get contoured.

The next step is acknowledging their natural means of interaction within a given system. You do that by identifying their expectations, their needs and required output. This how we define optimization scenarios and improve usability for our clients. It works for us – so it might just work for you. Recording each scenario and usability testing will bulletproof your UI. Most of the times, our perspective might not be quite the one of our target audience. This is where user stories alongside an expert opinion come in handy.

Before building a wire-frame, product designers must test conceptual use-cases against each role. Building the grounds of designing a system that reflects their usual way of interacting with a process or interface is no longer a fad. It’s the “next big thing”. Designing a process-based wire-frame as per each user role will power your User Interface by default.

If built right, user stories (aka user scenarios or use-cases) can really be a true gem. Via their means, wire-framing must focus on delivering natural or intuitive navigation. As a result, reaching performance and usage objectives as per each user role within a business process, will no longer be a conundrum.

After years of proacting this process, we know it works. In fact, this is how we “killed-off” that dilemma and agreed: UX design is a separate phase of building a product. This phase focuses on on putting together a live visual canvas layer on top of which the entire UI emerges.

We might set-off some fires, but we’ve settled for this: User Experience must always come first. This is, without any doubt, a powerful contributor to building efficient User Interfaces (at least at EBS Integrator).