curs d'informació visual (infografies). ignasi alcalde

Infografia i visualització www.ignasialcalde.es1 |

Ignasi Alcalde

@ignasialcalde

Infografia i

visualització

Barcelona CEJFE 26 setembre 2011

Infografia i visualització www.ignasialcalde.es2 |Ignasi Alcalde @ignasialcald

Agenda

• Presentació

• Disseny d’informació

• Infografia i visualització

• Passos per a una bona infografia

• Eines per visualitzar informació

• Many Eyes


1. Presentació: Qui sóc?


Qui sóc?

Ignasi Alcalde

•Grau en multimèdia

•Col∙laborador docent UOC•Consultor d’arquitectura de la informació, comunitats de pràctica i treball col∙laboratiu•“Inquiet digital”, però m'agrada molt la natura i l'aventura

www.ignasialcalde.es


2. Disseny de la informació


Disseny de la informació

Ubiqüitat > On veiem el disseny d'informació?

•A la senyalització viària quan estem conduint

•Al mapa que utilitzem per planificar el viatge

•Al manual d’instruccions d'un producte o servei

•Al flascó del medicament •A les instruccions de muntatge de nous productes i guies d'ús de les joguines, mobles…



La comunicació visual a través d‘infografia

Utilitza imatges, símbols, colors i paraules per comunicar idees, il∙lustrar la informació o expressar visualment les relacions.

Això implica:

• Filtrar la informació

• Establir relacions • Discernir patrons i representar‐los d'una manera que permeti al

consumidor d’informació la construcció de coneixementsignificatiu



Dins del cervell hi ha més de trenta àrees (conjunts densament connectats de neurones) dedicades al processament d’informació recollida pels ulls.

Som animals visuals, i això influeix fins i tot en la forma en què ens expressem.

Si expliquem alguna idea complexa a un angloparlant, en el moment en quèla comprengui, exclamarà amb una expressió d’alleujament i alegria a la cara: Isee! (‘Ja ho entenc’).

La visualització és necessària per passar de la informació a la saviesa.

Per què la visualització / infografia?


3. Infografia i visualització


Infografia i visualització

L’objectiu central de qualsevol treball de visualització no és la bellesa ni l’impacte visual per si mateix, sinó ser comprensible primer i bell

després (o ser bell a través d’una exquisida funcionalitat).

El propòsit de la visualització és la comprensió, no la imatge.‐Ben Shneiderman (1999)

Tot s’ha de fer tan simple com sigui possible, però no senzill.(Atribuït a Albert Einstein)

Propòsit



Alguns especialistes marquen una frontera entre aquestes dues disciplines, basada en el fet que, suposadament, la infografia consisteix a presentar informació per mitjà de gràfics estadístics, mapes i esquemes, mentre que la visualització es basa en la creació d’eines visuals (estàtiques i interactives) que un públic pugui fer servir per explorar, analitzar i estudiar conjunts complexos de dades.

En la meva opinió la infografia i la visualització tenen una naturalesa comuna atès que pertanyen a un mateix continu, on els límits de la qual són definits per les paraules presentació i exploració.

infografia respecte de visualització



Alguns gràfics són tot presentació i gairebé gens d’exploració, per la qual cosa són “més infografia”.

D’altres permeten un enorme nombre de lectures, per la qual cosa són “més visualització”.

http://www.itsbeenreal.co.uk/index.php?/wwwords/literary‐organism/

Projecte de Stefanie Posavec

infografia respecte de visualització


Anatomia d’una infografia

El nucli d’una infografia està compost de tres parts molt importants:

1.visualcodis de colorgràficsreferència de les icones

2.contingutterminis temporalsestadísticareferències

3.coneixementfetsdeduccions


Anatomia d’una informació

http://youtu.be/mkEXx7sDXAI

Com explicar una història amb la informació


4. Cinc passos essencials per a una bona infografia


5 passos essencials per a una bona infografia

1.Esquelet i diagrames de flux

2.L'elaboració d'un esquema de color

3.Gràfics

4.Recerca de dades

5.Coneixement

http://www.flowtown.com/blog/wp‐content/uploads/2010/04/social‐media‐demographics9.png


5 passos essencials per a una bona infografiaEsquelet i diagrames de flux

• Enfocament d'una infografia com ho faria qualsevol altra forma de disseny.

• Muntar un esquelet de paraules i fletxes, agrupació de dades rellevants entre si i visualitzar el flux d'informació a través de diagrames de flux.

• Com que les infografies són en general complexes, els diagrames de flux simplifiquen el procés i permeten connectar‐ho tot.


5 passos essencials per a una bona infografiaL'elaboració d'un esquema de color

• Un esquema de color és molt important per transmetre una àmplia gamma de missatges mentre es manté el lector confinat dins de la infografia.

• Els lectors es confondran ràpidament si no tenen els colors que lliguin els seus pensaments visualment.

• Podem tenir‐ne 2, 3 o 10, però hem de pensar l'assignació de colors abans de començar a dissenyar.


5 passos essencials per a una bona infografiaGràfics

Hi ha dos tipus de gràfics en una infografia: gràfic principal i gràfics de referència.

• El gràfic principal o plantilla és la definicióvisual del disseny i, en general, és el que sempre s'inclou en la infografia. L’elecció del gràfic principal permet al lector saber amb un cop d'ull quins són els coneixements que desitja compartir.

• Els gràfics de referència no són obligatoris en el disseny. En general, són icones que s'utilitzen com a indicadors visuals per evitar carregar en excés el disseny quan s’ha de representar una gran quantitat de contingut. Poden substituir paraules.


5 passos essencials per a una bona infografiaRecerca de dades

No cal dir que, a totes les infografies, hem d’investigar a fons i les dades presentades han d'estar basades en fets comprovats.

• Esbrinar quines dades hem de condensar i decidir quines dades són les més rellevants i com les presentarem. La relació de les dades dels gràfics funciona millor si és d’1:1.

• Un altre punt molt important a recordar és la demografia. Qui utilitzarà la seva infografia? Segons el públic objectiu, hem d'adaptar els colors, icones, coneixement i complexitat de la infografia.


5 passos essencials per a una bona infografiaConeixement

Mostrar el contingut important per provocar fàcilment deduccions és tot un art. El coneixement ja és poderós en si mateix, però la transmissió d'aquest coneixement hauria de ser‐ho més.

• Si la infografia és concèntrica, hauríem de situar al mig els continguts més importants, tant visuals com relatius a fets.

• Si la infografia és horitzontal, els extrems de la dreta i de l’esquerra són els punts inicial i final de les deduccions i pensaments del lector.

• L'elecció dels colors i les imatges és de vital importància atès que, per exemple, el color vermell s'associa normalment a perill.


5. Eines per visualitzar informació


Eines per crear infografies

Stat Planet: Permet crear algunes visualitzacionsinteractives de força qualitat, que després es poden utilitzar tal qual o crear una imatge estàtica. La imatge es pot descarregar gratuïtament.

Creately Permet crear fàcilment esquemes i diagrames de flux. També podem triar entre una sèrie de tipus de diagrames dissenyats per defecte i afegir‐hi ràpidament dades per fer el nostre propi gràfic. El resultat final és bastant professional i té algunes opcions col∙laboratives. Molt recomanable.



Google Public Data: Utilitza dades públiques i les converteix en una infografia.

Wordle: Permet crear visualitzacions amb el text que es vulgui. Ofereix diversos dissenys. També ésinteressant la possibilitat d'incloure un bloc, web o Delicious.

Tableau Públic: Genera gràfics bastant acolorits. Ésun programari de codi obert per a Windows.

Inkscape: Eina d'ús lliure per crear gràfics vectorials. Suporta diferents plataformes.



Google Chart Tools Permet crear gràfics estàtics o dinàmics. Dins dels estàtics, es poden crear codis QR, fórmulesmatemàtiques, icones i gràfics estadístics. Pel que fa alsdinàmics, es poden llegir dades de bases de dades Oracle o fulls de càlcul de Google i representar‐los en imatgesdinàmiques.

Gapminder: És un programa gratuït Adobe Air (multiplataforma). Permet crear visualitzacions permultipropòsit. A més, compta amb una base de dades.

Many Eyes: Permet carregar les pròpies dades o dades ja emmagatzemades en aquest web. Les visualitzacionsd’aquestes estan molt ben dissenyades i tenen una aparençaforça professional.


6. Many Eyes Visualitzar informació


Many EyesObjectius

• Registrar‐se en el lloc

• Crear un conjunt de dades

• Fer un núvol de paraules

• Incrustar la visualització en altres llocs


Many EyesRegistrar‐se

Fem clic a “Register”



Escrivim la nostraadreça de correu

electrònic

Escrivim el codi en el camp de text

Finalment, fem clic a “Send Email” per

rebre la confirmació

Nota

Ens arribarà un correuelectrònic de confirmacióque no sempre el rebrem en la nostra safata d'entrada. Per tant, cal comprovar, en cas de dubte, la carpeta de correuelectrònic no desitjat.

Nota

Ens arribarà un correuelectrònic de confirmacióque no sempre el rebrem en la nostra safata d'entrada. Per tant, cal comprovar, en cas de dubte, la carpeta de correuelectrònic no desitjat.



Nota

Many Eyes vol que la nostra contrasenya tingui lletres i nombres.

Nota

Many Eyes vol que la nostra contrasenya tingui lletres i nombres.

Fem clic en l’opció “Yes, I agree” per acceptar les condicions del servei

Emplenem el nom d'usuari i la contrasenyaFinalment fem clic a

“Register”


Many EyesCrear un conjunt de dades

Omplir nom d 'usuari i la contrasenya

1. Anem a “Create a visualization”.

2. Posteriorment podemescollir entre pujar la nostra informació o amb la informació ja creada.

En el nostre cas escollirem “Upload your owndata“ per introduir la informació que desitgem.

1. Anem a “Create a visualization”.

2. Posteriorment podemescollir entre pujar la nostra informació o amb la informació ja creada.

En el nostre cas escollirem “Upload your owndata“ per introduir la informació que desitgem.



1. Escollim text lliure o taula de dades.

2. Enganxem les dades a “Paste data”.

3. Informem sobre l’origen de les dades

• Títol• Font• URL• Etiquetes• Descripció

1. Escollim text lliure o taula de dades.

2. Enganxem les dades a “Paste data”.

3. Informem sobre l’origen de les dades

• Títol• Font• URL• Etiquetes• Descripció



Nota

Així és com quedaria la informació una vegada introduïda. Hem de tenir present que la informacióuna vegada introduïda éspública.

Posteriorment fem clic a “Visualize”.

Nota

Així és com quedaria la informació una vegada introduïda. Hem de tenir present que la informacióuna vegada introduïda éspública.

Posteriorment fem clic a “Visualize”.


Many EyesVisualitzar la informació

Després d’introduir les dades, hem de decidir com les visualitzem, en funcióde l’origen d’aquestes,s’ha d’escollir:

•Analitzar text•Comparar valors•Cercar relacions•Cercar parts•Traçar pujades / baixades

Després d’introduir les dades, hem de decidir com les visualitzem, en funcióde l’origen d’aquestes,s’ha d’escollir:

•Analitzar text•Comparar valors•Cercar relacions•Cercar parts•Traçar pujades / baixades



En el cas de l’exemple s’haseleccionat “word tree”amb el text introduït.

Clarament ajuda a cercar la informació relacionada amb la paraula clau introduïda.

Finalment li donem un títol a la informació que volem visualitzar.

En el cas de l’exemple s’haseleccionat “word tree”amb el text introduït.

Clarament ajuda a cercar la informació relacionada amb la paraula clau introduïda.

Finalment li donem un títol a la informació que volem visualitzar.



Una vegada enregistrat, disposem de força opcionssocials per compartir aquesta informació a la xarxa.

Una vegada enregistrat, disposem de força opcionssocials per compartir aquesta informació a la xarxa.



Diverses opcions socials per compartir aquesta informació a la xarxa.

Cal destacar

•Imatge estàtica

•Visualització en viu i dinàmica.

Diverses opcions socials per compartir aquesta informació a la xarxa.

Cal destacar

•Imatge estàtica

•Visualització en viu i dinàmica.


Webs de referència en la visualització d’informació

•http://www.informationisbeautiful.net/

•http://www.visualopolis.com/

•http://www.visualcomplexity.com

•http://www.coolinfographics.com/

•http://infographicworld.com/

•http://dailyinfographic.com/

•http://www.infographicsshowcase.com/

•http://www.infographiclabs.com/

Vídeo recomanat

•http://www.youtube.com/watch?v=_l‐Dby7‐JG4


Contacte

www.ignasialcalde.es

[email protected]

@ignasialcalde

curs d'informació visual (infografies). ignasi alcalde

Education

infografia ivisualitzaci www

infografia ivisualitzaci www

infografia ivisualitzaci www

en general

ignasialcalde

quisc

http

www