org i visual
TRANSCRIPT
![Page 1: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/1.jpg)
L’organització del contingutsMariona Grané. Laboratori de Mitjans Interactius. @CAVUB
![Page 2: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/2.jpg)
la informació necessita disseny ?
![Page 3: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/3.jpg)
principis de disseny interactiu
![Page 4: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/4.jpg)
principis de disseny interactiu
Organització de continguts
Sistemes d'organització de la informacióFragmentacióModularitatOrganització de la informació per capesRevelació progressivaPiràmide invertidaSuperioritat de les imatges
![Page 5: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/5.jpg)
organització de continguts
Quan parlem de continguts d'un entorn on-line ens referim a tots els elements que es conjuguen per aportar informació-interacció als usuaris.
TítolsSubtítolsTextos descriptiusFotografiesIl·lustracionsSímbolsIconesInfografiesAnimacionsBotons i hotspotsMenúsFinestres flotantsLinksVídeos
Audio músicaAudio efectesAudio veuBanners (publicitat, avisos, ...)Widgets (embed elements)EstilsFormularisInteraccions programadesBase de dades
![Page 6: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/6.jpg)
organització de continguts
«el contingut mai està separat de la forma» (Dondis, 1976)
«la informació necessita disseny» (Metadesign)
![Page 7: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/7.jpg)
organització de continguts
Sistemes d'organització de la informació
![Page 8: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/8.jpg)
organització de continguts
Sistemes d'organització de la informació: Sistemes utilitzats per catalogar i organitzar la informació.
Hi ha, segons Wurman (2000), cinc sistemes claus d'organització de la informació:
· categoria, per similitud o relació temàtica dels ítems a organitzar· temps, ordre cronològic dels ítems· ubicació, ordre geogràfic· ordre alfabètic, de la a a la z· jerarquia, per ordre de magnitud dels ítems a organitzar
Hi han més sistemes d’organització, per exemple per tipus de tasques a realitzar.
![Page 9: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/9.jpg)
organització de continguts
![Page 10: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/10.jpg)
![Page 11: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/11.jpg)
![Page 12: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/12.jpg)
organització de continguts
Actualment la gran quantitat i diversitat d’informació a la xarxa ha implicat nous sistemes organitzatius, per exemple a partir de folcksonomies,
o directament funcionant a partir de sistemes de cerca per paraules clau, que obvien els sistemes de categorització i ordenació en la mostra dels continguts.
![Page 13: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/13.jpg)
organització de continguts
Fragmentació
![Page 14: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/14.jpg)
organització de continguts
Fragmentació: Combinació d'unitats d'informació en un nombre concret de fragments de manera que la informació resulti més fàcil de processar.
Un fragment és una unitat d'informació guardada en la memòria a curt termini.
![Page 15: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/15.jpg)
organització de continguts
Si s'utilitza la tècnica de fragmentació davant un contingut es permet establir límits a la memòria en distribuir la informació en un nombre reduït d'unitats.
Segons els estudis de Miller el nombre màxim de fragments informatius que pot processar la memòria estàndard amb normalitat és de set més o menys dos.
759
![Page 16: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/16.jpg)
organització de continguts
La tècnica de la fragmentació ajuda a simplificar informacions i mostra alternatives en la presentació de la informació en pantalla que ajudi als usuaris a situar-se, navegar entre les dades i tenir un punt de vista general abans d'aprofundir sobre els conceptes que s'han de treballar.
És un exemple rellevant de com el disseny de la informació assegura un accés optimitzat a les dades.
![Page 17: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/17.jpg)
![Page 18: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/18.jpg)
![Page 19: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/19.jpg)
![Page 20: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/20.jpg)
organització de continguts
Modularitat
![Page 21: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/21.jpg)
organització de continguts
Modularitat: Estratègia per controlar la complexitat d'un sistema que consisteix en dividir els grans sistemes en molts sistemes de menor mida de complexitat.
![Page 22: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/22.jpg)
organització de continguts
En la fragmentació, davant el fet de tenir múltiples opcions, aquestes s'estructuraven en blocs, i en la modularització un bloc complex es divideix en blocs més petits i comprensibles.
![Page 23: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/23.jpg)
organització de continguts
La modularització esdevé una eina per gestionar la producció, mantenir actualitzada la informació, assegurar la reutilització de continguts, etc., i a nivell estructural permet a l'usuari centrar l'atenció en un contingut acotat, de poca magnitud i gran concreció.
![Page 24: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/24.jpg)
La modularització cal que es faci tant en el contingut i també en la forma dels continguts en pantalla.
![Page 25: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/25.jpg)
![Page 26: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/26.jpg)
organització de continguts
![Page 27: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/27.jpg)
![Page 28: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/28.jpg)
organització de continguts
Organització de la informació per capes
![Page 29: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/29.jpg)
organització de continguts
Organització de la informació per capes: Organització de la informació en grups relacionats per controlar la complexitat i reforçar les relacions informatives.
Proposa agrupar la informació en grups relacionats i només després de mostrar en cada cas un grup d'informació, reduint la complexitat de la informació.
![Page 30: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/30.jpg)
organització de continguts
És una de les propostes de Tufte (1990), i s'aplica a continguts de visualització de dades (mapes, gràfics, cartes, infografies...) especialment, encara que es pot pensar en la seva aplicació en elements textuals o informatius globals.
![Page 31: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/31.jpg)
organització de continguts
![Page 32: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/32.jpg)
http://www.elmundo.es/graficos/multimedia/
![Page 33: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/33.jpg)
![Page 34: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/34.jpg)
organització de continguts
Revelació progressiva
![Page 35: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/35.jpg)
organització de continguts
Revelació progressiva: Organització de la informació que mostra únicament la informació necessària en cada cas.
![Page 36: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/36.jpg)
organització de continguts
La revelació progressiva manté l'espai disponible en pantalla, net i organitzat, això fa que es controli la complexitat d'un sistema o procés, i alhora assegura una atenció personalitzada a aquells usuaris que només necessiten una opció i permet als més avançats desplegar altres opcions.
![Page 37: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/37.jpg)
organització de continguts
L'ús de la revelació progressiva en informacions (visuals o textuals) funciona bé en processos que cal regular o ajudar a assumir, i que estan lligats a la formació i l'aprenentatge.
![Page 38: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/38.jpg)
organització de continguts
![Page 39: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/39.jpg)
organització de continguts
![Page 40: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/40.jpg)
organització de continguts
Piràmide invertida
![Page 41: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/41.jpg)
organització de continguts
Piràmide invertida: Presentació de la informació en ordre descendent d'importància.
La idea de la piràmide invertida se centra en la metàfora de la piràmide per expressar la rellevància o la importància de diferents elements en un sistema, de manera que la base conté la informació més ample i també més rellevant i la punta, la informació menys important.
![Page 42: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/42.jpg)
organització de continguts
Consisteix en
una introducció (informació decisiva)
i un cos (informació elaborativa)
![Page 43: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/43.jpg)
organització de continguts
![Page 44: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/44.jpg)
![Page 45: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/45.jpg)
organització de continguts
Superioritat de les imatges
![Page 46: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/46.jpg)
organització de continguts
Superioritat de les imatges: Les imatges es recorden millor que les paraules.
L’impacte de les imatges s’utilitza especialment en publicitat i ens ajuda aprendre a utilitzar la seva força en la comunicació.
![Page 47: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/47.jpg)
organització de continguts
Les imatges i les paraules conjuntes es recorden millor que les paraules i les imatges per separat.
![Page 48: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/48.jpg)
L'efecte és més potent quan les imatges representen fets comuns que quan són una representació de conceptes abstractes.
organització de continguts
http://www.adesgana.com/blog/1184_macerando-una-gran-idea/
![Page 49: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/49.jpg)
![Page 50: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/50.jpg)
organització de continguts
Si l'organització visual està construïda segons una relació entre les imatges i els textos, la força del contingut serà superior.
![Page 51: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/51.jpg)
organització de continguts
A l’actual web audiovisual ... la imatge és el contingut principal
![Page 52: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/52.jpg)
organització de continguts
moma.org
![Page 53: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/53.jpg)
organització de continguts
L'efecte de la superioritat de la imatge s'utilitza específicament per mostrar processos, instruccions, fets, situacions, etc.
Implica directament el procés d'adquisició de coneixement a partir de dues qüestions clau: · la comprensió · i la memorització
![Page 54: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/54.jpg)
organització de continguts
Imatge, contingut visual, que pot ser fixa, animada o videogràfica.
edu365.cat
![Page 55: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/55.jpg)
organització de continguts
Per a Tufte la superioritat de la imatge en el contingut és el que ell anomena “Beautiful Evidence”.
![Page 56: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/56.jpg)
organització de continguts
Per a Card, Mackinlay, i Shneiderman (1999), la visualització de la informació és una representació compacta, és el contingut en si.
Les imatges són informacions evidenciades visualment.
![Page 57: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/57.jpg)
organització de continguts
La infografia, la visualització de dades i d’informacions a partir d’imatges figuratives narrades, estructurades, i organitzades, ... permet la comprensió de processos i fenòmens complexos.
joelertola.cat
![Page 58: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/58.jpg)
organització de continguts
Carta figurativa de Charles Joseph Minard, que representa la pèrdua de l'exèrcit francès el 1812 a Rússia, des que creuen la frontera Russa fins que tornen a Polònia.
Només dues dades: la línia que representa l'exèrcit francès (marró a l'anada, i negre a la tornada), i la temperatura.
![Page 59: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/59.jpg)
organització de continguts
Un altre dels exemples més rellevants de la història sobre com la imatge esdevé una informació clau:
El 1854, el còlera a Anglaterra matava centenars de milers de persones, especialment a Londres. Un 10% de la població que contreia el còlera moria en menys de 48 hores. El doctor Jonh Snow va descobrir que el còlera era causat pel consum d'aigües contaminades amb materials fecals.
I ho va descobrir quan va fer un mapa mostrant els punts on hi havia més casos de còlera, perquè es va evidenciar que era on hi havia aigües fecals.
![Page 60: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/60.jpg)
organització de continguts
Les infografies de diaris i revistes han esdevingut animades amb els diaris digitals i els entorns web multimèdia i interactius.
![Page 61: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/61.jpg)
organització de continguts
evidenciar dades visualment
![Page 62: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/62.jpg)
organització de continguts
evidenciar dades visualment mostrant i/o destacant només allò essencial
![Page 63: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/63.jpg)
organització de continguts
La infografia adopta moltes formes i sobretot diferents objectius.
![Page 64: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/64.jpg)
organització de continguts
Un dels camins més rellevants de la infografia és la visualització de dades en mapes o esquemes: Data Visualization.
És un dels camps de la comunicació v isual d’informacions més treballat en els darers a ny s i e x i s t e i x e n exemples increibles.
![Page 65: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/65.jpg)
organització de continguts
gridplane.com
![Page 66: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/66.jpg)
organització de continguts
infovis.net
![Page 67: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/67.jpg)
organització de continguts
visualcomplexity.com
![Page 68: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/68.jpg)
organització de continguts
infosthetics.com
![Page 69: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/69.jpg)
organització de continguts
vi.sualize.us
![Page 70: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/70.jpg)
organització de continguts
a year in irak, the new york times
![Page 71: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/71.jpg)
organització de continguts
feltron.com
![Page 72: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/72.jpg)
organització de continguts
Sistemes d'organització de la informació: Sistemes utilitzats per catalogar i organitzar la informació.
Fragmentació: Combinació d'unitats d'informació en un nombre concret de fragments de manera que la informació resulti més fàcil de processar.
Modularitat: Estratègia per controlar la complexitat d'un sistema que consisteix en dividir els grans sistemes en molts sistemes de menor mida de complexitat.
Organització de la informació per capes: Organització de la informació en grups relacionats per controlar la complexitat i reforçar les relacions informatives.
Revelació progressiva: Organització de la informació que mostra únicament la informació necessària en cada cas.
Piràmide invertida: Presentació de la informació en ordre descendent d'importància.
Superioritat de les imatges: Les imatges es recorden millor que les paraules.
![Page 73: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/73.jpg)
principis de disseny interactiu
LEER NO MATA
Cairo, A (2008). Infografia 2.0. Visualización interactiva de información en prensa. Madrid: Alamut.
Card, S. K.; Mackinlay, J.; Shneiderman, B. (1999), Readings in Information Visualization: Using Vision to Think (Interactive Technologies). San Diego: Academic Press.
Tufte, E. (1990), Envisioning Information. Chesire: Graphic Press.
Villafañé, J. (1985), Introducción a la teoría de la imagen. Barcelona: Pirámide.
Wurman, R. S. (2000), Information Anxiety 2. Nova York: New Riders Publishing.
![Page 74: Org i visual](https://reader030.vdocuments.co/reader030/viewer/2022020306/559080151a28abd3518b46e6/html5/thumbnails/74.jpg)
Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.es