UI vs. UX – What is the Difference

As much as we want to think that the Internet is driven by information, it’s really driven by is the same thing that everything else in the human world is driven by – emotion.

How do you use this website? How does this website make you feel?

One of the things that we love most about the internet is the speed at which interactions happen. I can connect with an old friend or download the latest e-book within seconds and without thinking about it too much. That speed means that there’s not a moment for rational thinking. Our brains don’t have time to delve into the pros and cons of our interaction, but rather only to react. As technology moves faster, our interactions become more ethereal and less tied to sequential thought.

UI vs. UX - What is the Difference

User Experience (UX) is the term we use to describe those ethereal reactions, User Interface (UI) is layout and design of the interactions themselves.

Defining UX & UI

There is a TON of confusion about what these terms mean, so let’s start with simple definitions:

User Interface (UI)

The way that a user interacts with a system.

User Experience (UX)

The user’s emotions and attitudes about their interaction with a system.

 User Interface Experience

Understanding UI

User interface design is what gets us from point A to point B within a website efficiently and easily. Now that’s not to say that UI is simplistic, but it is definitely driven by clicks of the mouse or touches of the screen.

UI is concerned with coding and the creation of the site. In fact, User Interface Designers could be compared effectively to Web or graphic designers, as they serve many of the same kinds of functions that designers serve, though always in an expanded and more comprehensive way.

Key elements of UI:

  • Screen size adaptation
  • Animation
  • Layout
  • Graphics
  • Interactivity
  • Colors
  • Typography

When we think about UI, what we’re really thinking about is the way that users move through the Web, moving around in real space and real time as they explore what’s been created for them. That kind of movement through the Internet has to be easy and intuitive if the user is going to stick around for more than a few seconds.

If you are thinking in terms of a spider web, UI would be the strands that hold it together. It makes it possible for users to navigate the website. With the advent of new technologies, we see the need to amend and expand our interpretation of UI and to focus more on it. With so many different platforms for access, engineering effective UI becomes more and more about helping users to have consistent and intuitive interactions with a company wherever they might find it. UI takes a great deal of time and planning to create.

A seamless interface will always be an essential piece of the puzzle.

Understanding UX

Initially, UX wasn’t described in terms of the Web, rather it was the total package of interactions that an end user has with a company. In today’s world, the sum total of user interactions with a company is often confined to the Web, which is how the term came to be associated with the digital world. However, companies that do well recognize that the entirety of the user experience, from the ads that users see on the Web to the packages that arrive on their doorsteps, are essential to creating the kinds of emotions within users that we’re looking for and that will keep them coming back.

Key elements of UX:

  • Research
  • Scenarios
  • Customer feedback
  • Prototypes
  • Task flows
  • User communication
  • Branding
  • Wireframes

User experience designers are tasked with discovering what’s driving the emotions of end users and then translating that understanding into improved user experiences and interactions. UX is closely tied to branding and to marketing, though it’s a bit misleading to describe user experience entirely in those terms as it is broader than both. What is important is that UX is considered as a fundamental part of the customer interaction with the site, rather than just assuming that it will follow naturally (which is what many companies do). The key here is to intentionally control and create UX with solid goals in mind.

Make no mistake, companies that create UX well know exactly what they are doing. When users feel really great about their interaction with a website, it’s because there is person on the back end who has been crafting their interactions with a great deal of intention.

Us and them

A great way to think about UX and UI is in terms of “us and them.”

  • Us (the creators of the Web) drive the UI.
  • Them (the end users) drive the UX.

At first glance it might seem that this description of UI and UX means that the creators of the Web aren’t in the driver’s seat, but nothing could be further from the truth. As designers and developers, we actually have this incredible amount of control over the UX, even as it’s defined as the way that another human feels. UX is driven by UI, because without a great user interaction the experience is going to be subpar.

UI and UX are intimately intertwined. They work together and feed off of one another. Great designers and marketers, great companies, recognize the synergy between the two and use them both to boost the ability of people to access the content, which is after all what all of this is about anyway.

VN:F [1.9.22_1171]
Rating: 9.8/10 (5 votes cast)
UI vs. UX – What is the Difference, 9.8 out of 10 based on 5 ratings


Michael Georgiou is the CMO and Co-founder of Imaginovation.net, a full service, turn-key digital solutions company serving Raleigh, NC and Charlotte, NC. He's a dynamic business professional with proven success in creative strategy, online branding, project management and communication projects. Follow him on Twitter at @MGeorgiou22.

2 Responses to “UI vs. UX – What is the Difference”

  1. Danish

    Feb 22. 2016

    They both are essential for a great experience for audience of certain services. Thank you for elaborating a bit more than I knew about it.

    VA:F [1.9.22_1171]
    Rating: +3 (from 3 votes)
    Reply to this comment
  2. Michael Georgiou

    Mar 01. 2016

    Glad we could help!

    VA:F [1.9.22_1171]
    Rating: +4 (from 4 votes)
    Reply to this comment

Leave a Reply