Como usar tipografia e design para melhorar a experiência do usuário

O que torna um site ou e-mail atraente e agradável aos olhos? Antes de começar a ler guias e mais guias sobre como criar uma página de destino ou como criar o e-mail perfeito, talvez você deva pensar de maneira simples e mínima para variar.

Então, o que torna algo assim maravilhoso? São os visuais, as cores, a cópia… Ou outra coisa?

Bem, tudo isso está bom e bom, principalmente o copy (wink wink! ), porém, há algo que faz o usuário prestar muita atenção: a tipografia.

Tipografia é o estilo e a aparência do material impresso, de acordo com meu bom e velho amigo Google. O fato de que este é um tipo de arte por conta própria, nem é preciso dizer.

E a tipografia é a base sobre a qual se criam todo e qualquer tipo de design que tenha a ver com a palavra escrita. Isso significa que você pode encontrá-lo em qualquer lugar: em livros, em pacotes, até mesmo – e o mais importante, para nós – em sites, e-mails e páginas de destino.

Porém, artística ou não, a tipografia é algo que precisa proporcionar uma boa experiência aos usuários, assim como todas as ferramentas. E as letras cursivas podem ser tão bonitas, mas são utilizáveis?

Vamos ver como podemos melhorar a experiência do usuário e a própria interface do usuário, usando tipografia adequada.

Em primeiro lugar, há a fonte

Imagine o quão blá e indiferente seu site pareceria e quanto custaria à experiência do usuário se sua fonte não correspondesse à santíssima trindade de um negócio: seu público-alvo, o tom de sua marca e seus objetivos.

Escolher a fonte certa é um pouco como escolher as cortinas perfeitas para um quarto. Cortinas cafonas mostram mau gosto, e uma fonte que simplesmente não combina pode fazer com que seu projeto pareça cafona na melhor das hipóteses – e spam na pior.

A fonte é tão importante quanto os próprios visuais, para criar uma impressão e identificar as coisas que você precisa identificar, tanto em um site quanto em um e-mail, otimizando a experiência do usuário.

Você precisará de negrito para declarações ousadas, letras cursivas e caligrafia intensa para coisas elegantes e não muito importantes. Combinações como a abaixo são obrigatórias:

pares de fontes de marca

No entanto, sou obrigado a alertá-lo sobre algo: muitas fontes farão você perder o jogo. Você pode ter no máximo dois tipos de fonte, e você precisa se certificar de que sejam usadas conforme o exemplo acima: Mais ousadas e rígidas para o título, mais refinadas para o corpo do texto.

E lembre-se do seguinte: se estamos falando do seu site e não de uma página de destino ou de um e-mail, talvez você deva pensar em usar uma fonte padronizada.

Veja bem, a letra cursiva às vezes pode ser difícil de ler e um resultado artístico demais pode ser bonito, mas não é fácil de ler e compreender. Para os clientes ocupados de hoje, que são adeptos de escanear blocos de texto e encontrar exatamente o que precisam saber, para economizar tempo, algo não padronizado pode parecer muito esforço.

Seu público está mais familiarizado com Times New Roman, por exemplo. Eles podem até dizer onde ele deve ser usado e são fáceis de escanear.

Além disso, pode causar um problema de conteúdo real, no sentido de que uma fonte e um formato mais artísticos podem desviar a atenção do engajamento do conteúdo.

Elementos especiais de uma fonte:

Uma fonte é composta de vários elementos que podem fazer ou quebrar seu uso. Você tem vários estilos, pesos, os trabalhos! Então vamos ver do que se trata:

Você tem sua família de fontes, em primeiro lugar. A família de fontes (ou tipo de letra) é praticamente a grande categoria que contém fontes do mesmo estilo.

Em segundo lugar, você tem o peso da fonte, ou seja, a largura de cada caractere. Este elemento separa qual fonte será usada para criar um título e qual vai acabar no texto do corpo.

Em terceiro lugar vem o kerning, ou seja, o padrão que os caracteres seguem, ou seja, o espaçamento entre duas letras, que é necessário, visto que seus olhos seguirão exatamente esse padrão.

Esse espaçamento e as margens é que vão definir o elemento final, muito importante:

O número de caracteres por linha. Muitos caracteres por linha e o corpo do texto parecerão confusos, resultando em uma experiência muito ruim para o usuário.

Muito poucos e levará mais tempo para o olho alcançar o próximo parágrafo, obtendo exatamente o mesmo resultado que mencionei acima.

Ao limitar o comprimento, você melhora a legibilidade do seu texto. Se a linha for muito longa, ela não aparecerá corretamente no dispositivo, o que significará que o leitor não conseguirá lê-la corretamente, o que resultará em uma confusão no sentido de CRO (Conversion Rate Optimization).

Você precisará encontrar uma proporção áurea que funcione para você e lembre-se de que essa proporção áurea precisará parar em 60 caracteres por linha.

E uma pequena dica aqui: você também precisa estar atento ao espaçamento entre as linhas, visto que é muito fácil reler uma linha ou omiti-la completamente. O que nunca é uma boa prática, especialmente nos dias de hoje em que os consumidores têm tantas opções.

Tamanho da fonte e outros pesadelos

Quantas vezes você já viu um texto em letras maiúsculas e pensou que o escritor quer gritar com raiva? Aposto que a resposta é “muitas vezes".

Os tamanhos das fontes podem funcionar exatamente como o tom da palavra falada: itálico pode ser uma imitação, fontes em negrito podem ser exigentes, letras maiúsculas podem chamar a atenção e assim por diante.

Por isso, o designer precisa ser cauteloso na hora de escolher uma fonte e um estilo, principalmente se tiver um público diversificado para “conversar”.

Se você não acredita em mim, basta abrir um romance e verificar a fonte. Em seguida, abra um livro infantil e faça a mesma coisa.

Tudo se resume ao que mencionei no início: você precisa atrair seu público-alvo por meio de sua tipografia, bem como da cópia e dos próprios recursos visuais.

Mas o tamanho não é tudo o que importa. Já que estamos falando de digital, sua tipografia precisa estar impecável em todos os dispositivos. Você precisa otimizar para celular, tablet e desktop, a fim de evitar que o usuário se confunda e descarte seu conteúdo por completo.

Tenha em mente que a altura é tão importante. Um texto muito longo ou muito curto que parece ótimo ao testar a visualização da área de trabalho pode não funcionar bem para dispositivos móveis.

Talvez o maior pesadelo de todos seja o alinhamento do texto. Na cultura ocidental, as pessoas estão acostumadas a ler da esquerda para a direita, portanto, você deve estar atento a esse fato e agir de acordo.

Use o alinhamento à esquerda para imitar a maneira como as pessoas leem os textos impressos e pronto.

O mesmo não funcionará para o seu público-alvo se este estiver localizado em algum lugar no leste, onde a leitura é da direita para a esquerda. Portanto, novamente, seu público-alvo é a primeira coisa a considerar antes de tomar uma decisão.

As tendências são suas amigas

Você sabe que as melhores práticas não vão levar o bolo quando se trata de tipografia e design, certo?

Você pode usar as melhores fontes, seu alinhamento pode ser impecável, mas sem usar tendências de design, seu e-mail, site, página de destino, seja o que for que você esteja criando, ainda pode permanecer um de seus segredos mais bem guardados.

Ousado às vezes é bonito

Pense no MAC, por exemplo. A marca de beleza adora usar texto em negrito e contraste extremo como elemento:

Cosméticos MAC

Este é o slogan da marca e tem sido desde sempre. É dramático e você não pode perder. O mesmo vale para a imagem principal de seu boletim informativo:

Boletim de Cosméticos MAC

A saudação é apenas… Pronto! Se tivéssemos que criar uma pessoa a partir dessa imagem de herói, seria uma pessoa muito estilosa que ficaria muito feliz em te ver andando na rua.

Além disso, considere fazer o seguinte: Além de usar letras em negrito, você também pode destacar o texto em seu design.

Mais ou menos como costumávamos fazer quando crianças com nossos marcadores em nossos livros. Lembra quanta atenção isso costumava chamar?

Estas são duas maneiras que você pode usar para estabelecer a hierarquia quando se trata de design.

Apimentar o texto!

Blocos de texto são ótimos quando você os alinha e as pessoas podem lê-los sem nem mesmo tentar, mas o que acontece quando você precisa se destacar da multidão e apimentar um pouco as coisas?

Tente misturar as coisas quando se trata de manchetes, com texto que vai começar na horizontal, virar para a vertical, virar para letras espalhadas…

A chave aqui é envolver o visitante. E que melhor maneira de envolvê-los do que ser brincalhão e deixá-los atentos a esses pequenos elementos que os farão brincar um pouco.

Pessoas Mágicas Pessoas Voodoo

A imagem acima é a visualização perfeita do que estou tentando fazer, visto que tive que virar a cabeça uma ou duas vezes sem me perder. Você pode ver que o princípio do alinhamento à esquerda ainda é evidente aqui, visto que você não pode ler o nome errado, a menos que seja intencional e você precise de um exercício de criatividade!

Pedaços e pedaços de conteúdo

Faça o que fizer, você deve sempre ter em mente que o conteúdo é o que você está trabalhando e o conteúdo é rei. Sempre.

Certifique-se de que a qualidade corresponda à sua visão e à frequência com que você publica, carrega ou envia e-mails.

Em segundo lugar, certifique-se de que seu design não desvie a atenção do conteúdo. Por exemplo, um botão CTA deve ser ousado e com cores contrastantes, mas não a ponto de o destinatário não ler a mensagem que você está tentando transmitir.

Vá em frente e leia o conteúdo, gaste tempo com ele e realmente entre nele. Se você estiver postando muitas coisas novas, elas precisarão ser oportunas, relevantes e chamar a atenção.

Visualize o que você quer dizer. Leia seu texto em voz alta e certifique-se de que está criando a imagem que tinha na cabeça quando viu os rascunhos pela primeira vez.

E mais um para a estrada

Tenha muito cuidado com as cores que vai usar. Além da psicologia das cores e como isso pode afetar o usuário, você precisa ter cuidado com outras coisas:

Número um, daltonismo. Não use muitos vermelhos ou verdes quando se trata de destacar informações importantes.

O daltonismo é uma condição bastante comum, sendo o daltonismo vermelho e verde os dois casos mais comuns. Então, quando se trata de CTAs e coisas que você deve saber, como os Termos e Condições, por exemplo, atenha-se aos pretos e aos de alto contraste.

Número dois, imagens e texto piscando. Imagens piscantes podem causar sentimentos de ansiedade, podem distrair o usuário e são meio irritantes. Mas esses não são os principais motivos pelos quais você deve evitá-los.

Imagens intermitentes podem causar ataques epiléticos.

Para concluir

Ainda há muito que não foi dito quando se trata de tipografia, web design e da própria experiência do usuário, mas acho que abordamos o básico aqui.

Apenas certifique-se de pensar fora da caixa e ser relevante sem ser igual a todos. Uma pessoa criativa como você certamente encontrará uma maneira de pensar fora da caixa!

E não se esqueça de deixar um comentário com sua opinião sobre este post!