UX UI Work Together media header
HeimNewsExpertenberichteWie arbeiten UI-Design und UX-Design zusammen?

Wie arbeiten UI-Design und UX-Design zusammen?

Ein Artikel von Pegah Mirzadeh, UX-Designerin bei ELCA

Der Begriff UX ist mittlerweile ein gängiger Begriff - zumindest auf Unternehmensebene - und es ist nicht ungewöhnlich, dass die Begriffe verwechselt oder austauschbar verwendet werden. Obwohl sich der Bereich des User Experience Design zweifellos weiterentwickeln wird, ist es wichtig, die bedeutende Rolle zu verstehen, die jeder Beruf im breiteren Feld des menschenzentrierten Designs spielt.

ELCA's Auffassung von UX (und UI) ist auf den agilen Ansatz ausgerichtet und wir bemühen uns, über die verschiedenen Phasen des Produktlebenszyklus hinweg zusammenzuarbeiten, um qualitativ hochwertige IT-Produkte zu liefern, die den Bedürfnissen der Kunden und Endbenutzer entsprechen.

UX vs. UI: zwei Seiten derselben Medaille.

"Design ist im Grunde ein Akt der Kommunikation, was ein tiefes Verständnis für die Person voraussetzt, mit der der Designer kommuniziert", sagt Don Norman in The Design of Everyday Things. "In diesem Sinne sind UX- und UI-Design zwei Seiten derselben Medaille. Beide sind darauf ausgerichtet (oder sollten es sein), den Benutzer zu befähigen und ein zugängliches Produkt zu schaffen. Aber sie sind nur erfolgreich, wenn sie zusammenarbeiten."

Die Unterschiede zwischen UX- und UI-Design:

ppt_599_ux-ui-graphic_02_de.svg

UX/UI and Agile framework

Ein tiefes Verständnis des UX-Prozesses durch Manager und Führungskräfte in einer Organisation ist der Schlüssel zu erfolgreicher agiler UX; sie "begreifen" es. Sie verstehen, was UX ist, warum es für das Produkt wertvoll ist und wie es dem Projekt einen entscheidenden Wettbewerbsvorteil verschafft 5. Die Entscheidungsträger in diesen Unternehmen wissen, dass UX nicht nur ein weiterer Farbtupfer ist, um bereits beschlossene Funktionen und Arbeitsabläufe schön aussehen zu lassen. Stattdessen bringen sie einen UX-Designer von Anfang an in das Projekt ein, um Produktstrategie, Funktionen, Struktur, Interaktionen, Inhalt und Ästhetik festzulegen.

 

Ein agiler Lebenszyklus für ein IT-Produkt, wie er bei ELCA praktiziert wird, ist die strukturierte Abfolge von Phasen, die ein Produkt auf seinem Weg von Anfang bis Ende durchläuft. Er umfasst drei Phasen: "Ausarbeitung", "Konstruktion und Übergang" und "Kontinuierliche Verbesserung". Um besser zu verstehen, wie UX/UI-Designer mit Business-Analysten in diesem Zyklus zusammenarbeiten können, wollen wir uns darauf konzentrieren, wie benutzerzentriertes Design den verschiedenen Phasen des agilen Prozesses zugeordnet werden kann.

UX-Framework in einem agilen IT-Produktsprint:

ppt_599_ui-ux-graphic_03.svg

Ausarbeitungsphase:

 

Nach dem Lesen der verfügbaren Projektdokumentation definiert der UX-Designer die UX-Prinzipien für das Projekt. Um die UX-Prinzipien zu definieren, legt der UX-Designer eine Roadmap für die UX-Methodik und die UX-Leistungen fest. In dieser Phase können Workshops und Aktivitäten geplant werden, Nutzerforschung durchgeführt und die Bedürfnisse, Ziele und Beschwerden der Nutzer verstanden werden, Erfolgs-KPIs können definiert werden, Personas können festgelegt und Szenarien für jede Persona priorisiert werden (in Zusammenarbeit mit BAs, PMs und Stakeholdern). In dieser Phase werden die Anforderungen der Zugänglichkeit analysiert, Nutzerforschung betrieben und Ideation-Workshops veranstaltet. Die wichtigsten UX-Aktivitäten in dieser Phase sind wie folgt:

 

  • Nutzerforschung und Interviews,
  • Definition von Benutzergruppen, Zielen, Bedürfnissen und Problempunkten,
  • Definition und Zusammenfassung von Problematik und Lösung,
  • Entwurf einer Website-Map und Informationsarchitektur,
  • Erstellung von User Journeys und User Flows, um komplexe UX-Verhaltensweisen zu validieren,
  • Wiederholung, bis der Kunde die Informationsarchitektur (basierend auf dem UX-Plan) validiert hat.

 

Während die oben genannten Planungsschritte von einem UX-Designer durchgeführt werden, ist auch das UI-Design Teil dieser Phase mit den folgenden Schritten:

 

  • Erstellung von Wireframe-Prototypen, um komplexe UI-Verhaltensweisen zu validieren,
  • Wiederholung, bis der Kunde die Entwürfe validiert (auf der Grundlage des UX-Plans),
  • Fertigstellung des UI-Designs für den Kunden

 

 

Aufbau- und Übergangsphase:

 

In dieser Phase plant der UX/UI-Designer die UX-Qualitätssicherung und Usability-Tests. Die UX-Aktivitäten in dieser Phase sind wie folgt definiert:

 

  • Erstellung von Bildschirmen und Interaktionsdesign entsprechend dem Umfang der User Story und für jede User Story (UI),
  • Unterstützung des Business-Analysten mit einer Beschreibung der User Story,
  • Wiederholung und Anpassung an das Kundenfeedback,
  • Unterstützung der Entwickler bei der Bereitstellung von Assets und der Suche nach Alternativen,
  • Durchführung von Benutzertests (wenn möglich) für neue Funktionen oder Änderungen am Konzept,
  • Überarbeitung und Aktualisierung von UX-Richtlinien und UI-Spezifikationen.
  • Dokumentation von UI-Komponenten (Shortcuts, ...).

 

Sicherstellung der Benutzerakzeptanz und des Kundensupports während der Einführungsphase. Die wichtigsten UX-Aktivitäten in dieser Phase sind wie folgt:

 

  • Kundenfeedback einplanen,
  • Durchführung abschließender Tests und Sicherstellung der Integrität,
  • Erstellung von Schulungsmaterial für die Benutzer,
  • Unterstützung der Benutzerakzeptanz und des Onboardings,
  • Unterstützung von Änderungswünschen.

 

 

Phase der kontinuierlichen Verbesserung:

 

In dieser Phase wird die Live-Lösung auf der Grundlage von Nutzerfeedback, Usability-Tests und Stakeholder-Anforderungen verbessert, weiterentwickelt und betreut. Die Hauptaufgaben des UX-Designers, der in dieser Phase in ein agiles Team integriert ist, sind:

 

  • Als zentraler Ansprechpartner für das Entwicklungsteam bezüglich der UI-Spezifikationen zu fungieren,
  • Spezifikation von neuen Funktionen,
  • Verbesserung bestehender Funktionen auf der Grundlage diverser Feedback-Kanäle,
  • Kontinuierliche Qualitätssicherung.

UI/UX-Experten kommen zum Wort

Lassen Sie uns abschließend die von einigen Experten vorgenommene Unterscheidung zwischen UX- und UI-Ansätzen zusammenfassen.

 

UX bezieht sich auf den Weg des Nutzers zur Lösung eines Problems, während UI sich darauf erstreckt, wie die Schnittstellen eines Produkts aussehen und funktionieren.

 

Ken Norton, Partner bei Google Ventures und ehemaliger Produktmanager bei Google, ist der Meinung, dass wir "mit einem Problem beginnen sollten, das wir lösen möchten. Das UX-Design konzentriert sich auf alles, was die Reise des Benutzers zur Lösung dieses Problems positiv oder negativ beeinflusst, sowohl auf dem Bildschirm als auch außerhalb des Bildschirms. Das UI-Design bezieht sich darauf, wie die Schnittstellen des Produkts aussehen und funktionieren. Die Benutzeroberfläche ist nur ein Teil dieses Prozesses. Mir gefällt die Analogie zum Restaurant, die ich von anderen gehört habe: UI sind der Tisch, der Stuhl, der Teller, das Glas und die Utensilien. UX ist alles, vom Essen über den Service, den Parkplatz, die Beleuchtung und die Musik."

 

Es gibt keinen Unterschied zwischen UX- und UI-Design, da es sich um zwei Dinge handelt, die nicht vergleichbar sind.

 

Craig Morrison, Associate Creative Director bei Truvani, ist hingegen anderer Meinung: "Es gibt keinen Unterschied zwischen UX- und UI-Design, weil es sich um zwei Dinge handelt, die nicht vergleichbar sind. Das ist so, als würde man fragen: 'Was ist der Unterschied zwischen roter Farbe und den Chemikalien, aus denen die Farbe besteht? Es gibt keinen Unterschied. Rote Farbe besteht aus einer Vielzahl verschiedener Chemikalien, die zusammen rote Farbe ergeben. Genauso wie sich das Benutzererlebnis aus einer Reihe verschiedener Komponenten zusammensetzt, ist das Design der Benutzeroberfläche nur eine von ihnen, und in Kombination machen sie das Benutzererlebnis aus."

References

  • “UX vs UI: What’s the Difference?”, Link hier
  • “Agile is not easy for UX: (How to) deal with it”, Page Laubheimer, Link hier

 

Lesen Sie den Artikel auch auf medium.com hier: UX vs. UI; The Difference Between User Experience and User Interface

Pegah Mirzadeh

UX Designer

Lernen Sie Pegah Mirzadeh kennen, unsere auf UX spezialisierte Designerin. Kontaktieren Sie Pegah, um zu besprechen, wie sie Ihre UX-Initiativen vorantreiben kann.

Verwandte Themen

UX UI media header

Der Unterschied zwischen User Experience und User Interface

Entdecken Sie die Unterschiede zwischen User Experience (UX) und User Interface (UI) und erfahren Sie mehr über die grundlegenden Elemente, die digitale Interaktionen und den Erfolg von Produkten bestimmen.

User Experience

User Experience (UX)

Wir zielen darauf ab die Akzeptanz und Effizienz unserer Lösungen zu verbessern und gleichzeitig ein einzigartiges Kundenerlebnis zu schaffen.

Best of Swiss App

Digital Experience

Die ELCA Digital Agency entwirft, entwickelt und integriert digitale Lösungen, die Ihre Kundenbindung stärken. Steigern Sie Ihren geschäftlichen Erfolg durch digitale Spitzenleistungen, indem Sie Ihre Markenbekanntheit erhöhen und neue Geschäftsfelder erschliessen.