{"id":857,"date":"2023-10-12T12:00:21","date_gmt":"2023-10-12T11:00:21","guid":{"rendered":"https:\/\/thomas-sokolowski.de\/?p=857"},"modified":"2024-10-12T19:07:20","modified_gmt":"2024-10-12T18:07:20","slug":"der-ideale-ux-design-prozess","status":"publish","type":"post","link":"https:\/\/thomas-sokolowski.com\/de\/der-ideale-ux-design-prozess\/","title":{"rendered":"Der ideale UX-Design-Prozess"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<\/p>\n<blockquote><p>Die Ver\u00e4nderungen in den Kommunikationstechnologien haben auch zu enormen Ver\u00e4nderungen im Design-Workflow gef\u00fchrt. Vor allem hat sich die Zusammenarbeit zwischen Designern und ihren Kunden ver\u00e4ndert.<\/p><\/blockquote>\n<p>Ging man fr\u00fcher oft eher intuitiv (war man nicht eher K\u00fcnstler als Ingenieur?) und meist inhaltsgetrieben vor (Form follows Content), so hat sich mittlerweile durch moderne Design- und Kommunikationstheorien eine nutzerzentrierte und analytische Herangehensweise etabliert.<\/p>\n<p>Zauberte man fr\u00fcher als Designer bei Pr\u00e4sentationen gerne wie ein Zauberk\u00fcnstler das Kaninchen aus dem Zylinder, so nimmt man heute den Kunden in vielen kleinen Schritten mit auf den Weg zum finalen Endergebnis, das dann f\u00fcr ihn keine \u00dcberraschung mehr darstellt, da es in vielen Workshops und Meetings gemeinsam erarbeitet wurde.<\/p>\n<p>In den letzten zw\u00f6lf Jahren durfte ich in verschiedenen Positionen und Agenturen die unterschiedlichsten Arbeitsabl\u00e4ufe ausprobieren. Und immer wieder wurde ich von Projektleitern, Vorgesetzten und Kunden gefragt, wie denn der ideale Design-Workflow aussehe und was letztendlich das Ergebnis einer visuellen Konzeption sei.<\/p>\n<p>Um es gleich vorweg zu sagen: Es gibt nicht den einen, immer gleichen, perfekten Weg. Jedes Projekt, jedes Budget erfordert einen eigenen, individuell angepassten konzeptionellen Weg.<\/p>\n<p>Auch aus diesem Grund gibt es eine Reihe von etablierten Vorgehensweisen, die, richtig angewandt, sicherlich alle auf die eine oder andere Weise erfolgreich sind.<\/p>\n<p>Sei es die <a href=\"https:\/\/en.wikipedia.org\/wiki\/Design_thinking\" target=\"_blank\" rel=\"noopener\">Design-Thinking-Methodologie<\/a> oder die <a href=\"http:\/\/www.jjg.net\/elements\/pdf\/elements_ch02.pdf\" target=\"_blank\" rel=\"noopener\">5-Phasen-Vorgehenweise<\/a> von Jesse James Garrett aus dem Jahr 2002, das an sich gar keinen Workflow darstellt, sondern eher modellhaft darstellt, woraus eine User Experience eigentlich besteht.<\/p>\n<p>[\/vc_column_text][vc_single_image image=&#8221;861&#8243; img_link_target=&#8221;_blank&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center; margin-top: 12px;\">Die 5 Phasen des <a href=\"http:\/\/Design Thinking\" target=\"_blank\" rel=\"noopener\">Design Thinking<\/a> Prozesses<\/p>\n<p>[\/vc_column_text][vc_separator][vc_row_inner][vc_column_inner width=&#8221;2\/3&#8243;][vc_separator][vc_single_image image=&#8221;860&#8243; img_link_target=&#8221;_blank&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;]<\/p>\n<p>Im Jahr 2002 ver\u00f6ffentlichte Jesse James Garrett mit <em>The Elements of User Experience<\/em> ein Standardwerk dar\u00fcber, wie UX-Design in Unternehmen umgesetzt werden kann. Sein Modell der f\u00fcnf Schichten des User Experience Designs bildet dabei die Grundlage.<\/p>\n<p>[\/vc_column_inner][\/vc_row_inner][vc_column_text]<\/p>\n<p>Auch sehr interessant ist das <a href=\"https:\/\/medium.com\/digital-experience-design\/how-to-apply-a-design-thinking-hcd-ux-or-any-creative-process-from-scratch-b8786efbf812\" target=\"_blank\" rel=\"noopener noreferrer\">Revamped Double Diamond workflow model<\/a> von Dan Nessler,<\/p>\n<p>die mir etwas zu detailliert und kompliziert erschien, aber als Vorlage f\u00fcr eine der beiden folgenden Grafiken diente.<\/p>\n<p>Allen gemeinsam ist, dass man jedes gr\u00f6ssere Projekt in mindestens vier bis sechs Phasen gliedern sollte, in denen man mit unterschiedlichen Methoden zu ganz unterschiedlichen Arbeitsergebnissen kommt und dabei einen nutzerzentrierten Ansatz verfolgt.<\/p>\n<p>Einig ist man sich auch darin, in jeder Phase so tief wie m\u00f6glich zu gehen, d.h. zu 100% auf die zuvor definierten Ziele der jeweiligen Phase zu fokussieren.<\/p>\n<p>So habe ich in den letzten Jahren in grossen und kleinen UX-Projekten meine eigene optimale Vorgehensweise entwickelt, die aus allen genannten Modellen das Beste herausholt.<\/p>\n<p>Dazu habe ich die folgenden zwei Diagramme erstellt, die den Workflow aus jeweils einer anderen Perspektive darstellen:<\/p>\n<p>[\/vc_column_text][vc_single_image image=&#8221;863&#8243; img_link_target=&#8221;_blank&#8221;]<\/p>\n<p>&nbsp;<\/p>\n<p>Mein in diesem Diagramm dargestelltes <strong>\u00abDDIE-Modell\u00bb<\/strong> basiert auf dem Divergenz-Konvergenz-Modell von B\u00e9la H. B\u00e1n\u00e1thy, das 2005 vom British Design Council adaptiert wurde und vielen gel\u00e4ufig sein d\u00fcrfte.<\/p>\n<p>Es betont die Notwendigkeit, Probleme zun\u00e4chst umfassend zu verstehen (divergentes Denken), um dann zu zielgerichteten L\u00f6sungen zu gelangen (konvergentes Denken). Das Prinzip der divergenten und konvergenten Herangehensweise zur Probleml\u00f6sung ist auch das zentrale Element der \u00ab<a href=\"https:\/\/wirtschaftslexikon.gabler.de\/definition\/design-thinking-54120\" target=\"_blank\" rel=\"noopener\">Design Thinking<\/a>\u00bb Methodik.<\/p>\n<p>[vc_separator][vc_column_text]<\/p>\n<h3>Die vier Phasen einer optimalen UX Design-Entwicklung:<\/h3>\n<h2>1. Entdecken (Vorbereitungs- und Planungsphase)<\/h2>\n<p>Eine sorgf\u00e4ltige Vorbereitungs- und Planungsphase ist f\u00fcr jedes Projekt von entscheidender Bedeutung. Dies ist wichtig, da in dieser Phase einige zeit- und kostenempfindliche Elemente in den Boden gerammt werden, die nur schwer zu verschieben sind. Sehr wichtig ist das Briefing.<\/p>\n<blockquote><p>Wenn in dieser Phase nicht die richtigen Fragen gestellt werden, k\u00f6nnen sp\u00e4ter oft keine Antworten gefunden werden.<\/p><\/blockquote>\n<p>In dieser Phase versuche ich, aufbauend auf der Design-Thinking-Methodik, m\u00f6glichst alle Bereiche meines Auftraggebers zu verstehen, also die dahinterstehenden Menschen, die damit verbundenen Technologien und das Gesch\u00e4ftsmodell.<\/p>\n<p>Wie verdient unser Kunde sein Geld und was erwartet er von uns? Was sind die Besonderheiten seines Gesch\u00e4ftsmodells? Wer sind seine Kunden? Mit welchen Problemen hat er zu k\u00e4mpfen und wo liegen seine Chancen?<\/p>\n<p>Um unseren Kunden sp\u00e4ter beraten und ihm L\u00f6sungen f\u00fcr seine Probleme anbieten zu k\u00f6nnen, muss er uns zun\u00e4chst auf sein Niveau heben. Das hei\u00dft, er muss uns in sein Gesch\u00e4ftsmodell einweihen, in seine Erfolge und Misserfolge &#8211; in die Risiken, die ihn vom Scheitern bedrohen k\u00f6nnten. Wir m\u00fcssen die DNA kennen, den Kern des Unternehmens, seine Produkte oder Dienstleistungen &#8211; seine Vision, seine Leidenschaft.<\/p>\n<p>Oft ist es sinnvoll, zu Beginn der Zusammenarbeit eine Vertraulichkeitserkl\u00e4rung zu vereinbaren, damit beide Seiten wissen, dass keine Gesch\u00e4ftsgeheimnisse in falsche H\u00e4nde geraten und eine vertrauensvolle Zusammenarbeit gew\u00e4hrleistet ist.<\/p>\n<p>Nur durch den offenen Austausch aller relevanten Informationen und die Beantwortung aller aufkommenden Fragen kann ein UX Designer seinem Kunden helfen.<\/p>\n<h4>Aufgaben\/Ziele dieser Phase:<\/h4>\n<p>Informationen sammeln\/recherchieren<\/p>\n<h4>Methoden:<\/h4>\n<ul>\n<li>Briefing-Workshop<\/li>\n<li>Studium aller vorliegenden konzeptionell-relevanten Artefakte<br \/>\n(Evaluierung CI\/CD, Lasten-\/Pflichtenheft, &#8230;)<\/li>\n<li>Umfassende Recherchen (Stakeholder-Interviews, Umfeld- und Zielgruppenanalyse)<\/li>\n<li>Problem- und Potenzialanalyse<\/li>\n<\/ul>\n<h4>Ergebnisse:<\/h4>\n<ul>\n<li>Fixierung der konzeptionellen Anforderungen und Rahmenbedingungen<\/li>\n<li>Definition der Aufgaben &amp; Ziele, der zu untersuchenden Fragestellungen und m\u00f6glichen Vorgehensweisen<\/li>\n<li>Zeit- und Budgetplanung (Roadmap)<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_separator][vc_column_text]<\/p>\n<h2>2. Definieren (Konzeptionsphase)<\/h2>\n<p>Ziel dieser Phase ist es, die Aufgaben sowie erste L\u00f6sungsans\u00e4tze \/ Stossrichtungen f\u00fcr die nachgelagerte Kreationsphase zu liefern &#8211; basierend auf dem Wissen \u00fcber die Nutzer, dem Produkt oder der Anwendung und den Rahmenbedingungen.<\/p>\n<p>Daher sind in dieser Phase sowohl Recherchen als auch eine detaillierte Analyse der Nutzerbed\u00fcrfnisse von zentraler Bedeutung.<\/p>\n<p>In einen weiteren Schritt geht es nun darum, die vielen gesammelten Einzelinformationen zu verstehen und zu einem sinnvollen und verst\u00e4ndlichen Leitfaden oder Kommunikationskonzept zusammenzufassen. In der Methodik des Design Thinking wird dies auch als <em>\u00abPoint of View\u00bb<\/em> bezeichnet. Falls dieses Konzept umfassender ist und vor allem langfristig ausgelegt ist, handelt es ich im Prinzip und eine <em>\u00abUX-Strategie\u00bb<\/em>.<\/p>\n<h4>Aufgabe:<\/h4>\n<p>Verstehen<\/p>\n<h4>Methoden:<\/h4>\n<p>Expert-Review, Cognitive Walkthroughs, User Research, Best-Practice-Recherchen, Workshops<\/p>\n<h4>Ergebnisse:<\/h4>\n<p>Point-of-View bzw. UX-Strategie mit detaillierten Aussagen zu Ziel- und Nutzergruppen sowie Nutzerbed\u00fcrfnissen (dies kann \u00fcber Empathy Maps oder Personas und User Journeys erfolgen), zur strategischen Positionierung (Kommunikationsziele, Alleinstellungsmerkmale, Nutzenversprechen, Tonalit\u00e4t) und weiteren wichtigen Parametern (eingesetzte Technologien, Content-Strategie, &#8230;).<\/p>\n<p>[\/vc_column_text][vc_separator][vc_column_text]<\/p>\n<h2>3. Ideenfindung (Kreationsphase)<\/h2>\n<p>In dieser Phase konzentrieren wir uns zun\u00e4chst voll und ganz auf die Generierung von Ideen und L\u00f6sungsvorschl\u00e4gen, die wir in der Folge bewerten, weiterentwickeln, kombinieren oder auch wieder verwerfen.<\/p>\n<p>Gerade zu Beginn dieser Phase ist es wichtig, nicht nur eine einzige \u00abbeste\u00bb L\u00f6sung zu finden, sondern ein m\u00f6glichst breites Spektrum an Ideen zu entwickeln, aus denen man sp\u00e4ter ausw\u00e4hlen kann oder die sich durch Verfeinerung oder Kombination zu etwas v\u00f6llig Neuem entwickeln k\u00f6nnen, auf das man vor Ort nie gekommen w\u00e4re.<\/p>\n<p>Deshalb ist es wichtig, die Ideenfindung von der Ideenbewertung zu trennen. Auf diese Weise k\u00f6nnen Sie Ihrer Phantasie und Kreativit\u00e4t freien Lauf lassen und gleichzeitig Ihren rationalen Verstand (bzw. Ihre <a href=\"https:\/\/maria.erlebach.cc\/rechte-gehirnhaelfte\/\" target=\"_blank\" rel=\"noopener\">linke Gehirnh\u00e4lfte<\/a>) beruhigen, welcher erst zu einem sp\u00e4teren Zeitpunkt wieder zum Einsatz kommt.<\/p>\n<p>W\u00e4hrend der gesamten Kreativit\u00e4tsphase werden die Fragen und Ergebnisse in iterativen Schleifen verfeinert. Am Ende liegt das Rohmaterial f\u00fcr den Bau von Prototypen und den konkreten L\u00f6sungen vor.<\/p>\n<p>&nbsp;<\/p>\n<p>[\/vc_column_text][vc_single_image image=&#8221;1031&#8243; img_link_target=&#8221;_blank&#8221;][vc_column_text]<\/p>\n<p>Abbildung von <em>Bill Buxton, Sketching User Experiences<\/em><\/p>\n<p>Es gibt viele Kreativtechniken, die in dieser Phase sinnvoll eingesetzt werden k\u00f6nnen; sie alle aufzuz\u00e4hlen w\u00fcrde hier den Rahmen sprengen. Eine sehr wichtige Methode ist jedoch die konstruktive oder konkrete Visualisierung, d.h. das Prototyping selbst kann eine Ideenfindungstechnik sein. Wenn man etwas &#8220;produziert&#8221;, kommt man schnell an Punkte, an denen Entscheidungen getroffen werden m\u00fcssen, was wiederum die Entwicklung von Ideen auf dieser Basis f\u00f6rdert. Ein erstes grobes Konzept wird schnell zu einer konkreten L\u00f6sung.<\/p>\n<h4>Aufgaben:<\/h4>\n<p>Entwicklung von Ideen und L\u00f6sungen in den Bereichen&#8230;<\/p>\n<h4><strong>Informationsarchitektur<\/strong><\/h4>\n<p><strong>Methoden:<\/strong> Content-Audit, Workshops, Card-Mapping und Card-Sorting<br \/>\n<strong>Arbeitsergebnisse:<\/strong> Strukturdiagramme, Excel-Tabellen, Sitemaps &#8230;<\/p>\n<h4><strong>Interaction Design<\/strong><\/h4>\n<p><strong>Methoden:<\/strong> Mind Mapping, Wireframing<br \/>\n<strong>Arbeitsergebnisse:<\/strong> Scribbles, Flowcharts, Wireframes<\/p>\n<h4><strong>Visuelle Gestaltung<\/strong><\/h4>\n<p><strong>Methoden:<\/strong> Design in Photoshop, XD, figma und anderen Tools<br \/>\n<strong>Arbeitsergebnisse:<\/strong> Moodboards, Mockups<\/p>\n<p>[\/vc_column_text][vc_separator][vc_column_text]<\/p>\n<h2>4. Feinausarbeitung (Evaluierungs- und Optimierungsphase)<\/h2>\n<p>Die Aufgabe dieser Phase ist die iterative Erstellung von Prototypen zur Beantwortung von Fragen, die Sie iterativ zu Ihrer endg\u00fcltigen L\u00f6sung f\u00fchren.<\/p>\n<p>Zu Beginn dieser Phase ist es ratsam, Low-Fi-Prototypen zu erstellen, die billig und schnell zu bauen sind, aber ein einfaches und n\u00fctzliches Feedback liefern. Als Testpersonen k\u00f6nnen dazu auch erst Mal Kollegen und Freunde herhalten. Je n\u00e4her Sie dem Endergebnis kommen, desto mehr sollten Sie den\/die Prototypen und die Fragen verfeinern. Dann sollten Sie auf jeden Fall auch Testpersonen aus Ihren tats\u00e4chlichen Ziel- und Nutzergruppen einbeziehen!<\/p>\n<p>Ein Prototyp kann alles sein, was mit einem Benutzer interagiert, sei es eine Wand aus Post-it-Zetteln oder ein Klickdummy aus Wireframes. Es h\u00e4ngt ganz von den Fragen ab, die beantwortet werden m\u00fcssen. Wollen Sie die Namen einer Navigation testen oder die Selbsterkl\u00e4rungskraft einer komplexen Benutzerf\u00fchrung?<\/p>\n<blockquote><p>Prototypen helfen bei der Kommunikation. Wenn ein Bild mehr sagt als tausend Worte, dann sagt ein Prototyp mehr als tausend Bilder.<\/p><\/blockquote>\n<p>Besonders wertvoll sind Prototypen in der Kundenkommunikation. H\u00e4ufig sind die Stakeholder auf Unternehmensseite mit der zunehmenden Komplexit\u00e4t der Anforderungen und Fragestellungen \u00fcberfordert oder k\u00f6nnen den komplexen Projektiterationen nicht folgen. Dies kann schwerwiegende Folgen f\u00fcr den Projektverlauf haben, da es den Entscheidungstr\u00e4gern auf Kundenseite dann schwerf\u00e4llt, die notwendigen Entscheidungen richtig und zeitnah zu treffen.<\/p>\n<blockquote><p>Prototypen erm\u00f6glichen ein schnelles und kosteng\u00fcnstiges Scheitern.<\/p><\/blockquote>\n<p>Jeder Fehler, der bereits im Prototyp und nicht erst vor oder nach dem Go-live entdeckt wird, spart Zeit und Nerven.<\/p>\n<h4>Aufgabe:<\/h4>\n<p>Arbeitsergebnisse validieren und optimieren<\/p>\n<h4>Methoden:<\/h4>\n<ul>\n<li>Synthesis of the work results of the creation phase to testable prototypes<\/li>\n<li>Execution and evaluation of user tests<\/li>\n<\/ul>\n<h4>Ergebnisse:<\/h4>\n<p>Antworten, neue Anforderungen oder funktionierende L\u00f6sungen<\/p>\n<p>[vc_separator][\/vc_column_text][vc_separator][vc_single_image image=&#8221;1322&#8243; img_link_target=&#8221;_blank&#8221;][vc_separator][\/vc_column][\/vc_row]<\/p>\n<h3>Meine Adaption des Double Diamond Designprozesses.<\/h3>\n<p>Der diesem Diagramm zugrundeliegende \u00abDouble Diamond\u00bb wurde 2005 vom British Design Council popul\u00e4r gemacht und basiert auf dem 1996 vom ungarisch-amerikanischen Linguisten B\u00e9la H. B\u00e1n\u00e1thy vorgeschlagenen <strong>Divergenz-Konvergenz-Modell<\/strong>.<\/p>\n<p>Die beiden Diamanten stellen einen vierstufigen Prozess dar, bei dem eine komplexe Aufgabe oder ein zu l\u00f6sendes Problem abwechselnd divergent und dann konvergent angegangen wird.<\/p>\n<p>In der Mitte, wo sich beide Diamanten nahezu ber\u00fchren bzw. \u00fcberlappen, befindet sich ein entscheidender Moment im Prozess: der \u00dcbergang von der konzeptionell-analytischen Herangehensweise hin zur kreativen Ideenfindung. An diesem Punkt sollte das Problem und die Ziele klar definiert\u00a0 und der Weg f\u00fcr zielgerichtete kreative L\u00f6sungen geebnet sein.<\/p>\n<div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Wie sieht der optimale Workflow f\u00fcr die Entwicklung einer komplexen User Experience aus? Eine aktualisierte Version des bekannten Double Diamond Design Prozesses.<\/p>\n","protected":false},"author":1,"featured_media":900,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[75,77],"class_list":["post-857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design","tag-design-thinking","tag-double-diamond"],"_links":{"self":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/comments?post=857"}],"version-history":[{"count":28,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts\/857\/revisions"}],"predecessor-version":[{"id":1569,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts\/857\/revisions\/1569"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/media\/900"}],"wp:attachment":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/media?parent=857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/categories?post=857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/tags?post=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}