În Studii de caz

Studiu de caz: Macroscop – proces de creație

Studiu de caz Macroscop

În acest articol, veți afla cum s-a derulat întregul proces de creație pentru infograficul interactiv Macroscop, ce face parte dintr-un proiect de data journalism, inițiat de către revista online Das Cloud. Totodată, în partea a II-a, veți putea afla mai multe despre pașii parcurși în procesul de development.

Studiu de caz: infograficul interactiv Macroscop
Link dascloud.ro/macroscop/
Client Das Cloud
Dată lansare 26 martie 2013
Tehnologii folosite Illustrator, ActionScript, Flash
Echipă
  • Creative Direction: Sorin Bechira
  • Graphic Design & Animation: Erik Erdőközi
  • Interactive Developer: Cătălin Săveanu

Pe scurt, despre proiect

Macroscop este un infografic interactiv ce face parte dintr-un proiect de data journalism realizat de revista online Das Cloud, împreună cu X3, folosind date Google Trends și Media IQ. În infografic este reprezentată evoluția căutărilor pe Google a 14 termeni medicali care au generat volume mari de căutări în România, în ultimii 3 ani. În unele cazuri, interesul crescut a fost impulsionat de articole apărute în presa online. De aceea, au fost suprapuse acestui grafic date furnizate de către serviciul de monitorizare Media IQ.

Bazele conceptului

Cerința principală a fost aceea de a crea un infografic interactiv, care să conțină elemente animate și în care să fie prezentate datele vizual, într-un mod cât mai ușor de înțeles.

Mai jos sunt enumerate câteva exemple primite de la client, analizate din perspectiva provocărilor și a posibilității de adaptare:

1. The Online Debate

Un infografic despre cuvintele-cheie asociate pe Twitter cu cei 2 candidați la președinția Statelor Unite.

  • Cum putea fi adaptat:

În locul cuvintelor-cheie (election, years, president), ar fi putut sta query-urile specifice (analize medicale, hepatita C, Colon Help). În stânga liniilor (semicercurilor),  putea fi afișată creșterea numărului de articole în luna respectivă, iar în dreapta, creșterea numărului de căutari Google.

  • Provocări

Reprezentarea evoluțiilor negative (descreșterile în căutări și articole apărute), precum și lipsa interactivității. O posibilă soluție ar fi fost să fie adus conținut asociat în stânga și în dreapta graficului, în funcție de punctul de pe grafic pe care se dă click. Dacă s-ar fi dat click pe „Hepatita C, iunie 2011”, în stânga ar fi putut apărea 5-6 articole din presa de atunci, iar în dreapta ar fi apărut informațiile.

2. Detect the World Fever on Flu Meter

Un instrument de vizualizare a epidemiilor la nivel global.

  • Cum putea fi adaptat:

În partea de jos ar fi putut exista un grafic dublu, calendaristic, care să prezinte evoluția căutărilor și numărul de articole din presă. Sus, în „termometru”, ar fi trebuit să fie query-urile.

  • Provocări

Trebuia găsită o modalitate de a pune și linkuri către articolele care au generat spike-uri.

3. Cele mai frecvente 8 boli din ultimele 91 de zile.

Această variantă ar fi fost mai ușor de adaptat, dar mai dificil de înțeles pentru cei care vizualizau infograficul.

4. When does crime happen?

  • Cum putea fi adaptat?

În locul orașelor, puteau fi puse numele query-urilor, în partea de sus fiind evoluția query-urilor și în cea de jos, evoluția numărului de articole. Codul de culori folosit putea fi transformat în roșu pentru spike-uri și portocaliu pentru creșteri mai mari de 25%.

  • Provocări

Nu a adus provocări sesizabile cu excepția faptului că ar fi fost indicat un singur grafic, mai mare și cu butoane pentru numele căutărilor, rezultând în jur de 25 de grafice distincte. Totodată, designul old-school ar fi avut nevoie de o înviorare.

În urma analizei de cerințe, s-a stabilit ca totul să fie integrat într-un sistem unitar de reprezentare vizuală, în locul unei reprezentări simpliste, printr-o interfață interactivă în care să fie prezente radio buttons și dropdown-uri. S-a ales calea unei reprezentări experimentale și inovatoare, cu o provocare mare pe partea de interactivitate. Privitorul trebuia să aibă în față o interfață care să îi stârnească interesul și dorința de a descoperi și de a cerceta. Acestea au fost bazele conceptului.

Briefing si discutii clientSchita proiect

Moodboard

Moodboard Macroscop

Moodboard-ul creat pentru a comunica ideea și stilul vizual a constat în mai multe tipuri de grafice, scheme, tabele și hărți, în culori cât mai variate.

Grafică

De-a lungul procesului a fost păstrat intact scopul fundamental al oricărui grafic și anume, acela de a oferi cât mai multe informații, cât mai clar și cât mai rapid. A fost propus un infografic care să respecte toate aceste elemente de bază, dar care să fie și funcțional.

Încă de la început, a fost luat în considerare cercul, ca element de bază a structurii ce urma să fie construită. Acesta oferea soluția perfectă de concentrare a informațiilor într-o celulă unică. Spre deosebire de tabele și alte grafice, el oferă un focus central, mai concentrat și oferă o viziune de ansamblu a întregului sistem.

Macroscop finalGrafica Macroscop

Dat fiind faptul că adeseori nu primează partea vizuală a graficelor, iar aspectul lor rigid ridică o barieră între privitor și informațiile care i se oferă, Macroscop trebuia să facă informația mult mai accesibilă, prin aspectul plăcut și caracterul interactiv, ce invită privitorul la o studiere mai amănunțită.

Cele două fluctuații ale graficului coincid cu manifestarea bolii, respectiv cu numărul de căutări de articole medicale pe Google. Graficele termenilor medicali s-au obținut tot prin colectarea datelor de pe Google. Acestea sunt bazate pe căutările persoanelor interesate despre o anumită afecțiune medicală într-o anumită perioadă, după lansarea articolelor în presa online. Astfel, se pot observa și elementele care influențează interesul oamenilor pentru o anumită afecțiune. Plusurile de pe grafic indică procentajul articolelor publicate pe tema dată și unele chiar și un link extern către articolul cel mai important din acea perioadă.

Compoziție

Compozițional, cercul oferă o soluție ideală, deoarece focusează toată informația și ghidează privitorul. Mai mult decât un aspect plăcut, graficul propus are frumusețea unui mecanism de ceas, a unui sistem bine lustruit, în care elementele interacționează armonios.

Culorile folosite salvează de la prea multă rigurozitate și contrastează cu griul clinic al background-ului, care păstrează credibilitatea și neutralitatea. Compunerea unui set de 15 culori care să se armonizeze între ele perfect, indiferent de combinație a fost o sarcină ce a ridicat mici provocări.

Culori

Elemente

Elementele care construiesc sistemul au fost create independent și animate astfel încât să fie funcționale împreună.

Grafica background MacroscopSet de elemente Macroscop

O provocare a proiectului a constat în găsirea unei soluții de afișare și de navigare, care să fie ușor de înțeles și de utilizat. Au fost construite mai multe versiuni de grafice, pentru a ajunge la versiunea finală, aceea care a devenit cel mai ușor de înțeles și de navigat pentru utilizator.

Procesul de navigare

Procentaj articole

Pasul I:

La început, sunt active două zone:  cea de termeni medicali și cea de articole din presă care le corespund. Zona de articole este marcată cu simbolul „+”, care indică un anumit procentaj.

Pasul II:

Selectie ani

Poate fi selectat momentul temporal considerat relevant: 2010, 2011 sau 2012.

Pasul III:

Selectare termen medical

Poate fi activat cel de-al doilea termen medical, pentru a vedea dacă există o corelație între grafice. Pentru a face acest lucru, trebuie deselectat mai întâi graficul pentru articolele din presă.

Pasul IV:

Alegere termen medical

Alegerea unui termen medical se face folosind scroll-ul circular.

Pasul V:

Selectie maximum de termeni medicali

Poate fi selectat cel de-al treilea termen medical, pentru a vedea dacă există corelații între 3 termeni de căutare. Dat fiind că în total sunt 14 termeni de căutare, în momentul în care sunt selectați simultan 3 dintre aceștia, vor fi disponibile 364 de variante diferite (combinări de 14, luate câte 3)

Pasul VI:

Highlight grafic

Posibilitatea de a evidenția graficul pentru oricare dintre termenii medicali selectați.

Pasul VII:

Dezactivare termen medical

Posibilitatea de a deselecta un anumit termen medical.

Pasul VIII:

Selectare articol

Articolele din presă care au o importanță mai mare sunt evidențiate printr-un simbol mărit și sunt însoțite de un link extern.

În ciuda faptului că proiectul are în vedere mai mulți termeni medical și afecțiuni, infograficul și-a propus și a reușit să le prezinte într-un mod interactiv și interesant.

În ceea ce privește aspectele ce țin de development, puteți citi mai multe în cea de-a doua parte a studiului de caz.