15. Feb 2021
DevUX – Die Entwicklung einer gemeinsamen Sprache

Posted at 09:47h in Insights by Lisa Treibert

Bei der Zusammenarbeit von Entwicklung und Design treffen zwei Disziplinen aufeinander, die oft sehr verschiedene Perspektiven einnehmen. UI/UX-Expertin Sina Busch und Software-Entwickler Dr. Axel Habermaier zeigen, wie man mithilfe des DevUX Mindset eine gemeinsame Sprache finden kann und berichten von ihren Erfahrungen bei der Umsetzung in der Praxis.

Vor dem Hintergrund steigender Komplexität moderner Frontends entstehen laufend neue Technologien und Frameworks, durch die auch die UI/UX-Anforderungen und -Erwartungen ansteigen. Die intensive Zusammenarbeit von Entwickler*innen und Designer*innen wird dadurch immer wichtiger. Trotzdem arbeiten viele noch auf die alte Art: Das Produkt definiert Funktionen, Designer*innen erstellen Konzepte und Entwickler*innen integrieren sie. Fehlende Kommunikation und Interaktion führen dabei schnell zu Silodenken, Blockaden durch Abhängigkeiten, Missverständnissen und damit zu Frustration für alle Beteiligten. Hinzu kommt, dass die beiden Disziplinen sehr unterschiedliche Perspektiven einnehmen, was sich gerne auch mal in folgenden, beispielhaften Klischees widerspiegelt:

Designer*in

„Alles muss pixel-perfect sein. Wie das umzusetzen ist, ist mir egal – darum kümmern sich die Entwickler*innen.“

Entwickler*in

„Hauptsache die Anwendung ist funktional. Die Extrameile, um das alles noch hübsch zu machen, müssen wir nicht gehen.“

Wenn auch sicherlich nicht ganz so klischeehaft und überzogen, findet sich dieses Problem der unterschiedlichen Perspektiven oft auch in der Praxis. Gerade wenn Design-Team und Entwicklungs-Team kaum miteinander interagieren und vielleicht sogar an unterschiedlichen Orten arbeiten, entstehen schnell Silos.

Um dieses Silodenken zu vermeiden und die Distanz zwischen den verschiedenen Disziplinen zu verringern, arbeiten wir bei XITASO schon seit einigen Jahren in interdisziplinären, crossfunktionalen Teams, in denen jeweils Entwickler*innen, UI/UX-Expert*innen, Product Owner und Agile Coaches vertreten sind und nicht nur räumlich eng zusammenarbeiten. Aber auch wenn kurze Wege, mehr Nähe zueinander und intensive Kommunikation die Zusammenarbeit schon deutlich verbessern, lassen sich die verschiedenen Denkweisen und Perspektiven der Disziplinen dadurch nicht einfach auflösen. Da wir bei XITASO immer bestrebt sind, uns stetig zu verbessern, haben wir nach Wegen gesucht, unsere Zusammenarbeit noch weiter zu optimieren und sind dabei auf das Konzept DevUX gestoßen.

Das Konzept des DevUX

Das Konzept DevUX ¹ beschreibt eine Kultur der Zusammenarbeit zwischen Designer*innen und Entwickler*innen. Es liefert ein Set an Ideen und Vorgehensweisen, mit denen unterschiedliche Rollen gemeinsam im Team arbeiten können, was die Zusammenarbeit verbessert und dadurch auch die Entwicklung beschleunigt. Dabei kann man als Team vier verschiedene Level der Zusammenarbeit erreichen:

Level 0: Dysfunction
Level 1: Basics
Level 2: Efficency Von hier starten wir.
Level 3: Symbiosis Da wollen wir hin!

Auf Level 0 gibt es keine gemeinsame Sprache zwischen Designer*innen und Entwickler*innen. Design-Team und Entwicklungs-Team arbeiten separat nebeneinander her und es fehlt an Kommunikation. Die Designer*innen machen das Mockup, die Entwickler*innen integrieren es – es gibt keine Interaktion, was schnell zu Missverständnissen, Blockaden und Frustration führt. Mit steigender Interaktion und zunehmender Integration der verschiedenen Rollen in einzelne Bereiche, erreicht man höhere Level der DevUX-Zusammenarbeit. Level 3 beschreibt dann die vollständige Symbiose.

Auf Level 3 designt und entwickelt das Team gemeinsam Hand in Hand – das gilt für den Großteil des gesamten Workflows. Selbst bei der Mockup Creation, die eigentlich vollständig der Gestaltung zugerechnet wird, ist ein*e Entwickler*in beteiligt. Der oder die Designer*in wiederum wird auch in den Entwicklungsprozess integriert.

DevUX in der Praxis

Mit unseren interdisziplinären, crossfunktionalen Teams und unserem Fokus auf enger Zusammenarbeit, konstantem Austausch und Transparenz verorteten wir uns bei XITASO auf DevUX-Level 2. Der Schritt zur Symbiose auf Level 3 schien uns von dort aus nur noch ein kleiner zu sein. In der Praxis hat sich dann aber gezeigt, dass sich die Zusammenarbeit für uns noch nicht hundertprozentig symbiotisch anfühlt und Design und Entwicklung immer noch nicht vollkommen die gleiche Sprache sprechen, wodurch wir nach wie vor viel Klärungsbedürfnis hatten. Bei der Suche nach einer Ursache dafür, sind wir auf eine Idee von Brad Frost ² gestoßen, der zufolge das Frontend in zwei Teile zerfällt:

Front of the Frontend

Skillset

HTML, CSS, Design, Interaction, Patterns, Accessibility,
Animation, Semantic Markup …

Back of the Frontend

Skillset

JavaScript, TypeScript, React, Angular, State Management, Functional Programming, Asynchronität, MVC, Build Tools, Architecture …

Dem Front of the Frontend und Back of the Frontend sind jeweils völlig unterschiedliche Skillsets zuzuordnen – zwischen beiden klafft eine scheinbar schwer überbrückbare Kluft. Brad Frost sieht consumable UI components als Brücke zwischen beiden Seiten. So gibt es zum Beispiel Libraries wie Material-UI für React, welche Front of the Frontend Belange in consumable UI components verpacken, die im Back of the Frontend einfach verwendet werden können.

Wie hilft uns diese Erkenntnis auf dem Weg zu Level 3 DevUX? Wir haben uns die Sketch Library für Material-UI gekauft, auf deren Basis die Designer*innen nun arbeiten. So sind Komponenten und Wording nun fast identisch zu den Komponenten und dem Wording im Code, wodurch wir einer gemeinsamen Sprache zwischen Design und Entwicklung schon ein ganzes Stück näher gekommen sind. Plötzlich hatten wir im Backlog Refinement deutlich weniger Rückfragen, da das verwendete Vokabular für beide Seiten verständlich war. Bei gemeinsamen Design- bzw. Entwicklungsaktivitäten von Designer*innen und Entwickler*innen wurde es auch spürbar einfacher, sich auszutauschen und zu einem gemeinsamen Verständnis zu kommen.

Natürlich nutzen wir nicht in jedem Projekt Material-UI und haben auch nicht immer eine dazu passende Sketch Library zur Verfügung. Aber gerade dort, wo wir andere Libraries nutzen oder unsere eigene Library selbst erstellen, macht es für Entwickler*innen und Designer*innen Sinn, die Perspektive der jeweils anderen Disziplin zu berücksichtigen und eine gemeinsame Sprache zu finden.

Auf unserem Weg zur DevUX Symbiose haben wir gelernt, wie sehr es hilft, mehr Einblick in die Arbeitsweise des jeweils anderen Gewerks zu bekommen und wie wir uns so gemeinsam Konzepte und Vokabeln schaffen konnten, die Unklarheiten und Missverständnisse aus dem Weg räumen. Symbiotische Arbeit ist somit nicht nur schneller, sondern macht auch deutlich mehr Spaß!

Sind UI/UX-Designerinnen dann auch Entwicklerinnen – und umgekehrt?

Wenn wir im Sinne des DevUX nun also versuchen, eine gemeinsame Sprache zu schaffen und die Perspektive und Arbeitsweise des jeweils anderen zu verstehen, verschwimmen dann die Grenzen? Sind die Designer*innen dann auch Entwickler*innen und dafür verantwortlich, das Front of the Frontend abzubilden? Und sind die Entwickler*innen dann ebenso für die Gestaltung zuständig? Brauchen wir also quasi “Hybride”, die beides gleichermaßen können?

Aus unserer Sicht ist das aufgrund der sehr verschiedenen Skillsets kaum möglich und auch nicht nötig. Stattdessen setzen wir bei XITASO auf Expert*innen aus den jeweiligen Disziplinen, die gemeinsam mit den anderen Rollen unsere interdisziplinären Teams bilden. Denn für unser Verständnis von Software Engineering braucht es all diese Kompetenzen gleichermaßen. Wichtig ist dabei vor allem, dass jeder im Team Offenheit für die anderen Perspektiven und Arbeitsweisen mitbringt sowie die Bereitschaft, voneinander zu lernen und ein gemeinsames Verständnis zu schaffen. Das ist nach unserem Verständnis nicht nur die Grundlage des DevUX Konzepts, sondern auch zentraler Bestandteil unserer Werte, verankert im XITASO Code.

Software-Engineering bei XITASO: Interdisziplinär vernetzte Kernkompetenzen

Unser Fazit

Design und Entwicklung sind und bleiben zwei unterschiedliche Disziplinen innerhalb des Software Engineerings, die zuweilen sehr verschiedene Perspektiven einnehmen – und das ist aus unserer Sicht auch gut so, denn durch Multisubjektivität entstehen die besten Ideen und Resultate. Um die dazu notwendige bestmögliche Zusammenarbeit zu ermöglichen, braucht es vor allem Offenheit gegenüber dem jeweils anderen Gewerk und den Willen, voneinander zu lernen und sich ein gemeinsames Verständnis zu schaffen. Interdisziplinäre Teams sind eine gute Grundlage, aber wir sollten nicht einfach nur nebeneinander sitzen, sondern uns auch gegenseitig zeigen, wie wir denken und arbeiten. Nur so können wir eine gemeinsame Sprache mit geteilten Konzepten und Vokabeln etablieren, von der letztlich alle Seiten profitieren.