O estudo de tipografia por trás do Trello

tipografia

Ao longo do último ano, o time de Design do Trello tem trabalhado em um sistema de design atualizado - o resultado é nosso recente guia público chamado Nachos. Nossos objetivos com esse delicioso novo sistema de design é criar consistência, alinhamento e eficiência no Trello.

A maior parte do sistema de design é a tipografia, um componente de design que se transformou em uma jornada em si. Sem o tipo de letra certo, você poderia estar suspirando, apertando os olhos e até mesmo disputando os quadros do Trello com seus colegas de equipe.

Se a história por trás das cenas te intriga, pegue uma caneca de café, sente-se e aproveite esse conto sobre um estudo verdadeiro de tipografia e trabalho em equipe do Trello.

Por que tipografia importa

Seja nas redes sociais, em um site ou em um livro digital, nós estamos lendo muito texto em telas atualmente. E os inúmeros tipos de telas que ficamos alternando afeta a experiência de leitura. Essas telas podem ser grandes ou pequenas, podem ter alta ou baixa resolução, tem qualidade de cores variáveis e diferentes níveis de brilho.

O texto nessas telas também é afetado por aspectos ao redor. Já tentou relaxar ao lado de uma piscina lendo um livro no seu telefone ou tablet? Provavelmente não deu certo. Talvez a tela não estava com brilho suficiente ou estava um super reflexo do sol que não deixou você ler o conteúdo.

A distância da tela também é importante. As pequenas telas de celular geralmente ficam mais perto de você, enquanto as telas de laptop e tablet ficam um pouco mais distantes. Telas maiores como as de computadores de desktop ou monitores da sua estação de trabalho ficam ainda mais longes. Nós levamos todos esses fatores em consideração quando definimos a tipografia para o Trello. Também fomos conscientes ao projetar um design e escolher a tipografia para o Trello que fosse acessível para todos os usuários.

Antes que eu siga adiante, aqui vai um curso intensivo sobre estudos de Tipografia que podem ser útil para entender os termos deste post:

  • Tipo de letra: Esse termo é a combinação de algumas configurações do tipo, como o tamanho e altura das linhas. Diferente do termo fonte que se refere ao tipo de arquivo real do tipo de letra. (Helvetica é o tipo de letra e Helvetica.tff é a fonte).
  • Legibilidade: legibilidade é a facilidade com que o leitor consegue reconhecer um caractere individual em um texto. Aspectos do design de tipografia que afetam a legibilidade incluem formas de caracteres, contraste de traçado, tamanho dos seus interiores, serifas ou falta da mesma, e peso.
  • Leitura: só porque algo é legível não quer dizer que possui uma boa leitura. Se for pensar nesse sentido, legibilidade seria o mesmo que dizer que a casca da árvore é deliciosa porque é comível. Como Jason Santa Maria observa: “Em termos de leitura, nós estamos focando mais alto. Leitura combina o impacto emocional de um design (ou a falta dele) com a quantidade de esforço que presumivelmente é necessário para ler.”

Ótimo! Agora que nós estamos mais pertos de sermos especialistas em tipografia, aqui está porque esses diferentes termos importam: tipografia pode melhorar ou atrapalhar a experiência de leitura, que significa uma boa ou má experiência do usuário. Se o texto é difícil de ler, não vai ser legível, e portanto, não vai ser algo que os usuários queiram ler. Isso resultará em um má experiência do usuário porque eles vão ficar frustrados e sairão do aplicativo.

No entanto, se a tipografia for invisível - no sentido que todo seu foco é em fazer um conteúdo que seja facilmente escaneável e de boa leitura - você poderá ler mais rápido e aproveitar o conteúdo, que resultará em uma melhor experiência do usuário.

Nossos objetivos de design no Trello

Trello é um aplicativo que consiste em textos curtos e longos. Dependendo da tarefa que você quer executar no Trello, você pode encontrar diferentes comprimentos de conteúdo. Isso nos apresentou como um difícil desafio ao escolher um novo tipo de letra para o Trello. Não somente a gente quis escolher um tipo de letra que funcionasse em contextos diferentes no Trello, mas também deveria comunicar a voz, personalidade e tom do Trello.

No geral, o objetivo principal era aprimorar a personalidade, legibilidade e leitura. O tipo de letra que nós estávamos usando era a Helvetica Neue. A Helvetica é muito comum, tanto que parece que ela está em todo lugar (existe até mesmo um ótimo documentário sobre essa fonte). O livro On Web Typography por Jason Santa Maria discute o uso prevalente da Helvetica na internet:

“Helvetica pode ser imprópria para longos trechos de textos, porque a forma de suas letras são muito uniformes, atrapalhando a leitura. Como a maioria das coisas no design, deve-se encontrar o equilíbrio perfeito.”

Como uma equipe de design, nós estamos em busca desse equilíbrio.

estudo de tipografia

Como nós escolhemos um tipo de letra

A equipe de engenharia do Trello possui ferramentas internas que nos possibilita simular a versão do Trello em produção para novas funcionalidades e mudanças de design. Para nosso estudo de tipografia, pesquisamos e compilamos uma série de tipos de letras que pensamos que poderia funcionar bem e começamos a testar com entusiasmo.

Como acontece em testes de software, nós também tivemos uma série de versões do Trello para todos os tipos de letras que estávamos testando.

Como uma equipe de design, pudemos ter uma verdadeira sensação de como cada tipo de letra afetou a experiência no Trello. Poderíamos mergulhar em cada versão para ver a legibilidade e a leitura de cada tipo de letra. Trabalhar com conteúdo real pareceu ser muito mais efetivo para visualizar cada tipo de letra do que em uma ferramenta de design. Para nós, isso se comprovou.

tipografia no Trello

Testar o tipo de letra dentro do aplicativo tornou mais fácil o descarte de algumas opções. Muito fina ou muito grossa, alguns tipos de letras não refletiam a personalidade do Trello, deixavam o texto mais difícil de ler ou tinha outras nuances que simplesmente não funcionavam.

Para tipos de letras que queríamos validar individualmente antes de compartilhar com a equipe e criar novas versões de testes internos do Trello, usamos ferramentas como Font Swap, uma útil extensão do Google Chrome.

Nossa abordagem nos levou a um vencedor claro. O tipo de letra atendeu todos os critérios: tinha a voz certa, personalidade e tom. Melhorou a legibilidade e leitura. Ficou ótima nos materiais de marketing. Ficou boa até no aplicativo mobile do Trello, mesmo que isso não fosse o objetivo atual na determinação do tipo de letra que queríamos usar.

Com um tipo de letra selecionado, a equipe de design começou a aprimorar a leitura e legibilidade para a visão do Trello. Nós ajustamos tamanho de fonte, alturas de linhas, espaçamento de letras e outros elementos do Trello, como botões, para deixar tudo certo.

Que comecem os testes

Prontos para receber o feedback da equipe, nós compartilhamos internamente. No Trello, nós acreditamos que devemos testar internamente primeiro antes de compartilhar com os usuários cada nova mudança que a gente proponha a fazer no produto. No nosso caso, queríamos ter certeza que o novo tipo de letra deixou o Trello mais legível e com boa leitura resultando em uma melhor e mais agradável experiência do usuário ao nos colocar diante de nossas críticas mais difíceis, de nossos colegas de trabalho.

Nossa equipe poderia ter acesso também ao sistema teste que estávamos usando, o que significa que eles começaram a usar o novo tipo de letra no seu dia dia rapidamente.

feedback de tipografia

O feedback imediato foi misturado; algumas pessoas amaram, e algumas acharam que deixou o Trello mais difícil de ler. Nós tentamos entender quais elementos da tipografia estavam causando isso e tentamos resolver isso com mais ajustes no tipo de letra.

Com o tempo, os feedbacks se tornaram mais positivos. É possível que, uma vez que o choque de uma grande mudança tinha passado, as pessoas começaram a esquecer como a Helvetica fazia o Trello parecer e começaram a apreciar o esforço por trás do novo tipo de letra. Depois de algumas semanas usando a nova tipografia, as pessoas voltaram a usar a Helvetica, para ver se era melhor. O resultado? Elas mudaram imediatamente para o novo tipo de letra!

Nós tínhamos validado os objetivos da equipe de design e estávamos prontos para testar o novo tipo de letra publicamente. Nós decidimos fazer um teste A/B por seis semanas para obter um feedback direto de nossos usuários. Incluímos uma pesquisa para coletar feedbacks e também monitoramos a pontuação de NPS, MUA e redes sociais para reações cruas.

Abordando preocupações

Seguindo com as pesquisas de feedbacks, fizemos nossa diligência para abordar as preocupações apresentadas. Começamos olhando como o desempenho do Trello foi afetado por usar uma fonte customizada.

Os computadores vêm com fontes padrões instaladas, então se a fonte usada no site não está instalada em seu computador, nós precisamos que você, o usuário, faça o download da fonte. Como você pode imaginar, isso afeta o tempo de carregamento porque fontes podem ser arquivos grandes. A fonte que planejamos usar precisava também estar disponível em múltiplos idiomas, o que aumentou ainda mais o tamanho da fonte. Fizemos vários testes para entender como a fonte estava afetando o desempenho do Trello, mas esses testes não foram conclusivos. Determinamos que nosso método para carregar a fonte para o usuário não era suficientemente grande para impedir que a gente seguisse com a nova fonte.

A pesquisa de feedback incluía comentários como: “Essa fonte é uma bosta!!!” e “Eu não consigo mais ler no Trello.” Nós investigamos essas reclamações e descobrimos que a leitura do tipo de letra e legibilidade estava sendo afetada por monitores com baixa resolução e renderização da fonte em sistemas operacionais diferentes. Conforme confirmado acima, pensamos que poderíamos resolver esse problema oferecendo a boa e velha Helvetica ao invés do novo tipo de letra.

Houve problemas também com o suporte aos idiomas e caracteres, mas isso foi fácil de resolver porque poderíamos comprar o tipo de fonte que incluía todos os caracteres necessários.

Como uma equipe de design, nós acreditamos que tínhamos abordado e resolvido todas as preocupações e reclamações do nosso teste.

Em última análise, nós pensamos que a escolha do novo tipo de letra ajudaria a evoluir a linguagem de design e experiência do usuário do Trello. Além disso, quando analisamos os dados, ainda nos sentimos confiantes em relação ao tipo de letra. Design é subjetivo, pensamos, e nós não obteríamos dados perfeitos para validar uma decisão de design.

Mas espera aí...

Antes de seguir adiante, nós demos um passo atrás como empresa e começamos a nos fazer algumas perguntas difíceis: os resultados internos e das pesquisas estão tentando nos dizer algo? Será que precisamos fazer ainda mais pesquisas?

Definimos um nível de excelência ainda mais alto para nós mesmos e começamos uma nova rodada de pesquisas que nos levou a obter respostas da Atlassian e de outras grandes empresas que tinham trabalhado com tipos de letras. Aprendemos que, em alguns casos, o tipo de letra foi extremamente editado, formatado e otimizado para os diferentes cenários e tipos de telas.

Evoluir o tipo de letra para fazer ela se tornar correta para o Trello foi algo que nós não estávamos preparados para fazer. Aprender com outras empresas e seus métodos de implementação nos ajudou a chegar a uma conclusão.

Seguindo em frente

Como um time, nós decidimos não mudar para o novo tipo de letra. É tão, se não mais, importante dizer “não” como dizer “sim” a mudanças de produto. É especialmente difícil dizer não a algo que foi trabalhado quase durante um ano.

Entretanto, foi a decisão certa e a melhor coisa para o Trello - até agora pelo menos. Existem vários avanços sendo feitos em estudos de tipografia para web agora, uma delas sendo fontes para sistemas. Talvez esses tipos de letras vão ou não funcionar para o Trello. Nós vamos continuar fazendo nossas pesquisas e aprendendo com a nossa comunidade.

O que podemos aprender?

Tipografia é um elemento fundamental para criar um ótimo produto porque é algo que seus usuários vão interagir toda vez que eles usarem seu produto, então não é uma escolha a ser levada com pouca atenção.

Na verdade, pode ser até mesmo difícil, mas não deve desencorajar você a abraçar esse aprimoramento e levar prazer a quem usa seu produto. Compreendendo e pesquisando sobre os objetivos do seu produto vai ajudar a determinar quais tipos de letras são melhores para seu produto.

Para nós, demoramos até a última parte da jornada para decidir dizer “não” a mudança. Nós sentimos que tínhamos validado nossos objetivos e abordado nossas maiores preocupações para dar sinal verde a mudança no produto, mas ainda era o momento de dar um passo atrás e se juntar em equipe para fazer perguntas difíceis no interesse de melhorar a experiência do usuário do Trello.

O objetivo do nosso projeto de sistema de design Nachos foi criar consistência, alinhamento e eficiência através do Trello. Embora não tenhamos mudado para um novo tipo de letra, nós alcançamos os objetivos do projeto de sistema de design, aprendemos e crescemos como um time.