UX and UI: How They’re Different and How They Work Together

The terms User Experience (UX) and User Interface (UI) are often used interchangeably (ex. “We provide UX/UI support”). However, these are separate and distinct concepts. UX is the process of researching and asking questions about your users in order to understand their needs in terms of how and for what they will use something. UX can be applied to any creative process, from developing an app to constructing a building. UX is the process of learning how users will use something and then iteratively testing proposed designs of the product to determine how effective the designs are in meeting the user’s needs. UI, which is usually thought of as any sort of electronic interface, (i.e. websites, phone apps, car dashboards) refers to the functional design and overall aesthetic design (colors, typography graphics, etc.) of a product.

Understanding the interdependent relationship between these two separate concepts is key to applying them properly, as UI evolves in response to the iterative UX process. When done correctly, the UI design of something will evolve as a result of continuously applying UX methodologies to the design process until the UI design meets all the usability requirements of the people who will ultimately use the product.

Sketch of multiple pages in a website design beside an image of a well-designed data visualization shown on a laptop.  The two images are contrasted with the text versus between them.

Developers can conduct UX research using standard UX tools such as Optimal Workshop and UXPin. Optimal Workshop provides resources for card sorting, tree testing, and first-click testing (UX research methods that give developers a look into the minds of users). First-click testing, for example, reveals where a user will instinctually click to locate certain information. It is used to help developers build logical and intuitive information architectures. Using wireframe services such as UXPin, developers can take the insights they gain from conducting UX research and transform them into wireframes that can be tested on users. For example, a company struggling to recruit applicants might find through first-click testing that it takes users several clicks to locate their “Careers” page. To remedy this, developers could create several wireframes that each feature the “Careers” link in a different location and then test those wireframes on users to determine which “Careers” link location results in the fastest click.

UI design is focused on two primary components: the functional layout and the overall aesthetics of interfaces. Let’s dig a little deeper into each of these:

What is functional design?

Functional design refers to the incorporation of all the interface parts that allow a user to accomplish all the tasks that UX studies identify as necessary. Functional design considers placement of features in terms of their importance for task completion. For example, the “Buy” button on Amazon enables users to perform possibly the most important user task — making a purchase — and so Amazon’s functional design places the “Buy” button in a strategic location, and even offers a one-swipe “Buy Now” mobile functionality that streamlines the task further.

What is meant by ‘aesthetic’?

The overall aesthetic of a user interface aims to create a sense of trust in terms of the intention of the application or website. People have been trained through exposure to understand what they should expect functionally and professionally based on simple things such as color, font and even just the business and number of elements on the screen. For instance, because the New York Times wants users to trust the news on its website, it does not use Comic Sans font. Rather, institutions that depend on being perceived as reliable and trustworthy will invariably use Serif fonts such as Times and Gramond, as well as light-colored backgrounds. Likewise, high-tech applications or websites for high-tech companies (like AMD) rarely use Serif fonts and typically will have dark backgrounds in an effort to appear more modern and on-brand. These UI decisions are based on UX insights about users and their expectations. A website could be objectively beautiful, with crisp images and a pleasing color scheme, but without good UX to guide its design, it won’t engage users and will fail to achieve its business goal.

Given how vital UX is to effective UI, providing UI design support alone as a developer isn’t enough — the UI design needs to be grounded in the user intel gained through UX. The UX process includes an iterative back-and-forth with the UI design process whereby real users test variations of UI designs meant to allow users to complete their intended tasks. The full design cycle is the process of defining what needs to be built, designing it, testing it, and iterating on it until users can complete all necessary tasks.

Good UX and UI can save significant time and money on a project. If developers design a UI without doing the prerequisite UX work first, the user issues that could have been identified at the start of the development process will instead become apparent after an app or site is in production. Developing and testing a wireframe is a much shorter and cheaper process than a complete build, and if there are problems, they can be caught before too many resources are invested. When you approach a project with a clear understanding of the differences and the relationship between UX and UI, you’ll ensure that your final product looks great and is a pleasure to use – and you’ll do so while saving time and money.