Como as pessoas leem na Web
O guia de escrita do governo dos EUA resume o que as pessoas querem da escrita na Web:
Ao escrever para a Web, use uma linguagem simples que permita que os usuários encontrem o que precisam, entendam o que encontraram e usem isso para atender às suas necessidades.
A escrita também deve permitir ações e ser localizável e compartilhável.
Pesquisas mostram que as pessoas não leem páginas da Web, elas passam os olhos. Em média, as pessoas só leem de 20 a 28% do conteúdo de uma página da Web. A leitura em uma tela é muito mais lenta do que em papel. As pessoas desistirão e deixarão seu site a não ser que as informações sejam fáceis de acessar e entender.
Como escrever para dispositivos móveis
Concentre-se no assunto em questão e conte a história diretamente. Para que o seu texto seja adequado para diversos dispositivos e janelas de visualização, exponha seus pontos principais desde o início: em regra, idealmente nos quatro primeiros parágrafos, em cerca de 70 palavras.
Pergunte-se qual é o objetivo das pessoas ao acessar seu site. Elas estão querendo descobrir algo? Se as pessoas visitarem seu site em busca de informações, seu texto deve ser direcionado a ajudá-las a atingir esse objetivo. Escreva em voz ativa, ofereça ações e soluções.
Publique apenas o que seus visitantes querem e nada mais.
Pesquisas do governo do Reino Unido também mostram que:
80% das pessoas preferem frases escritas em linguagem direta — quanto mais complexa for a questão, maior é essa preferência (por exemplo, 97% preferem a expressão “entre outros” ao latim “inter alia”).
Quanto mais instruídas as pessoas são e mais especializados são seus conhecimentos, maior é sua preferência pela linguagem direta.
Em outras palavras: use uma linguagem direta, palavras curtas e estruturas de frase simples, mesmo para um público-alvo letrado e técnico. A não ser que haja um bom motivo para não fazer isso, mantenha o tom coloquial. Uma antiga regra do jornalismo é escrever como se você estivesse conversando com uma criança de 11 anos inteligente.
O próximo bilhão de usuários
A abordagem minimalista de escrita é particularmente importante para leitores de dispositivos móveis e é essencial ao criar conteúdo para celulares de baixo custo com pequenas janelas de visualização que exigem mais rolagem e podem ter telas de menor qualidade e menos responsivas.
A maioria do próximo bilhão de usuários que acessar a Internet terá dispositivos baratos. Esses usuários não desejarão gastar seu orçamento de dados navegando por conteúdos demasiadamente longos e podem não ler em sua língua materna. Reduza o texto: use frases curtas, pontuação mínima, parágrafos de até cinco linhas e cabeçalhos de uma linha. Considere usar um texto responsivo (por exemplo, use títulos mais curtos para janelas de visualização menores), mas esteja ciente das desvantagens.
Uma atitude minimalista também tornará seu conteúdo mais fácil de localizar e internacionalizar, além de tornar mais provável que ele seja citado nas redes sociais.
Em resumo:
- Mantenha a simplicidade
- Elimine elementos desnecessários
- Seja direto
Elimine conteúdo desnecessário
Em termos de tamanho de byte, as páginas da Web são grandes e estão ficando cada vez maiores.
Técnicas de design responsivas possibilitam o fornecimento de diferentes conteúdo para uma janela de visualização menor, mas é interessante começar otimizando o texto, as imagens e outros conteúdos.
Usuários da Web se orientam frequentemente por ações, sempre indo em busca de respostas para suas dúvidas em vez de sentar e absorver um bom livro.
Pergunte a si mesmo: qual é o objetivo das pessoas quando acessam meu site?
Todos os componentes da página ajudam os usuários a atingir esse objetivo?
Remova os elementos redundantes da página
Arquivos HTML constituem quase 70.000 e mais de nove solicitações para uma página da Web em média, segundo o HTTP Archive.
Muitos sites populares usam milhares de elementos HTML por página e milhares de linhas de código, mesmo em dispositivos móveis. Arquivos HTML de tamanho excessivo podem não fazer com que as páginas sejam carregadas mais lentamente, mas uma carga de HTML pesada pode ser um sinal de conteúdo excessivo: arquivos .html maiores significam mais elementos, mais conteúdo de texto ou ambos.
Reduzir a complexidade do HTML também reduzirá o peso da página, ajudará a permitir a localização e internacionalização e tornará o design responsivo mais fácil de planejar e depurar. Para saber mais sobre como escrever um HTML mais eficiente, consulte HTML de alto desempenho.
Cada etapa que o usuário precisar realizar antes de obter valor com seu aplicativo custará 20% dos seus usuários
O mesmo se aplica ao conteúdo: ajude os usuários a obterem o que desejam o mais depressa possível.
Não oculte o conteúdo de usuários de dispositivos móveis. Busque a paridade de conteúdo, pois tentar adivinhar quais recursos os usuários de dispositivos móveis não precisarão acabará sendo um erro para alguém. Se você tiver os recursos, crie versões alternativas do mesmo conteúdo para tamanhos diferentes de janelas de visualização, mesmo que apenas para os elementos de página de alta prioridade.
Considere o gerenciamento de conteúdo e o fluxo de trabalho: os sistemas legados resultam em conteúdo de legado?
Simplifique o texto
Conforme a Web passa para o ambiente móvel, você deve adaptar seu conteúdo. Mantenha a simplicidade, reduza elementos excessivos e seja direto.
Remova imagens redundantes
Imagens podem ser bonitas, divertidas e informativas, mas elas também ocupam espaço na página, aumentam o peso da página e aumentam o número de solicitações. A latência piora de acordo com a conectividade, o que significa que solicitações excessivas de arquivos de imagem é um problema cada vez maior conforme a Web ocupa o espaço móvel.
Imagens também consomem energia. Depois da tela, o rádio é o segundo maior consumidor de bateria. Mais solicitações de imagem, mais uso de rádio, mais baterias esgotadas. Apenas a renderização das imagens já consome energia e esse consumo é proporcional ao tamanho e ao número. Confira o relatório da Stanford Who Killed My Battery? (Quem acabou com a minha bateria?)
Se possível, livre-se das imagens!
Veja algumas sugestões:
- Considere designs que evitem o uso de imagens ou use poucas imagens. Uma página com apenas texto pode ser linda! Pergunte a si mesmo: o que os visitantes do meu site estão tentando fazer? As imagens ajudam nesse processo?
- Antigamente, era comum salvar cabeçalhos e outros elementos de texto como gráficos. Essa abordagem não responde bem a mudanças de tamanho da janela de visualização e isso aumenta o peso da página e a latência. Usar o texto como gráfico também significa que ele não será encontrado por mecanismos de pesquisa e não poderá ser acessado por leitores de tela e outras tecnologias de acessibilidade. Use texto "de verdade" quando possível — fontes da Web e CSS podem resultar em uma tipografia muito bonita.
- Use CSS em vez de imagens para gradientes, sombras, bordas arredondadas e texturas de plano de fundo, que são recursos com suporte na maioria dos navegadores modernos. Lembre-se, entretanto, de que, embora o CSS seja melhor do que imagens, ele ainda poderá incorrer em penalidades de processamento e renderização especialmente significativas para dispositivos móveis.
- Imagens de fundo raramente funcionam bem em dispositivos móveis. Você pode usar consultas de mídia para evitar imagens de fundo em janelas de visualização pequenas.
- Evite imagens na tela de apresentação.
- Use CSS para animações na interface.
- Conheça os glifos; use símbolos e ícones Unicode em vez de imagens, com fontes da Web se necessário.
- Considere usar fontes de ícone; elas são gráficos vetoriais que podem ser expandidos infinitamente e um conjunto inteiro de imagens pode ser baixado em uma só fonte. (No entanto, estas informações devem ser consideradas.)
- O elemento
<canvas>pode ser usado para compilar imagens em JavaScript, de linhas, curvas, texto e outras imagens. - Inline SVG ou imagens URI de dados não reduzirão o peso da página, mas podem reduzir a latência ao diminuir o número de solicitações de recursos. O Inline SVG tem um bom suporte em navegadores de computadores e dispositivos móveis, e ferramentas de otimização podem reduzir o tamanho do SVG de forma significativa. Da mesma forma, também há um amplo suporte para URIs de dados. Ambos elementos podem ser incorporados ao CSS.
- Considere usar
<video>em vez de GIFs animados. O elemento video tem suporte em todos os navegadores móveis (exceto no Opera Mini).
Para saber mais, consulte Otimização de imagens e Eliminar e substituir imagens.
Crie conteúdo de forma que ele se adeque a diferentes tamanhos de janela de visualização
"Crie um produto, não reimagine um existente para telas pequenas. Bons produtos para dispositivos móveis são criados, nunca adaptados."
— Design e desenvolvimento para dispositivos móveis, Brian Fling
Grandes designers não ‘otimizam para dispositivos móveis’, mas pensam de forma responsiva para criar sites que se adequam a uma grande variedade de dispositivos. A estrutura do texto e dos demais elementos da página são essenciais para o sucesso em diferentes dispositivos.
Muitos do próximo bilhão de usuários que acessarão a Internet usarão dispositivos de baixo custo com pequenas janelas de visualização. A leitura em uma tela de 3,5 pol ou 4 pol com baixa resolução pode ser difícil.
Veja uma imagem dos dois celulares juntos:
Na tela maior, o texto é pequeno, porém legível.
Na tela menor, o navegador renderiza o layout corretamente, mas o texto fica ilegível, mesmo ampliando o zoom. A tela fica desfocada e as cores desbotadas — o branco não parece branco — o que torna o conteúdo menos legível.
Crie conteúdo para dispositivos móveis
Ao criar conteúdo para diversas janelas de visualização, considere o conteúdo, o layout e o design gráfico, crie designs com texto e imagens reais, não conteúdo fictício
"O conteúdo está à frente do design. Design sem conteúdo não é design, é decoração."
— Jeffrey Zeldman
- Coloque seu conteúdo mais importante na parte superior, pois os usuários tendem a ler páginas da Web em um padrão de F.
- Os usuários acessam seu site para cumprir um objetivo. Pergunte-se do que eles precisam para cumprir esse objetivo e livre-se do resto. Seja rígido quanto a ornamentos visuais e textuais, conteúdo de legado, links excessivos e outros itens desnecessários.
- Tenha cuidado com ícones de compartilhamento social, pois eles podem deixar o layout desorganizado e seu código pode tornar o carregamento lento.
- Crie layouts responsivos para o conteúdo e não tamanhos fixos de dispositivo.
Teste o conteúdo
- Verifique a legibilidade em janelas de visualização menores usando o Chrome DevTools e outras ferramentas de emulação.
- Teste seu conteúdo em condições de baixa largura de banda e alta latência; experimente o conteúdo em diversos cenários de conectividade.
- Experimente ler e interagir com seu conteúdo em um celular de baixo custo.
- Peça que amigos e colegas experimentem seu aplicativo ou site.
- Compile um laboratório de teste de dispositivos simples. O repositório do GitHub para o Mini Mobile Device Lab da Google tem instruções sobre como compilar um laboratório próprio. O OpenSTF é um aplicativo da Web simples para testar sites em vários dispositivos Android.
Veja o OpenSTF em ação:
Dispositivos móveis são cada vez mais usados para consumir conteúdo e obter informações, não apenas dispositivos para comunicação, jogos e mídia.
Isso faz com que seja extremamente importante planejar o conteúdo para que ele se adeque a diversos tipos de janelas de visualização e priorizar o conteúdo ao planejar o layout, a interface e o design de interação para vários dispositivos.
Entenda os custos dos dados
As páginas da Web estão ficando maiores.
De acordo com o HTTP Archive, o peso da página dos um milhão maiores sites agora é, em média, de 2 MB.
Usuários evitam sites ou aplicativos que parecem lentos ou caros, portanto, é essencial entender o custo de carregar os componentes da página ou do aplicativo.
Reduzir o peso da página também pode ser lucrativo. Chris Zacharias do YouTube descobriu que, ao reduzir o tamanho da propriedade watch-page de 1,2 MB para 250 KB:
Muitas pessoas que antes não conseguiam usar o YouTube passaram a conseguir.
Em outras palavras, reduzir o peso da página pode abrir mercados inteiramente novos.
Calcule o peso da página
Existem várias ferramentas para calcular o peso da página. O painel Network do Chrome DevTools mostra o tamanho total em bytes de todos os recursos e pode ser usado para identificar os pesos de tipos de ativos individuais. Você também pode verificar quais itens foram recuperados do cache do navegador.
O Firefox e outros navegadores oferecem ferramentas semelhantes.
WebPagetest oferece a capacidade de testar o primeiro carregamento de página e os carregamentos subsequentes. Você pode automatizar os testes com scripts (por exemplo, para fazer login em um site) ou usando suas RESTful APIs. O exemplo a seguir (carregar developers.google.com/web) mostra que o armazenamento em cache foi bem-sucedido e que os carregamentos de página subsequentes não precisaram de recursos adicionais.
O WebPagetest também fornece um detalhamento de tamanho e solicitação por tipo MIME.
Calcule o custo da página
Para muitos usuários, os dados não custam apenas bytes e desempenho, custam dinheiro.
O site What Does My Site Cost? permite que você estime o custo financeiro real de carregar seu site. O histograma abaixo mostra quanto custa (usando um plano de dados pré-pago) para carregar o site amazon.com.
Lembre-se de que isso não considera a renda como fator acessibilidade. Os dados do blog.jana.com mostram o custo dos dados.
| Plano de dados de 500 MB custo (USD) |
Salário mínimo por hora (USD) |
Horas de trabalho necessárias para pagar pelo plano de dados de 500 MB |
|
| Índia | US$ 3,38 | US$ 0,20 | 17 horas |
| Indonésia | US$ 2,39 | US$ 0,43 | 6 horas |
| Brasil | US$ 13,77 | US$ 1,04 | 13 horas |
O peso da página não é um problema apenas para mercados emergentes. Em muitos países, as pessoas usam planos móveis com dados limitados e evitarão seu site ou aplicativo se perceberem que ele será pesado e caro. Mesmo planos de dados de celular e Wi-Fi "ilimitados" geralmente têm um limite de dados que, se atingido, o fluxo de dados é bloqueado ou reduzido.
Resumo: o peso da página afeta o desempenho e aumenta o custo. Otimizar a eficiência do conteúdo mostra como reduzir esse custo.