First, let’s clear up some terminology. UI and UX are not in competition – they are two elements of a design that always work together.
• UI is the user interface. This comprises everything a user can see and touch, such as menu options, buttons, text, layouts, navigation elements, sharing options, etc. In short, if you choose to abandon text links for a slider navigation, that’s a UI change.
• UX is why you made that change to affect how the user feels and behaves. The user experience is an umbrella term for the user’s overall experience with the product: what they liked about it, how easily they accomplished their goals, moments of delight and frustration, etc.
The UI is the paint, the canvas, the types of strokes and colors. The UX is the wonder you feel when you see the girl in the pearl earring.
Let’s break it down to an easy-to-understand example: iTunes – as well as many other music players – allows a drag-and-drop interface to create playlists and arrange the song in any order they like.
Choices like the drag-and-drop interface and the feature to customize the song order are UI decisions. However, they were made with the UX in mind: drag-and-drop gives immediacy, control, and above all convenience, plus the feature to customize the playlist order makes the ultimate experience of listening to music more enjoyable – they can pick the order they want and then just sit back to enjoy it.
UX concerns itself with abstract elements like emotions, storytelling, and understanding while UI is the way in which a design handles these. UI is the vehicle, but UX should drive.
When it comes to web design, it’s easy to focus purely on the UI. After all, that’s what clients and stakeholders can see and touch, so that’s where you’ll probably hear the most feedback. But always remind them of the UX reasoning, otherwise everyone ends up worrying about the paint when the foundation might be cracked.