1. L’organització del continguts
Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB

2. la informació necessita disseny ?

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.

9. organització de continguts

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.

13. organització de continguts
Fragmentació

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.

20. organització de continguts
Modularitat

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.

26. organització de continguts

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.

31. organització de continguts

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

34. organització de continguts
Revelació progressiva

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.

38. organització de continguts

39. organització de continguts

40. organització de continguts
Piràmide invertida

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)

43. organització de continguts

45. organització de continguts
Superioritat de les imatges

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/

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

52. organització de continguts
moma.org

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.

61. organització de continguts
evidenciar dades visualment

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.

65. organització de continguts
gridplane.com

66. organització de continguts
infovis.net

67. organització de continguts
visualcomplexity.com

68. organització de continguts
infosthetics.com

69. organització de continguts
vi.sualize.us

70. organització de continguts
a year in irak, the new york times

71. organització de continguts
feltron.com

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