Návrháři vs vývojáři - Accurat @ Visualized Milan

11. března jsme měli možnost přednášet na téma, o kterém jsme opravdu nadšení, bojující - ale někdy milující - vztah mezi designéry a vývojáři v projektech vizualizace dat.
Domníváme se, že je to něco, co je třeba zlepšit, a oba se nemusí od ostatních izolovat, ale místo toho, co považujeme za nejlepší, je jejich nepřetržitá spolupráce.
Tento projev napsal a přednesl Marco Bernardi, cesare soldini a Tommaso Zennaro (já), s pomocí giorgia lupi.
Co se chystáte přečíst, je přizpůsobení naší řeči na toto téma.

Když byl Accurat spuštěn, navrhli jsme pro tisk hlavně projekty, jako jsou vizualizace statických dat. Jsme si jisti, že mnozí z vás jsou obeznámeni s infografiky, které jsme udělali pro publikaci La Lettura, která je nedělním kulturním doplňkem Corriere della Sera.

→ Accurat pro La Lettura, výběr vizualizací dat, album na Flickru

Jak Accurat jsme publikovali více než 30 kusů od roku 2012 do roku 2014 a jak vidíte zde, nejedná se o příliš standardní vizualizace dat, protože pokaždé, když jsme úmyslně vytvořili 100% vlastní vizuální model představující kombinaci hlavních souborů dat, které jsme se překrývali .

Zvláštností těchto kusů je to, že jsou vyrobeny výhradně ručně, tráví dny v makrech Excelu za analýzu dat a poté utrácí týdny za Illustrator vytvářením vlastních vizuálních modelů a ručním umisťováním stovek prvků.

Neexistovala žádná automatizace, žádné předvolby, takže každý z našich kusů byl vizuálně jedinečný pro samotná data, která reprezentoval.

Průměrná pracovní stanice člena týmu Accurat v těchto letech spočívala pouze v notebooku s ilustrátorem.

V Accuratu máme v roce 2017 většinou pracovní stanice s více displeji - včetně vertikálního monitoru, který se trochu předvádí.
Je to proto, že za poslední 4 roky jsme sestavili vhodný vývojový tým a začali více a více pracovat s interaktivními projekty.
V poslední době jsme vizualizovali údaje o transakcích kreditními kartami, útoky hackerů, módní trendy, online provoz, finanční trhy a mnoho dalšího.

Ale i když pracujeme s interaktivními vizualizacemi a rozhraními, pokaždé si představujeme velmi vlastní vizuální a interaktivní zážitky na základě konkrétních dat a publika, se kterými pracujeme.

Jak vybereme členy vývojového týmu?
Hledáme je v nejvhodnějších oborech.
To je důvod, proč naši vývojáři mají znalosti v oblasti elektronické hudby, fyziky, IT pro digitální komunikaci, zatímco někteří z nich nejsou absolvováni.
Žádný z nich není čistě softwarový inženýr.

Jakmile společnost Accurat začala vývojáře přivítat a integrovat je s návrhářskou posádkou, kterou jsme tvarovali v průběhu let, začaly problémy vycházet. Mít pracovat s více lidmi, s jiným pozadím a modus operandi není jednoduchá věc. Častěji než ne máme pevně stanovené termíny, které vyžadují zrychlený postup vpřed a vzad mezi návrhem a vývojem a aby vše fungovalo správným způsobem bez problémů, musí tým mít pevné spojení mezi členy.
Vývojáři obvykle (a právem) požadují dokonalé specifikace pixelů od návrhářů, kteří někdy poskytují soubory, které… jsou od toho daleko.
Ale také návrháři obvykle potřebují zjistit, zda design, na kterém pracují, má skutečně smysl s prototypem a obvykle se nestarají o verzi uzlu, kterou používáte, pokud používáte Grunt, Gulp, Webpack nebo Yeoman; pokud je verze ECMAScript 7, 6 nebo Mambo Number 5…
Konečným výsledkem je to, na čem záleží.

Designéři musí poskytnout správný majetek, vývojáři se musí snažit co nejvíce se přiblížit konceptům, ale většina ze všech musí mít na paměti, že pracují s jinými lidskými bytostmi.
Měli jsme ukázku, že všechny stereotypy o vztahu designér / vývojář jsou naprosto skutečné!

Spolu s problémy jsme však také dosáhli lepších výsledků.

→ Svět POTUS je jedním z nich.
Pro ty z vás, kteří to neznají, je to projekt, který jsme vydali před americkými volbami v roce 2016. Ve spolupráci s Google News Lab jsme vytvořili webovou aplikaci, která vizualizovala data pocházející z Google Trends, aby ukázala zájem lidí o volby prezidenta Spojených států.

Jednou z výzev, které jsme si při přípravě tohoto projektu kladli, bylo navrhnout vizualizaci dat, která musí být nejprve mobilní, což není něco běžného, ​​protože většina projektů se točí kolem interakcí, které vyžadují myš a slušnou kompatibilitu s webovými knihovnami.
Museli jsme se ujistit, že vše, co jsme načrtli a poslali klientovi, bylo proveditelné a plně kompatibilní s celou řadou zařízení.

Vybrali jsme 12 entit Google Trends, které se týkaly specifických otázek politických platforem Clintona a Trumpa, a hledali jsme je v každé zemi, proto jsme přesunuli pozornost mimo USA a vytvořili hodnocení úroků na základě indexu Google Trends Index.

Místo toho, abychom vám ukázali konečné výsledky, a poté vás komentovali, vás provedeme tímto procesem.

Část první: skicování a zmatení

Na vybudování a neočekávané výsledky

Obvykle, když projekt začíná, návrháři začínají kreslit před vývojáři a, alespoň v této části, nebyla žádná výjimka.
Vzhledem k tomu, že Google Trends umožňuje zobrazit agregovaná vyhledávání podle zemí, jedním z prvních konceptů, které jsme přinesli k tabulce, byla jako základna mapa světa.

Náš první koncept

Ukazující, který termín byl nejvíce googlovaný z každé země, jsme spojili všechny tečky do tvaru podobného souhvězdí.
Každá země, pokud by byla stisknuta, by ukazovala planetární systém souvisejících záznamů.

Další koncepty se více zaměřovaly na detaily zemí, jeden používal abstraktní 3D tvary k reprezentaci určitých hodnot, které měnily tvary v počtu tváří; jiný použil modul k vytvoření jedinečného vzoru pro každou zemi, opět ovlivněného klíčovými hodnotami v počtu řádků, sloupců a rotace.

Posouvatelné mapy koncept

Třetí koncept trochu vylepšil téma mapy, tentokrát od geografické mapy Google Trends.

Vytvořili jsme svislou posouvatelnou mapu, která odrážela skóre samotné mapy.

Země s nejvyšším skóre by zůstala na vrcholu, zatímco ostatní by následovaly.
Pokřivení bylo dosaženo narovnáním linie spojující jednotlivé země a vzdálenost mezi nimi by odpovídala rozdílu skóre.

Protože byl koncept tak urovnán, naši vývojáři začali kódovat funkční prototyp, abychom zjistili, zda to bylo skutečně proveditelné.

Co musí vývojář udělat, aby vytvořil prototyp, který návrhář načrtl v raných fázích projektu během několika hodin, je vytvořit objednávku v něčem, co je obvykle velmi nízká věrnost a jen o něco více než hrubý nápad.
Může být docela těžké najít na místě řešení problémů, které se objeví, jakmile začnete dělat věci přísněji, zejména při vytváření vlastních nástrojů a vizualizací, jako je tato.

Přístup k získání podobného výsledku spočíval v cyklování každého jednotlivého bodu mapy, nalezení jeho vzdálenosti od nejbližšího bodu na křivce a nalezení délky křivky k tomuto nejbližšímu bodu. Tyto dvě hodnoty byly poté nakresleny na dvě osy, což vedlo ke zkreslené mapě.
Prototyp nebyl zjevně zdaleka dokonalý, ale jeho účelem bylo ukázat proveditelnost myšlenky a najít improvizovatelné oblasti.
Začali jsme vylepšovat algoritmus, ale pak si někdo všiml rozptýlení na obrazovce Cesare - jednoho z našich vývojářů.

Tento malý experiment byl koulí zkreslenou oscilačními trojrozměrnými funkcemi, které vedly k zajímavým tvarům. Ještě zajímavější jsou animace, které můžete vytvořit změnou parametrů oscilací.
Říkal tomu CyberFlowers - je to humor pro vývojáře, myslím.
Jiný návrhář našeho týmu to viděl a nechal se inspirovat, a tak se rozhodl představit podobný blobby tvar v návrhu mapy dlouhého rolování.
A hrát si s morfujícím chováním k prozkoumávání dat.

Tento tvar jsme začali používat k prvnímu pohledu na rozdíl ve skóre Google Trends mezi USA a vybranou zemí.

Bloky byly použity také v sekci podrobností pro každou zemi, a myslím, že by už měly vypadat trochu povědomě, pokud jste viděli finální produkt, zejména na modrém pozadí!
Abychom zdůraznili gooey povahu vizualizace, kterou jsme si vybrali, pracovní název byl Goo-gle.

Blobové byli dobře přijati, protože jsou měkkým a úmyslně nejasným zobrazením dat, navzdory myšlence, že vizualizace dat by měla být vždy přísná a hyper přesná. Velmi dobře se hodí k popisu dat Google Trends, protože každý graf je upraven na 100 bodových hodnot jednotlivě, například země, která prohledává jednu entitu nejvíce, má vždy skóre 100, i když skutečný počet dotazů je 2, 150 nebo 30 000 000.
Data ze služby Google Trends nám především poskytují informace o tom, čeho by se země mohla zajímat, ale rozhodně to není dokonalé zobrazení reality této země, protože ne každý používá internet nebo vyhledává Google pomocí informací Google. o jejich zájmech.
Pomocí Google Trends dostaneme krátký pohled na to, co zajímá část populace v zemi, nemůžeme získat celý obrázek. A to je v pořádku.

Když čelíme druhům dat, které nejsou dokonalé nebo založené na absolutních hodnotách, je často lepší zachytit záměrně vizuální reprezentaci nejistoty.

Rozhodli jsme se tedy vyřadit mapu a místo toho jít úplně blobby.

Část druhá: vývoj, projektování

Na vývoji a navrhování pro neočekávané

To byl tvar, pro který jsme se rozhodli, spočívající v kruhu, který ukazuje hodnotu každé země, a vzájemné spojení mezi nimi, aby se dosáhlo efektu gooey.
Jakmile máte některá data, tyto tvary lze snadno vykreslit ve svém oblíbeném editoru, jsou to pár kruhů a cesta, která je spojuje, vyplněné přechodem.
Na druhé straně je kódování takového tvaru tak, aby byl interaktivní a kompatibilní s mobilními zařízeními, jiný druh příběhu!

Prvním krokem bylo nakreslit bubliny, které lze snadno udělat s mnoha moderními webovými technikami, a škálovat je z dat, aby se zvýraznil rozdíl mezi nimi.

Druhým krokem bylo rozostření bublin. Je to velmi snadné pomocí filtrů SVG nebo CSS, ale ukázalo se, že je to u smartphonů velmi těžké, takže jsme se vrátili ke starému plátnu HTML.
Protože rozmazání manipulace s pixely na plátně je velmi pomalé, spoléhali jsme na přímý nákres radiálního gradientu namísto kruhu s vlastními barevnými zarážkami, které se podobají gaussovskému rozostření.

Třetím krokem bylo vytvoření tzv. Gooey efektu zvýšením alfa-kanálového kontrastu. To znamená zaostření rozostření a zúžení variace průhlednosti na jeden krok.
Obvykle se to provádí pomocí filtrů SVG, ale kvůli mobilní podpoře nebyly životaschopné, proto jsme použili manipulaci s pixely v rámci vlastního shluku WebGL, abychom byli velmi rychlí.

Ve čtvrtém kroku jsme potřebovali slepé spojení mezi bublinami. Vyzkoušeli jsme na to spoustu experimentů a nejlepší metodou bylo nakreslit rozmazané hůlky a nechat AlphaContrast, aby vykonal svou práci. Obtížná část měla měřítko šířky tyče podle velikosti dvou bublin, které spojuje. Trik spočíval v tom, že jsme zvážili pouze menší z těchto dvou bublin.

Posledním krokem bylo dát to všechno dohromady a udělat každý přechod co nejhladší na každém zařízení.
Abychom to dokázali, spoléhali jsme na vlastní funkce uvolnění, abychom mohli vyladit každý jednotlivý aspekt.
Kalibrace a experimenty na náhodných datech byly zásadní, aby byly nádherně blobby!

Zatímco dev tým vylepšoval bubliny, spolupracovali jsme s novináři v Google News Lab na definování závěrečných témat a souvisejících nabídek.

Jakmile byl vývoj tvarů vyleštěn, dokázali jsme tyto tvary implementovat do uživatelského rozhraní.
S výsledkem jsme byli docela spokojeni, a jak se datum voleb přibližovalo a přibližovalo, začali jsme se bát uvolnění aplikace do volné přírody, protože jsme chtěli, aby si s ní všichni zahráli.

Jak však všichni víte, Murphyho zákon není příliš soucitný, takže ...
Pokud se zdá, že všechno jde dobře,
zjevně jste něco přehlédli.
Ve skutečnosti…

Trump, věří, že Google dává přednost Hillary Clintonové při vyhledávání na webu, obviňuje je ze spiknutí a hrozí, že bude žalovat.

V tomto okamžiku se to trochu zbláznilo, a my jsme museli projít UI docela dost, vyladit celou věc, přidat vypínač / zapnout pro americká data a odstranit citace kandidátů, které jsme měli o každém jednotlivém tématu .

Když jsme byli u toho, také jsme využili příležitosti k přepracování některých dalších prvků uživatelského rozhraní, protože… proč ne?

Část třetí: konečný produkt, konečně!

Na prstech, kohoutcích a krocích

Boční pohyby změní typ pohledu, podobně jako jsou kuličky uspořádány na obrazovce.

Téma změn svislého přejíždění a většina akční oblasti byla umístěna na spodní část obrazovky, aby uživatelům pomohla pohodlně prozkoumat web pouze jednou rukou.

Jak vidíte, v pravém dolním rohu obrazovky jsme přidali přepínač pro přepínání a zapínání amerických dat a bubliny v chatu zobrazují pouze popis toho, na co se díváte, namísto skutečných nabídek kandidátů na toto téma.

Čtvrtá část: co jsme se naučili?

Proč si myslíme, že spolupráce je

Nejdůležitější věcí, kterou jsme si uvědomili, je to, že spolupráce mezi designem a kódováním byla klíčem k úspěchu tohoto projektu, ve skutečnosti to byla více než spolupráce.

Byla to stálá iterace a tam a zpět, kde vstupy od vývojářů nesmírně změnily design a pomohly nám dosáhnout něčeho, co bylo neočekávané a rozhodně vedlo k čerstvějšímu výsledku.

Věříme, že tento typ integrace je klíčem pro naši budoucnost, zejména pokud jde o to, jak jsou ve vizualizaci dat oba aspekty stejně důležité.

Je to doména, v níž musí matematika a estetika spolupracovat.
Pokud o tom přemýšlíte, existuje mnoho lidí, kteří tuto rovnováhu již našli sami, jako jsou mistry Moritz Stefaner a Santiago Ortiz.
My, jako studio, musíme najít tuto rovnováhu mezi několika lidskými bytostmi.
Jak budujeme a zlepšujeme vztahy mezi designéry a kodéry, pracujeme každý den.
Věříme, že správná cesta, jak jít tímto směrem, je spolupráce s vývojáři od začátku projektu a jejich zapojení do tvůrčího procesu a nejen do fáze výroby, a výsledky, které jsme získali z tohoto projektu, nám říkají, že jsme na správné trati.

Spolupráce a míchání různých znalostí je něco, co nelze přehlížet, a místo toho musí být povzbuzováno a přijímáno, zejména v současné době, kdy se bohužel zdá, že mnoho věcí v poslední době ukazuje na opačný směr.