The confusion about UX and UI design terminology
What is UX, What is UI, and are they the same? UX stands for User Experience, and UI stands for User Interface. But for many marketers, these terms are a bit foggy—so much so that the two terms are (incorrectly) used interchangeably. If the differences between UX and UI design are confusing to you, you’re not alone.
But let’s be clear—while UX and UI both essential for website design, and they do overlap, there are distinct differences.
We will dig down and explore the similarities, the differences, and how UX and UI form a complementary whole.
UX and UI design are similar—but different
There are many analogies for the symbiosis of UX and UI. For now, let’s consider the human body. There are skeletons, muscles, tendons, organs, and other internal functions that physically enable us to interact with the world. This internal system is akin to UX elements relying on coding and applications.
Then there are external features and “ornaments” that are outward-facing—such as our eye color, hair color, mannerisms, and clothing. These features give us additional ways to represent ourselves beyond our basic physical functions—making them akin to UI’s use of fonts, color, images, and other stylistic elements.
Everyone has a skeleton (UX) and external representations (UI). They rely on each other, and in combination, they represent how we interact in the public sphere. But just as you can easily tell the difference between external and internal features in a human, you can distinguish between UX and UI.
The chicken and the egg problem
Some would argue that you need to finalize UX before you can proceed to UI. I would argue differently, though.
UX and UI design work together to achieve a common goal: Creating a user-centric website that makes it easy, intuitive, and enjoyable for users to find the information they want and perform tasks that bring them closer to purchase. Putting the two in separate silos creates a division that can hinder reaching the overarching goal.
Further, UX and UI designers have overlapping knowledge, but specific sets of deep expertise. Collaboration and idea-sharing at all stages can result in a site that is stronger than one in which UX simply passes along a set structure to UI, which then puts “icing on the cake.” In addition to creating synergies, working together makes the process more efficient, with less need to scrap or significantly modify conflicting elements that were planned by UX or UI without the other group’s knowledge.
UX and UI design responsibilities differ on team skill sets
Here’s a big caveat: While I’ve divided the responsibilities and processes below as if they fall neatly into UI or UX, it’s more complicated than that. In many ways, the discussion below provides guidelines, rather than rigid rules.
Many UX experts also have strong design skills, and many UI designers have skills that would normally fall into the UX camp. Some web designers claim to do both, although they are likely stronger in one area than the other.
All of the UX and UI areas discussed below are essential, the composition of the team will more exactly determine how roles and responsibilities are divided.
Research is the foundation to solid UX
UX generally takes the lead role in researching background areas that will ultimately drive the structure, functionality, and look of the website. Areas for research include:
- The company: Identify the company’s primary and secondary objectives for the website, its brand and USP (unique selling proposition), and its position in the competitive landscape.
- The Audience: Uncover audience needs and expectations by clarifying primary and secondary audiences, demographics and psychographics, pain points, challenges, online behaviors, and information needs.
- Tasks and Functionality: Anticipate users’ needs and expectations to define the tasks they will need to perform on your website, as well as the steps and functionality needed for them to perform those tasks.
The research you conduct will give you signposts to use in the development of the information architecture and functionality of your website.
Finding the intersection between the company’s and the users’ needs will provide key touchpoints that will be vital to a successful website.
UX objectives and key processes
The UX objective is to optimize usability. This includes planning for clear navigation, efficient site performance (such as fast loading time), readability, and responsiveness on all types of devices.
Here, let’s focus on the information architecture (IA), which focuses on the effective organization, labeling, structure, and functionality of the site. The IA must ensure that the site that is intuitive to use and creates a seamless experience that is both valuable for the user and meets the website’s marketing objectives.
When planning for IA, make “simplicity” your watchword. Overblown functionality with useless bells and whistles can be distracting. Confusing, inconsistent, or clunky navigation that requires too much scrolling and clicking will leave people feeling disoriented, frustrated, or both—resulting in high bounce rates and low conversion rates.
Step for developing information architecture include:
- Content Prioritization: Based on your research, organize the hierarchy of content, determining primary menu items and subcategories underneath them.
- Wire Framing: This process maps out the overall website structure and establishes relationships between website elements and templates. Starting with primary menus and submenus, the wireframe will evolve to include other navigational devices, such as internal links, bread crumbs, search mechanisms, and CTAs.
- Page Set-Up: Spatial elements are considered, such as how to allocate space on the page, distribute images and content, and determine functionality.
- UX and UI collaboration: At this point, you’ll bump up against the natural overlap between UX and UI. Early and continuous collaboration between UX and UI teams will ensure a common understanding of website design needs and responsibilities.
- Prototyping: Before complex coding and aesthetic design details are introduced, the UX team creates a “draft version” that visually represents the site and allows for exploration of functionality and usability,
- Testing: Before moving forward, users are shown the prototype to identify problems that will affect the user experience. Usability testing, which includes visual UI elements, will take place once the site’s interactive elements have been developed.
The UI designer’s role in the development process
UI refers to the visual design of the user interface—the point of interaction between the user and a digital device. When the site’s basic structure in place, UI contributes to a positive user experience by planning the visual elements that will enhance branding, highlight user touchpoints, and create a consistent look and feel.
The first UI priority is to create site-wide design elements that mesh with UX objectives. Generally, this starts with selecting a theme based on a ready-made template (free or paid), customizing a ready-made template, or coding an entirely custom theme from scratch. Understandably, this should be with sufficient input from the UX and developer team.
Filling out basic template elements starts by establishing site-wide design elements that will appear identically on all pages, such as:
- Branding elements, such as logo placement
- Navigational elements, such as menus, breadcrumbs, and CTAs
- Design and information included in headers, footers, and sidebars.
- Stylistic rules—such as hierarchical font styles, the look and location of navigational elements, color palettes, white space, icons, and interactive elements (such as swiping or buttons), which will be applied consistently across all pages.
How UX and UI relate to each other
First, let’s be in agreement that the main things that UX and UI have in common. First is the priority of optimizing the user’s experience throughout their journey on the site. Using all the tools at their disposal, each takes a user-centric approach to creating positive interactions that maximize user retention, engagement, conversion, and return visits.
Most importantly, neither UX nor UI can exist without the other, and each makes critical contributions to this set of unified goals.
The UX Perspective:
Method: Optimizing physical and digital products to create effective structure and navigation.
Focus: Organizing content, structure, labeling and functionality
Preparation: Identifying strategy and content areas based on brand, audience, industry positioning, and digital objectives
Process: Using Prototyping and wire-framing to design UX components, with testing prior to launch
The UI Perspective:
Method: Optimizing visual design elements to highlighting points of user interaction
Focus: Supporting UX by using graphic design elements that reinforce the brand, enhance usability, effectively present company products and assets, and highlight pathways to conversion
Preparation: Understanding UX research and implications for UI
Process: Identifying and applying visual ways to enhance the user experience
Understand UX and UI: Design for both
Website development requires a collaboration between UX and UI, but that doesn’t mean they’re the same. Both focus on optimizing how visitors experience the site, but one primarily through structure and information architecture, while the other focuses on visual look and feel. Substantial time must be spent on each area—ideally with UX and UI teams working together, rather than in silos.
The key take-away is that creating a successful website call for designing for both UX and UI for a cohesive, usable whole. Maximize the investment you make on your website by hiring a digital agency that has the expertise and resources to create a human-centered website that meets UX and UI objectives.
