Presentación del ciclo de charlas Tipomasters, 4ª edición, organizado por Dpto Periodismo UMA en colaboración con otras entidades en CAC Málaga, 18 de diciembre de 2019. Iniciativa de María Sánchez. Más info en https://www.cibermarikiya.com/de-como-se-ha-creado-una-red-de-aprendizaje-sobre-grafismo-y-comunicacion-visual-en-malaga-asi-ha-sido-tipomasters4/

1. Visualizaciones
interactivas
usables y para
todas las personas
Nacho Madrid
Consultor y Formador de Usabilidad, Accesibilidad y Experiencia de Usuario.
Organiza: Colabora:
Jornada organizada por Dpto. Periodismo UMA, complemento de materia ‘Tipografía y
grafismo digital’. Iniciativa de María Sánchez (@cibermarikiya), coordinadora de dicha materia#periodismouma

2. HOLA, SOY
NACHO
MADRID
Consultor de usabilidad, accesibilidad y
experiencia de usuario
-
Doctor en Psicología / “Compresión de información en Internet”
Profesor de Psicología de la percepción (UOC)
Profesor de Diseño Centrado en el Usuario (UNIR)

3. PERSONAS
Usuario, lectores, clientes,
consumidores...
VAMOS A HABLAR DE...

4. Visualizaciones
Representaciones gráficas que
facilitan el acceso a la información
01

5. Fuente: KANTOR Information is
beautiful awards 2019

6. ¿CÓMO
PERCIBIMOS UNA
VISUALIZACIÓN?

7. SENSACIÓN:
Recepción de los
estímulos visuales.
PERCEPCIÓN:
Procesamiento e
interpretación.

8. Fuente: KANTOR Information is
beautiful awards 2019

9. SOLO USAMOS
UN 10% DE
NUESTRO
CEREBRO *
* (Es FALSO, en realidad lo usamos por completo)
LO IMPORTANTE ES, ¿QUÉ PARTE DE NUESTRO ESFUERZO ES ÚTIL?

10. Cuando tratamos de comprender algo, nuestro cerebro dedica
recursos que pueden dividirse en tres tipos de carga:
● Intrínseca - Depende de lo que sabemos y de la
complejidad de la información
● Extrínseca - Depende de cómo mostramos la información
● Pertinente - Depende de lo que aprendemos
Si la suma de estas tres es muy elevada, hay sobrecarga y la
comprensión de la información será muy pobre.
¿Cómo procesamos una
visualización interactiva?

11. EL CÓDICE VOYNICH
Anónimo, s. XV

12. CHART JUNK
Edward Tufte, 1983

13. Fuente: KANTOR Information is
beautiful awards 2019

14. Fuente: KANTOR Information is
beautiful awards 2019

15. Fuente: KANTOR Information is
beautiful awards 2019

16. Interactivas
Requieren una acción del usuario y
respuesta por parte del sistema
02

17. INTERFACES FÍSICAS

18. INTERFACES GRAFICAS

19. No solo es necesario dibujar la visualización, también hay que
diseñar el modo en el que el usuario va a interactuar con el sistema:
● Contenidos (palabras, gráficos, imágenes, etc.)
● Controles del interfaz (botones, entradas de datos, links, etc.)
● Respuestas del sistema (qué y cómo cambia la visualización)
Un diseñador de interacción trabaja para que los usuarios puedan
alcanzar sus objetivos con las visualizaciones de la forma más fácil
(y agradable) posible.
Diseño de interacción

20. Usables
Visualizaciones interactivas
comprensibles y fáciles de usar
03

21. ¿QUE DETERMINA LA
USABILIDAD?
TAREAUSUARIOS
Conocimiento, habilidad,
capacidad, experiencia...
Qué hace el usuario para
conseguir su objetivo
CONTEXTO DE USO
Tiempo disponible, lugar,
tecnología, etc.
PRODUCTO
Lo que diseñamos

22. TRES RECOMENDACIONES DE
USABILIDAD
ACCIÓN
COHERENTE
La acción que realiza el
usuario debe ser
coherente con el efecto
en la visualización.
FEEDBACK
ADECUADO
CONTROLES
INTUITIVOS
El significado de los
botones e iconos y su
función deben ser claros
La respuesta a nuestra
acción debe se la
correcta en un tiempo
adecuado.
01 02 03

23. CONTROLES
INTUITIVOS
El significado de los
botones e iconos y su
función deben ser claros.
Fuente: Transparency international via Datapine

24. ACCIÓN
COHERENTE
La acción que realiza el
usuario debe ser
coherente con el efecto en
la visualización.
Fuente: The New York Times via Dolphins

25. FEEDBACK
ADECUADO
La respuesta a nuestra
acción debe se la correcta
en un tiempo adecuado.

26. Para todas las
personas
Diferentes capacidades y preferencias
04

27. ¿PARA QUIÉN
DISEÑAMOS?

28. Es el número de habitantes en España
46,000,000

29. ¿QUIÉN QUEDA
EXCLUIDO?

30. TECNOLOGÍA
10% iPhone
90% Android

31. Mayores de 65 años
8.795.000
Personas con discapacidad
4.000.000
Extranjeros residentes en España
5.000.000
PERSONAS

32. TRES RECOMENDACIONES DE
DISEÑO INCLUSIVO
TAMAÑO
DE CONTROLES
Los botones y otros
controles deben ser
suficientemente grandes
para facilitar su activación.
LEGIBILIDAD
DEL TEXTO
CONTRASTE
DE COLOR
El texto y las imágenes
deben distinguirse
claramente del fondo.
El tipo, tamaño y
formato de fuente debe
facilitar la lectura.
01 02 03

33. CONTRASTE DE
COLOR
El texto y las imágenes
deben distinguirse
claramente del fondo.
CONTRASTE ALTO
CONTRASTE MEDIO
CONTRASTE BAJO

34. TAMAÑO
DE CONTROLES
Los botones y otros controles
deben ser suficientemente
grandes para facilitar su
activación.
~45x45px

35. LEGIBILIDAD
DEL TEXTO
El tipo, tamaño y formato
de fuente debe facilitar la
lectura.
Es más fácil leer un texto en pantalla si
la fuente se ha diseñado para las
pantallas, y tiene buen ajuste de párrafo.
Sin embargo, cuando se usa un texto decorado,
pensado para material impreso, con poco espaciado y
justificado completo, se dificulta su lectura.

36. TRES RECOMENDACIONES DE
DISEÑO INCLUSIVO
TAMAÑO
DE CONTROLES
Los botones y otros
controles deben ser
suficientemente grandes
para facilitar su activación.
LEGIBILIDAD
DEL TEXTO
CONTRASTE
DE COLOR
El texto y las imágenes
deben distinguirse
claramente del fondo.
El tipo, tamaño y
formato de fuente debe
facilitar la lectura.
01 02 03

37. CREDITS: This presentation template was created by Slidesgo,
including icons by Flaticon, and infographics & images by Freepik.
GRACIAS
¿Preguntas?
hola@nachomadrid.com
Tlf 640 09 37 15
www.nachomadrid.com
Please keep this slide for attribution.
v