--- title: The difference between UI and UX url: "https://b13.com/knowledge/explainer-whats-the-difference-between-ui-and-ux" description: The UI is the user interface and UX is the resulting impact on users and your business’s bottom line. But they are often confused and conflated. Here’s why the difference matters. image: "https://b13.com/fileadmin/_processed_/3/6/csm_difference-ux-ui_191-1_d1e31d115f.png" date: 2022-10-26 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # The difference between UI and UX [ UX/UI-Design ](https://b13.com/knowledge/uxui-design) Explainer—What’s the difference between UI and UX? ==================================================== ![](https://b13.com/fileadmin/_processed_/d/5/csm_laura_8ba8f32968.jpg)Laura Heine 15 November 2022 [ RSS Feed ](https://b13.com/rss.xml) ![An iceberg graphic with the letters "UI" and "UX" prominently displayed on its surface, symbolizing the relationship between user interface and user experience design concepts.](https://b13.com/fileadmin/_processed_/7/4/csm_difference-ux-ui_1711de095c.webp) It’s fair to say that there’s a lot of jargon in every industry, but the web seems to have plenty. The misunderstanding about the user interface (UI) versus the user experience (UX) highlights the confusion we often come across in our work. Sometimes customers ask us to build user interfaces, but they haven’t considered the impact on user experience. The UI is the user interface—a digital or physical thing. The UX is the user experience, a holistic term that encompasses user behavior and the resulting impact on your business’s bottom line. In this quick article, I’ll explain these terms and why this difference matters. The UI is the user interface, and UX is the user experience—but what does this mean exactly? ---------------------------------------------------------------------------------------------- The **user interface** refers mainly to the physical or digital elements that are available to users. In the context of screens like the one you’re on now, the interface includes text, headings, media, forms, and buttons to tap (or click, depending on where you’re reading this!) And we’re just talking about the page that is loaded in the browser. The **user experience** refers to the overall flow of user activity across a website or application. How many steps do they need to go through to complete a task? How difficult is it for them to find relevant information? These experiences could determine whether users continue to come back to your product, whether they seek alternatives, or whether they stick around to learn more. User Experience Design results in User Interfaces --------------------------------------------------- Although they both share the word user, a user interface is something you use, a user experience is something you have. When you describe a user interface you’re describing the form and function of each element, when you describe a user experience, you’re talking about the emotional state and response of a person. The user experience is how you qualify whether an interface is having the impact it’s designed for. A user interface could be full of every feature and function a user could ever want, but the user experience is likely to be pretty awful. When designers create a user interface in an application or website, they have to think about how these elements work, how they appear consistently across the app, and how users interact with them. We need to consider all users—including permanent, temporary and situational disability. The user interface needs to be accessible for people relying on assistive technologies. The way we go about making those design decisions at b13 is through user experience design. Can you skip this user experience design step? ------------------------------------------------ No. At b13 we’re known for our technical expertise, but there is a lot of design and conceptual work going on behind the scenes before we even get to the technical solution. We had a customer who came to us for a specific technical solution. We told them before we could start designing, we needed a discovery workshop, and one participant was not looking forward to it. At the start, they didn’t see the value in what I call “[concept work](https://b13.com/knowledge/a-pretty-interface-does-not-equal-a-valid-concept)“. The design process takes into account who will use what you’re building and their end-to-end experience. Even from the earlier stages, we’ll be looking at ways to [leverage a design system](https://b13.com/knowledge/3-steps-to-scalable-website-design-using-atomic-design-principles) to adapt to their content design needs. We also take into consideration the business plans so what we build is adaptable and scalable. They were completely surprised by how much we got done in the workshop. We had uncovered many open questions they had not considered. Afterward, the one skeptic we had was so positive about the workshop, they were the most vocal in their praise. They realized that, had we started building based on their initial ideas, we would have created the wrong product. Of course, we weren’t surprised by how much we got done. It’s just part of our process of drawing out goals and ideas with a team and bringing them to life. User-driven design -------------------- Customers may come to us because they just want us to “build it,” but we need to know who they are building for, and what business impact they want to have. We provide the technical expertise on how to make the designs useful, scalable, accessible, and enjoyable. You could spend a long time building an interface that could fulfill every business requirement. But is it a joy to use? Are users confused? Are they closing the site before they complete tasks? You can’t design a great user interface without considering the user experience. Getting the UX right means satisfied customers and long-term savings. Need help optimizing your UX? ------------------------------- We provide UX audits to help you identify ways to improve your user experience. [ Let’s connect! ](https://b13.com/lets-connect) ### Written by: ![Bild von Laura Heine](https://b13.com/fileadmin/_processed_/d/5/csm_laura_9b472d894c.webp) Laura personifies the best qualities of her UX work: genuine, to the point, and effective. She gets to the bottom of client needs and turns them into simple, essential interfaces that get the job done right. Her essential tool: Adobe XD Laura Heine UX Design [ more from Laura Heine ](https://b13.com/team/laura-heine) Related Articles ------------------ - ![A robotic hand holds a paintbrush, creating a purple swirl against a light blue background with circular patterns.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Designing Responsibly in the Age of AI: What We’re Learning as We Go 17 July 2026 | Laura Heine Laura Heine shares what she learned at the Design Leadership Meetup about responsibility, documentation, and treating AI fairly as a team. [ Read more: Designing Responsibly in the Age of AI: What We’re Learning as We Go ](https://b13.com/knowledge/designing-responsibly-in-the-age-of-ai-what-were-learning-as-we-go) - ![Several colorful web page mockups stacked together, showcasing different layouts and design elements against a purple background.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27 January 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. [ Read more: Camino—The Need for a Default Theme in TYPO3 Is Real ](https://b13.com/core-insights/blog/camino-the-need-for-a-default-theme-in-typo3-is-real) - ![User interface design featuring a dark sidebar with navigation options and a central content area with placeholder text.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation 12 January 2026 | Laura Heine b13 is redesigning TYPO3’s backend for version 14 to feel modern, work faster, maintain user context, and create an expandable foundation that can evolve for years to come. [ Read more: Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation ](https://b13.com/knowledge/designing-typo3-14s-backend-our-vision-for-a-modern-expandable-foundation) - ![User interface elements including text fields, checkboxes, and buttons, connected by arrows on a purple background.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Best Practices for Effective Web Forms 18 August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ Read more: Best Practices for Effective Web Forms ](https://b13.com/knowledge/creating-effective-web-forms) - ![A purple folder is centrally placed, surrounded by red and blue rectangular elements connected by lines on a grid background.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Designing an Effective Information Architecture: Best Practices 30 July 2025 | David Steeb Dive into our latest article exploring the world of information architecture and its profound impact on user experience. Learn key strategies and best practices for designing… [ Read more: Designing an Effective Information Architecture: Best Practices ](https://b13.com/knowledge/designing-an-effective-information-architecture-best-practices) - ![Two robotic arms are positioned around a magnifying glass, focusing on the letter "g" in a stylized font. The background features a grid pattern with repeated "Ag" symbols.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Designing with Type: A Guide to UI Font Size Guidelines 03 June 2025 | David Steeb Discover the importance of UI font size guidelines for creating accessible and visually appealing UI designs. Learn the best practices for typography in UI, including consistency,… [ Read more: Designing with Type: A Guide to UI Font Size Guidelines ](https://b13.com/knowledge/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![A graduation cap is centrally placed among various flowchart elements, including rectangles and circles, set against a gradient background. The design suggests themes of education and decision-making processes.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21 May 2024 | Stefanie Kreuzer An optimal user flow is crucial for successful websites. Learn how to use flowcharts to achieve clarity early in the UX design process. [ Read more: Mastering Website Flowcharts ](https://b13.com/knowledge/mastering-web-flow-charts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Mastering the Art of Wireframing: Essential Tips and Technique 31 August 2023 | Stefanie Kreuzer Wireframing is the first step in designing the structure of a website, and it serves many purposes; to describe how information is presented on a page, to determine a website’s… [ Read more: Mastering the Art of Wireframing: Essential Tips and Technique ](https://b13.com/knowledge/wireframing-best-practices) - ![A pathway leads through stylized clouds, flanked by a magnifying glass and gears, with icons representing text and documents in the background, suggesting themes of exploration and technology.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### A Guide to Accessibility Considerations in UX Design 12 April 2024 | Franzi Töpler People with disabilities constitute one of the most significant segments of online users, but it is an often-overlooked population in the digital world. Increasing accessibility to… [ Read more: A Guide to Accessibility Considerations in UX Design ](https://b13.com/knowledge/a-guide-to-accessibility-considerations-in-ux-design) - ![A hand is placing a red shape into a flowchart composed of various geometric figures, including rectangles and circles, with directional arrows indicating connections between them. The background features a grid pattern.](https://b13.com/fileadmin/_processed_/c/3/csm_UserFlowGuide_Headerbild_54abda2aa4.webp) ### Excelling in User Flow Design 03 April 2024 | Stefanie Kreuzer User flow design visualizes the path that the user follows to achieve a specific goal. In digital terms, the path is what the user sees and clicks on when interacting with a… [ Read more: Excelling in User Flow Design ](https://b13.com/knowledge/excelling-in-user-flow-design)