Org i visual

L’organització del contingutsMariona Grané. Laboratori de Mitjans Interactius. @CAVUB

la informació necessita disseny ?

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

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


«el contingut mai està separat de la forma» (Dondis, 1976)

«la informació necessita disseny» (Metadesign)


Sistemes d'organització de la informació


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.


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.


Fragmentació


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.


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


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.


Modularitat


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.


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.


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ó.

La modularització cal que es faci tant en el contingut i també en la forma dels continguts en pantalla.


Organització de la informació per capes


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ó.


É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.

http://www.elmundo.es/graficos/multimedia/




Revelació progressiva


Revelació progressiva: Organització de la informació que mostra únicament la informació necessària en cada cas.


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.


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.


Piràmide invertida


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.


Consisteix en

una introducció (informació decisiva)

i un cos (informació elaborativa)


Superioritat de les imatges


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ó.


Les imatges i les paraules conjuntes es recorden millor que les paraules i les imatges per separat.

L'efecte és més potent quan les imatges representen fets comuns que quan són una representació de conceptes abstractes.


http://www.adesgana.com/blog/1184_macerando-una-gran-idea/




Si l'organització visual està construïda segons una relació entre les imatges i els textos, la força del contingut serà superior.


A l’actual web audiovisual ... la imatge és el contingut principal


moma.org

http://www.elmundo.es/elmundo/2009/graficos/sep/s4/g20.html


http://www.moma.org/interactives/destination/

http://www.moma.org/interactives/destination/


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ó


Imatge, contingut visual, que pot ser fixa, animada o videogràfica.

edu365.cat



http://www.edu365.cat/eso/muds/ciencies/minut_de_ciencia/index.htm?lang=ca

http://www.edu365.cat/eso/muds/ciencies/minut_de_ciencia/index.htm?lang=ca


Per a Tufte la superioritat de la imatge en el contingut és el que ell anomena “Beautiful Evidence”.

http://www.edwardtufte.com/tufte/

http://www.edwardtufte.com/tufte/


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.


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



http://www.joelertola.com

http://www.joelertola.com


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.


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.


Les infografies de diaris i revistes han esdevingut animades amb els diaris digitals i els entorns web multimèdia i interactius.


evidenciar dades visualment


evidenciar dades visualment mostrant i/o destacant només allò essencial


La infografia adopta moltes formes i sobretot diferents objectius.


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.


gridplane.com

http://aaa

http://aaa

http://www.gridplane.com/html/projects/data-vis/

http://www.gridplane.com/html/projects/data-vis/


infovis.net

http://www.infovis.net/





visualcomplexity.com

http://www.visualcomplexity.com/vc/





infosthetics.com

http://www.infosthetics.com/





vi.sualize.us

http://vi.sualize.us/dartlab/data/





a year in irak, the new york times

http://www.nytimes.com/2008/01/06/opinion/06chart.html?_r=3&oref=slogin&oref=slogin





feltron.com

http://feltron.com/

http://feltron.com/

http://feltron.com/

http://feltron.com/


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.


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.

Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.es

http://www.lmi.ub.es

http://www.lmi.ub.es

Org i visual

Education

Transcript of Org i visual