UX design and UI design are big topics of conversation in web development these days. Interestingly, these terms are often misunderstood or used interchangeably. Though interdependent, UX Design and UI Design are different practices. In fact, they are altogether different jobs.
Web developer Dain Miller shared his thoughts on the difference between UX and UI, and we think it’s a perfect analogy: “UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.”
Let’s explore what that means, on a deeper and more nuanced level.
Let’s Talk About UI (User Interface) Design
We hear the term “UI design” everywhere these days. It’s such a common phrase, and yet it is often misunderstood or confused with other web design practices.
UI design started with the invention of the Graphic User Interface (or GUI) by Xerox in 1979. The technology was purchased by Steve Jobs and Apple and implemented on Macintosh machines in the early 80s. The GUI is the point-and-click system that we know and love today, and part of nearly every interaction that we have with our personal computers. Before this point, everything on a computer was done using lines of code.
So, put simply, UI design involves the design of the interface and visual touchpoints for a website, platform, or application. This includes buttons and menus, checkboxes, forms, accessibility features, videos, and anything else that a user can interact with visually (without the need for code) using their mouse and keyboard.
UI design today takes into account the look, feel, and interactivity of a website, platform, or application. It also includes icons, typography, color schemes, spacing, imagery, and responsiveness (especially in regard to mobile versus desktop platforms). UI is the presentation of the website’s code, design, and yes, UX.
What About UX (User Experience) Design?
User Experience or UX design is a term that refers to the design of the much larger picture and can be applied to both physical and digital products.
If the user interface includes everything on a website or application that a user interacts with, doesn’t that imply that it is heavily involved in the user experience? Of course, it does! But the user experience is so much more than the interface.
It’s about every step your user takes with your website or app, from their first to their last. And your job as the person or business in charge of your customers UX is to help them build meaningful encounters with your products, services, and your brand assets.
User Experience design is a focus on the entire customer journey. For example…
- How did our users hear about the website, product, or service?
- Once the user hears about the product or service, what is the next step that they take? Are they clicking on an ad to visit our site? Are they at a conference, and will they be brought to us through a direct referral?
- Once the user gets to our website, how does that experience line up visually and conceptually with the information that led them there? Does it all look visually consistent and are we carrying branding through all these parts of our journey? Is information provided to our customers before reaching us, supported immediately by the information that they see when they load our app or website?
- What is the next step that a user should take?
- Have we considered all the different possible segments of our target audience?
- Should our users be directed to a different part of our platform or app depending on their “persona” or segment of the target audience?
- If we now split our audience into different paths based on their segment, should they all reach the same conversion point?
- Once the user has converted, what is the follow-up experience like? What is the actual product or service experience like?
- In what ways can customers provide feedback, and what is our follow-up model for customers who do provide feedback?
With these questions, you can begin to build a framework for just how massive and integrated a good UX design must be. It creates structural design solutions for user pain points and areas of friction they encounter when they use your product. Everything from your wallet to your car to your favorite website is full of great (and terrible) UX design choices.
UX design refers to the much larger picture that involves your website or application as well as the entire customer experience. However, the user interface, or UI Design, is only one small part of that picture.
UX versus UI
To boil it down to the bare bones, we wanted to share some one-to-one comparisons that are easy to remember.
UX is how something feels, UI is how it looks (the aesthetics).
UX is the high-level, all-encompassing experience, UI is all the details.
UX makes things useful, UI makes them beautiful.
UX is used to help end users accomplish specific goals, UI uses aesthetics to make emotional connections (color, style, feeling).
These two components make up the entire usability design process. The Columbia Fu Foundation School of Engineering and Applied Science shared a blog article about UX and UI designers and their roles that sums it up so well: “In tandem, these professions are complementary contributors to a positive, intuitive user journey.”
Another example is that if you are building a house, UX is the foundation, and UI is the furniture, decor, and color schemes in each room. Both are necessary to make the place feel like a true home, but they contribute different things to the experience for the person living in the space.
Hopefully, these examples and explanations have helped you grasp the important differences between UX design and UI design.
Need Help with Your Next UX or UI Design Project?
At SharedTEAMS, our web team puts a great deal of effort into building engaging user interfaces. All our teams work cohesively on the customer journey, and we also have website production and design optimization projects created to help businesses of all sizes create user-friendly, visually appealing, and functionally sound websites. Everyone that you work with throughout all your projects is involved in your overarching UX Design.
SharedTEAMS has its own UX design for its membership structure – the goal is to streamline your marketing pain points and help you create seamless programs and assets that prove to the world that your brand is one that can be trusted and enjoyed on all levels, from UX and UI design and beyond.