“percepción visual humana y usabilidad. cómo realizar diseños periodísticos y visualizaciones...

30
“Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles” José Alberto García Guijarro (ITRS Group)

Upload: maria-sanchez-gonzalez-cibermarikiya

Post on 21-Jan-2018

179 views

Category:

Design


0 download

TRANSCRIPT

Page 1: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

“Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”José Alberto García Guijarro (ITRS Group)

Page 2: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo RobertJacobson,MITPress, 1999

El arte y la ciencia de preparar información para que pueda ser usada por el ser humano con eficacia y eficiencia.

Diseñador de Información

Page 3: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

¿Dónde?Ten en cuenta el contexto de uso.

@yllo

Page 4: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

Formato FísicoDedica más tiempo y se recrea en los detalles

@yllo eltelegrafo.com.ec

Page 5: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

Formato digitalEn escritorio se explora con todo detalle.

@yllo evolutionoftheweb.com

Page 6: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

Formato digitalEn Móvil se explora en pequeñas dosis de información.

@yllo www.goldmansachs.com/our-thinking/pages/millennials/

Page 7: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

¿Cómo?Conoce cómo interpreta una persona una imagen.

@yllo

Page 8: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

Leyes de la GestaltPercepción visual humana

@yllo

Page 9: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Page 10: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Page 11: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Page 12: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Page 13: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

Escaneo de imagenFamiliaridad

@yllo Modelo depercepcióndeNeisser

Page 14: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo Modelo depercepcióndeNeisser

Page 15: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo Modelo depercepcióndeNeisser

Page 16: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo Modelo depercepcióndeNeisser

Page 17: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

Interpretación racionalExperiencia pasada y sesgos

@yllo

Page 18: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Page 19: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

RecomendacionesEl mejor gráfico para tu mensaje

@yllo

Ventas

1ertrim. 2ºtrim.

3ertrim. 4ºtrim.0

2

4

6

8

10

1ertrim. 2ºtrim. 3ertrim. 4ºtrim.

Ventas

Page 20: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

1ertrim.

2ºtrim.

3ertrim.

4ºtrim.

Ventas

0

5

10

1ertrim.

2ºtrim.

3ertrim.

4ºtrim.

Ventas

Ventas

Ventas

1ertrim. 2ºtrim.

3ertrim. 4ºtrim.

0

5

10

1ertrim.

2ºtrim. 3ertrim.

4ºtrim.

Ventas

Page 21: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

0

2

4

6

8

10

1ertrim. 2ºtrim. 3ertrim. 4ºtrim.

Ventas

Cantidad vs progresión

0

2

4

6

8

10

1ertrim. 2ºtrim. 3ertrim. 4ºtrim.

Ventas

Page 22: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Ratio datos/tintaProporcióndetintautilizadarespectoalvolumendedatosrepresentado.

8,2

3,2 1,4 1,20

2

4

6

8

10

1ertrim. 2ºtrim. 3ertrim. 4ºtrim.

Ventas8,2

3,21,4 1,2

0

2

4

6

8

10

1ertrim. 2ºtrim. 3ertrim. 4ºtrim.

Ventas

Page 23: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Nohagasalusuariopensar.

-500,00€

- €

500,00€

1.000,00€

1.500,00€

2.000,00€

2.500,00€

3.000,00€

Ahorros

Ingresos

Gastos

Ahorro

Agosto Septiembre Octubre Noviembre Diciembre

Page 24: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Nohagasalusuariopensar.

-1.000,00€

-500,00€

- €

500,00€

1.000,00€

1.500,00€

Ahorros

Agosto Septiembre Octubre Noviembre Diciembre

Page 25: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@yllo

Nohagasalusuariopensar.

-€1.000,00

-€500,00

€-

€500,00

€1.000,00

€1.500,00

Ahorros

Agosto Septiembre Octubre Noviembre Diciembre

Page 26: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

¿Cuánto?Considera las limitaciones humanas.

@yllo

Page 27: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

Sistema de memoriaRetenemos una información limitada

@yllo

9objetos250ms

7±2objetos20min

Límitesdesconocidos

sensorial

operativa Largoplazo

Page 28: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

@ylloSistemasysubsistemas delamemoria

humana(Cañas&Y.,2001)

Page 29: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

RecomendacionesPara no sobrecargar la memoria

@yllo

• Utilizasiempre recursosvisualesparadefinir losgrandesbloquesdecontenido.

• Compensaloselementosvisualescontextosenmenoroigualmedida.

• Utilizasímbolos conocidoscuandoseanecesario.

• Utilizaestructuraspocoanchasyprofundas.

Page 30: “Percepción Visual Humana y Usabilidad. Cómo realizar diseños periodísticos y visualizaciones de datos comprensibles y útiles”.(presentación de José Alberto García para

¡Gracias!José Alberto García Guijarro

UX Lead en ITRS Group

@yllo