Branded Infographic

Este infográfico tem como foco educar os usuários de sua marca. O Branded Infographic é perfeito para uma grande quantidade de conteúdo. Cada seção é projetada para tornar grandes quantidades de texto mais fáceis de serem absorvidos, enquanto o usuário passa pela experiência. Seus usuários serão apresentados com 5 seções onde poderão explorar melhor sua empresa. Para capturar o envolvimento do visitante, este infográfico inclui imagens animadas, odômetros, reveals, e é completo com uma linha do tempo interativa ao final. Os usuários são então apresentados com a opção de entrar em contato com sua empresa caso estejam interessados em sua marca. 

COMPLEXIDADE

Média

FORMATO

Infográfico

Aplicação

Educação

Interatividade disponível

Principais features, funcionalidades e elementos interativos utilizados neste template.

Scroll-to

Anchor will allow you to link a section or page element to a specfic link or button. A use case for this would be to place an anchor on an about section that links to the About link in the page's navigation.

Animations

Lightbox will allow you to create pop-up windows on your page via click or on page load. A use case for this would a video lightbox displaying a video in a pop-up window in the center of the screen when a button or link is clicked on to play the video.

Form

Reveal will allow you to create two-state interactive content. A use case for this would be an information tooltip, where in one state an information icon is seen but when hovered or clicked on, a second state is shown displaying the tooltip text.

Timeline (Lightbox)

Accordion will allow you to organize content vertically into separate sections that expand and contract when clicked on. A use case for this would be to create a FAQ of product or service related questions, where each accordion label would have it's own questions and the answer within the accordion section.

Reveals

Flow will allow you to build step-based interactive elements, such as Tabs, Accordions, and other elements, with great customizability. Use cases and examples of it's power are the abiltiy to create a carousel of images all the way to a one page assessment that presents one question at a time.

Flows

Animation will allow you to animate elements via microthemes. A use case for this would be to have a section fade up and in to a page via scroll.

Odometer

Form will allow you to build simple to complex forms that contain different types of inputs and toggles, and can be combined with rules to create logic based results. Use cases for a Form are quizzes, assessments, calcuators, and traditional forms.

Passo a passo

Guia prático e ilustrado para te ajudar a tirar o máximo proveito das features, funcionalidades e elementos interativos disponíveis neste template na hora de editar e personalizar a sua experiência.

Selecione uma seção para a qual você deseja que o CTA faça o scroll-to.

Atribua uma âncora a uma seção específica para a qual o botão irá rolar. (Ex: Seção 8 - Tópico). 

Selecione o botão que irá se conectar à âncora e atribua uma Tag única. 

Selecione o elemento que você deseja animar.

Sob o painel Animations, escolha o tipo de gatilho de animação.
Da lista de animações, selecione a animação desejada.
Para remover uma animação existente, clique no X ao lado da etiqueta da animação sob o painel Animations.

Para editar as diferentes entradas do Formulário, selecione um dos Textboxes.

Sob o painel Variables, clique no link de Data field para abrir as listas de campos de dados.

Selecione uma categoria do painel Categories à esquerda. 

Escolha seu campo Data field e pressione OK.

Para atualizar o conteúdo dentro de seu Flow, comece selecionando-o na tela.

Dentro do Fluxo, localize o primeiro Flow Step no topo. Você pode editar o conteúdo dentro do container, adicionar conteúdo ou remover todo o conteúdo da Flow Step.

Na parte inferior do Fluxo está uma Barra de progresso que é usada para indicar o Flow Step ativo e também é usada como botões para navegar através dos passos. Você pode remover isso visitando a aba Edit e removendo o Microtheme. 

Você também pode mudar o estilo da navegação escolhendo o Microtheme.
Após escolher o Flow Microtheme, outro menu suspenso aparecerá onde você pode escolher a partir de uma lista de opções de sub-categoria.
Você pode escolher o comportamento entre os Flow Steps selecionando a partir da categoria All Steps no menu dropdown.

Produção de Conteúdo

Documento delineando a estrutura do template para facilitar a produção do conteúdo escrito, desde acessar os direcionamentos estratégicos, a compreender a estrutura textual, até identificar a quantidade de palavras e imagens necessárias para cada etapa da redação.
Template para a produção do conteúdoOpens in a new window.

Melhores práticas

Certifique-se de taguear tudo o que pode ser tagueado para que você tenha os dados propriamente coletados e devidamente organizados e identificáveis em seus relatórios de desempenho.

Reveals
Flows
Flowsteps
Links
Tabs
Accordions
Lightboxes
Rotators
Sliders

O ponto de conversão é a medida mais importante para determinar se a taxa de conversão da sua experiência está dentro das expectativas. Recomendamos ter somente um ponto de conversão por conteúdo. Você pode marcar um ponto de conversão a partir de:

Links
Behaviors
Actions

Antes de ir ao ar como seu conteúdo interativo, não deixe de realizar um último controle de qualidade. Esse processo revisará a experiência como um todo, apontando quaisquer ajustes necessários antes da publicação. Seguem os pontos mais importantes a serem conferidos antes do lançamento da experiência:

  • Conferir quaisquer integrações 
  • Conferir o ponto de conversão 
  • Conferir o tagueamento
  • Links externos estão funcionando corretamente (abrindo em uma nova aba)
  • Marcar respondentes sempre como novos caso use a experiência em algum evento ao vivo
  • Desmarcar as diretrizes de meta robots (no archive, no follow, no index)
  • Remover path description (se aplicável)
  • Certificar que a fonte de tráfego foi adicionada ao compartilhamento em redes sociais — og URL, Twitter (criar bit.ly), e-mail
  • Depois de publicada, testar postagem no Facebook (se aplicável)

 

Templates relacionados

Se você gostou deste template, talvez queira conferir também esses outros modelos similares.

Ficou alguma dúvida?

Ainda com dúvidas ou enfrentando problemas ao lidar com este template? Por favor, não deixe de mandar suas perguntas para que possamos manter essa página constantemente atualizada.
Nome
E-mail
Dúvida