Blog
Which comes first – UI or UX?
Mar 6, 2018,

One of the fiercest subjects across web and mobile development communities is which should come first: the User Experience or the User Interface?

Most engineers see this dilemma as a “hen and egg” riddle, others relate to the broadly accepted formula of these acronyms (UI/UX) placing the UI upfront and there are a few 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 – 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 is found among product owners, that perceive UI and UX as two different entities that need to be understood separately.

In fact, they have two different definitions for each term. In their opinion, The User Experience represents the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use, while 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.

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

Compared to a Product Owner/Designer, an engineer receives the User Interface as a deliverable and it implements it according to best practices, a user-story and/or usage scenarios. The 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.

Compared to the above, Product Owners/Designers perceive UX and UI as separate entities simply because their craft is rooted in the Ergonomics (from Greek: ἔργον /ergos/- work, νόμος /nómos/ – natural law) a science which relies on understanding the natural ways of performing a particular action and develops algorithms and/or optimized tools useful in completing day-to-day tasks. They are also more familiar with the User Experience term since Product Designers 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 (later called as User Interfaces), Product Designers found ergonomics to be a way too broad science in human-machine interface development.

That’s how the UX term emerged. In the late ’90, Don Norman (an expert in fields of design, usability engineering, and cognitive science) introduced the “User Experience” notion 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 with the machine: “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 and was tightly related to developing User Interfaces based on cognitive science, 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” dilemma is somehow powered by a tendency of developing “full-stack” developers which are most of the times behind the code, focused on delivering system performance instead of cognitive user experience. Luckily when Product Owners\Designers get involved in full-stack teams, the dilemma is easily consumed and 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 by creating sample users who represent a target audience with a particular background, skills, age, education level etc. As we’ve experienced, defining these roles instead of imagining them, really pays off.

Understanding usage scenarios for each role is paramount when target roles are defined.

The next step is to understand their natural means of interaction within a given system, their expectations, their needs and required output. This way we can define optimization scenarios and improve usability for each and every app.

Recording each scenario and usability testing will bullet-proof 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. This will build the grounds of designing a system that reflects their usual way of interacting with a process or interface.

Designing a process-based wire-frame as per each user role will power your User Interface by default.

Together with the user stories (aka user scenarios or use-cases), wire-framing must focus on delivering natural and/or intuitive navigation across the entire interface. This will contribute to reaching performance and usage objectives as per each user role within a business process.

Following the above process, we understood UX design as a separate phase of building a product which is focused on putting together a live visual canvas layer on top of which the entire UI is built.

While the dilemma churns across infinite threads, we’ve settled for the following: the User Experience must always come first and it is, without any doubt, a powerful contributor to building efficient User Interfaces.