Projetando o Octoverse do GitHub: um estudo de caso de visualização de dados

No ano passado, colaborei com o GitHub para projetar o relatório 2021 State of the Octoverse. O Octoverse do GitHub analisa dados do mundo real de milhões de desenvolvedores e repositórios para apresentar os insights do setor de desenvolvimento de software do ano. O relatório de 2021 abrange três tendências principais: melhorar o desempenho e o bem-estar desenvolvendo código, criando documentação e apoiando comunidades de maneira mais inteligente e sustentável.

Como contato criativo do projeto, era meu trabalho ajudar a equipe do GitHub a tornar o relatório com muitos dados fácil de entender. Usando a visualização de dados, projetei mais de 20 gráficos, mapas e gráficos para ajudar os leitores a desvendar as informações que os cientistas de dados do GitHub coletaram.

Neste estudo de caso de visualização de dados, explico meu processo de design, mostro o site que ajudei a criar para o Octoverse do GitHub e compartilho os principais aprendizados do projeto.

Projetando experiências digitais envolventes com visualização de dados

O State of the Octoverse 2021 é um relatório extenso, com dados coletados de mais de 73 milhões de desenvolvedores do GitHub e mais de 61 milhões de novos repositórios. É também a primeira vez que uma pesquisa sobre a demografia dos entrevistados foi incluída. Dar sentido aos dados exigiu um grande esforço de design.

Nossa modesta equipe, que incluía o desenvolvedor José Luis Garrido e o gerente de projeto Miquel Lopez, foi incumbida de sintetizar essa imensa quantidade de informações para os leitores. Apesar do atraso no início e de outros projetos simultâneos, entregamos.

Iniciando o processo de design

A primeira etapa do meu processo de design de visualização de dados foi a descoberta. Os cientistas de dados do GitHub coletaram e analisaram informações de desenvolvedores e repositórios por meio de arquivos do Excel, apresentações do PowerPoint e outros conjuntos de dados.

Com essas informações, juntamente com os esboços iniciais de visualização de dados do GitHub e um documento de contexto de 60 páginas, comecei a pensar na melhor forma de ilustrar cada conjunto de dados. Então, comecei a projetar cada gráfico, mapa e diagrama para o máximo envolvimento do usuário e uma experiência intuitiva do usuário.

Escolhendo seu gráfico

Existem três pontos-chave para escolher uma visualização de dados eficaz:

1. Identifique a finalidade do gráfico

Os dados podem ser representados de várias maneiras – gráficos de barras, gráficos de linhas, mapas de calor, gráficos em cascata e muito mais. Cada gráfico serve a um propósito e é importante usar o correto para garantir que uma mensagem clara e precisa seja transmitida.

Por exemplo, se você deseja apresentar a diferença entre duas quantidades, use um gráfico de barras. Se você quiser mostrar uma tendência ao longo do tempo, use um gráfico de linhas.

2. Considere o usuário final

Você também precisa estar ciente da capacidade de seus usuários de ler e analisar dados. A maioria de nós está familiarizada com gráficos de pizza, barras e linhas. Nós os vemos em todos os lugares e sabemos como lê-los.

Por outro lado, menos pessoas sabem ler diagramas de caixa, que são usados ​​em muitas publicações de pesquisa para resumir várias variáveis ​​de dados em um gráfico.

Se você apresentar aos usuários visualizações desconhecidas, eles terão dificuldade em interpretar os dados.

3. Projete com clareza

A visualização de dados é clara e concisa ou há muito ruído? Os gráficos de barras podem ser uma ótima maneira de exibir dados, mas não se houver 100 barras com rótulos individuais. Da mesma forma, os streamgraphs são bonitos e funcionais, mas apenas quando há um padrão de dados claro. As vezes menos é mais.

Projetando visualizações de dados perfeitas

Ao longo do relatório State of the Octoverse de 2021, você encontrará uma variedade de visualizações de dados que foram cuidadosamente compostas de acordo com as informações de dados correspondentes.

O gráfico da borboleta

Na página Visão geral, precisei criar um infográfico para dois conjuntos de dados — mostrando onde os entrevistados trabalhavam antes e depois da pandemia. O GitHub me forneceu dois gráficos de pizza, cada um mapeando quatro pontos de dados: colocados, híbridos, totalmente remotos e não aplicáveis. No entanto, os gráficos de pizza não são particularmente eficazes ao comparar dois conjuntos de dados.

Em vez disso, optei por um gráfico de borboleta. Os gráficos de borboleta traçam os dados como duas barras horizontais lado a lado, assemelhando-se a asas de borboleta. Esses gráficos mostram claramente a diferença entre dois grupos que compartilham os mesmos parâmetros e facilitam muito a comparação de dois conjuntos de dados.

O gráfico de resposta

Outra visualização de dados eficaz é o gráfico de colisão. Usamos este gráfico para apresentar as informações sobre as linguagens de programação de computador mais populares usadas pelos desenvolvedores nos últimos oito anos. Os gráficos de resposta são ótimos para exibir mudanças na classificação ao longo de um período de tempo e se tornaram um item básico no relatório Octoverse.

O mapa da árvore

Eu precisava ilustrar os diferentes setores para os quais os entrevistados contribuem com código. A decisão final se resumia a gráficos de pizza versus mapas de árvore.

Os gráficos de pizza são úteis quando você tem três ou quatro setores e quando as quantidades são claramente diferentes. No entanto, nosso cérebro não processa bem os ângulos, então, quando há um gráfico de pizza com muitas fatias de tamanhos semelhantes, as pessoas têm dificuldade em decifrar qual é maior.

Em contraste, os mapas de árvore permitem que os usuários comparem facilmente os segmentos entre si, bem como com o todo. Os retângulos maiores são colocados no canto superior esquerdo, seguidos por retângulos progressivamente menores. É mais fácil comparar linhas retas do que comparar cunhas ou ângulos.

O Cartograma

Por fim, precisava ilustrar a distribuição geográfica das organizações usando o GitHub em 2021 por região ou país. Para isso, utilizei um cartograma populacional. Cartogramas são mapas nos quais a geometria é distorcida para acomodar uma característica econômica, social, política ou ambiental específica.

Nesta visualização de dados, o tamanho dos quadrados indica o tamanho da população. Além disso, a saturação da cor do quadrado indica quantas organizações nessa área estão usando o GitHub.

Design de site responsivo para o outubro de 2021 do GitHub

Além de projetar visualizações de dados, também ajudei a equipe do GitHub a produzir um site para outubro de 2021. Esse site era um hub para os usuários lerem, explorarem e interagirem com os insights de dados do relatório.

Para incentivar o engajamento do usuário, optamos por um site totalmente responsivo que adaptasse a renderização do site a viewports de diferentes tamanhos. O GitHub pediu que prestássemos atenção especial à versão para desktop depois de descobrir que dispositivos maiores geraram a maioria das visitas do Octoverse.

Ao projetar o site responsivo, segui estas práticas recomendadas:

• Composição de texto com tipos de letra compatíveis com desktop e dispositivos móveis. Isso incluiu a escolha de tamanhos de fonte ideais, tipos de letra e comprimento e altura de linha, além de refinar a aparência do texto em diferentes pontos de interrupção.
• Disposição dos elementos visuais em cada página para incentivar a rolagem.
• Projetar uma barra de navegação superior fácil de usar que adapta seu layout ao tamanho da janela de visualização.

Como eu projetei o site com diferentes dispositivos em mente desde o início, a maioria dos gráficos renderizou bem em todos os tamanhos de tela. Só precisei fazer pequenos ajustes para uma visibilidade ideal, como no dendrograma circular no final da seção “Comunidades sustentáveis”.

Organizando a Arquitetura da Informação

Explorei diferentes opções para a arquitetura de informação do site. Eu não queria sobrecarregar os usuários com muitas informações, mas também não queria que o site fosse disperso ou difícil de navegar.

Com isso em mente, comecei projetando um site de rolagem longa, com todo o conteúdo na mesma página. Quando isso se tornou visualmente impressionante, tentei colocar cada gráfico em uma página separada. Para ajudar na navegação, adicionei um menu de navegação lateral a cada página com um índice, semelhante ao que você pode encontrar em um livro. O design final do site Octoverse consiste em páginas separadas para as três principais tendências, além de uma página inicial que serve como um resumo dos dados mais importantes.

Depois de decidir sobre a arquitetura da informação, passei a projetar a estrutura de conteúdo do site, fluxo de navegação, imagens e gráficos. Criei wireframes para mapear o conteúdo e mostrar caminhos entre diferentes páginas.

Tornando o site interativo

O indicador de progresso de rolagem

Para satisfazer a solicitação do GitHub de um site dinâmico e envolvente, adicionamos elementos interativos. Por exemplo, sob a barra de navegação superior, criei um indicador de progresso de rolagem para que os visitantes pudessem acompanhar onde estavam no site. À medida que os leitores rolam para baixo em uma página, a barra indicadora é dimensionada de forma incremental e cada página tem uma cor de preenchimento diferente para a barra: cinza, roxo, azul ou verde.

Cabeçalhos animados, imagens e visualização de dados

Para evitar que o site pareça plano, decidimos animar os cabeçalhos das seções. Eu criei as ilustrações e o desenvolvedor da nossa equipe as animou. Também animamos a imagem do herói para a página inicial e cada subseção, e seus cartões de capítulo correspondentes na parte inferior de cada página da web.

Também tornamos alguns dos gráficos de visualização de dados estáticos interativos. Por exemplo, à medida que você rola sobre uma linha no gráfico de bump, a linha aumenta para enfatizar o ponto de dados correspondente. É uma animação simples, mas eficaz, que permite que os visitantes do site interajam com os dados e comparem idiomas rapidamente.

Criando visualizações de dados bem-sucedidas e designs digitais para o GitHub: principais aprendizados

Os dados só são úteis se você puder entendê-los, e o processo de criação de conteúdo com muitos dados que os usuários possam decifrar facilmente é um desafio. No entanto, essa colaboração com o GitHub ampliou meu conhecimento em design de visualização de dados. Aqui estão as conclusões mais importantes deste estudo de caso de visualização de dados:

• Conheça a marca: estar familiarizado com as principais diretrizes de estilo de uma marca - como o uso de tipo, cor e imagens - acelera o processo de design porque libera os designers para seguirem para o processo criativo. Tive a sorte de saber muito sobre a marca do GitHub antes da colaboração e pude usar esse conhecimento para informar meus projetos.
• Escolha os tipos certos de visualizações de dados: é essencial selecionar a visualização correta para representar um ponto de dados. Uma representação incorreta pode causar confusão ou transmitir a mensagem errada.
• Use as cores com sabedoria: a combinação de cores certa guiará os olhos do leitor e chamará a atenção para um determinado ponto de dados.
• Fique curioso: quando você está tentando contar uma história de dados convincente, é provável que encontre problemas de design complexos, por isso é importante estar aberto a soluções incomuns e aprendizado contínuo.