Diseño de Octoverse de GitHub: un estudio de caso de visualización de datos

El año pasado colaboré con GitHub para diseñar el informe 2021 State of the Octoverse. Octoverse de GitHub analiza datos del mundo real de millones de desarrolladores y repositorios para presentar las perspectivas de la industria del desarrollo de software del año. El informe de 2021 cubre tres tendencias principales: mejorar el rendimiento y el bienestar mediante el desarrollo de códigos, la creación de documentación y el apoyo a las comunidades de una manera más inteligente y sostenible.

Como enlace creativo del proyecto, era mi trabajo ayudar al equipo de GitHub a hacer que el informe con muchos datos fuera fácil de entender. Usando la visualización de datos, diseñé más de 20 cuadros, mapas y gráficos para ayudar a los lectores a desentrañar la información que recopilaron los científicos de datos de GitHub.

En este estudio de caso de visualización de datos, explico mi proceso de diseño, muestro el sitio web que ayudé a crear para Octoverse de GitHub y comparto aprendizajes clave del proyecto.

Diseño de experiencias digitales atractivas con visualización de datos

State of the Octoverse 2021 es un informe extenso, con datos recopilados de más de 73 millones de desarrolladores de GitHub y más de 61 millones de repositorios nuevos. También es la primera vez que se incluye una encuesta sobre la demografía de los encuestados. Dar sentido a los datos requirió un gran esfuerzo de diseño.

Nuestro modesto equipo, que incluía al desarrollador José Luis Garrido y al director del proyecto Miquel López, se encargó de sintetizar esta inmensa cantidad de información para los lectores. A pesar de un comienzo retrasado y otros proyectos simultáneos, cumplimos.

Inicio del proceso de diseño

La primera etapa de mi proceso de diseño de visualización de datos fue el descubrimiento. Los científicos de datos de GitHub recolectaron y analizaron información de desarrolladores y repositorios a través de archivos de Excel, presentaciones de PowerPoint y otros conjuntos de datos.

Con esta información, junto con los bocetos de visualización de datos iniciales de GitHub y un documento de contexto de 60 páginas, comencé a pensar en la mejor manera de ilustrar cada conjunto de datos. Luego, comencé a diseñar cada gráfico, mapa y diagrama para lograr la máxima participación del usuario y una experiencia de usuario intuitiva.

Elegir su gráfico

Hay tres puntos clave para elegir una visualización de datos eficaz:

1. Identifique el propósito del gráfico

Los datos se pueden representar de muchas maneras: gráficos de barras, gráficos de líneas, mapas de calor, gráficos de cascada y más. Cada gráfico tiene un propósito, y es importante usar el correcto para garantizar que se transmita un mensaje claro y preciso.

Por ejemplo, si desea presentar la diferencia entre dos cantidades, utilice un gráfico de barras. Si desea mostrar una tendencia a lo largo del tiempo, utilice un gráfico de líneas.

2. Considere al usuario final

También debe conocer la capacidad de sus usuarios para leer y analizar datos. La mayoría de nosotros estamos familiarizados con los gráficos circulares, de barras y de líneas. Los vemos en todas partes y sabemos cómo leerlos.

Por otro lado, menos personas saben cómo leer diagramas de caja, que se utilizan en muchas publicaciones de investigación para resumir múltiples variables de datos en un solo gráfico.

Si presenta a los usuarios visualizaciones desconocidas, tendrán dificultades para interpretar los datos.

3. Diseña con claridad

¿La visualización de datos es clara y concisa, o hay demasiado ruido? Los gráficos de barras pueden ser una excelente manera de mostrar datos, pero no si hay 100 barras con etiquetas individuales. Del mismo modo, los streamgraphs son hermosos y funcionales, pero solo cuando hay un patrón de datos claro. A veces menos es más.

Diseño de visualizaciones de datos perfectas

A lo largo del informe 2021 State of the Octoverse, encontrará una variedad de visualizaciones de datos que se han compuesto cuidadosamente de acuerdo con la información de datos correspondiente.

El gráfico de la mariposa

En la página Descripción general, necesitaba diseñar una infografía para dos conjuntos de datos, que mostrara dónde trabajaban los encuestados antes de la pandemia y después de ella. GitHub me proporcionó dos gráficos circulares, cada uno de los cuales representaba cuatro puntos de datos: coubicados, híbridos, totalmente remotos y no aplicables. Sin embargo, los gráficos circulares no son particularmente efectivos cuando se comparan dos conjuntos de datos.

En cambio, opté por un gráfico de mariposas. Los gráficos de mariposa representan los datos como dos barras horizontales una al lado de la otra, que se asemejan a las alas de una mariposa. Estos gráficos muestran claramente la diferencia entre dos grupos que comparten los mismos parámetros y facilitan mucho la comparación de dos conjuntos de datos.

El gráfico de golpes

Otra visualización de datos eficaz es el gráfico de impacto. Usamos este gráfico para presentar la información sobre los lenguajes de programación de computadoras más populares utilizados por los desarrolladores durante los últimos ocho años. Los gráficos de impacto son excelentes para mostrar cambios en el rango durante un período de tiempo y se han convertido en un elemento básico en el informe Octoverse.

El mapa de árbol

Necesitaba ilustrar los diferentes sectores a los que los encuestados contribuyen con el código. La decisión final se redujo a gráficos circulares versus diagramas de árbol.

Los gráficos circulares son útiles cuando tiene tres o cuatro sectores y cuando las cantidades son claramente diferentes. Sin embargo, nuestro cerebro no procesa bien los ángulos, por lo que cuando hay un gráfico circular con muchas cuñas de tamaño similar, a las personas les cuesta descifrar cuál es más grande.

Por el contrario, los diagramas de árbol permiten a los usuarios comparar fácilmente segmentos entre sí, así como con el todo. Los rectángulos más grandes se colocan en la parte superior izquierda, seguidos de rectángulos progresivamente más pequeños. Es más fácil comparar líneas rectas que comparar cuñas o ángulos.

El Cartograma

Finalmente, necesitaba ilustrar la distribución geográfica de las organizaciones que usan GitHub en 2021 por región o país. Para ello, utilicé un cartograma de población. Los cartogramas son mapas en los que la geometría se distorsiona para acomodar una característica económica, social, política o ambiental en particular.

En esta visualización de datos, el tamaño de los cuadrados indica el tamaño de la población. Además, la saturación del color del cuadrado indica cuántas organizaciones en esa área están usando GitHub.

Diseño de sitio web receptivo para Octoverse 2021 de GitHub

Además de diseñar visualizaciones de datos, también ayudé al equipo de GitHub a producir un sitio web para Octoverse 2021. Este sitio era un centro para que los usuarios leyeran, exploraran e interactuaran con las perspectivas de datos del informe.

Para fomentar la participación de los usuarios, optamos por un sitio web totalmente receptivo que adaptaría la representación del sitio a ventanas gráficas de diferentes tamaños. GitHub nos pidió que prestáramos especial atención a la versión de escritorio después de descubrir que los dispositivos más grandes generaron la mayoría de las visitas de Octoverse.

Al diseñar el sitio receptivo, seguí estas mejores prácticas:

• Redactar texto con tipos de letra aptos para escritorio y dispositivos móviles. Esto incluyó elegir tamaños de fuente, tipos de letra y longitud y altura de línea óptimos, y refinar cómo se ve el texto en diferentes puntos de interrupción.
• Disposición de los elementos visuales en cada página para fomentar el desplazamiento.
• Diseño de una barra de navegación superior fácil de usar que adapta su diseño al tamaño de la ventana gráfica.

Debido a que diseñé el sitio web con diferentes dispositivos en mente desde el principio, la mayoría de los gráficos se representaron bien en todos los tamaños de pantalla. Solo necesitaba hacer ajustes menores para una visibilidad óptima, como el dendrograma circular al final de la sección "Comunidades sostenibles".

Organización de la arquitectura de la información

Exploré diferentes opciones para la arquitectura de información del sitio web. No quería abrumar a los usuarios con demasiada información, pero tampoco quería que el sitio estuviera disperso o fuera difícil de navegar.

Con esto en mente, comencé diseñando un sitio web de desplazamiento largo, con todo el contenido en la misma página. Cuando eso se volvió visualmente abrumador, intenté colocar cada gráfico en una página separada. Para ayudar con la navegación, agregué un menú de navegación lateral a cada página con una tabla de contenido, similar a lo que podría encontrar en un libro. El diseño final del sitio web de Octoverse consta de páginas web separadas para las tres tendencias principales, además de una página de inicio que sirve como resumen de los datos más importantes.

Después de decidir sobre la arquitectura de la información, pasé a diseñar la estructura de contenido del sitio, el flujo de navegación, las imágenes y los gráficos. Creé wireframes para mapear el contenido y mostrar rutas entre diferentes páginas.

Hacer que el sitio web sea interactivo

El indicador de progreso de desplazamiento

Para satisfacer la solicitud de GitHub de un sitio web atractivo y dinámico, agregamos elementos interactivos. Por ejemplo, debajo de la barra de navegación superior, diseñé un indicador de progreso de desplazamiento para que los visitantes pudieran realizar un seguimiento de dónde estaban en el sitio. A medida que los lectores se desplazan hacia abajo en una página, la barra indicadora se escala gradualmente y cada página tiene un color de relleno diferente para la barra: gris, morado, azul o verde.

Encabezados animados, imágenes y visualización de datos

Para evitar que el sitio web se vea plano, decidimos animar los encabezados de las secciones. Creé las ilustraciones y el desarrollador de nuestro equipo las animó. También animamos la imagen del héroe para la página de inicio y cada subsección, y sus tarjetas de capítulo correspondientes en la parte inferior de cada página web.

También hicimos interactivos algunos de los gráficos de visualización de datos estáticos. Por ejemplo, a medida que se desplaza sobre una línea en el gráfico de relieve, la línea se vuelve más gruesa para enfatizar el punto de datos correspondiente. Es una animación simple pero efectiva que permite a los visitantes del sitio interactuar con los datos y comparar idiomas rápidamente.

Creación de visualizaciones de datos y diseños digitales exitosos para GitHub: aprendizajes clave

Los datos solo son útiles si se les puede dar sentido, y el proceso de diseñar contenido con muchos datos que los usuarios puedan descifrar fácilmente es un desafío. Sin embargo, esta colaboración con GitHub amplió mis conocimientos en diseño de visualización de datos. Estas son las conclusiones más importantes de este estudio de caso de visualización de datos:

• Conozca la marca: estar familiarizado con las pautas básicas de estilo de una marca, como el uso de tipografía, color e imágenes, acelera el proceso de diseño porque libera a los diseñadores para pasar al proceso creativo. Tuve la suerte de saber mucho sobre la marca de GitHub antes de la colaboración y pude usar este conocimiento para informar mis diseños.
• Elija los tipos correctos de visualizaciones de datos: es esencial seleccionar la visualización correcta para representar un punto de datos. Una representación incorrecta puede causar confusión o transmitir un mensaje equivocado.
• Use el color sabiamente: la combinación correcta de colores guiará el ojo del lector y llamará la atención sobre un punto de datos en particular.
• Manténgase curioso: cuando intenta contar una historia de datos convincente, es probable que encuentre problemas de diseño complejos, por lo que es importante estar abierto a soluciones poco comunes y al aprendizaje continuo.