Designer gegen Entwickler - Accurat @ Visualized Milan

Am 11. März hatten wir die Gelegenheit, einen Vortrag über ein Thema zu halten, das uns sehr am Herzen liegt, die schwierige - aber manchmal auch liebevolle - Beziehung zwischen Designern und Entwicklern bei Datenvisualisierungsprojekten.
Es ist etwas, von dem wir denken, dass es einer Verbesserung bedarf, und die beiden müssen nicht voneinander isoliert werden, sondern wir denken, dass es am besten funktioniert, wenn beide kontinuierlich zusammenarbeiten.
Diese Rede wurde von Marco Bernardi, cesare soldini und Tommaso Zennaro (mir) mit Hilfe von Giorgia Lupi verfasst und gehalten.
Was Sie gerade lesen werden, ist eine Anpassung unserer Rede zu diesem Thema.

Zu Beginn von Accurat haben wir hauptsächlich Projekte wie die Visualisierung statischer Daten für den Druck entworfen. Wir sind sicher, dass viele von Ihnen mit den Infografiken vertraut sind, die wir für die Veröffentlichung La Lettura erstellt haben, die die sonntägliche kulturelle Beilage von Corriere della Sera ist.

→ Accurat für La Lettura, Auswahl von Datenvisualisierungen, Album auf Flickr

Als Accurat haben wir von 2012 bis 2014 mehr als 30 Exemplare veröffentlicht. Wie Sie hier sehen können, handelt es sich hierbei nicht um Standarddatenvisualisierungen, da jedes Mal ein zu 100% benutzerdefiniertes visuelles Modell erstellt wurde, um die Kombination der überlappenden Hauptdatensätze darzustellen .

Die Besonderheit dieser Teile besteht darin, dass sie vollständig von Hand gefertigt werden, tagelang in Excel-Makros arbeiten, um Daten zu analysieren, und dann wochenlang in Illustrator benutzerdefinierte visuelle Modelle erstellen und Hunderte von Elementen manuell positionieren.

Es gab keine Automatisierung, keine Voreinstellungen, daher war jedes unserer Stücke visuell für genau die Daten einzigartig, die es darstellte.

Die durchschnittliche Arbeitsstation eines Accurat-Teammitglieds bestand in diesen Jahren nur aus einem Laptop mit Illustrator.

Bei Accurat haben wir 2017 hauptsächlich Arbeitsplätze mit mehreren Bildschirmen - einschließlich eines vertikalen Monitors, der ein wenig zur Schau stellt.
Das liegt daran, dass wir in den letzten 4 Jahren ein richtiges Entwicklungsteam zusammengestellt haben und mehr und mehr mit interaktiven Projekten arbeiten.
In der letzten Zeit haben wir Daten zu Kreditkartentransaktionen, Hackerangriffen, Modetrends, Online-Verkehr, Finanzmärkten und vielem mehr visualisiert.

Aber selbst wenn wir mit interaktiven Visualisierungen und Oberflächen arbeiten, stellen wir uns jedes Mal sehr individuelle Visualisierungen und interaktive Erlebnisse vor, die auf den spezifischen Daten und Zielgruppen basieren, mit denen wir arbeiten.

Wie wählen wir die Mitglieder des Entwicklungsteams aus?
Nun, wir suchen sie in den am besten geeigneten Bereichen.
Aus diesem Grund haben unsere Entwickler einen Hintergrund in elektronischer Musik, Physik und IT für die digitale Kommunikation. Einige von ihnen haben noch keinen Abschluss.
Keiner von ihnen ist ein reiner Softwareingenieur.

Als Accurat begann, Entwickler willkommen zu heißen und sie in die Design-Crew zu integrieren, die wir über Jahre hinweg geformt hatten, traten natürlich Probleme auf. Es ist keine einfache Sache, mit mehr Menschen mit einem anderen Hintergrund und einer anderen Arbeitsweise arbeiten zu müssen. Häufig haben wir enge Fristen, die ein beschleunigtes Hin und Her zwischen Design und Entwicklung erfordern, und damit alles reibungslos funktioniert, muss das Team eine starke Verbindung zwischen den Mitgliedern haben.
Entwickler wollen normalerweise (und zu Recht) pixelgenaue Spezifikationen von Designern, die manchmal Dateien bereitstellen, die… ziemlich weit davon entfernt sind.
Aber auch Designer müssen in der Regel prüfen, ob das Design, an dem sie arbeiten, mit einem Prototyp tatsächlich Sinn macht, und es ist ihnen normalerweise egal, welche Knotenversion Sie verwenden, wenn Sie Grunt, Gulp, Webpack oder Yeoman verwenden. wenn die ECMAScript-Version 7, 6 oder Mambo Nummer 5 ist…
Das Endergebnis ist schließlich das Entscheidende.

Designer müssen die richtigen Assets liefern, Entwickler müssen versuchen, alles so nah wie möglich an den Konzepten zu halten, aber vor allem müssen alle bedenken, dass sie mit anderen Menschen zusammenarbeiten.
Wir hatten die Demonstration, dass alle Klischees über die Designer / Entwickler-Beziehung absolut real sind!

Zusammen mit den Problemen haben wir aber auch bessere Ergebnisse erzielt.

→ World POTUS ist einer von ihnen.
Für diejenigen unter Ihnen, die damit nicht vertraut sind, ist es ein Projekt, das wir vor den US-Wahlen 2016 veröffentlicht haben. Gemeinsam mit Google News Lab haben wir eine Web-App erstellt, die Daten aus Google Trends visualisiert, um das Interesse der Menschen an den Wahlen zu demonstrieren des Präsidenten der Vereinigten Staaten.

Eine der Herausforderungen, die wir uns bei diesem Projekt gestellt haben, bestand darin, eine Datenvisualisierung zu entwerfen, die zunächst mobil sein musste, was nicht unbedingt üblich ist, da sich die meisten Projekte auf Interaktionen konzentrieren, die eine Maus und eine angemessene Kompatibilität mit Webbibliotheken erfordern.
Wir mussten sicherstellen, dass alles, was wir skizzierten und an den Kunden schickten, machbar und mit einer Vielzahl von Geräten vollständig kompatibel war.

Wir haben 12 Google Trends Entities ausgewählt, die sich auf bestimmte Themen der politischen Plattformen von Clinton und Trump beziehen, und in jedem Land nach ihnen gesucht. Daher haben wir die Aufmerksamkeit außerhalb der USA gelenkt und ein Zinsrating basierend auf dem Google Trends Index erstellt.

Anstatt Ihnen die Endergebnisse zu zeigen und dann den Prozess zu kommentieren, werden wir Sie durch diesen Prozess führen.

Teil Eins: das Skizzieren und Herumspielen

Über den Aufbau und unerwartete Ergebnisse

Wenn ein Projekt beginnt, beginnen Designer normalerweise, vor Entwicklern zu skizzieren, und zumindest in diesem Teil gab es keine Ausnahme.
Da in Google Trends die Suche nach Ländern zusammengefasst werden kann, wurde als erstes Konzept eine Weltkarte als Basis verwendet.

Unser erstes Konzept

Ausgehend davon, welcher Begriff in den einzelnen Ländern am häufigsten gegoogelt wurde, haben wir alle Punkte zu einer Form verknüpft, die einer Konstellation ähnelt.
Jedes Land würde, wenn es gedrückt würde, ein Planetensystem verwandter Einträge anzeigen.

Andere Konzepte konzentrierten sich mehr auf Länderdetails. Man verwendete abstrakte 3D-Formen, um bestimmte Werte darzustellen, die die Formen in der Anzahl der Gesichter veränderten. Ein anderes verwendete ein Modul, um ein eindeutiges Muster für jedes Land zu erstellen, wiederum beeinflusst durch Schlüsselwerte in der Anzahl der Zeilen, Spalten und Rotation.

Scrollbares Kartenkonzept

Das dritte Konzept hat das Kartenthema etwas verbessert, diesmal ausgehend von der Google Trends-Länderkarte anstelle der Geografie.

Wir haben eine vertikale scrollbare Karte erstellt, die die Ergebnisse des Diagramms selbst widerspiegelt.

Das Land mit der höchsten Punktzahl würde an der Spitze bleiben, während die anderen folgen würden.
Die Verzerrung wurde erhalten, indem die Verbindungslinie zwischen den Ländern begradigt wurde, und der Abstand zwischen ihnen würde der Differenz der Punktzahl entsprechen.

Als sich das Konzept abzeichnete, begannen unsere Entwickler, einen funktionierenden Prototyp zu programmieren, um zu prüfen, ob dies tatsächlich möglich war.

Was ein Entwickler tun muss, um ein Prototyp dessen zu erstellen, was ein Designer in den frühen Phasen eines Projekts in wenigen Stunden entworfen hat, ist, eine Bestellung in einer für gewöhnlich sehr geringen Wiedergabetreue und nur wenig mehr als einer groben Idee zu erstellen.
Es kann ziemlich schwierig sein, vor Ort Lösungen für Probleme zu finden, die auftreten, wenn Sie anfangen, Dinge strenger zu tun, insbesondere wenn Sie benutzerdefinierte Tools und Visualisierungen wie diese erstellen.

Der Ansatz, ein ähnliches Ergebnis zu erzielen, bestand darin, jeden einzelnen Punkt der Karte zu durchlaufen, den Abstand zum nächsten Punkt auf der Kurve zu ermitteln und die Länge der Kurve zu diesem nächstgelegenen Punkt zu ermitteln. Diese beiden Werte wurden dann auf den beiden Achsen gezeichnet, was zu einer verzerrten Karte führte.
Der Prototyp war offensichtlich weit von der Perfektion entfernt, aber sein Zweck bestand darin, die Machbarkeit der Idee aufzuzeigen und die verbesserungsfähigen Bereiche zu finden.
Wir begannen, den Algorithmus zu verbessern, aber dann bemerkte jemand eine Ablenkung auf dem Bildschirm von Cesare - einem unserer Entwickler.

Dieses kleine Experiment war eine Kugel, die durch oszillierende dreidimensionale Funktionen verzerrt wurde, was zu interessanten Formen führte. Noch interessanter sind die Animationen, die Sie durch Variieren der Parameter der Oszillationen erstellen können.
Er nannte es CyberFlowers - es ist wohl Entwickler-Humor.
Ein anderer Designer unseres Teams hat es gesehen und sich inspirieren lassen. Deshalb hat er beschlossen, eine ähnliche blöde Form in das lange Scroll-Map-Design einzuführen.
Und mit dem Morphing-Verhalten zu spielen, um Daten zu erkunden.

Mit dieser Form haben wir begonnen, einen ersten Blick auf den Unterschied zwischen den USA und dem ausgewählten Land bei Google Trends zu werfen.

Blobs wurden auch im Detailbereich für jedes Land verwendet, und ich denke, sie sollten jetzt schon etwas vertraut aussehen, wenn Sie das Endprodukt gesehen haben, insbesondere auf blauem Hintergrund!
Als Arbeitstitel für diese Visualisierung wurde Goo-gle gewählt, um die Klebrigkeit der Visualisierung hervorzuheben.

Blobs fanden großen Anklang, da sie eine weiche und absichtlich unscharfe Darstellung von Daten darstellen, obwohl die Datenvisualisierung stets rigoros und hyperpräzise sein sollte. Sie passen sehr gut zur Beschreibung von Google Trends-Daten, da jedes Diagramm für sich auf 100 Punkte skaliert wird. Beispielsweise hat das Land, in dem ein Unternehmen am häufigsten gesucht wird, immer einen Wert von 100, selbst wenn die tatsächliche Anzahl von Abfragen 2, 150 oder 150 beträgt 30'000'000.
Und vor allem geben uns die Daten von Google Trends nur einen Vorgeschmack darauf, woran das Land interessiert sein könnte, aber es ist absolut keine perfekte Darstellung der Realität dieses Landes, da nicht jeder das Internet nutzt oder die Google-Suche verwendet, um Informationen zu sammeln über ihre Interessen.
Mit Google Trends erhalten wir einen Einblick in das, woran ein Teil der Bevölkerung eines Landes interessiert ist. Wir können nicht das gesamte Bild erfassen. Und das ist in Ordnung.

Wenn Sie mit Daten konfrontiert werden, die nicht perfekt sind oder auf absoluten Werten basieren, ist es oft besser, eine gezielte visuelle Darstellung der Unsicherheit zu verwenden.

Also haben wir uns entschlossen, die Karte zu verschrotten und stattdessen die volle Blobby zu spielen.

Zweiter Teil: Entwickeln, Gestalten

Über das Entwickeln und Entwerfen für das Unerwartete

Dies war die Form, für die wir uns entschieden hatten. Sie bestand aus einem Kreis, der den Wert jedes Landes und eine Verbindung zwischen ihnen zeigte, um den Gooey-Effekt zu erzielen.
Sobald Sie einige Daten haben, können diese Formen in Ihrem bevorzugten Editor ganz einfach gezeichnet werden. Es handelt sich um ein paar Kreise und einen Pfad, der sie mit einem Farbverlauf verbindet.
Andererseits ist es eine andere Art von Geschichte, solche Formen so zu codieren, dass sie interaktiv und mit Mobilgeräten kompatibel sind!

Der erste Schritt bestand darin, die Blasen zu zeichnen, was mit vielen modernen Webtechniken einfach zu bewerkstelligen ist, und sie anhand der Daten zu skalieren, um den Unterschied zwischen ihnen hervorzuheben.

Der zweite Schritt bestand darin, die Blasen zu verwischen. Die Verwendung von SVG- oder CSS-Filtern ist sehr einfach, auf Smartphones stellte sich jedoch heraus, dass dies sehr schwer ist, sodass wir auf die alte HTML-Zeichenfläche zurückgegriffen haben.
Da die Pixelmanipulation auf der Leinwand sehr langsam ist, haben wir direkt einen radialen Farbverlauf anstelle eines Kreises gezeichnet. Benutzerdefinierte Farbstopps ähneln einer Gaußschen Unschärfe.

Der dritte Schritt bestand darin, den sogenannten Gooey-Effekt durch Erhöhen des Alpha-Kanalkontrasts zu erzeugen. Das bedeutet, die Unschärfe zu schärfen und die Transparenzvariation auf einen einzigen Schritt zu beschränken.
Dies geschieht normalerweise mit SVG-Filtern, die jedoch aufgrund der mobilen Unterstützung nicht realisierbar waren. Daher haben wir die Pixelmanipulation in einem benutzerdefinierten WebGL-Shader verwendet, um superschnell zu sein.

Im vierten Schritt brauchten wir klebrige Verbindungen zwischen Blasen. Wir haben viele Experimente damit durchgeführt, und die beste Methode bestand darin, einen verschwommenen Stab zu zeichnen und den AlphaContrast seine Arbeit machen zu lassen. Der schwierige Teil war, die Breite des Stocks entsprechend der Größe der beiden Blasen, die er verbindet, zu skalieren. Der Trick bestand darin, nur die kleinere der beiden Blasen zu betrachten.

Der letzte Schritt bestand darin, alles zusammenzufügen und jeden Übergang auf jedem Gerät so reibungslos wie möglich zu gestalten.
Dazu haben wir uns auf benutzerdefinierte Beschleunigungsfunktionen verlassen, um jeden einzelnen Aspekt optimieren zu können.
Die Kalibrierung und das Experimentieren mit zufälligen Daten war entscheidend, um sie wunderbar blobbig zu machen!

Während das Entwicklerteam die Blasen verfeinerte, haben wir mit Journalisten des Google News Labs zusammengearbeitet, um die endgültigen Themen und die zugehörigen Zitate zu definieren.

Sobald die Entwicklung der Formen abgeschlossen war, konnten wir diese Formen in die Benutzeroberfläche implementieren.
Wir waren ziemlich zufrieden mit dem Ergebnis und da der Wahltermin immer näher rückte, wollten wir, dass alle mit der App spielen.

Aber wie Sie alle wissen, ist Murphys Gesetz nicht sehr mitfühlend, also ...
Wenn alles gut zu laufen scheint,
Sie haben offensichtlich etwas übersehen.
Eigentlich…

Trump glaubt, dass Google Hillary Clinton bei seinen Websuchen bevorzugt, wirft ihnen Verschwörung vor und droht zu klagen.

Zu diesem Zeitpunkt wurde es also ein bisschen verrückt, und wir mussten die Benutzeroberfläche ein wenig durchgehen, um das Ganze zu optimieren, einen Ein / Aus-Schalter für die US-Daten hinzuzufügen und die Anführungszeichen der Kandidaten zu jedem einzelnen Thema zu entfernen .

Während wir dabei waren, haben wir auch die Gelegenheit genutzt, einige andere Elemente der Benutzeroberfläche zu überarbeiten, weil ... warum nicht richtig?

Dritter Teil: Endlich das Endprodukt!

Beim Wischen, Tippen und Wackeln

Seitliche Wischbewegungen ändern den Ansichtstyp, auch bekannt als die Art, wie Blobs auf dem Bildschirm angeordnet sind.

Durch vertikales Wischen wird das Thema geändert, und der größte Teil des Aktionsbereichs wurde am unteren Bildschirmrand platziert, damit Benutzer die Website bequem mit nur einer Hand erkunden können.

Wie Sie sehen, haben wir unten rechts auf dem Bildschirm einen Schalter zum Ein- und Ausschalten von US-Daten hinzugefügt. In Chat-Sprechblasen wird nur die Beschreibung angezeigt, die Sie gerade sehen, und nicht die Zitate der tatsächlichen Kandidaten zu diesem Thema.

Vierter Teil: Was haben wir gelernt?

Warum wir die Zusammenarbeit für halten

Das Wichtigste, was uns klar wurde, war, dass die Zusammenarbeit zwischen Design und Programmierung der Schlüssel zum Erfolg dieses Projekts war. Es war eigentlich mehr als eine Zusammenarbeit.

Es war eine ständige Iteration und ein Hin und Her, bei der die Eingaben der Entwickler das Design immens änderten und uns dabei halfen, etwas Unerwartetes zu erreichen, das definitiv zu einem frischeren Ergebnis führte.

Wir glauben, dass diese Art der Integration der Schlüssel für unsere Zukunft ist, insbesondere wenn wir uns überlegen, wie wichtig beide Aspekte bei der Datenvisualisierung sind.

In diesem Bereich müssen Mathematik und Ästhetik zusammenarbeiten.
Wenn Sie darüber nachdenken, gibt es viele Menschen, die diese Balance bereits in sich finden, wie die Meister Moritz Stefaner und Santiago Ortiz.
Wir als Studio müssen dieses Gleichgewicht zwischen mehreren Menschen finden.
Wir arbeiten jeden Tag daran, wie wir die Beziehung zwischen Designern und Programmierern aufbauen und verbessern können.
Die Zusammenarbeit mit Entwicklern von Anfang an und die Einbeziehung in den kreativen Prozess und nicht nur in die Produktionsphase ist unserer Meinung nach der richtige Weg in diese Richtung, und die Ergebnisse, die wir aus diesem Projekt erhalten haben, bestätigen uns Auf dem richtigen Weg.

Das Zusammenwirken und Vermischen von unterschiedlichem Wissen darf nicht übersehen werden und muss stattdessen gefördert und begrüßt werden, insbesondere in der heutigen Zeit, in der leider in letzter Zeit viele Dinge in die entgegengesetzte Richtung weisen.