Melhores práticas para criar uma História Web de sucesso

Histórias Web são um formato de narrativa imersiva, com interação via toque e fáceis de compartilhar. Histórias Web são criadas usando uma subseção do framework AMP. São uma oportunidade para criadores e editores estruturarem o conteúdo em uma experiência de tela inteira, visualmente rica, envolvente e mobile-first para os usuários.

Histórias Web têm conteúdo reduzido e são fáceis de usar. Os leitores gostam dar mordidas rápidas nesses conteúdos em seus micro momentos. Experiências como esperar o metrô ou pegar um café são oportunidades para o consumo de seu conteúdo condensado. Garanta que cada mordida seja envolvente e deliciosa, seguindo estas práticas recomendadas neste documento, para criar uma História Web envolvente que possa ser consumida de forma satisfatória.

Resumo

Principais dicas para criar uma história da web agradável e fácil de consumir:

• Conte uma história completa e interessante.
• Maximize o impacto da sua página de capa com recursos visuais de alta qualidade e um título atraente.
• Construa a história de forma visual com vídeos e imagens que se ajustem e preencham a tela do usuário.
• Você pode dizer muito, com menos, especialmente quando usa recursos visuais. Procure manter o texto abaixo de 10 palavras por página.
• Ao usar vídeos, os mais curtos são melhores, então tente limitar-se a menos de 15 segundos.
• Algumas pessoas e situações requerem visualização sem som. Mantenha o conteúdo inclusivo adicionando legendas aos vídeos.
• Dê aos leitores algo para explorar com toques. Uma extensão média de 10 a 20 páginas permite que a maioria dos autores conte uma boa história.
• Não abuse das animações ou incorporações e preste atenção ao tempo de transição.

Conheça sua narrativa

Planeje a introdução da história, crie um arco e construa uma narrativa completa. Depois que você já souber o que vai dizer, quebre em partes. Cada página de uma História Web deve transmitir uma única ideia que funcione de forma coesa com as outras.

Conteúdo organizado e fácil de consumir

Cada História Web deve ter no mínimo 4 páginas e, idealmente, menos de 30. Histórias Web precisam ser bem contadas e fáceis de consumir. Se for necessário para sua narrativa, use mais de 30 páginas.

Me leia! Embalagem

Sua página de rosto é a embalagem da sua História Web. É a primeira coisa que os leitores verão e, se não abrirem, a única coisa que verão. Garanta que seja muito atraente! Uma boa capa tem dois elementos: recursos visuais sedutores e um título curto e memorável.

Recursos visuais

Use um retrato ou vídeo de alta qualidade que caiba em tela inteira. Deixe seus fãs reconhecerem sua marca incluindo um favicon e um logotipo.

Título

Mantenha o título objetivo e limpo, de preferência com menos de 10 palavras e menos de 40 caracteres. Inclua o autor e o nome da publicação e adicione uma data de publicação se for relevante para a história.

Marca e data

Os leitores precisam saber quem publicou a História Web e quando. Inclua uma atribuição de marca e uma data de publicação na página de rosto. Isto promove a confiança e, se um usuário gostar do seu conteúdo, a lealdade. Esta História Web da CNN sobre viagens pela Itália deixa claro quem publicou a história e se é recente ou não.

Apelo visual

Atraia seus leitores com recursos visuais de qualidade que capturem sua atenção e textos que possam ser lidos de forma fácil e rápida. Use principalmente vídeos e imagens de alta qualidade, mas tempere um pouco com animações quando fizer sentido.

Todas as imagens e vídeos devem ocupar a tela inteira com o uso mínimo de letterbox, onde fizer sentido.

Vídeo

Vídeos são altamente envolventes para os leitores. Inclua o máximo que puder na sua História Web. Procure vídeos com menos de 15 segundos. Se você tiver um vídeo mais longo, considere dividi-lo em partes menores.

Histórias Web são consumidas no formato retrato, portanto, lembre-se do seguinte:

• Grave vídeos em dispositivos móveis de última geração, quando possível.
• Grave em 480p.
• Grave em pelo menos 24 quadros por segundo.

Garanta que seu conteúdo esteja acessível. Redimensione os vídeos para liberar espaço para texto e legendas na parte inferior. Nem todos os leitores poderão, ou desejam, ouvir o conteúdo do vídeo.

Imagens

Use tela inteira, imagens em formato retrato e com boa resolução (828 x 1.792).

Evite fotos cortadas em formato paisagem.

Corte com atenção

Mantenha o foco no que é importante. Recorte elementos desnecessários ou que distraiam e garanta que o assunto principal da foto esteja completo e focado. Lembre-se de que as partes superior e inferior das imagens podem ser cortadas em alguns dispositivos, portanto, teste antes de publicar.

FAÇA	NÃO FAÇA
Esta imagem foi cortada para se alinhar ao conteúdo da página e apoia a ideia principal.	Com este recorte, não está claro onde o foco do leitor deve estar nem qual a ideia que a imagem pretende transmitir.

Texto

Garanta que o texto seja legível. A fonte tamanho 24 deve ser o menor tamanho usado, mas faça com que seja o maior e mais legível que puder. Contraste a cor do texto com o fundo da página da história ou imagem. Não inclua imagens ou vídeos que sejam apenas texto.

FAÇA	NÃO FAÇA
Um alto contraste deixar as palavras mais fáceis de ver.	Com pouco contraste, suas palavras e imagens podem se misturar, tornando as palavras difíceis de ler e a história mais difícil de seguir.
Destacar o texto pode fazer com que as palavras se sobressaiam e ajuda a manter os leitores focados em sua história.	O uso de texto de cor clara sobre uma imagem clara torna as palavras difíceis de ler.

Petiscos de palavras

O texto deve ser servido como petisco, não como refeições. Tente mantê-lo abaixo de 200 caracteres ou menos por página.

Trate os detalhes como uma lista de ingredientes, torne-os disponíveis, mas apenas se os usuários solicitarem. Inclua conteúdos de texto longos em anexos de página. Os anexos de página comunicam ao usuário que há mais para ler. Eles podem deslizar para cima no dispositivo se estiverem interessados.

Uma página com conteúdo de texto maior que uma frase pode ser inevitável. Tente não deixar que esse tipo de página ocupe mais de 10% do total de páginas da história.

FAÇA	NÃO FAÇA
Tente focar o texto apenas no essencial. A variação no tamanho e estilo dos tipos para criar divisões entre blocos de texto pode otimizar a leitura.	Uma grande parede de texto como esta pode ser difícil de ler e pode desestimular o envolvimento com sua história.

Animações

As animações são apetitosas quando feitas com um propósito, como quando adicionam movimento a imagens estáticas. Você pode animar imagens e recursos com efeitos de fly-in, rotação ou fade-in.

FAÇA	NÃO FAÇA
O movimento neste exemplo ajuda a apoiar a ideia principal e adiciona um elemento dinâmico à página.	Esta página estática é funcional, mas pode estar perdendo uma oportunidade de ser mais envolvente para os leitores.

Mas, use com moderação, pois as animações podem se tornar desagradáveis se usadas em excesso. Evite abusar de um único sabor e tempere as animações com moderação.

O timing é tudo

As páginas devem completar rapidamente - uma animação não deve impedir o usuário de avançar para a próxima página - mas não rápido demais! É importante fornecer a combinação certa de estilo e duração. Por exemplo, animações simples devem durar menos de 500 milissegundos, mas a panorâmica em uma imagem de fundo deve durar mais.

Seja criativo com movimentos. Anime vários objetos em uma sequência, em vez de fazer com que eles se movam juntos num único efeito. Os elementos podem ter diferentes efeitos e durações que contribuem para uma animação coesa.

Combinações perfeitas

Combine seu estilo de animação com a estética de sua história. Use a biblioteca de animação de Histórias Web disponível para ajudá-lo a encontrar um estilo e intensidade que funcione para você, sem provocar distrações em relação ao conteúdo.

Fome de querer mais

Permita que os usuários explorem mais o seu tópico incorporando conteúdo de terceiros, anexando informações adicionais e criando links para novos locais.

Incorporações estratégicas

As incorporações (embeds) proporcionam uma dimensão adicional onde conteúdo relevante pode ser apresentado de forma agradável. Inclua conteúdo relevante junto com a incorporação para que seja uma parte integrante da história. É possível que você precise habilitar a interatividade para seu objeto incorporado.

FAÇA	NÃO FAÇA
A incorporação nesta página integra-se bem com o resto do layout. O título, a data e os gráficos de fundo ajudam a melhorar o visual.	Colocar o objeto incorporado sozinho na página dá uma aparência de algo inacabado e não se integra bem com a história completa.

Anexe conteúdo adicional

Mantenha sua História Web curta e eficiente, deixando conteúdo relacionado em anexos. Dessa forma, os leitores podem cavar mais fundo se quiserem saber mais sobre sua história. Os leitores navegam numa história com mais facilidade quando o conteúdo adicional é anexado às páginas relevantes.

Anexos funcionam bem com blocos de texto longos ou, se sua história contiver um vídeo de destaque, você pode incluir o vídeo completo como anexo.

Link para novas localidades

Você pode adicionar links em qualquer lugar em uma página de História Web. Tocar em um link faz surgir um tooltip que informa ao usuário para onde vai o link e permite que ele confirme a ação antes de sair da história.

FAÇA	NÃO FAÇA
Os links nesta página são claramente marcados e cercados por conteúdo relacionado. Eles não interferem na navegação da história.	Os links nesta página bloqueiam completamente a navegação. Os leitores não conseguirão navegar facilmente para a página anterior ou seguinte.

Pense estrategicamente sobre o tamanho, localização e frequência das aparições do seu link. Muitos elementos tocáveis podem complicar a navegação e frustrar os leitores.

Programe ou crie

As histórias da web podem ser codificadas manualmente do zero ou criadas usando ferramentas de criação.

Se você estiver programando manualmente uma história da Web, você irá criá-las do zero usando o framework AMP. Siga o tutorial Create your first Web Story para começar. Depois de criar sua História Web, certifique-se que ela passe na validação AMP. Você pode testá-la no Validador AMP. Veja mais informações em Web Story technical details.

• Written by @CrystalOnScript