There are many, many analogies web-heads like to use to explain the difference between UX and UI. The best ones are usually the most simplistic, so consider the difference between UX and UI as the same kind of difference between the taste and smell of your dinner and the utensils you use to eat it. The UX is the aroma and flavours you experience as you chow down, as well as the satisfying sense of fullness afterwards, while the UI is the knife and fork you use to cut it and place the tasty morsels in your mouth.
Now, truth be told, it is actually a little more complicated than that, but bear with me for a little longer with this analogy. A dirty knife and fork is going to negatively affect your experience regardless of how well the food is prepared. The food might also be delicious at first bite, but leave your belly rumbling suspiciously afterwards. This means that the UI and UX are interconnected, and while they are separate entities, each one relies on the other to help make the best of themselves.
Another good analogy is to think of the UX as the architecture and the UI as the construction works. You can build without planning, of course, but it's going to turn out much better if you figure out what you want and need and how to achieve it beforehand. Same goes for the construction process, because you might have the finest architect in the world plotting out the process, but if the builders use poor materials and cut corners then it's still going to be a poor building.
UX encompasses many factors, and is often boiled down to 'how it makes the user feel'. That can come across as a little vague to some, as we're not always paying attention to how the little things a particular web page does affects our emotional state. Obviously, bigger things are more noticeable, such as the layout of a particular page or the ease of navigation through a website's menus. The big things are usually easier to figure out for a developer, but it's the little things that really add polish to a user's experience.
The little things can be something like the on-screen buttons satisfyingly indenting into the page as they are clicked, which seems innocuous but definitely creates a more positive feeling in most users. However, how the buttons look and where they actually take the user falls under the UI banner. Web development agency members who specialise in UX will focus on the needs and desires of the user regarding the part of the product that faces said user. Obviously, they will need to balance that with what is possible within the confines of their product, budget and target demographic.
The UI is also known as the GUI (Graphical User Interface). The interactivity and visual layout of the product constitutes the UI, and good UIs will be informed by the research and data compiled by the UX process. The UI team will also incorporate other factors such as company branding and any in-house styles or visual design principles that may be required. Ultimately, the UI helps to compliment the overall UX, but obviously must do this while facilitating any other necessary factors which do not originate in the UX research process.
There's a lot more to creating good UX than there is in preparing a tasty meal, while the UI has a lot more to it than the mere functionality of a knife and fork. But, that is pretty much the difference between them. UX is exactly what it says on the tin, while the UI can help make that user experience a good one.
January 9, 2020
Subscribe to our blog to receive relevant news and tips about digital transformation, app development, website development, UX, and UI design. Promise we won't spam you.