Um ótimo site não apenas exibe informações, como também oferece insights valiosos. Ele interage com você. As pessoas que interagem com o seu site esperam um feedback instantâneo confirmando que suas ações foram registradas. Sem essas pequenas respostas, os visitantes ficam frustrados e vão embora.
Neste post, explicaremos por que esses elementos são importantes e mostraremos exatamente como adicioná-los sem precisar programar. Também mostraremos como o Divi 5 torna a adição de microinterações ao seu site WordPress tão fácil quanto criar sites completos. Vamos lá!
O que são microinterações?
Microinterações são as pequenas respostas que seu site fornece quando alguém clica, passa o cursor sobre ele ou rola a página. Por exemplo, ao pressionar um botão, ele se move ligeiramente ou muda de cor, o que é um exemplo de microinteração em funcionamento.
Ao passar o cursor sobre uma imagem e vê-la inclinar ou mover-se, você está experimentando o mesmo efeito. Essas rápidas mudanças visuais permitem que as pessoas saibam que suas ações estão sendo registradas e o site as reconhece.
Como as microinterações melhoram seus sites
Esses pequenos detalhes impactam diretamente o tempo que as pessoas permanecem no seu site e se elas concluem as ações desejadas. Sites com microinterações bem projetadas apresentam maior engajamento e melhores taxas de conversão.
Nossos cérebros respondem ao feedback instantâneo. Cada pequena confirmação gera satisfação, o que impulsiona o progresso. Pessoas que recebem essas respostas sentem-se mais no controle, permanecem mais tempo em atividades e concluem mais tarefas.
O efeito se acumula em todo o seu site; uma melhor usabilidade leva a menos solicitações de suporte. Visitantes que se sentem confiantes navegam por mais páginas, em vez de abandonar o site imediatamente. Pequenas melhorias em cada ponto de interação se somam a um desempenho visivelmente melhor.
Isso acontece sem grandes reformulações ou novos recursos. Você simplesmente torna as ações existentes mais responsivas e intencionais.
Microinterações vs. Animações
Esses termos são frequentemente usados como sinônimos, como se significassem a mesma coisa. Não significam, e a diferença afeta o desempenho do seu site. Uma ferramenta responde às ações dos visitantes, enquanto a outra funciona de forma independente. Saber qual ferramenta faz o quê ajuda você a criar sites com melhor conversão.
A diferença é importante para o que eles fazem no seu site:
Ambos os elementos são essenciais em sites modernos. As microinterações engajam as pessoas ao reconhecerem suas ações, enquanto as animações adicionam refinamento e personalidade. Quando os recursos são escassos, priorize as microinterações.
Como adicionar microinterações sem código
A maioria das plataformas de sites modernas agora inclui configurações de interação integradas diretamente em seus editores. O Webflow oferece um painel de Interações com mais de 20 animações predefinidas.
O Framer funciona através de variantes de componentes que fazem a transição automática entre estados.
O Wix Studio organiza tudo em uma aba "Interações", onde você seleciona os gatilhos e ajusta o tempo usando controles deslizantes
Mesmo plataformas sem recursos de interação dedicados geralmente oferecem suporte a estados básicos de foco. Quando os visitantes movem o cursor sobre elementos, você pode alterar cores, ajustar tamanhos e trocar imagens. Essas alterações de estado simples não exigem código e ficam nas configurações de estilo da sua plataforma.
Frameworks de animação que você pode adicionar em qualquer lugar.
Você pode adicionar frameworks de animação a qualquer site, caso sua plataforma não possua esses recursos. Não é exatamente "sem código", mas requer relativamente pouco código. Se você dedicar algum tempo para se familiarizar com a documentação e a vasta gama de tutoriais no YouTube, poderá começar rapidamente.
Por exemplo, o Motion é uma biblioteca de animação de código aberto para React, JavaScript e Vue que facilita a criação de animações web suaves e de alto desempenho.
O GSAP é responsável por muitas das animações mais suaves da web. Você inclui a biblioteca, seleciona os elementos desejados e define os gatilhos. O framework lida automaticamente com a compatibilidade entre navegadores e o desempenho.
Essas bibliotecas leves adicionam menos de 50 KB ao seu site e funcionam em qualquer plataforma que permita adicionar código personalizado.
Adicionando microinterações no WordPress
O WordPress lida com interações de forma diferente de outras plataformas. Em vez de depender de frameworks externos ou recursos nativos da plataforma, ele oferece um ecossistema completo de plugins que adicionam interações sem a necessidade de código.
O editor Gutenberg inclui configurações básicas de estado de foco para alguns blocos.
Você também pode usar plugins como o Animate It!, que aplica animações CSS3 a qualquer elemento do seu site através de uma interface no editor do WordPress. Você seleciona o que aciona a animação: rolagem, clique ou passar o mouse. O plugin inclui mais de 50 estilos de animação. O Amazing Hover Effects foca em interações de passar o mouse com 20 efeitos predefinidos que você aplica através de shortcodes. No entanto, este plugin não é atualizado há anos.
Essas bibliotecas leves adicionam menos de 50 KB ao seu site e funcionam em qualquer plataforma que permita adicionar código personalizado.
Adicionando microinterações no WordPress
O ordPress lida com interações de forma diferente de outras plataformas. Em vez de depender de frameworks externos ou recursos nativos da plataforma, ele oferece um ecossistema completo de plugins que adicionam interações sem a necessidade de código.
O editor Gutenberg inclui configurações básicas de estado de foco para alguns blocos.
Você também pode usar plugins como o Animate It!, que aplica animações CSS3 a qualquer elemento do seu site através de uma interface no editor do WordPress. Você seleciona o que aciona a animação: rolagem, clique ou passar o mouse. O plugin inclui mais de 50 estilos de animação. O Amazing Hover Effects foca em interações de passar o mouse com 20 efeitos predefinidos que você aplica através de shortcodes. No entanto, este plugin não é atualizado há anos.
O Motion.page oferece uma versão em plugin para WordPress do seu framework. Você tem acesso ao editor visual diretamente no painel de controle, em vez de precisar programar animações manualmente. Ele preenche a lacuna entre frameworks e plugins.
O GreenShift e o Blocks Animation funcionam diretamente com o editor de blocos Gutenberg. Você adiciona microinterações enquanto edita o conteúdo através dos painéis de configurações de cada bloco, sem precisar alternar entre diferentes ferramentas.
A desvantagem aparece rapidamente. A maioria dos bons plugins de animação custa entre US$ 39 e US$ 99 por ano. As atualizações nem sempre sincronizam e conflitos acontecem. Há sempre o risco de o plugin ser abandonado, o que pode levar a uma série de problemas de segurança.
E depois há a interface do Gutenberg. Os painéis de configurações empilham-se verticalmente e as opções de animação escondem-se em menus aninhados. É preciso percorrer dezenas de configurações para encontrar a que precisa. O fluxo de trabalho torna-se mais lento quando se tenta refinar o tempo ou ajustar as curvas de suavização.
Os construtores de páginas do WordPress podem oferecer uma maneira melhor.
Os construtores de páginas do WordPress combinam design de layout e interações em uma única ferramenta. Através da mesma interface, você cria a estrutura da página e adiciona animações. Alguns fazem isso melhor do que outros.
O Elementor inclui efeitos de movimento em sua interface.
O Beaver Builder também oferece alguns módulos de animação. No entanto, estes são por vezes muito limitados e pouco intuitivos.
Como o Divi facilita a adição de microinterações
Divi é um tema para WordPress e um construtor visual usado em milhares de sites.
Sua interface é do tipo "arrastar e soltar", e você pode escolher entre mais de 200 módulos , incluindo sliders, formulários de contato, tabelas de preços e galerias. Não é necessário conhecimento de programação.
A versão mais recente do Divi, o Divi 5, é uma reconstrução completa da estrutura Divi. A equipe reescreveu todo o código-fonte para criar um construtor mais rápido que lida com páginas complexas sem perder desempenho.
Esta versão introduz alterações arquitetônicas que aceleram todas as etapas da experiência de edição. As páginas carregam mais rapidamente, o construtor responde instantaneamente às suas ações e as atualizações afetam apenas o que você modifica. Assim, você evita as atualizações desnecessárias que antes tornavam o fluxo de trabalho mais lento.
Você terá acesso a novos sistemas de layout , como CSS Grid e Flexbox, que estão alinhados com as práticas modernas de design web. A interface também está mais fluida. Clique diretamente no texto para editá-lo, ancore os painéis de configurações na lateral e acompanhe sua navegação na estrutura da página com o recurso de trilha de navegação (breadcrumbs).
O Divi 5 entrou recentemente em fase beta , o que significa que a funcionalidade principal está sólida e pronta para sites em produção. A equipe lança atualizações a cada duas semanas, adicionando recursos e aprimorando a experiência à medida que avançam para o lançamento da versão estável.
Novidades no Divi 5
O Divi 5 reúne anos de melhorias em uma única versão. A equipe reconstruiu toda a plataforma e adicionou recursos que transformam a sua forma de trabalhar. Aqui está uma breve visão geral das novidades lançadas até o momento:
- Inspector : Ferramenta de visão geral que exibe qualquer elemento e todos os seus elementos filhos. Edite em massa cores, fontes, tamanhos, conteúdo e predefinições de todos os elementos simultaneamente.
- Módulos WooCart e Checkout : Oito módulos para personalizar as páginas do carrinho e do checkout com controle total do design.
- Atributos personalizados : Para melhorar a acessibilidade, adicione qualquer atributo HTML, como alt, title, rel e aria-label, a elementos e subelementos.
- Editor Responsivo : Visualize, modifique e redefina os estados responsivo, de foco e fixo para qualquer configuração, permanecendo em qualquer modo de visualização.
- Construtor de Loops : Repita qualquer conteúdo com consultas personalizadas. Funciona com posts, tipos de posts personalizados, campos ACF e loops aninhados.
- Linhas aninhadas : Posicione linhas dentro de colunas com profundidade de aninhamento ilimitada para layouts complexos.
- Unidades Avançadas : Suporte completo para unidades CSS (rem, em, vw, vh), além de funções como clamp(), calc(), min() e max() por meio de controles visuais.
- Pontos de interrupção personalizáveis : Sete pontos de interrupção com valores de pixel personalizados e dimensionamento de tela para testar qualquer largura de tela.
- Predefinições de grupo de opções : Salve propriedades de design específicas como predefinições reutilizáveis que funcionam em módulos, colunas, linhas e seções.
- Variáveis de design : Salve seis tipos de variáveis (cores, fontes, números, texto, imagens, links) e atualize-as uma única vez para alterar todo o seu site.
- Gerenciamento de atributos : Copie atributos específicos entre diferentes tipos de módulos usando opções de colagem seletiva.
Muitas outras atualizações foram lançadas ou serão lançadas em breve!
Interações e animações Lottie simplificam microinterações.
O Divi 5 criou dois recursos específicos para microinterações. As interações lidam com o lado comportamental. Você escolhe um gatilho e seleciona uma ação, e o site responde. Alguém clica em um botão e você pode exibir um formulário. Se a pessoa rolar a página até a metade, um elemento aparece gradualmente.
O sistema inclui gatilhos para cliques, movimentos do cursor, alterações na área de visualização e carregamento de página. Você criaria interações no mesmo local onde ajusta o espaçamento e as cores.
Além disso, adicionar animações Lottie ficou mais fácil do que nunca com o novo Módulo Lottie . São arquivos JSON com menos de 50 KB, mas que se adaptam a qualquer resolução.
Você carrega um arquivo, define quando ele será reproduzido e ajusta a velocidade, se necessário. Os arquivos podem ser reproduzidos em loop, uma única vez ou responder à posição de rolagem.
Como adicionar microinterações ao seu site Divi 5
O Divi 5 inclui duas ferramentas específicas criadas para adicionar microinterações ao seu site. Ambas funcionam dentro do Construtor Visual, permitindo que você trabalhe em um só lugar durante todo o processo de design. A configuração leva apenas alguns minutos e você pode controlar exatamente quando e como essas interações respondem aos seus visitantes. Veja como usá-las:
Adicionando microinterações usando interações
Abra qualquer módulo, linha, coluna ou seção no Construtor Visual e clique na guia Avançado. Encontre o menu suspenso Interações e clique no ícone de mais (+) para adicionar sua primeira interação.
Três campos controlam tudo. O Evento de Acionamento determina o que inicia a interação, como um clique, passar o cursor sobre o elemento, entrada na área visível da tela ou carregamento da página.
A ação de efeito define o que acontece em seguida, seja mostrar elementos, ocultá-los, alternar predefinições, adicionar atributos ou espelhar o movimento do mouse.
O Módulo de Destino indica ao Divi qual elemento receberá o efeito, mas primeiro você precisa nomear esse elemento de destino usando seu rótulo administrativo na aba Conteúdo para encontrá-lo rapidamente. Pode ser difícil identificar o módulo no menu suspenso sem um rótulo.
Use também o campo de rótulo administrativo na parte superior das configurações de interação. Páginas com vários gatilhos ficam caóticas sem nomes claros. Dê o nome de "Inclinar Imagem" a um botão que revela conteúdo, em vez de deixá-lo como está.
Os atrasos temporais adicionam um toque de refinamento. Configure os pop-ups para aparecerem cinco segundos após o carregamento ou combine gatilhos de viewport com atrasos para que as animações se sincronizem com a posição de rolagem.
Salve e use o botão de pré-visualização para testar antes de publicar. Se quiser saber mais, aqui está uma publicação detalhada sobre como usar esse recurso .
Configurando a interação com a Lottie
O módulo Lottie precisa de arquivos de animação para funcionar, e você encontrará diversas opções gratuitas em sites como o LottieFiles. Navegue pelas bibliotecas, selecione uma animação que se adeque ao seu projeto e baixe o arquivo JSON correspondente para o seu computador.
Antes de fazer o upload, você precisa configurar o WordPress para aceitar arquivos JSON. A plataforma os bloqueia por padrão por motivos de segurança. Você pode adicionar um pequeno trecho de código ao arquivo functions.php do seu tema filho ou, se preferir evitar o código, instalar um plugin como o File Upload Types , que faz isso automaticamente.
Acesse o Construtor Visual e adicione o Módulo Lottie onde você deseja inserir a animação.
Clique na aba Conteúdo e carregue seu arquivo JSON. Ele será salvo na sua biblioteca de mídia como qualquer outra imagem.
Agora vem a parte divertida. O menu suspenso "Acionar Animação" define quando a animação será reproduzida. Escolha "Carregar" para iniciá-la assim que a página abrir ou "Visualizar" para aguardar até que os visitantes rolem a página até esse ponto. "Passar o mouse" e "Clicar" respondem à atividade do cursor. "Rolar para Animar" vincula cada quadro à posição de rolagem, criando efeitos que se movem conforme as pessoas navegam pela página.
A animação em loop mantém o movimento contínuo.
A velocidade da animação controla a rapidez com que ela é reproduzida, e a direção a faz avançar ou retroceder.
O Modo de Reprodução alterna entre a reprodução padrão e um efeito de balanço que vai e volta.
A aba Design funciona de forma semelhante a outros módulos do Divi, permitindo ajustes de tamanho, alinhamento, altura e espaçamento. Não é possível alterar as cores da animação dentro do Divi, mas a maioria dos sites Lottie permite selecionar cores antes do download.
Esta postagem fornece instruções mais detalhadas sobre como usar o Lottie no Divi 5 .
Faça cada clique valer a pena
Pequenas respostas importam mais do que você imagina. Um botão confirmando o clique, um efeito de foco que exibe algo clicável e uma rolagem que dá vida ao conteúdo. Essas interações diferenciam sites confiáveis daqueles que as pessoas abandonam. As técnicas que abordamos oferecem diversas maneiras de incorporar essas respostas ao seu design web.
O Divi 5 combina Interações e Lottie no Construtor Visual, onde você já pode criar sites sem precisar mexer em código. Tudo está incluído em uma única ferramenta, dispensando assinaturas de plugins e evitando conflitos de atualizações ou a necessidade de alternar entre diferentes plataformas.
Consulte nosso blog, Clicando aqui
0 Comentários