Projetar seus e-mails

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Identificar as diretrizes de design e acessibilidade de emails.
  
• Comparar os diferentes níveis de design responsivo.
  

Princípios de design de email

Agora que você construiu um ótimo conteúdo, é hora de voltar e revisar seus emails para obter diretrizes de acessibilidade e princípios de design de email. Você não precisa ser um designer para reconhecer e aplicar um bom design aos seus emails. Então, com isso em mente, nesta unidade vamos nos concentrar em quatro princípios de design: Acessibilidade, Clareza, Responsividade móvel e Emoção. 

Ser acessível

De acordo com Merriam-Webster, a acessibilidade é definida como "de fácil uso, acesso ou adaptação para uso por pessoas com deficiência". Seguir as diretrizes de acessibilidade faz com que seus emails possam ser visualizados por todos os assinantes, independentemente de suas habilidades ou deficiências. E, sinceramente, as diretrizes também incentivam um ótimo design. Moral da história: acessibilidade não fica em segundo plano; é o seu guia para um ótimo conteúdo. 

Mas como você pode criar conteúdo acessível? Existem muitos recursos para garantir acessibilidade (incluindo alguns listados no final desta unidade), mas aqui estão algumas dicas importantes para você começar.

• Use linhas de assunto precisas. Seja claro, mas cativante em sua linha de assunto.
  
• Organize-se em uma ordem de leitura lógica. O conteúdo deve ser fácil de navegar e percorrer. Consistência de conteúdo, layouts e estilos visuais é fundamental.
  
• Use fontes grandes e legíveis. Exiba partes importantes do conteúdo em negrito e aumente o tamanho da fonte (16pt ou mais) para facilitar a leitura e a digestão do seu conteúdo.
  
• Ajuste o espaçamento da linha. Seja generoso com o espaçamento de linha para facilitar a leitura e tornar o texto mais agradável aos olhos.
  
• Use botões grandes e clicáveis com etiquetas claras. Os botões devem ser quadrados de, pelo menos, 44 pixels para celular, sinalizar uma ação e definir a expectativa de onde o usuário será levado quando clicar neles (pense: leia mais, compre aqui, compre agora). Curiosidade: um estudo do MIT descobriu que a largura média do dedo indicador é de cerca de 1,5 a 1,7 cm para a maioria dos adultos, o que equivale a 45 a 57 pixels. E muitos usuários utilizam o polegar (cerca de 2,5 cm de largura) para clicar em um botão em uma tela móvel.
  
• Use opções de texto dinâmico e somente texto. Texto dinâmico é texto HTML ou editável que não está incorporado em uma imagem. Inclua texto dinâmico sempre que possível, para tempos de carga e capacidade de resposta mais rápidos e uma melhor experiência quando as imagens são desativadas. Bônus: texto dinâmico parece melhor. O texto dinâmico nunca é pixelado e permanece nítido em todos os dispositivos.
  
• Escolha as cores com atenção. Use um esquema de cores (incluindo fundos, botões, links e texto) que tenha alto contraste de cores para garantir a legibilidade entre os níveis de brilho. Aqui estão as diretrizes de proporção de contraste para você seguir.
  
• Texto pequeno (menos de 18 pixels) deve ser de, pelo menos, 4,5 a 1.
  
• Texto grande (mais de 24 pixels) deve ser de 3,0 a 1.
  
• Teste suas cores em aremycolorsaccessible.com.
  

Confira os exemplos de texto pequeno, texto em negrito e texto grande que atendem às diretrizes de contraste (marcado como aprovado) ou não (marcado como falha). 

Pronto para se aprofundar ainda mais? Temos algumas dicas de codificação a fim de tornar seu conteúdo ainda mais fácil para pessoas que usam leitores de tela e tecnologias de assistência.

Ser claro

O princípio de design da clareza refere-se a quão legível e digerível seu conteúdo é para o usuário. A clareza é um elemento importante nas diretrizes de acessibilidade e reitera a necessidade de ter um fluxo lógico, bom espaçamento de linhas e fontes legíveis. Ela também se refere à clareza da mensagem da sua marca no design de email. Como você pode fazer isso? Seja transparente em relação ao valor de suas mensagens e mantenha as frases curtas. O espaço em branco é uma coisa boa. Também como mencionamos na unidade anterior, o posicionamento do conteúdo é fundamental. Use um formato de email consistente que coloque seu conteúdo mais importante primeiro. Torne seus emails simples, mas significativos. 

Embora seja conhecido por sua carreira literária, Antoine de Saint-Exupéry tinha palavras sábias que todos os designers e não designers deveriam seguir: "um designer sabe que alcançou a perfeição não quando não há mais nada a acrescentar, mas quando não há mais nada a tirar."

Ser responsivo em dispositivos móveis

De acordo com o Estudo de adoção e uso do consumidor da Adestra, 71% dos consumidores excluem emails que não ficam bem no celular. Não arrisque exclusões; otimize seus emails para dispositivos móveis! Há três opções a considerar na otimização para dispositivos móveis. Selecione o que funciona para sua marca, avaliando como seus clientes estão interagindo com suas mensagens e quanto tempo e experiência sua equipe de produção de email tem para criar e codificar emails. Vamos ver suas opções. 

Adicionar emoção

De acordo com a Interaction Design Foundation, o design emocional busca provocar emoções adequadas a fim de criar uma experiência positiva para o usuário. E o que a emoção tem a ver com emails? Simples: se os assinantes se importam, eles não vão apagar. Os emails podem evocar uma resposta emocional por meio da narrativa e da estética geral de suas campanhas. Vamos rever algumas considerações sobre os elementos visuais do seu email. 

Identidade visual

Mantenha-se fiel à sua marca. Use padrões claros da marca que correspondam ao seu site, de modo que se um usuário clicar em um CTA, sua experiência de email será contínua em relação à experiência de aplicativo web ou móvel. Consistência, clareza. 

Imagens e gráficos 

Envolva-se com os clientes usando gráficos de alta resolução e imagens propositais que os conectam à sua marca. Aqui vão algumas dicas específicas.

• Dobre o tamanho de suas imagens, incluindo seu logotipo, para contar com as telas de retina de alta resolução. Quando a imagem é reduzida no email, ela parece mais nítida.
  
• Veja o email sem essas imagens. Se as imagens não são carregadas ou são desativadas, seu conteúdo ainda funciona?
  

GIFs animados

GIFs animados são uma ótima maneira de chamar a atenção, mostrar várias imagens ou mostrar como algo funciona. No entanto, eles podem causar problemas de acessibilidade para assinantes com deficiência visual. Reveja suas animações em relação a essas considerações.

• Verifique se seus GIFs animados têm transições suaves.
  
• Taxas de exibição de conteúdo entre 2 Hz e 55 Hz podem prejudicar os usuários com epilepsia fotossensível.
  

Explore animação e vídeo, mas teste e revise o tempo de carregamento e o tamanho do arquivo. Se agregar valor, mantenha-os. Se não for o caso, remova-os. 

Por fim, considere rever o módulo Práticas de marketing inclusivo para ter certeza de que seu conteúdo terá o tom certo e terá a mesma representação. Na próxima unidade, examinaremos a etapa mais importante antes de clicar em Enviar: o teste. 

Recursos

• Trailhead: Práticas de marketing inclusivo
• Salesforce Blog: Como a Salesforce criou seu primeiro sistema de design de email
• Salesforce: Melhores práticas de design de email
• Site externo: Guia definitivo para emails acessíveis (download opcional)
• Site externo: Verificar a acessibilidade do email
• Site externo: Web Content Accessibility Guidelines (Diretrizes de acessibilidade para conteúdo web)
• Site externo: Are My Colours Accessible? (Minhas cores são acessíveis?)
• Site externo: Finger Friendly Design (Design amigável para os dedos)
• Site externo: How Does Your Email Sound? (Como soa seu email?)