We’ve all experienced it: you pull up a web page you’ve never been to before and...you’re in love. It’s beautiful! The layout, the buttons, the typefaces — it all comes together to create a wonderful experience. And it’s not just superficial elements, either.
Everything works exactly as it should work, and you’re left with a sense of satisfaction (and, okay, maybe a little bit of a website crush). We’ve certainly come a long way since the first website.
That first impression is the result of two very closely related — but not identical! — fields of design known as UI (User Interface) and UX (User Experience). There’s a lot of information floating around on the web regarding UI and UX, and it can get a little overwhelming. Here’s a basic introduction to what each type of design is responsible for:
UI = User Interface
User Interface Design (or UI design) refers to the user-facing part of a product. In other words, it’s everything that your customers see and interact with when they pull up your web page, from buttons to graphs to any other icons or viewable page elements. A website’s UI design is typically based on the company’s branding or style guide — the colors, typefaces, and other “physical” aspects should all be representative of your company aesthetic and communicate your brand.
UI design answers the What? when it comes to your website. What does your customer see and interact with? What do you want to be sure to include? What individual visual elements will immediately set your website apart at first sight?
If your website was a house, then the UI design would determine what color to paint it, what flowers you might put in the flower boxes, and whether you have a swingset for the kids to enjoy.
UI designers ultimately want your page to look good and provide that immediate aesthetic “it” factor as soon as a user visits.
UX = User Experience
If UI design answers the What? of your web page, then UX design answers the Why? Why is it important to include the “Log In” button on your landing page? Why do you want the link to customers’ rewards points at the top of the page? Why is it important to have an easily accessible shopping cart? The reasons for these and many other UX decisions boils down to wanting satisfied customers, more social shares, brand recognition, and loyal customers who will keep coming back to your site.
If we stick with the house metaphor, the UX design provides the structure of the actual building. It’s also the reason you have three bedrooms for your family instead of a studio apartment. It’s the walls and floors and doors and windows and everything that is focused on function over form (although to say it completely ignores form would be incorrect).
Whereas UI design might dictate the need for nice-looking buttons on your page, UX design demands that they actually get “pressed” when a user clicks on them. UX also focuses on placing content in the proper location for the user. For example, placing links to products within articles so users can quickly and easily purchase what they're reading about. UI is concerned with first impressions; UX wants to leave the user with an overall feeling of satisfaction. UX designers are going to be the biggest advocates for users, and it is their job to constantly focus on balancing the needs of the business with what the website has to offer. If there is research, testing, or development that needs to be done, it falls under the responsibilities of UX designers.
UX provides the structure, but it also must follow the main objectives of the client. For example, the main objective of an eCommerce site is to sell products. The user path from the homepage to adding products to their cart must be as simple and easy as possible. Within that path, you display product information in an organized way, but focus on the continuous path to the cart.
The ultimate goal of UX designers is to create a website that functions in such a way that is easy to use, and pleasurable or satisfying to those users while meeting the customers' goals.