SlideShare a Scribd company logo
1 of 74
Download to read offline
L’organització del continguts
Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB
la informació necessita disseny ?
principis de disseny interactiu
principis de disseny interactiu
Organització de continguts
Sistemes d'organització de la informació
Fragmentació
Modularitat
Organització de la informació per capes
Revelació progressiva
Piràmide invertida
Superioritat 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ítols
Subtítols
Textos descriptius
Fotografies
Il·lustracions
Símbols
Icones
Infografies
Animacions
Botons i hotspots
Menús
Finestres flotants
Links
Vídeos
Audio música
Audio efectes
Audio veu
Banners (publicitat, avisos, ...)
Widgets (embed elements)
Estils
Formularis
Interaccions programades
Base de dades
organització de continguts
«el contingut mai està separat de la forma» (Dondis, 1976)
«la informació necessita disseny» (Metadesign)
organització de continguts
Sistemes d'organització de la informació
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.
organització de continguts
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.
organització de continguts
Fragmentació
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.
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.
75
9
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.
organització de continguts
Modularitat
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.
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.
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ó.
La modularització cal que es faci tant en
el contingut i també en la forma dels
continguts en pantalla.
organització de continguts
organització de continguts
Organització de la informació per capes
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ó.
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.
organització de continguts
http://www.elmundo.es/graficos/multimedia/
organització de continguts
Revelació progressiva
organització de continguts
Revelació progressiva: Organització de la informació que
mostra únicament la informació necessària en cada cas.
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.
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.
organització de continguts
organització de continguts
organització de continguts
Piràmide invertida
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.
organització de continguts
Consisteix en
una introducció (informació decisiva)
i un cos (informació elaborativa)
organització de continguts
organització de continguts
Superioritat de les imatges
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ó.
organització de continguts
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.
organització de continguts
http://www.adesgana.com/blog/1184_macerando-una-gran-idea/
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.
organització de continguts
A l’actual web audiovisual ... la imatge és el contingut principal
organització de continguts
moma.org
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ó
organització de continguts
Imatge, contingut visual, que pot ser fixa, animada o videogràfica.
edu365.cat
organització de continguts
Per a Tufte la superioritat de la imatge en el contingut és el que ell anomena “Beautiful
Evidence”.
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.
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
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.
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.
organització de continguts
Les infografies de diaris i revistes han esdevingut animades amb els diaris digitals i els
entorns web multimèdia i interactius.
organització de continguts
evidenciar dades visualment
organització de continguts
evidenciar dades visualment mostrant i/o destacant només allò essencial
organització de continguts
La infografia adopta moltes formes i sobretot diferents objectius.
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ó visual
d’informacions més
treballat en els darers
a n y s i e x i s t e i x e n
exemples increibles.
organització de continguts
gridplane.com
organització de continguts
infovis.net
organització de continguts
visualcomplexity.com
organització de continguts
infosthetics.com
organització de continguts
vi.sualize.us
organització de continguts
a year in irak, the new york times
organització de continguts
feltron.com
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.
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.
Mariona Grané.
Laboratori de Mitjans Interactius www.lmi.ub.es

More Related Content

What's hot

Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Paquita Ribas
 
Narrativa interactiva - PS - Lídia Bria
Narrativa interactiva - PS - Lídia BriaNarrativa interactiva - PS - Lídia Bria
Narrativa interactiva - PS - Lídia BriaLidia Bria
 
Arquitectura de la informacio - Resum
Arquitectura de la informacio - ResumArquitectura de la informacio - Resum
Arquitectura de la informacio - ResumPaquita Ribas
 
Principis dels nous mitjans
Principis dels nous mitjansPrincipis dels nous mitjans
Principis dels nous mitjansPaquita Ribas
 
Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas
Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita RibasDisseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas
Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita RibasPaquita Ribas
 
Disseny Comunicatiu: Interficie
Disseny Comunicatiu: InterficieDisseny Comunicatiu: Interficie
Disseny Comunicatiu: InterficieiMona06
 
AliagaBonjochSanti_Pac1_Fem
AliagaBonjochSanti_Pac1_FemAliagaBonjochSanti_Pac1_Fem
AliagaBonjochSanti_Pac1_Femsaliagab
 
Ev disseny
Ev dissenyEv disseny
Ev dissenyiMona06
 
PAC1 - Què són els nous mitjans
PAC1 - Què són els nous mitjansPAC1 - Què són els nous mitjans
PAC1 - Què són els nous mitjansguest434f4aa
 
Els Nous Mitjans
Els Nous MitjansEls Nous Mitjans
Els Nous MitjansJordi Gomez
 
Arquitectura de la Información - Pac01 - Lidia Bria
Arquitectura de la Información - Pac01 -  Lidia BriaArquitectura de la Información - Pac01 -  Lidia Bria
Arquitectura de la Información - Pac01 - Lidia BriaLidia Bria
 
Que són els Nous Mitjans?
Que són els Nous Mitjans?Que són els Nous Mitjans?
Que són els Nous Mitjans?dburnau
 

What's hot (12)

Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7
 
Narrativa interactiva - PS - Lídia Bria
Narrativa interactiva - PS - Lídia BriaNarrativa interactiva - PS - Lídia Bria
Narrativa interactiva - PS - Lídia Bria
 
Arquitectura de la informacio - Resum
Arquitectura de la informacio - ResumArquitectura de la informacio - Resum
Arquitectura de la informacio - Resum
 
Principis dels nous mitjans
Principis dels nous mitjansPrincipis dels nous mitjans
Principis dels nous mitjans
 
Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas
Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita RibasDisseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas
Disseny d'Interfícies Multimèdia - Resum - Multimedia (UOC) - Paquita Ribas
 
Disseny Comunicatiu: Interficie
Disseny Comunicatiu: InterficieDisseny Comunicatiu: Interficie
Disseny Comunicatiu: Interficie
 
AliagaBonjochSanti_Pac1_Fem
AliagaBonjochSanti_Pac1_FemAliagaBonjochSanti_Pac1_Fem
AliagaBonjochSanti_Pac1_Fem
 
Ev disseny
Ev dissenyEv disseny
Ev disseny
 
PAC1 - Què són els nous mitjans
PAC1 - Què són els nous mitjansPAC1 - Què són els nous mitjans
PAC1 - Què són els nous mitjans
 
Els Nous Mitjans
Els Nous MitjansEls Nous Mitjans
Els Nous Mitjans
 
Arquitectura de la Información - Pac01 - Lidia Bria
Arquitectura de la Información - Pac01 -  Lidia BriaArquitectura de la Información - Pac01 -  Lidia Bria
Arquitectura de la Información - Pac01 - Lidia Bria
 
Que són els Nous Mitjans?
Que són els Nous Mitjans?Que són els Nous Mitjans?
Que són els Nous Mitjans?
 

Viewers also liked

Distribució visual
Distribució visualDistribució visual
Distribució visualiMona06
 
Llegibilitat
LlegibilitatLlegibilitat
LlegibilitatiMona06
 
Evolucio interface
Evolucio interfaceEvolucio interface
Evolucio interfaceiMona06
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivoiMona06
 
pla-pres
pla-prespla-pres
pla-presiMona06
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiuiMona06
 
Los diseños del diseño interactivo
Los diseños del diseño interactivoLos diseños del diseño interactivo
Los diseños del diseño interactivoiMona06
 

Viewers also liked (7)

Distribució visual
Distribució visualDistribució visual
Distribució visual
 
Llegibilitat
LlegibilitatLlegibilitat
Llegibilitat
 
Evolucio interface
Evolucio interfaceEvolucio interface
Evolucio interface
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivo
 
pla-pres
pla-prespla-pres
pla-pres
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiu
 
Los diseños del diseño interactivo
Los diseños del diseño interactivoLos diseños del diseño interactivo
Los diseños del diseño interactivo
 

Similar to Org i visual

PAC1 - Els nous mitjans
PAC1 - Els nous mitjansPAC1 - Els nous mitjans
PAC1 - Els nous mitjansguest434f4aa
 
Pac1 Pau Ferri Aracil Fonaments i evolució de la multimèdia
Pac1 Pau Ferri Aracil Fonaments i evolució de la multimèdiaPac1 Pau Ferri Aracil Fonaments i evolució de la multimèdia
Pac1 Pau Ferri Aracil Fonaments i evolució de la multimèdiapferriuoc
 
Què son els nous mitjans
Què son els nous mitjansQuè son els nous mitjans
Què son els nous mitjansxusro
 
disseny_entorn
disseny_entorndisseny_entorn
disseny_entorniMona06
 
Multimedia V Magisteri
Multimedia V MagisteriMultimedia V Magisteri
Multimedia V Magisteripalsa
 
Els Nous Mitjans de Comunicació
Els Nous Mitjans de ComunicacióEls Nous Mitjans de Comunicació
Els Nous Mitjans de ComunicacióAntoni Bolet Ruiz
 
Copia de blogger
Copia de bloggerCopia de blogger
Copia de bloggerLuna luna
 
Principis dels nous medis de comunicació
Principis dels nous medis de comunicacióPrincipis dels nous medis de comunicació
Principis dels nous medis de comunicaciópaulafw
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?Esteban
 
Activitat2 cloud presentació
Activitat2 cloud presentacióActivitat2 cloud presentació
Activitat2 cloud presentaciócmasb
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?ainaruiviejo
 
Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...
Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...
Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...Jose Antonio Olvera
 
Nous mitjans segons Lev Manovich
Nous mitjans segons Lev ManovichNous mitjans segons Lev Manovich
Nous mitjans segons Lev ManovichDissenyador Web
 

Similar to Org i visual (20)

PAC1 - Els nous mitjans
PAC1 - Els nous mitjansPAC1 - Els nous mitjans
PAC1 - Els nous mitjans
 
Pac1 Pau Ferri Aracil Fonaments i evolució de la multimèdia
Pac1 Pau Ferri Aracil Fonaments i evolució de la multimèdiaPac1 Pau Ferri Aracil Fonaments i evolució de la multimèdia
Pac1 Pau Ferri Aracil Fonaments i evolució de la multimèdia
 
Què son els nous mitjans
Què son els nous mitjansQuè son els nous mitjans
Què son els nous mitjans
 
disseny_entorn
disseny_entorndisseny_entorn
disseny_entorn
 
Multimedia V Magisteri
Multimedia V MagisteriMultimedia V Magisteri
Multimedia V Magisteri
 
Pac1 - FEM
Pac1 - FEMPac1 - FEM
Pac1 - FEM
 
Eines20
Eines20Eines20
Eines20
 
Els Nous Mitjans de Comunicació
Els Nous Mitjans de ComunicacióEls Nous Mitjans de Comunicació
Els Nous Mitjans de Comunicació
 
Copia de blogger
Copia de bloggerCopia de blogger
Copia de blogger
 
Principis dels nous medis de comunicació
Principis dels nous medis de comunicacióPrincipis dels nous medis de comunicació
Principis dels nous medis de comunicació
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?
 
Història de les bases de dades
Història de les bases de dadesHistòria de les bases de dades
Història de les bases de dades
 
Activitat2 cloud presentació
Activitat2 cloud presentacióActivitat2 cloud presentació
Activitat2 cloud presentació
 
Blogger
BloggerBlogger
Blogger
 
Blog grup 2
Blog grup 2Blog grup 2
Blog grup 2
 
Web20
Web20Web20
Web20
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?
 
Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...
Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...
Albert Bres i Jose Antonio Olvera, Preservació del patrimoni digital personal...
 
Nous mitjans segons Lev Manovich
Nous mitjans segons Lev ManovichNous mitjans segons Lev Manovich
Nous mitjans segons Lev Manovich
 
Museumplus
MuseumplusMuseumplus
Museumplus
 

Recently uploaded

ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfErnest Lluch
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,Lasilviatecno
 
Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musicalalba444773
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfsilvialopezle
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxCRIS650557
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATLasilviatecno
 

Recently uploaded (8)

ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
 
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdfHISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
 
itcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldaduraitcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldadura
 
Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musical
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdf
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
 

Org i visual

  • 1. L’organització del continguts Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB
  • 3. principis de disseny interactiu
  • 4. principis de disseny interactiu Organització de continguts Sistemes d'organització de la informació Fragmentació Modularitat Organització de la informació per capes Revelació progressiva Piràmide invertida Superioritat de les imatges
  • 5. 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ítols Subtítols Textos descriptius Fotografies Il·lustracions Símbols Icones Infografies Animacions Botons i hotspots Menús Finestres flotants Links Vídeos Audio música Audio efectes Audio veu Banners (publicitat, avisos, ...) Widgets (embed elements) Estils Formularis Interaccions programades Base de dades
  • 6. organització de continguts «el contingut mai està separat de la forma» (Dondis, 1976) «la informació necessita disseny» (Metadesign)
  • 7. organització de continguts Sistemes d'organització de la informació
  • 8. 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.
  • 10.
  • 11.
  • 12. 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.
  • 14. 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.
  • 15. 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. 75 9
  • 16. 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.
  • 17.
  • 18.
  • 19.
  • 21. 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.
  • 22. 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.
  • 23. 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ó.
  • 24. La modularització cal que es faci tant en el contingut i també en la forma dels continguts en pantalla.
  • 25.
  • 27.
  • 28. organització de continguts Organització de la informació per capes
  • 29. 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ó.
  • 30. 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.
  • 33.
  • 35. organització de continguts Revelació progressiva: Organització de la informació que mostra únicament la informació necessària en cada cas.
  • 36. 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.
  • 37. 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.
  • 41. 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.
  • 42. organització de continguts Consisteix en una introducció (informació decisiva) i un cos (informació elaborativa)
  • 44.
  • 46. 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ó.
  • 47. organització de continguts Les imatges i les paraules conjuntes es recorden millor que les paraules i les imatges per separat.
  • 48. 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/
  • 49.
  • 50. 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.
  • 51. organització de continguts A l’actual web audiovisual ... la imatge és el contingut principal
  • 53. 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ó
  • 54. organització de continguts Imatge, contingut visual, que pot ser fixa, animada o videogràfica. edu365.cat
  • 55. organització de continguts Per a Tufte la superioritat de la imatge en el contingut és el que ell anomena “Beautiful Evidence”.
  • 56. 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.
  • 57. 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
  • 58. 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.
  • 59. 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.
  • 60. organització de continguts Les infografies de diaris i revistes han esdevingut animades amb els diaris digitals i els entorns web multimèdia i interactius.
  • 62. organització de continguts evidenciar dades visualment mostrant i/o destacant només allò essencial
  • 63. organització de continguts La infografia adopta moltes formes i sobretot diferents objectius.
  • 64. 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ó visual d’informacions més treballat en els darers a n y s i e x i s t e i x e n exemples increibles.
  • 70. organització de continguts a year in irak, the new york times
  • 72. 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.
  • 73. 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.
  • 74. Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.es