The Difference Between UI and UX Design

Let me tell you a story. Once upon a time, a very, very long time ago there was but a screen and text. The computer, and all the wondery and wizardry that it contained, was limited to entering commands, in text via a keyboard, on a black screen. The screen would then display other text in reply to the commands.

It was basic.

Now we have a screen in our pocket that we can enter a command from a flick of a thumb, from a loop of a finger, a series of taps. We have a high definition colour screen on our desk where we can still enter text, but we can also use input devices like a mouse, a touchpad, a stylus, to create weird and wonderful inputs - and our screens can respond with brilliant graphics, switching between completely different functions, and more.

It’s a whole new ball game.

This post describes how the terms UI and UX fit into that picture; that rich, complex world of inputs and outputs that we now have today.

To begin with:

  • UI = User Interface
  • UX = User Experience

This should give you a little idea of the difference between these two areas of design.

User Interface (UI) design is the interactive graphical display of a software application

The interface is how we, as humans, interact with a software application - it’s how we give it commands so that it knows what to do. It’s about the type of command itself: whether we do a tap, or a swipe - and where. It’s about the display and location of interactive elements on the screen, and the type of interaction required from a user to get a response.

For instance, just one screen of a software application’s UI would be the login screen. It could have two textboxes, one for a username and one for a password. You could enter these via a keyboard. It might then have a login button, requiring a left mouse click while hovered over the button.

Creating and placing these textboxes (and the labels Username and Password) and the Login button then adding the appropriate input methods and connecting these up would be the role of a UI designer.

So how does this differ from what a UX designer does?

The role of the UX designer goes beyond the basics of what a UI designer does. It’s the UX designer’s role to make the interactions between the user and the software more pleasurable, usable and intuitive. In short, it’s making the software as user friendly as possible.

If you remember the introduction of the iPhone, it blew people away because it was so user friendly - the designers of iOS (and the actual phone itself) were revolutionary in UX design.

So, if we think back to our original login page example, how could we do UX design to make it better?

We could add a nice background and font. We might add a touch screen option, so a keyboard would pop up to enter the text, and we could select the Login button with a tap. We might add an Enter input, as users are used to the option of pressing Enter to login, not just clicking. We might add a social login, so users could use their Google or Facebook accounts to login. We might add a checkbox to remember the details for next time, so the username and password appear the next time the user visits the software… the adjustments are endless.

UX can even go beyond that, offering continuity between products. If you have a product suite, or a web version and an app version, it can be about having similar layouts, actions, and design across products so that it’s easy for a user to switch between them.

Why UX matters (and not just UI)

Having a software application that is a pleasure for your users to interact with means:

  • Users are more likely to keep using your software (as opposed to abandon it or use it only when extremely necessary)
  • Users won’t want to bad mouth your software (complaining to friends/colleagues, even on review systems, which might make others avoid your software)
  • Great UX means they will spread the love via word of mouth (which can increase your user base)

UI designers can also be UX designers

There’s not always a clear line drawn between UI designers and UX designers - often, developers will do both. Companies that can afford to hire excellent UX designers (who concentrate specifically on this field) are generally large enterprises, or those who are extremely focused on usability.

For smaller companies, or those without the budget to delineate, finding a UI designer that’s also great at UX can make all the difference.

It pays to think about UX as a project owner even before you hire a UI/UX designer. If you’re lost in what’s a great user experience for customers, then engaging the services of a UX designer might be a good idea.

At CodeFirst we have both UI and UX designers on hand to help out with your project - and even hybrid UI/UX designers, too. Have a chat to us about your project and we can recommend the best team for your particular needs.