Whats the difference between UX and UI design?

I’m going to bring it back to basics for my blog post this week, being so immersed in the world of design and development I sometimes forget that what comes out of my mouth can sound like a load of jargon to some people. The general misunderstanding around the difference between UX (user experience) and UI (user interface) both inside and outside the industry is something that has bugged me for a while. People seem to use these terms interchangeably, without trying to distinguish them in any way. So its time to set the record straight.

User Experience (UX)

To most, user experience or UX is a bit of buzzword. It’s a relatively new phrase for something that has been around for longer than its name. Wikipedia put it well – ‘user experience design is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.’

User experience comes first in the design process for almost anything displayed on a computer screen. The goal for a user experience designer is to eliminate friction and pain points users may come across when trying to complete a task on a website or App. The process for the user should be as clear, smooth and simple as possible.

As an example, let’s say we are redesigning an e-commerce website, we identify through website stats that people are having difficulty completing a purchase at the checkout stage and are leaving the website before they pay for anything. Users have given us feedback that they are confused about what they should enter into the checkout form and the wording it displays. This tells us that the checkout process has a poor user experience resulting in abandoned shopping carts.

A user experience designer will spend a lot of time working on strategic planning, competitor analysis, customer analysis, content development, wire-framing, prototyping and usability testing to ensure that the interface works for the user. This process all takes place before a UI designer begins using colour, fonts, photography and design elements to create what the final interface will look like.

Starting UI design without first carrying out UX design would be like starting construction of a building without any well-thought-out blueprints.

User Interface (UI)

If user UX design is the creation of how something will work, UI design is the creation of where something works. Its the design of the actual interface users will see when they are using a website or app.

UI design is carried out after the UX process has been completed. This is where we take sketches from the UX process along with a style brief and start applying graphic design techniques to apply look and feel and create finished artwork of what the interface would look like. We design compositions of buttons, headings, borders, links and shapes using colour, photography, brand elements, typography and styling that result in a finished artwork of the user interface.

UI — “What should be the colour of this button?”

UX — “Do we need this button? If yes, why? What should be the position of this button?”

Designers

I still see job listings by agencies looking for UX designers to create finished artwork or UI designers to design prototypes. Generally speaking, in the same way that web designers tend not to write code, UX designers would usually not style and UI designers would not usually plan an interface (there are exceptions to that rule). Instead, the two would usually work very closely together sharing ideas and knowledge to deliver the best possible finished result for the user.

It’s like Doctors and Nurses or Builders and Architects.

I hope that makes sense, if not let me know in the comments below, I might be too close to this to explain it well.