Was ist der Unterschied zwischen UX Design und UI Design?

User Experience (UX) Design und User Interface (UI) Design sind zwei Begriffe, die recht ähnlich klingen, im Detail aber doch unterschiedliche Aspekte beschreiben.

UX Design

Die „User Experience“ (UX) beschreibt das Gesamterlebnis des Benutzers mit einem Produkt oder einer Software. Im Deutschen wird sie auch als „Nutzungserlebnis“ bezeichnet. Bereits in dem Moment, in dem jemand zum ersten Mal von einem Produkt hört, beginnt die persönliche User Experience. Werbung oder Reviews beeinflussen die Wahrnehmung eines Produktes und formen die Meinung und das häufig schon, bevor das Produkt überhaupt erstmalig genutzt wird. Die Zeit, in der das Produkt dann auch tatsächlich im Gebrauch ist, ist natürlich die für die User Experience entscheidenste: Funktioniert das Produkt gut und hilft es einem dabei, seine Ziele zu erreichen? Ist es einfach zu bedienen? Ist es zuverlässig? Macht die Nutzung Spaß?

Die User Experience ist für den Erfolg eines Softwareproduktes also ein ganz entscheidender Faktor. Sie zu prägen fällt in die Zuständigkeit von UX Designer*innen. Im Prozess der Software-Entwicklung ist es ihre Aufgabe, eine intuitive und angenehme Erfahrung für die Nutzerinnen und Nutzer zu schaffen, indem sie das Bedienkonzept, die Informationsarchitektur, das Interaktionsdesign und das visuelle Design einer Software optimieren. Dieser Prozess besteht aus mehreren Phasen und beginnt schon lange, bevor eine Zeile Code geschrieben wird:

• User Research: Am Anfang steht das Verstehen der Nutzer*innen und ihrer Anforderungen an das Produkt. Dazu müssen UX Designer*innen genau erforschen, wer die Zielgruppe ist und was deren Bedürfnisse sind. Um das herauszufinden, betreiben sie User Research und setzen beispielsweise Nutzungskontextbeschreibungen, Problem State Maps, Flussdiagramme, Nutzerszenarien oder Personas ein.
  
  
• Erstellung eines Konzeptes: Aus den Ergebnissen der User Research erstellen UX Designer*innen Bedienkonzepte, die sie in Wireframes darstellen. Diese sind visuell nicht ausgestaltet, haben also keine Farben oder grafischen Elemente. Sie zeigen in Grauabstufungen wie eine Benutzeroberfläche aufgebaut ist, wie man beispielsweise darin navigiert und wie Geschäftsprozesse ablaufen. Das hat den Vorteil, dass sich die Beteiligten so rein auf das Bedienkonzept konzentrieren können und nicht von Farben oder Grafiken abgelenkt werden.
  
  
• Visuelles Design: Sobald das Bedienkonzept ausgereift ist, können die Wireframes in ein visuelles Design übersetzt werden. Hierbei wird der Software ihr individuelles Äußeres verliehen, indem Farben, Formen, Typografie und Grafiken eingebunden werden. Das eigentliche Bedienkonzept wird jedoch nicht mehr verändert, stattdessen soll das visuelle Design die Benutzer*innen unterstützen, indem es etwa durch Farben die Aufmerksamkeit an die richtigen Stellen lenkt. Ein ansprechendes Äußeres trägt enorm zur emotionalen Wahrnehmung bei und ist entscheidend für den ersten Eindruck. Zudem ist erwiesen, dass ein hübsches Design sogar über kleinere Usability-Probleme hinwegsehen lässt.
  
  
• Evaluierung: Die Nutzerinnen und Nutzer werden während des gesamten Prozesses immer wieder miteinbezogen um sicherzustellen, dass die entwickelten Konzepte und Designs den Bedürfnissen der Zielgruppe entsprechen. Hierzu können beispielsweise Usability Tests, A/B-Testings oder Fokusgruppen eingesetzt werden. Zusätzlich können interaktive Prototypen entwickelt werden. Ein interaktiver Prototyp ist eine Art Software-Attrappe, die den Nutzerinnen und Nutzern die Möglichkeit bietet, mit dem Design zu interagieren und die Funktionalität und Benutzererfahrung des Produktes zu erleben. Im Gegensatz zu statischen Prototypen, die nur visuelle Darstellungen bieten, ermöglicht ein interaktiver Prototyp dem Benutzer, Aktionen auszuführen, Menüs zu navigieren, Eingaben zu machen und Feedback zu erhalten, ähnlich wie bei der tatsächlichen Nutzung des endgültigen Produktes.
  
  
• Übergabe an die Entwicklung: Um sicherzustellen, dass die Oberfläche auch so entwickelt werden kann, wie sie vom UX-Designer vorgesehen ist, muss sie beschrieben und spezifiziert werden. Heutzutage werden umfassende Design Systeme für die Entwicklung als Vorlage spezifiziert.
  
  

Beispiel: Wireframe einer ERP UI

UI Design

UI Design ist ein Teilprozess des UX Designs. Es umfasst die beiden oben beschriebenen Phasen, die Erstellung eines Konzeptes und das visuelle Design. Als UI Design wird also die Phase bezeichnet, in der konkret die Benutzeroberfläche (User Interface) einer Software designt wird. Dies umfasst sowohl die Erstellung eines Bedienkonzeptes in Form von Wireframes als auch die anschließende visuelle Ausgestaltung.

Das UI Design ist aber natürlich eng mit den anderen Phasen verknüpft, da die Erkenntnisse aus der User Research gebraucht werden, um ein passendes Bedienkonzept ausarbeiten zu können. Außerdem müssen die Entwürfe für die Oberfläche regelmäßig getestet werden, um zu entscheiden, ob die Entwürfe passend sind oder ob Änderungen eingearbeitet werden müssen.

Beispiel: Visuelles Design einer ERP UI

Alternative Nutzung der Begriffe

Einige ziehen eine andere Grenze zwischen UX Design und UI Design. Diesem alternativen Begriffsgebrauch zufolge umfasst das UX Design die Phase User Research und das Erstellen der daraus abgeleiteten Konzepte. UI Design ist demnach die Phase NACH dem UX Design und umfasst „nur“ die visuelle Ausgestaltung der Konzept-Entwürfe. Laut dieser Definition sind die beiden Disziplinen getrennt und werden als unterschiedliche Professionen betrachtet, die jedoch trotzdem Hand in Hand arbeiten sollten, um ein optimales Ergebnis zu erzielen. Zur Verwirrung werden teilweise auch die Abkürzungen der Definition von UX (Nutzererlebnis) und UI (Benutzerschnittstelle) als Synonym für UX = Konzept und UI = Visuelles Design verwendet. Manchen setzen sogar UX und UI gleich.

Wir bei Shapefield bevorzugen eher die Definition, wie sie als erstes beschrieben ist, denn wir betrachten die Gestaltung einer Benutzeroberfläche als einen ganzheitlichen Prozess. Alle Prozessphasen sind essentiell und sollten mit der höchst möglichen Qualität ausgeführt werden sowie Hand in Hand arbeiten. Zudem ist es aus unserer Sicht sinniger direkt eine konkrete Phase im Prozess zu benennen als feststehende Abkürzungen als Synonym misszuverwenden.

Doch unabhängig davon, welche Definition man bevorzugt: Alle Phasen müssen einem gemeinsamen Ziel dienen: dem optimalen Nutzererlebnis. Dies kann nur erreicht werden, wenn alle Beteiligten eng zusammenarbeiten, ein gemeinsames Verständnis der zu realisierenden Vision haben und die Bedürfnisse der Nutzer*innen bei allen Entscheidungen in den Mittelpunkt stellen.