UX = User eXperience and UI = User Interface.
At a basic level here are some simple definitions:
The User eXperience is what someone experiences on their journey through a digital platform, for example the design of when someone might make an interaction, where that is best placed and how it works and behaves.
The User Interface design is what someone sees on their journey through a digital platform, so the colours, shapes, fonts, layout, graphics etc.
So what is UX Design?
UX Design is about the design of the whole experience that a customer may have whilst they interact with a digital product (and even before and after it). Therefore it can be about how they move from one place to another in the product, how and when the experience is delivered (via mobile, desktop, online/offline etc.). It can be about how a design makes them feel and behave, it's consistency, logic and how predictable it might be. It should also be about making engaging and delightful experiences that are in line with their expectations and fit in with their way of life and the other tools and experiences they are used to seeing in their everyday digital lives.
So, as you can see, this is all about experience and little about graphic design or the actual look and feel of a product.
What are the outputs of UX design?
A UX designer will be working closely with all other functions as well as trying to get as close to the customer as possible so that they can fashion the best experience they can. Therefore research is a large part of UX.
Another big part of UX design is testing which will overlap with research as it can be a method of research in itself.
Then there are certain deliverables such as prototypes of early experiences that are wireframes and/or clickable prototypes (that will be tested). There may be site maps that help to map out the whole digital experience and Customer Experience Maps which go a step further and try to map all interactions and experiences a customer has with us right from hearing about a product or service to after they have purchased it and completed it. There may also be user flows and video recorded examples of the flow.
And UI Design is?
UI Design is all about how the actual digital interface (screen in most cases) looks and behaves. The colours of the buttons, the fonts that are used, the layout, shapes and branding that are applied. It is there to create a visually appealing interface that will be functional but also beautiful and enticing and appropriate to the target audience.
UI has to be considered through the UX lens because to make a usable design with a good experience for the customer it must adhere to certain UX principles (as well as good basic visual design principles) that may have come from research or good practice and models that people know and understand. So there is overlap between the two but UX is much more about setting up a good experience, putting down some principles based on testing and good practices and then applying this in the User interface design.
What are the outputs of UI design?
In the UI stage of design the outputs will change throughout the process. There may be early screen design mockups based on the tested wireframes that apply the branding and may have different options to user test the visual design side with customers. Later on, once the early style is agreed upon, a more detailed UI style guide will be created that logs all the styles required such as fonts, colours, sizes, button colours and states of the buttons and much more (this will be used by the developers to build the actual digital product).
So, there is overlap between the UX and UI, but they are 2 quite distinct areas of expertise. There are some very good UX designers who may not be great at the UI side and vice versa as UI is more down to graphical design training and a little vision, creativity and flare and UX is more analytical and logical. However there are plenty who are great at both in my experience and that's good because they need to work hand-in-hand.
I hope this helps demystify a little the roles and purposes of these disciplines and if you have any feedback or comments contact me firstname.lastname@example.org.
By James Hall, Design and User Experience Manager, Academic Services