{"id":836,"date":"2017-10-10T08:15:50","date_gmt":"2017-10-10T06:15:50","guid":{"rendered":"http:\/\/blog.zeit.de\/dev\/?p=836"},"modified":"2017-10-10T11:49:56","modified_gmt":"2017-10-10T09:49:56","slug":"design-thinking","status":"publish","type":"post","link":"https:\/\/blog.zeit.de\/dev\/design-thinking\/","title":{"rendered":"Wie man ein Moderationswerkzeug \u00fcberarbeitet"},"content":{"rendered":"

\"Design<\/span><\/p>\n

Sie sind komplex, ver\u00e4stelt, m\u00fchsam und aufgeladen, anregend und intelligent \u2013 die Debatten, die unsere Leserinnen und Leser im Kommentarbereich von ZEIT ONLINE f\u00fchren, bereichern die Diskussionskultur unserer Seite enorm \u2013 und fordern t\u00e4glich bis zu acht Moderatorinnen und Moderatoren heraus. Von ihnen wird erwartet, in Sekundenschnelle zu entscheiden, ab wann Ironie verletzend wird, wann eine emotionale \u00c4u\u00dferung zur unsachlichen Beleidigung wird und wie scharf der Ton in Threads werden kann, ohne dass die Diskussion kippt \u2013 und das in allen Themengebieten. Unabdingbar f\u00fcr diese Arbeit ist ein Moderationstool, das die Arbeit handhabbar macht. Zumal die Zahl der Kommentare stetig w\u00e4chst.<\/p>\n

Anfang des Jahres haben wir uns entschieden, die Administrationsoberfl\u00e4che f\u00fcr die Moderation zu erneuern, damit sie schneller, genauer und gleichzeitig entspannter arbeiten k\u00f6nnen. Begonnen haben wir mit der Frage: Was wollen die Moderatoren? Mit einem Ideen-Workshop, der sich der Design-Thinking-Methoden bedient, n\u00e4herten wir uns dem Thema.<\/span><\/p>\n

Impact-Effort-Matrix<\/strong><\/p>\n

Zun\u00e4chst haben wir die Abl\u00e4ufe der Moderation an einer Wand mit Post-its wie in einem Flowchart visualisiert. Was sind die einzelnen Arbeitsschritte der Moderation, welche Aktionen f\u00fchren dazu, einen Kommentar zu sichten, ihn in seinem Kontext zu verstehen, ihn zu bearbeiten oder gar zu l\u00f6schen? \u00a0Mehrere Pain-Points konnten so identifiziert werden \u2013 Stellen, an denen die Arbeitsabl\u00e4ufe nicht reibungslos funktionieren oder unn\u00f6tig kompliziert sind. In kleinen Gruppen suchten wir Ideen und L\u00f6sungen f\u00fcr diese schmerzenden Punkte. Die L\u00f6sungsideen ordneten wir in eine Impact-Effort-Matrix ein. Die Impact-Effort-Matrix ist eine 2×2-Matrix. Auf einer Achse gibt man den Grad der Auswirkungen an, auf der zweiten den Aufwand. Dadurch ergeben sich vier Quadranten: 1. Wenig Auswirkung, wenig Aufwand. 2. Wenig Auswirkung, viel Aufwand. 3. Gro\u00dfe Auswirkung, wenig Aufwand. 4. Gro\u00dfe Auswirkung, viel Aufwand. Am Ende erh\u00e4lt man eine erste Idee, welche Ideen und Funktionen man umsetzen sollte und welche eher nicht. Leider lagen fast alle Ideen und Funktionen im 4. Quadranten, im Bereich gro\u00dfe Auswirkung, viel Aufwand. An dieser Stelle war klar: Wir k\u00f6nnen unser bestehendes System nicht durch ein paar einfache Ma\u00dfnahmen so verbessern, dass wir unseren Moderatoren ein deutlich besseres Nutzungserlebnis bieten k\u00f6nnen. Wir brauchen ein neues System. <\/span><\/p>\n

\"Workshop\"<\/p>\n

Jobs-to-be-done<\/strong><\/p>\n

Ein zweites Konzept, welches wir regelm\u00e4\u00dfig in der Entwicklungsredaktion anwenden, ist das Jobs-to-be-done-Framework. Die Idee dahinter: Ein Nutzer hat eine Aufgabe zu erledigen und als Produktentwickler m\u00fcssen wir ihm diese Aufgabe m\u00f6glichst einfach machen. Deshalb haben wir die einzelnen Jobs der Moderatoren definiert. Zum Beispiel: einen Kommentar sichten, einen Kommentar l\u00f6schen, einen Kommentar bearbeiten, einen Nutzer sperren. Diese Jobs haben wir gewichtet und in eine Reihenfolge gebracht. <\/span><\/p>\n

Mit der priorisierten Liste der Funktionen und der Moderatoren-Jobs haben wir in einem zweiten Workshop auf Papier die Informationsarchitektur gestaltet. Anforderung hier: die wichtigsten Informationen f\u00fcr den wichtigsten Job zuerst. Die Hypothese: Dadurch kann der Moderator die Informationen schneller erfassen. Die zweite Hypothese: Unn\u00f6tig lange Klickwege und neues Laden einzelner Seiten rauben einen Gro\u00dfteil der Moderationszeit. Also sollten alle n\u00f6tigen Informationen in einer Timeline verf\u00fcgbar sein. Dabei sollte der Job, der die meiste Zeit verbraucht, am schnellsten zu erledigen sein. Nachdem wir verschiedene Ans\u00e4tze gezeichnet hatten, haben wir erneut mit unseren Moderatoren gesprochen, um unsere Ideen mit der Arbeitsalltagsexpertise abzugleichen und uns f\u00fcr die Variante des Tools zu entscheiden, die Erfolg versprechend ist. \u00a0<\/span><\/p>\n

Nun begann die Designarbeit. Ausgangspunkt hier: Bootstrap. Gerade f\u00fcr Administrationsoberfl\u00e4chen enth\u00e4lt Bootstrap vielfach bew\u00e4hrte UX- und UI-Patterns. Trotzdem blieb die gr\u00f6\u00dfte Herausforderung, wie wir so viele Informationen so geschickt unterbringen, dass die Nutzer alle wichtigen Informationen m\u00f6glichst schnell erfassen k\u00f6nnen. Nach zwei Design-Iterationen, an deren Ende wir stets mit den Moderatoren \u00fcber die neue Oberfl\u00e4che gesprochen hatten, haben wir uns f\u00fcr einen High-Fidelity-Prototypen entschieden. Warum? Nur so konnten wir die beiden wichtigsten Hypothesen \u00fcberpr\u00fcfen: Neustrukturierung der Informationsarchitektur und Moderation in einer Timeline haben einen starken Effekt auf die Moderationsgeschwindigkeit. <\/span>
\n<\/span><\/p>\n

Prototyp<\/strong><\/p>\n

Den High-Fidelity-Prototypen haben wir in der Entwicklungsredaktion in React mit Mock-Daten umgesetzt. Daf\u00fcr mussten wir uns intensiv mit dem Konzept auseinandersetzen und es bis in das kleinste Detail verstehen lernen. Statische Screens \u00fcberlassen Dinge der Vorstellung: Wie f\u00fchlt es sich an, von dieser Ansicht in die n\u00e4chste zu wechseln? Auf welche Art und Weise verschwindet ein Kommentar beim Klick auf den Button? Wir mussten Antworten auf diese Fragen finden und konnten sie nicht auf sp\u00e4ter verschieben. L\u00f6sungsans\u00e4tze konnten sofort von uns entwickelt und mit den Moderatoren in UX-Tests \u00fcberpr\u00fcft werden. <\/span>
\n<\/span><\/p>\n

Au\u00dferdem konnten wir durch den Bau des Prototypen ein besseres Verst\u00e4ndnis f\u00fcr die Herausforderungen der Programmierer entwickeln. So haben wir beispielsweise eine vorl\u00e4ufige Datenstruktur entwickelt, um unsere komponentenbasierte React-Applikation mit Dummy-Daten zu versorgen.<\/span><\/p>\n

Nachdem wir alle Hypothesen \u00fcberpr\u00fcft hatten, haben wir ein kleines Team aus zwei Frontend- und zwei Backend-Entwicklern zusammengestellt. Um eine zuverl\u00e4ssige Kommunikation mit React zu erm\u00f6glichen, haben wir uns f\u00fcr das Schreiben einer Middleware entschieden, die zwischen unserem Community-Backend und React sitzt und die asynchrone \u00dcbermittlung von Daten sowie einen Parallelbetrieb des alten und des neuen Systems erm\u00f6glicht. W\u00e4hrend das Team im zweiw\u00f6chigen Sprint-Rhythmus funktionierende Alpha-Software deployen konnte, haben wir weiter regelm\u00e4\u00dfig UX-Tests durchgef\u00fchrt und konnten so sicherstellen, dass wir weiter auf dem richtigen Weg sind. Au\u00dferdem hatten wir so eine regelm\u00e4\u00dfige Abdeckung mit End-to-End-Tests. <\/span><\/p>\n

Nach Erreichen des Minimal Viable Products sind wir in einen Parallelbetrieb eingestiegen. T\u00e4glich hat eine Moderatorin oder ein Moderator mehrere Stunden mit dem Tool gearbeitet. St\u00fcck f\u00fcr St\u00fcck haben wir so das gesamte Moderationsteam auf die neue Software geschult. <\/span>
\n<\/span><\/p>\n

Von Milan Bargiel, Michael Schulthei\u00df und Julia Meyer<\/span><\/em><\/p>\n

Lesen Sie bei Digitale Leute<\/a> mehr zum Thema Ideation bei ZEIT ONLINE und was eine Entwicklungsredaktion eigentlich ausmacht.<\/p>\n","protected":false},"excerpt":{"rendered":"

Sie sind komplex, ver\u00e4stelt, m\u00fchsam und aufgeladen, anregend und intelligent \u2013 die Debatten, die unsere Leserinnen und Leser im Kommentarbereich von ZEIT ONLINE f\u00fchren, bereichern die Diskussionskultur unserer Seite enorm \u2013 und fordern t\u00e4glich bis zu acht Moderatorinnen und Moderatoren heraus. Von ihnen wird erwartet, in Sekundenschnelle zu entscheiden, ab wann Ironie verletzend wird, wann […]<\/p>\n","protected":false},"author":377,"featured_media":841,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"yoast_head":"\nWie man ein Moderationswerkzeug \u00fcberarbeitet - Dev-Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.zeit.de\/dev\/design-thinking\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man ein Moderationswerkzeug \u00fcberarbeitet - Dev-Blog\" \/>\n<meta property=\"og:description\" content=\"Sie sind komplex, ver\u00e4stelt, m\u00fchsam und aufgeladen, anregend und intelligent \u2013 die Debatten, die unsere Leserinnen und Leser im Kommentarbereich von ZEIT ONLINE f\u00fchren, bereichern die Diskussionskultur unserer Seite enorm \u2013 und fordern t\u00e4glich bis zu acht Moderatorinnen und Moderatoren heraus. Von ihnen wird erwartet, in Sekundenschnelle zu entscheiden, ab wann Ironie verletzend wird, wann […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.zeit.de\/dev\/design-thinking\/\" \/>\n<meta property=\"og:site_name\" content=\"Dev-Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-10T06:15:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-10T09:49:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.zeit.de\/dev\/files\/2017\/09\/posits.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"660\" \/>\n\t<meta property=\"og:image:height\" content=\"471\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Schultheiss\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschrieben von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Schultheiss\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/design-thinking\/\",\"url\":\"https:\/\/blog.zeit.de\/dev\/design-thinking\/\",\"name\":\"Wie man ein Moderationswerkzeug \u00fcberarbeitet - Dev-Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/#website\"},\"datePublished\":\"2017-10-10T06:15:50+00:00\",\"dateModified\":\"2017-10-10T09:49:56+00:00\",\"author\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/1d7c39d7c39f9c59e173e89f223167a3\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/design-thinking\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.zeit.de\/dev\/design-thinking\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/design-thinking\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/blog.zeit.de\/dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wie man ein Moderationswerkzeug \u00fcberarbeitet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#website\",\"url\":\"https:\/\/blog.zeit.de\/dev\/\",\"name\":\"Dev-Blog\",\"description\":\"Entwicklungsblog von ZEIT ONLINE\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.zeit.de\/dev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/1d7c39d7c39f9c59e173e89f223167a3\",\"name\":\"Michael Schultheiss\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/afac37d6e6ecdffcd62bfa51d4bc5b4b7776e55b643c07ec38489ee11d8afc96?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/afac37d6e6ecdffcd62bfa51d4bc5b4b7776e55b643c07ec38489ee11d8afc96?s=96&d=mm&r=g\",\"caption\":\"Michael Schultheiss\"},\"description\":\"war bis 2017 Leiter der Entwicklungsredaktion von ZEIT ONLINE.\",\"url\":\"https:\/\/blog.zeit.de\/dev\/author\/mschultheiss\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie man ein Moderationswerkzeug \u00fcberarbeitet - Dev-Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.zeit.de\/dev\/design-thinking\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man ein Moderationswerkzeug \u00fcberarbeitet - Dev-Blog","og_description":"Sie sind komplex, ver\u00e4stelt, m\u00fchsam und aufgeladen, anregend und intelligent \u2013 die Debatten, die unsere Leserinnen und Leser im Kommentarbereich von ZEIT ONLINE f\u00fchren, bereichern die Diskussionskultur unserer Seite enorm \u2013 und fordern t\u00e4glich bis zu acht Moderatorinnen und Moderatoren heraus. Von ihnen wird erwartet, in Sekundenschnelle zu entscheiden, ab wann Ironie verletzend wird, wann […]","og_url":"https:\/\/blog.zeit.de\/dev\/design-thinking\/","og_site_name":"Dev-Blog","article_published_time":"2017-10-10T06:15:50+00:00","article_modified_time":"2017-10-10T09:49:56+00:00","og_image":[{"width":660,"height":471,"url":"https:\/\/blog.zeit.de\/dev\/files\/2017\/09\/posits.jpg","type":"image\/jpeg"}],"author":"Michael Schultheiss","twitter_card":"summary_large_image","twitter_misc":{"Geschrieben von":"Michael Schultheiss","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.zeit.de\/dev\/design-thinking\/","url":"https:\/\/blog.zeit.de\/dev\/design-thinking\/","name":"Wie man ein Moderationswerkzeug \u00fcberarbeitet - Dev-Blog","isPartOf":{"@id":"https:\/\/blog.zeit.de\/dev\/#website"},"datePublished":"2017-10-10T06:15:50+00:00","dateModified":"2017-10-10T09:49:56+00:00","author":{"@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/1d7c39d7c39f9c59e173e89f223167a3"},"breadcrumb":{"@id":"https:\/\/blog.zeit.de\/dev\/design-thinking\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.zeit.de\/dev\/design-thinking\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.zeit.de\/dev\/design-thinking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/blog.zeit.de\/dev\/"},{"@type":"ListItem","position":2,"name":"Wie man ein Moderationswerkzeug \u00fcberarbeitet"}]},{"@type":"WebSite","@id":"https:\/\/blog.zeit.de\/dev\/#website","url":"https:\/\/blog.zeit.de\/dev\/","name":"Dev-Blog","description":"Entwicklungsblog von ZEIT ONLINE","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.zeit.de\/dev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/1d7c39d7c39f9c59e173e89f223167a3","name":"Michael Schultheiss","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/afac37d6e6ecdffcd62bfa51d4bc5b4b7776e55b643c07ec38489ee11d8afc96?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afac37d6e6ecdffcd62bfa51d4bc5b4b7776e55b643c07ec38489ee11d8afc96?s=96&d=mm&r=g","caption":"Michael Schultheiss"},"description":"war bis 2017 Leiter der Entwicklungsredaktion von ZEIT ONLINE.","url":"https:\/\/blog.zeit.de\/dev\/author\/mschultheiss\/"}]}},"jetpack_featured_media_url":"https:\/\/blog.zeit.de\/dev\/files\/2017\/09\/posits.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/users\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/comments?post=836"}],"version-history":[{"count":16,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/836\/revisions"}],"predecessor-version":[{"id":859,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/836\/revisions\/859"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/media\/841"}],"wp:attachment":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/media?parent=836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/categories?post=836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/tags?post=836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}