{"id":5505,"date":"2015-02-25T10:00:02","date_gmt":"2015-02-25T08:00:02","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/?p=5505"},"modified":"2020-02-13T16:28:14","modified_gmt":"2020-02-13T15:28:14","slug":"auch-entwickler-sind-ux-designer","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/auch-entwickler-sind-ux-designer\/","title":{"rendered":"Sie sind Entwickler? Dann sind Sie UX Designer."},"content":{"rendered":"<p>Der Begriff UX Design wird heutzutage oft verwendet. In den meisten F\u00e4llen verbirgt sich dahinter aber entweder ein <a title=\"Synonym f\u00fcr Interaction Designer\" href=\"http:\/\/www.fastcodesign.com\/3032719\/ui-ux-who-does-what-a-designers-guide-to-the-tech-industry\" target=\"_blank\" rel=\"noopener noreferrer\">Synonym f\u00fcr Interaction Designer<\/a>, Usability Professional oder einer \u00e4hnliche Branchenbezeichnung, oder ein <a title=\"Konglomerat aus all diesen Disziplinen\" href=\"https:\/\/www.youtube.com\/watch?v=Ovj4hFxko7c\" target=\"_blank\" rel=\"noopener noreferrer\">Konglomerat aus all diesen Disziplinen<\/a>. Richtigerweise wird darauf hingewiesen, dass UX Design nicht mehr nur eine Phase eines Projektes ist, sondern <a title=\"projektbegleitend \u00fcber das gesamte Projekt\" href=\"http:\/\/www.usertesting.com\/blog\/2014\/11\/10\/dont-hire-ui-ux-designer\/\" target=\"_blank\" rel=\"noopener noreferrer\">projektbegleitend \u00fcber das gesamte Projekt<\/a>\u00a0stattfinden sollte. F\u00fcr mich sind die Grenzen dieses Begriffs aber noch zu eng gesteckt. Alle, die an der Entstehung des Produkts beteiligt sind, haben erheblichen Einfluss auf die resultierende UX. Usability Engineers, Interaction Designer, visuelle Designer, Design Engineers, Project Owner und Entwickler.<\/p>\n<p><!--more--><\/p>\n<p>Ja, auch Entwickler sind UX Designer<a href=\"#_ftn1\" name=\"_ftnref1\">[1]<\/a>. Denn schlie\u00dflich haben sie auch einige Designentscheidungen zu treffen: Welche Architektur wird zugrunde gelegt? Kann die Hardware optimal ausgenutzt werden? K\u00f6nnen die Konzepte mit der Zielhardware performant umgesetzt werden oder m\u00fcssen Abstriche gemacht werden? K\u00f6nnen die Konzepte mit absehbarem Aufwand umgesetzt werden oder m\u00fcssen auch hier Abstriche gemacht werden?<\/p>\n<p>Entwickler haben einen erheblichen Anteil an der resultierenden UX. F\u00fcr mich als Interaktionsdesigner bedeutet das, die Schnittstelle zu den Entwicklern zu pflegen und sie bereits in der Konzeptionsphase st\u00e4rker mit in die Kommunikation einzubinden.<\/p>\n<h3>Beispiel aus der Praxis: Multitouch-Gesten<\/h3>\n<p>Vor einiger Zeit haben wir in einem Projekt das Konzept f\u00fcr die Gestensteuerung eines Multitouch-Displays von Grund auf neu gestaltet, denn so etwas gibt es nicht vorgefertigt im Verkaufsregal. Nach der Grobkonzeption und der Analyse von bestehenden Ans\u00e4tzen \u2013 denn wer m\u00f6chte Multitouch-Gesten im Zeitalter von iPhone und iPad neu erfinden? \u2013 wurde die Feinkonzeption angegangen. Ein wichtiges Detail f\u00fcr dieses Konzept ist, dass die n\u00e4chste Disziplin, die nach der Konzeptphase an der Reihe ist, nicht wie \u00fcblich eine Design-Disziplin, sondern direkt die Entwicklung ist. D.h. die Zusammenarbeit findet hier haupts\u00e4chlich zwischen dem Interaktionsdesign und der Entwicklung statt.<\/p>\n<h4>Kooperation zwischen Design und Entwicklung<\/h4>\n<p>Und genau an dieser Stelle scheint ein wunder Punkt zu sein, was meine Erfahrung aus j\u00fcngster Vergangenheit zeigt: Auf UX-Konferenzen trifft man immer mehr reine Entwickler, die versuchen, sich f\u00fcr das Thema zu sensibilisieren, weil sie selber merken, dass an der Stelle zwischen den Design-Disziplinen und der Entwicklung \u00fcblicherweise ein Bruch entsteht.<\/p>\n<p>Alle reden immer von der Integration von UX-\/Design-Prozessen in den Entwicklungsprozess, es scheint mir aber so, als praktiziere es kaum jemand wirklich. Aber was bedeutet diese Integration eigentlich? F\u00fcr mich bedeutet es Zusammenarbeit und nicht \u201eNebeneinanderarbeit\u201c. Nicht Kommunikation zwischen den Teams, sondern Kommunikation <em>im<\/em> Team.\u00a0Denn wir sind ein Team. \u00c4hnlich einer Fu\u00dfballmannschaft mit verschiedenen Positionen.<\/p>\n<div id=\"attachment_5544\" style=\"width: 680px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/FootballTeam-FromUEToDev-Web.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5544\" class=\"wp-image-5544 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/FootballTeam-FromUEToDev-Web.png\" alt=\"Ein Projektteam kann mit einer Fu\u00dfballmannschaft verglichen werden: Verschiedene Aufgaben auf verschiedenen Positionen.\" width=\"670\" height=\"369\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/FootballTeam-FromUEToDev-Web.png 670w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/FootballTeam-FromUEToDev-Web-300x165.png 300w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/a><p id=\"caption-attachment-5544\" class=\"wp-caption-text\">Eine Fu\u00dfballmannschaft aus UX Designern: Usability Engineers als Aufbau, Interaction Designer als \u00dcberbr\u00fcckung des Mittelfeldes und Entwickler als St\u00fcrmer.<\/p><\/div>\n<p>Das Team muss zusammen funktionieren, zusammen kommunizieren und eine Sprache sprechen. Damit das funktioniert muss man aufeinander zugehen. Und um den Entwicklern entgegenzukommen: Was lieben diese\u00a0mehr als 2er-Potenzen und Zahlenreihen, die bei 0 und nicht bei 1 anfangen? Richtig: Statecharts.<\/p>\n<h4>Entwickler lieben Statecharts<\/h4>\n<p>Ich habe Statecharts kennengelernt als (unn\u00f6tige) Form zu beschreiben, ob aus einem Getr\u00e4nkeautomaten Cola oder Wasser herauskommt wenn man ein paar M\u00fcnzen hineinschmei\u00dft.<\/p>\n<p><span style=\"line-height: 1.5;\">Alle Zust\u00e4nde, von \u201eidle\u201c (Automat bereit) \u00fcber \u201ecounting coins\u201c (M\u00fcnzen z\u00e4hlen) bis zu \u201egive change\u201c (Wechselgeld ausgeben), werden aufgef\u00fchrt und systematisch mit ihren Folgezust\u00e4nden verbunden.<\/span><\/p>\n<div id=\"attachment_5515\" style=\"width: 680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5515\" class=\"wp-image-5515 size-full\" style=\"line-height: 1.5;\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Statechart-Web.png\" alt=\"Ein Mittel, um die Kommunikation zwischen Entwicklern und Interaction Designern zu verbessern: Statecharts\" width=\"670\" height=\"391\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Statechart-Web.png 670w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Statechart-Web-300x175.png 300w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><p id=\"caption-attachment-5515\" class=\"wp-caption-text\">Statecharts stellen eine gute M\u00f6glichkeit dar, Prozesse abzubilden. Ob man das f\u00fcr Getr\u00e4nke-Automaten tun muss, darf jeder gerne selbst entscheiden.<\/p><\/div>\n<p>W\u00e4hrend meiner Arbeit als Interaktionsdesigner habe ich Statecharts allerdings als Mittel der Gestaltung und Beschreibung von Konzepten kennen und sch\u00e4tzen gelernt. Bei der Erarbeitung eines Konzeptes ist es nie einfach, es vollst\u00e4ndig und genau zu erfassen. Und sp\u00e4testens bei der Umsetzung fallen Unvollst\u00e4ndigkeiten oder Ungenauigkeiten auf. Statecharts helfen hierbei, indem bei ihrer Erstellung strukturiert vorgegangen wird. Dadurch f\u00e4llt es leichter sich alle Interaktionsm\u00f6glichkeiten und \u2013reihenfolgen zu \u00fcberlegen, da man diese systematisch erarbeiten kann. Im Endeffekt sind dann auch die Entwickler gl\u00fccklich, da die Konzeptbeschreibung einerseits weniger l\u00fcckenhaft ist und sie andererseits ihr Statechart haben.<\/p>\n<p>Im Fall der Multitouch-Gesten hat sich das Statechart als hervorragendes Mittel dieses Konzept zu beschreiben herausgestellt. Dadurch hatten wir eine gute Kommunikations- und Entwicklungsgrundlage, wodurch der Grundgedanke gut erkl\u00e4rt und gemeinsam mit den Entwicklern weiter verbessert werden konnte. Die urspr\u00fcngliche Konzeptidee ging also ein paar mal im Team hin und her, bis eine Version herauskam, mit der alle zufrieden waren.<\/p>\n<h4>Das beste Tool f\u00fcr die Einbindung von UX in den Entwicklungsprozess: Kommunikation<\/h4>\n<p>Ein weiterer wichtiger Punkt bei einer gemeinsamen Arbeit und Sprache ist ein \u00fcbergreifendes Tool, damit man an gemeinsamen Dokumenten arbeiten kann. Und so haben wir uns im Fall des Statecharts der Multitouch-Gesten f\u00fcr das bei mir unbeliebte Tool <a title=\"Microsoft Visio\" href=\"http:\/\/office.microsoft.com\/de-de\/visio-professional-2013-professionelle-diagrammsoftware-FX103472299.aspx\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Visio<\/a> entschieden. Nicht sch\u00f6n. Aber f\u00f6rderlich f\u00fcr die Zusammenarbeit. Und so entwickelte sich unser Visio-Statechart zu einem \u201esch\u00f6nen\u201c und \u00fcbersichtlichen Diagramm (das \u201esch\u00f6n\u201c war allerdings nur bedingt m\u00f6glich, da Visio sich als \u201eHard to Master\u201c herausstellte und man sich einige Workarounds einfallen lassen musste, damit die Verbindungslinien zwischen den einzelnen Zust\u00e4nden nicht totales Chaos ausl\u00f6sen).<\/p>\n<p>Alle Dinge konnten wir aber auch nicht mit Visio oder in Form von Statecharts gestalten. Wenn es ans Mikro-Mikro-Interaktionsdesign geht, m\u00fcssen Dinge auch einfach ausprobiert werden. Kein wissenschaftlicher aber pragmatischer Ansatz. Die einzelnen Parameter f\u00fcr die Gestensteuerung (Bewegungs-Thresholds<a href=\"#_ftn2\" name=\"_ftnref2\">[2]<\/a>, Hold-Timer<a href=\"#_ftn3\" name=\"_ftnref3\">[3]<\/a>, usw.) im Vorhinein festzulegen ist aber kaum m\u00f6glich, denn hier spielt auch die Zielhardware eine entscheidende Rolle. Um solche Dinge im Team abzustimmen hilft meist kein Tool. Der beste Weg ist hier \u2013 ganz klassisch \u2013 sich zusammenzusetzen. Also trafen wir uns zu einem Workshop. Dabei konnten wir dann Konzeptdetails und deren technische Umsetzung besprechen: Was geht? Was geht nicht? Wie wird\u2019s gemacht? Und was brauchen wir noch?<\/p>\n<h4>Testen\u00a0f\u00fcr den Feinschliff<\/h4>\n<p>Im Fall der Parameter der Gestensteuerung einigten wir uns darauf, dass sie in einer Testanwendung zug\u00e4nglich und einstellbar gemacht werden, sodass wir sie in einem weiteren Schritt auf verschiedener Hardware testen und einstellen konnten.<\/p>\n<p>Auf dieser Grundlage konnten die Entwickler dann die Architektur der Umsetzung der Gestensteuerung festlegen. Das erwies sich als nicht einfach, denn Microsoft hatte nicht nur bei Visio herausfordernde Aufgaben eingebaut. Auch <a title=\"Windows Presentation Foundation\" href=\"http:\/\/msdn.microsoft.com\/de-de\/library\/ms754130(v=vs.110).aspx\" target=\"_blank\" rel=\"noopener noreferrer\">Windows Presentation Foundation<\/a> (WPF) war, was die Verarbeitung von Gesten anging, nicht immer gutm\u00fctig. In dem vorhandenen Rahmen fanden die Entwickler aber eine L\u00f6sung, die es erm\u00f6glichte die angedachten Konzepte zu verwirklichen und auch den Umsetzungsaufwand in einem vertretbaren Rahmen zu halten. Dabei stellte sich auch die Hardware als Flaschenhals heraus. Es wurde viel ausprobiert und getestet (<a title=\"Paint\" href=\"http:\/\/windows.microsoft.com\/de-de\/windows7\/products\/features\/paint\" target=\"_blank\" rel=\"noopener noreferrer\">Paint<\/a> funktioniert \u00fcbrigens super mit Multitouch-Gesten), sodass letztendlich alles aus der aktuellen Generation an Industrie-PCs und Multitouch-Panels herausgeholt werden konnte.<\/p>\n<p>Das Endergebnis kann sich sehen lassen. Zumindest wenn die Hardware mitspielt. Das Team dahinter kann sich aber immerhin sagen: wir haben gemeinsam gute Arbeit geleistet.<\/p>\n<h3>Fazit<\/h3>\n<p>Alle, die an der Entstehung eines Produktes beteiligt sind, haben Einfluss darauf. Und deshalb ist die Zusammenarbeit von allen Beteiligten auch so wichtig. Denn alle sind UX Designer. Eine gemeinsame Sprache innerhalb des Teams ist unerl\u00e4sslich. Und bezogen auf die Schnittstelle zwischen Interaktionsdesign und Entwicklung eignen sich Statecharts hervorragend f\u00fcr die Kommunikation. Wenn man dies alles beherzigt ist man \u00fcbrigens auch nicht weit davon entfernt,\u00a0eine UX Kultur im Unternehmen aufzubauen, was ein lohnendes Thema f\u00fcr Fortgeschrittene ist.<\/p>\n<h3>Fu\u00dfnoten<\/h3>\n<p><a href=\"#_ftnref1\" name=\"_ftn1\">[1]<\/a> Der Begriff \u201eUX Designer\u201c soll eine Referenz zu der heutzutage h\u00e4ufig verwendeten Begriffskomposition aus \u201eUX\u201c und \u201eDesigner\u201c sein, im Wissen, dass man die Wahrnehmungen und Reaktionen einer anderen Person, wie die User Experience in der DIN EN ISO 9241 definiert ist, nicht gestalten kann<\/p>\n<p><a href=\"#_ftnref2\" name=\"_ftn2\">[2]<\/a> Grenzwert, bei dessen Erreichen eine Bewegung erkannt wird<\/p>\n<p><a href=\"#_ftnref3\" name=\"_ftn3\">[3]<\/a> Zeit, ab der ein Gedr\u00fcckthalten erkannt wird<\/p>\n<div class=\"trademark\">Microsoft Visio, Microsoft, Windows Presentation Foundation und Paint sind Marken oder eingetragene Marken der Microsoft Corporation in den USA und\/oder anderen L\u00e4ndern.<br \/>\niPhone und iPad sind\u00a0Marken oder eingetragene Marken der Apple Inc. in den USA und\/oder anderen L\u00e4ndern.<\/div>\n","protected":false},"author":38,"featured_media":0,"template":"","tags":[114,83,139,390],"class_list":["post-5505","blog","type-blog","status-publish","hentry","tag-interaktionsdesign","tag-kommunikation","tag-ux","tag-ux-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/5505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/38"}],"version-history":[{"count":2,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/5505\/revisions"}],"predecessor-version":[{"id":11272,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/5505\/revisions\/11272"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=5505"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=5505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}