UX versus UI – What are they and why do they matter?

User Experience (UX) and User Interface (UI) are two of the most highly used, but mostly misunderstood, design terms.

In essence, the implementation of these concepts can make or break the reputation of any front-end platform and its providers. This article will investigate what these terms are, how they differ, and how they can be used together to enhance user satisfaction.

UI Defined

User Interface (UI) comprises of all the tools that we use to interact with machines. This includes everything, from phone screens, keyboards and computer mouses to an application or website.

User interface tools can be broken down further into:

• Graphical User Interface (GUI)
• uses icons, windows and menus to carry out commands. For example, if you wanted to open up a program with a GUI operating system, you would double click on the program icon.
• Web-based User Interface (WUI) (a UI that is delivered by a web browser)
• Command line Interface (CUI)
• Natural User Interface (NUI).

These new technologies are the direct implications of the improvement of underlying technologies like cloud computing, internet of things, mobile etc.

The enablement of such features can be done through:

• Interactive buttons
• Form fields
• Selectable regions
• Multi-touch
• Eye tracking
• Voice commands
• Responsive design etc.

What is UX? 

Every app, website, or any other interactive platform has certain design and operational goals which must be met through the provided user interface. UX is about how to effectively utilize the UI to achieve such goals.

UX tracks the user’s journey through the UI. For example, UX defines what colours should the platform have, what sounds should be played at specific times/regions, which type of behaviour should be used with accessibility tools, what type of emotional response is required, and making sure that the design of the platform should have an impact on the overall appeal of the user satisfaction.

User-focused delivery

New platforms now focus on minimalistic designs/layouts which are easy to use, yet highly effective, for both the producers and the consumers. Micro-interaction, long scrolling in web-pages, parallax techniques, typography, screen resolution management, ad placements, GIF-based information enablement, colour theory etc are some of the new elements which are catered by both UX and UI.

Principles encompassing UX and UI

There are certain commonalities involved as well in terms of the approaches towards true enablement of UX and UI for any platform. Such commonalities are mostly in abstract terms (mostly before, during, and after phases). For example:

• User research (vision, business, success metrics, brands)
• Insights (task models, user stories, personification)
• UX vision
• Conceptualization (prototype, sketches, exploratory options, ideation)
• Design experience (overall branding, monitoring, validation).

It is mostly like the UX framework defined by Jesse James Garrett which deals with Strategy, Scope, Structure, Skeleton, and Surface. And these over-arching goals are tightly linked to the tools provided by the UI.

Final words

UX and UI, although seem similar, are two different aspects. They have some conceptual similarities, but one is nothing without the other. To have a great UI, without taking into consideration of the business goals and user journey, will not make a long-term benefit. But, if you have a great UX design and you lack in some aspects of UI, you can still make a considerable progression (only if your business covers desperate needs of the users which are not covered by other businesses).

By Khawar Shehzad

See our guide on ‘how to get a graphic design job’