--- title: Der Unterschied zwischen UI und UX url: "https://b13.com/de/wissen/erlaeuterung-was-ist-der-unterschied-zwischen-ui-und-ux" description: Die UI ist die Benutzeroberfläche und die UX ist die Auswirkung auf die Benutzer und das Geschäftsergebnis deines Unternehmens. Aber sie werden oft verwechselt und vermischt. Hier erfährst du, warum der Unterschied wichtig ist. 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 --- # Der Unterschied zwischen UI und UX [ UX/UI-Design ](https://b13.com/de/wissen/uxui-design) Erläuterung — Was ist der Unterschied zwischen UI und UX? =========================================================== ![](https://b13.com/fileadmin/_processed_/d/5/csm_laura_8ba8f32968.jpg)Laura Heine 15. November 2022 [ RSS Feed ](https://b13.com/de/rss.xml) ![Ein Eisberg-Grafik mit den Buchstaben "UI" und "UX", die prominent auf seiner Oberfläche dargestellt sind, symbolisiert die Beziehung zwischen den Konzepten des Benutzeroberflächendesigns und der Benutzererfahrung.](https://b13.com/fileadmin/_processed_/7/4/csm_difference-ux-ui_1711de095c.webp) Man kann durchaus sagen, dass es in jeder Branche eine Menge Fachjargon gibt, aber im Internet scheint es besonders viel davon zu geben. Das Missverständnis zwischen der User interface (UI) und der User Experience (UX) verdeutlicht die Verwirrung, der wir bei unserer Arbeit oft begegnen. Manchmal bitten uns Kunden, Benutzeroberflächen zu entwickeln, aber sie haben die Auswirkungen auf die Benutzererfahrung nicht bedacht. Das UI ist die Benutzeroberfläche — eine digitale oder physische Sache. Die UX ist das Nutzererlebnis, ein ganzheitlicher Begriff, der das Nutzerverhalten und die daraus resultierenden Auswirkungen auf das unternehmerische Endresultat umfasst. In diesem kurzen Artikel erkläre ich diese Begriffe und warum dieser Unterschied wichtig ist. UI ist User Interface und UX ist User Experience — aber was bedeutet das genau? --------------------------------------------------------------------------------- Das **User Interface** bezieht sich hauptsächlich auf die physischen oder digitalen Elemente, die den Nutzern zur Verfügung stehen. Im Zusammenhang mit Bildschirmen wie dem, auf dem du dich gerade befindest, umfasst die Benutzeroberfläche Text, Überschriften, Medien, Formulare und Schaltflächen zum Antippen (oder Klicken, je nachdem, wo du dies liest!). Die **User Experience** bezieht sich auf den gesamten Ablauf der Benutzeraktivitäten auf einer Website oder in einer Anwendung. Wie viele Schritte müssen sie durchlaufen, um eine Aufgabe zu erledigen? Wie schwierig ist es für sie, relevante Informationen zu finden? Diese Erfahrungen können darüber entscheiden, ob die Nutzer immer wieder zu deinem Produkt zurückkehren, ob sie nach Alternativen suchen oder ob sie bleiben, um mehr zu erfahren. User Experience Design beeinflusst das User Interface ------------------------------------------------------- Obwohl sie beide das Wort „User“ enthalten, ist ein User Interface etwas, das du benutzt, die User Experience ist etwas, das du hast. Wenn du eine Benutzeroberfläche beschreibst, beschreibst du die Form und Funktion der einzelnen Elemente, wenn du ein Benutzererlebnis beschreibst, sprichst du über den emotionalen Zustand und die Reaktion einer Person. Anhand des Nutzererlebnisses kannst du feststellen, ob eine Benutzeroberfläche die Wirkung hat, für die sie entwickelt wurde. Eine Benutzeroberfläche kann mit allen Funktionen ausgestattet sein, die man sich nur wünschen kann, aber das Benutzererlebnis ist wahrscheinlich ziemlich schrecklich. Wenn Designer eine Benutzeroberfläche für eine Anwendung oder Website entwerfen, müssen sie sich Gedanken darüber machen, wie diese Elemente funktionieren, wie sie in der gesamten Anwendung einheitlich aussehen und wie die Nutzer mit ihnen interagieren. Wir müssen alle Nutzer berücksichtigen — einschließlich ständiger, vorübergehender und situationsbedingter Behinderungen. Die Benutzeroberfläche muss für Menschen zugänglich sein, die auf unterstützende Technologien angewiesen sind. Die Art und Weise, wie wir diese Designentscheidungen bei b13 treffen, basiert auf dem User Experience Design. Kann man den Schritt des User Experience Designs überspringen? ---------------------------------------------------------------- Nein. Wir bei b13 sind für unsere technische Expertise bekannt, aber hinter den Kulissen steckt eine Menge Design und konzeptionelle Arbeit, bevor wir überhaupt zur technischen Lösung kommen. Wir hatten einen Kunden, der wegen einer bestimmten technischen Lösung zu uns kam. Wir sagten ihm, dass wir einen Discovery-Workshop brauchen, bevor wir mit dem Design beginnen können, und ein Teilnehmer freute sich nicht darauf. Am Anfang sahen sie nicht den Wert in dem, was ich „[Konzeptionsarbeit](https://b13.com/de/wissen/eine-huebsches-interface-entspricht-nicht-gleich-einem-validen-konzept)„ nenne. Der Entwurfsprozess berücksichtigt, wer das, was du baust, benutzen wird und welche Erfahrungen sie machen werden. Schon in der Anfangsphase überlegen wir, wie wir ein [Designsystem](https://b13.com/de/wissen/in-3-schritten-zu-skalierbarem-website-design-durch-atomic-design) nutzen können, um uns an die Bedürfnisse des Inhaltsdesigns anzupassen. Wir berücksichtigen auch die Geschäftspläne, damit das, was wir bauen, anpassungsfähig und skalierbar ist. Sie waren völlig überrascht, wie viel wir in dem Workshop erreicht haben. Wir hatten viele offene Fragen aufgedeckt, die sie nicht bedacht hatten. Im Nachhinein war der einzige Skeptiker, den wir hatten, so positiv vom Workshop angetan, dass er uns am lautesten lobte. Sie erkannten, dass wir das falsche Produkt geschaffen hätten, wenn wir mit der Entwicklung auf der Grundlage ihrer ursprünglichen Ideen begonnen hätten. Natürlich waren wir nicht überrascht, wie viel wir erreicht haben. Es ist einfach Teil unseres Prozesses, gemeinsam mit dem Team Ziele und Ideen zu entwickeln und sie zum Leben zu erwecken. Nutzerorientiertes Design --------------------------- Kunden kommen vielleicht zu uns, weil sie einfach nur wollen, dass wir „etwas bauen“, aber wir müssen wissen, für wen sie bauen und welchen geschäftlichen Nutzen sie haben wollen. Wir bieten das technische Know-how, um die Designs praktisch, skalierbar, zugänglich und angenehm zu gestalten. Du könntest viel Zeit damit verbringen, eine Oberfläche zu entwickeln, die alle Geschäftsanforderungen erfüllt. Aber macht es auch Freude, sie zu nutzen? Sind die Nutzer verwirrt? Schließen sie die Seite, bevor sie ihre Ziele erreicht haben? Du kannst kein großartiges User Interface entwerfen, ohne die User Experience zu berücksichtigen. Die richtige UX bedeutet zufriedene Kunden und langfristige Einsparungen. Brauchst du Hilfe deine UX auf Vordermann zu bringen? ------------------------------------------------------- Wir bieten UX-Audits an, damit du herausfinden kannst, wie du deine User Experience verbessern kannst. [ Let’s connect! ](https://b13.com/de/kontakt) ### Geschrieben von: ![Lächelnde Frau mit schulterlangem blonden Haar, die eine Brille und einen blauen Sweatshirt trägt, steht in einer hellen, modernen Umgebung.](https://b13.com/fileadmin/_processed_/d/5/csm_laura_9b472d894c.webp) Laura ist auch im wahren Leben so, wie im Job: authentisch, effektiv und auf den Punkt. In der Zusammenarbeit mit unseren Kunden hört sie nie auf, Fragen zu stellen. Sie geht Bedürfnissen auf den Grund und setzt sie in benutzerfreundlichen Konzepten und Oberflächen um, die genau das tun was sie sollen. Das Tool auf das sie nicht verzichten kann: Adobe XD Laura Heine UX Design [ mehr von Laura Heine ](https://b13.com/de/team/laura-heine) Ähnliche Artikel ------------------ - ![Eine robotische Hand hält einen Pinsel und erzeugt einen lila Wirbel vor einem hellblauen Hintergrund mit kreisförmigen Mustern.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings 17. Juli 2026 | Laura Heine Laura Heine teilt, was sie beim Design Leadership Meetup über Verantwortung, Dokumentation und einen fairen Umgang mit KI im Team gelernt hat. [ weiterlesen: Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings ](https://b13.com/de/wissen/verantwortungsvoll-gestalten-im-ki-zeitalter-unsere-learnings) - ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27. Januar 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. - ![Benutzeroberflächendesign mit einer dunklen Seitenleiste, die Navigationsoptionen bietet, und einem zentralen Inhaltsbereich mit Platzhaltertext.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage 12. Januar 2026 | Laura Heine b13 gestaltet das Backend von TYPO3 für Version 14 neu, damit es moderner wirkt, schneller läuft, den Benutzerkontext beibehält und eine erweiterbare Grundlage schafft, die sich… [ weiterlesen: Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage ](https://b13.com/de/wissen/gestaltung-des-backends-von-typo3-v14-unsere-vision-fuer-eine-moderne-erweiterbare-grundlage) - ![Benutzerschnittstellenelemente wie Textfelder, Kontrollkästchen und Schaltflächen, verbunden durch Pfeile auf einem lila Hintergrund.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Wie man Webformulare richtig macht 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… [ weiterlesen: Wie man Webformulare richtig macht ](https://b13.com/de/wissen/wie-man-webformulare-richtig-macht) - ![Eine lila Mappe ist zentral platziert und von roten und blauen rechteckigen Elementen umgeben, die durch Linien auf einem Gitterhintergrund verbunden sind.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Effektive Informationsarchitekturen entwerfen: Best Practices 30. Juli 2025 | David Steeb Tauche ein in unseren neuesten Artikel über die Welt der Informationsarchitektur und ihren entscheidenden Einfluss auf die User Experience. Erfahre zentrale Strategien und Best… [ weiterlesen: Effektive Informationsarchitekturen entwerfen: Best Practices ](https://b13.com/de/wissen/designing-an-effective-information-architecture-best-practices) - ![Zwei Roboterarme sind um eine Lupe positioniert und konzentrieren sich auf den Buchstaben "g" in einer stilisierten Schriftart. Der Hintergrund zeigt ein Gittermuster mit wiederholten "Ag"-Symbolen.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien 03. Juni 2025 | David Steeb Entdecke die Bedeutung von Richtlinien zur Schriftgröße im UI-Design, um zugängliche und visuell ansprechende Benutzeroberflächen zu schaffen. Erfahre die Best Practices für… [ weiterlesen: Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien ](https://b13.com/de/wissen/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![Ein Abschlusskappe ist zentral zwischen verschiedenen Elementen eines Flussdiagramms platziert, darunter Rechtecke und Kreise, vor einem Farbverlauf-Hintergrund. Das Design vermittelt Themen von Bildung und Entscheidungsprozessen.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21. Mai 2024 | Stefanie Kreuzer Ein optimaler Benutzerfluss ist entscheidend für erfolgreiche Websites. Erfahre, wie du mit Flowcharts schon früh im UX-Designprozess für Klarheit sorgen kannst. [ weiterlesen: Mastering Website Flowcharts ](https://b13.com/de/wissen/mastering-website-flowcharts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken 31. August 2023 | Stefanie Kreuzer Wireframing ist der erste Schritt bei der Gestaltung einer Website und dient vielen Zwecken: Es beschreibt, wie Informationen auf einer Seite dargestellt werden, legt die Struktur… [ weiterlesen: Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken ](https://b13.com/de/wissen/die-erfolgsmethode-wireframing) - ![Ein Weg führt durch stilisierte Wolken, flankiert von einer Lupe und Zahnrädern, mit Symbolen, die Texte und Dokumente im Hintergrund darstellen und Themen von Erkundung und Technologie andeuten.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design 12. April 2024 | Franzi Töpler Menschen mit Beeinträchtigungen stellen eine der größten Gruppen von Online-Nutzern dar, aber sie werden in der digitalen Welt oft übersehen. Die Verbesserung der Barrierefreiheit… [ weiterlesen: Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design ](https://b13.com/de/wissen/ein-leitfaden-fuer-die-beruecksichtigung-von-barrierefreiheit-im-ux-design) - ![Eine Hand platziert eine rote Form in ein Flussdiagramm, das aus verschiedenen geometrischen Figuren besteht, darunter Rechtecke und Kreise, mit Richtungspfeilen, die die Verbindungen zwischen ihnen anzeigen. Der Hintergrund zeigt ein Gittermuster.](https://b13.com/fileadmin/_processed_/c/3/csm_UserFlowGuide_Headerbild_54abda2aa4.webp) ### Hervorragendes User Flow Design 03. April 2024 | Stefanie Kreuzer Die Gestaltung des Benutzerflusses visualisiert den Weg, den der Benutzer zurücklegt, um ein bestimmtes Ziel zu erreichen. In digitaler Hinsicht ist der Pfad das, was der Benutzer… [ weiterlesen: Hervorragendes User Flow Design ](https://b13.com/de/wissen/hervorragendes-user-flow-design)