DATA VISUALIZATION
VISUALIZACIÓN DE DATOS EN UX
pg 1 de 37
“The definition of genius is taking
the complex and making it simple.”
—Albert Einstein
pg 2 de 37
pg 3 de 37
DEFINICIÓN
La Visualización de la Información es el arte de representar la información de una manera en la
que sea fácil de entender y manipular, que pueda ayudarnos a darle sentido a esa información y por
lo tanto nos resulte útil en nuestras vidas o trabajos.
La información necesita ser representada para que ofrezca valor al usuario ( decisiones empresari-
ales, navegación, etc. ).
A veces es más importante la presentación de la información que la información en si misma
pg 4 de 37
Comunicar insights de manera efectiva
pg 5 de 37
El objetivo que perseguimos será fundamentalmente:
zzCrear una narrativa con la información ( storytelling with data )
zzSeparar las ideas importantes en sus partes más representativas
zzCapturar y compartir el razonamiento que lleve o dirija a una idea
zzDirigir o guiar al resto hacia la toma de conclusiones
pg 6 de 37
Un buen diseño de datos en UX
pg 7 de 37
Contexto:
Qué es lo que estoy intentando comunicar, a quién, porqué y donde.
Pautas para comunicar:
• El espectador no sigue el orden que nosotros pensamos
• Lo primero que ve el espectador es lo que más destaca.
• Sólo ve unas pocas cosas a la vez.
• El cerebro humano busca crear conexiones y encontrar significado a las cosas.
• El cerebro humano se basa en convenciones y metáforas.
pg 8 de 37
1. El espectador no sigue el orden que nosotros pensamos
pg 9 de 37
2. Primero vemos lo que más destaca
Qué es lo primero que vemos
aquí?
• Picos y bajadas
• Colores dominantes
• Grupos
• datos extremoso atípicos
pg 10 de 37
2. Primero vemos lo que más destaca
pg 11 de 37
3. Sólo vemos unas pocas cosas a la vez
pg 12 de 37
4. Buscamos conexiones y significados ( Gestalt )
Es la persona “Jill”
la usuaria top para la app ?
pg 13 de 37
5. Nos basamos en convenciones y metáforas
Enseguida empezamos a buscar signifi-
cados y conexiones:
• colores parecidos significan elementos
parecidos
• La saturación de color indica una pro-
gresión de valores
• Las categorías se organizan y estructur-
an de un extremo a otro.
pg 14 de 37
5. Nos basamos en convenciones y metáforas
Convenciones disruptivas afectan a la
abilidad del espectador para encontrar
significados:
• Que grupo representa la mayoría, los op-
timistas o los pesimistas?
• Qué categoría representa la proporción
más pequeña de gente ?
pg 15 de 37
5. Nos basamos en convenciones y metáforas
Convenciones disruptivas afectan a la
abilidad del espectador para encontrar
significados:
• Que grupo representa la mayoría, los op-
timistas o los pesimistas?
• Qué categoría representa la proporción
más pequeña de gente ?
pg 16 de 37
Planificar la visualización de datos
pg 17 de 37
ENFOCADO A: OBJETIVOS: Ejemplos
Documentar, Affirm Aquí están los resultados del NPS de los últimos
diseñar, 5 años
DECLARATIVO
Veamos si el lanzamiento de la nueva funcio-
Prototyping, iterat- Corroborar
nalidad del proceso de compra influye a la
ing,
hora de aumentar el ratio de ventas.
interacting, auto-
mating Descubrir
Qué descubriríamos si visualizamos las
EXPLORATORIO compras por tipo de persona?
Así es como nuestras métricas de usabili-
Research, estadísti- Informar
dad han aumentado durante los últimos
cas, métricas. Aclarar
cuatro meses.
Instruir
Educar
ENFOCADO A
DATOS
Así es como está estructurada actual-
Ideas Simplificar
mente nuestra intranet
Enseñar
Educar
CONCEPTUAL pg 18 de 37
pg 19 de 37
El buen diseño es mucho más que
una buena estética. Nos ayuda a ac-
ceder a las ideas.
pg 20 de 37
Expresar buenas ideas requiere
ESTRUCTURA CLARIDAD SIMPLICI-
pg 21 de 37
Estructura y jerarquía
pg 22 de 37
Consistencia en el peso visual y lal
ubicación:
• Incluye 4 elementos en tus artefac-
tos: Título, subtítulo, campo y pie.
• Dale a cada elemento un peso con-
sistente
• Mantén los elementos alineados en
el menor número de lineas ( horizon-
tales y/o verticales posibles )
pg 23 de 37
Alineación de los elementos:
• Imagina o usa una cuadrícula.
• Usa el menor número posible de pun-
tos de alineación para evitar distrac-
ciones y ruido visual en tus artefactos.
pg 24 de 37
pg 25 de 37
Claridad
pg 26 de 37
pg 27 de 37
Ejercicio de simplificación
• Asegúrate de que no hay ningún ele-
mento extraño o ajeno al mensaje.
• Se agresivo.
• Elimina el mayor número de elementos
posibles siempre y cuando no se pierda
el significado del mensaje que se quiere
transmitir.
pg 28 de 37
Elimina la ambigüedad:
• El significado de cada elemento tiene que ser entendido de manera clara y rápida
• Los componentes deben de estar claramente etiquetados
• No debemos dejar ningún elemento abierto a la interpretación
pg 29 de 37
No ignores metáforas o convenciones:
• Aprovéchate de aquellos conceptos
que la gente procesa inmediatamente
• El rojo es intenso, el azul es menos in-
tenso
• Menos saturación equivale a menos
valor
pg 30 de 37
Simplicidad
pg 31 de 37
Everything should be as simple
as it can be, but no simpler.”
Albert Einstein
Elimina “cosas”:
zzMuestra solo lo necesario
zzAsegúrate que cada elemento sólo se representa
una vez ( elimina la redundancia )
pg 32 de 37
Es necesario Es único este ele- Se puede simpli-
este elemento? mento? ficar? Hazlo más simple
Compáralo con ele- Mantenlo
cosidera eliminarlo
mentos similares y co-
sidera eliminar este o
los otros
pg 33 de 37
Limita el recorrido del ojo:
• Los elementos que funcionan juntos
mantenlos cercanos
• Conecta valores directamente con
sus elementos visuales ( gráficos )
• Mantén las líneas lo más cortas y
directas que puedas o eliminalas.
pg 34 de 37
Limita el recorrido del ojo
pg 35 de 37
Limita el uso del color:
• Piensa en el color como una frac-
ción que necesita ser reducida.
Aprovecha las diferentes tona-
lidades de un mismo valor para
mostrar progresión.
• Sigue las convenciones y los es-
tándares.
pg 36 de 37
ESTRUCTURA CLARIDAD SIMPLICIDAD
OBJETIVO Artefactos que se ven claros y Artefactos que tienen sentido Artefactos que se ven ele-
sencilos y que se entienden inmediata- gantes y bien compuestos
mente
incluye 4 elementos: título, Sin miedo elimina elementos Asegúrate de que cada ele-
subtítulo, campo de conteni- extraños, redundantes o que mento es necesario, único y
do, pie. no aporten nada. visualmente sencillo.
Dale a cada elemento un peso Elimina la ambigüedad para Limita el recorrido del ojo
visual consistente a lo largo asegurarte de que cada ele- usando proximidad entre los
de toda la presentación o el mento tiene un único propósi- elementos relacionados.
artefacto to y que no puede ser malin-
terpretado. Minimiza la cantidad de col-
Mantén los elementos alinea- ores. (Utiliza el gris para infor-
dos Trabaja con convenciones y mación secundaria)
metáforas.
pg 37 de 37
