Como usar a tipografia cinética para tornar seu site interativo?

A tipografia cinética refere-se a uma forma de animação. Aqui, damos vida às palavras.

Eu digo palavras, mas pode ser qualquer coisa – de uma única letra a um parágrafo inteiro. Depende do que você deseja alcançar através desse movimento. Com isso em mente, seu tipo de movimento deve ser ponderado e intencional. Você não pode simplesmente fazer suas palavras pularem e explodirem por pura diversão.

Bem, você pode – mas esse uso superficial não terá o mesmo impacto.

Porque quando você usa a linguagem de movimento no web design, seja criando uma animação de design de logotipo ou por meio de tipografia cinética, você está abrindo o design para os usuários.

Em outras palavras, você está ajudando os usuários a esquecer que estão apenas tocando em uma tela e, em vez disso, apresentar seu site como algo vivo que pode responder. Ele pode sorrir, dizer o que fazer em seguida, dançar quando você clicar no botão direito e explodir em estrelas quando você conseguir.

Quando os usuários podem interagir com seu design, eles podem decidir gastar mais tempo nele, sentir-se encantados com ele, compreendê-lo mais completamente e, finalmente, sentir uma afinidade com ele.

https://dribbble.com/shots/14187210-Behance

5 maneiras pelas quais os elementos interativos melhoram a experiência do site

Eleve a estética

A estética é tudo quando se trata de seu site para causar sua primeira impressão. Se o seu site parecer monótono e mal organizado, essa impressão também será transferida para sua marca, prejudicando seus resultados.

Por outro lado, se um site é bonito e oferece recursos que muitos não viram antes na maioria dos sites – tipo cinético, por exemplo – isso é uma grande vitória.

Como o tipo cinético também torna a estética mais viva, o impacto aumenta. Agora você tem um belo site no qual as pessoas podem tocar, conversar, responder e receber feedback.

Isso é algo que um bom e velho site estático simplesmente não pode fazer.

Permita que você se destaque

Para deixar sua marca indelével no mundo digital, você precisa ter coisas que os outros não têm.

Por quaisquer razões incompreensíveis, nenhuma grande marca está se beneficiando do que o tipo cinético pode fazer. Esqueça as grandes marcas, as startups também estão cegas para as maravilhas dessa bela maravilha.

Este é o lugar onde você pode atacar.

Inclua efeitos de tipo cinético sutis, envolventes e na marca em seu site para reivindicar a experiência como exclusivamente sua. Mostre às pessoas o que você pode fazer.

As pessoas vão olhar para a sua inovação, ver como você a tratou impecavelmente e como ela ajuda sua empresa a transmitir sua mensagem, e elas começarão a confiar em você. Eles vão olhar para você como alguém que sabe o que está fazendo. Quando essa confiança é estabelecida, uma transação monetária logo se segue.

Mantenha o usuário engajado

Toda a premissa da internet e das mídias sociais é construída no engajamento. Seu conteúdo precisa dar às pessoas algo que possa mantê-las engajadas com o conteúdo, o criador e a plataforma.

A utilização de recursos de tipografia cinética em seu site alcança as classificações de engajamento com as quais você só pode sonhar.

Em vez de forçá-los a ler uma cópia estática, você está dando a eles palavras de ação ao vivo que estão se transformando, mudando, adaptando e realizando para tornar a jornada do usuário mais compreensível e divertida.

Melhore a hierarquia visual

Hierarquia visual refere-se à ordem organizacional em que as coisas são apresentadas ao usuário. O texto com a fonte maior é o mais importante, depois o menor e assim por diante. Da mesma forma, fontes em cores brilhantes chamam nossa atenção mais rapidamente do que fontes em cinza ou azul claro, por exemplo.

Usando essas dicas visuais, ajudamos as pessoas a direcionar sua atenção para várias partes da página em uma ordem organizada.

O tipo de movimento pode ser uma ajuda imensa aqui. Em vez de dicas estáticas, podemos usar tipografia fluida e fazer com que nossas letras e palavras se transformem em ícones e formas que ajudam a guiar a atenção do usuário.

Eduque os usuários

Quando você lança um novo site, pode ser difícil para as pessoas pegarem o jeito dele. Mas os recursos interativos podem ajudar.

De acordo com um estudo de marketing de conteúdo, 93% dos profissionais de marketing acreditam que o conteúdo interativo é “altamente eficaz na educação de clientes em potencial”.

Agora, esse conteúdo interativo pode ser qualquer coisa – um post de blog, vídeo, um infográfico, qualquer coisa – mas quando você introduz movimento em várias áreas do seu site por meio do tipo de movimento – navegação, menu, barra de pesquisa, você escolhe – você aumenta a educação e compreensão de um novo layout dez vezes.

Veja como o tipo cinético pode tornar seu site interativo

1. Torne o tempo de espera de carregamento da sua página mais divertido

https://dribbble.com/shots/6189182-Counter-01

Nenhum de nós é fã de páginas da web que demoram uma eternidade para carregar. Na verdade, de acordo com o Google, as páginas de carregamento lento são uma das principais razões pelas quais alguns sites têm uma taxa de rejeição mais alta do que outros.

Mas a atividade da fonte pode ajudar aqui.

Pense em uma página em que as alterações no tamanho do texto informam quanto tempo de espera resta.

À medida que o tipo muda de um tamanho menor para um tamanho maior, ele pode alertar os usuários sobre quanto tempo eles terão que esperar. Embora as pessoas possam não responder positivamente aos tempos de carregamento da página, quando você diz a elas em quanto tempo a espera pode terminar, é provável que elas permaneçam por mais tempo.

Você pode tornar o tempo de espera ainda mais divertido tornando a cópia mais interessante, a animação mais atraente e os efeitos mais naturais.

2. Chame a atenção do usuário e dê dicas sobre a próxima etapa

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

Para aqueles que podem não estar muito familiarizados com o seu site, encontrar o próximo passo na jornada do usuário pode ser um pouco confuso.

O tipo de movimento pode ajudá-lo a chamar a atenção dos usuários para a área certa do site no momento certo. Por exemplo, mover o tipo no menu digital de um restaurante pode ajudá-lo a direcionar sua atenção para os tamanhos das porções ao finalizar seus pratos. Ou, ao reservar uma viagem, a tipografia cinética no calendário integrado pode ajudá-lo a ter certeza de que escolheu as datas certas.

Quando você torna a jornada do usuário fácil de seguir e mais previsível, é um sinal de que você criou uma interface intuitiva que a maioria das pessoas entenderá facilmente.

https://dribbble.com/shots/17559699-Move-On-Up

3. Diga às pessoas em que focar

https://dribbble.com/shots/9287077-hop

Outra área-chave em que o tipo móvel pode melhorar um site é quando você precisa dizer às pessoas no que se concentrar.

Pense em uma página Meus Serviços. Enquanto uma página estática tradicional pode fazer seu trabalho, por meio do tipo cinético você pode dizer às pessoas qual serviço é seu produto principal, qual é o segundo e assim por diante. Dessa forma, o tipo cinético está ajudando você a estabelecer e promover seu nicho.

Além do movimento, você também pode converter o tipo em diferentes formas relevantes para seus serviços para tornar sua mensagem mais visual. Por exemplo, se você é um escritor, um ícone de pena pode referenciar suas habilidades como editor, enquanto um símbolo de lâmpada pode significar consultoria criativa.

À medida que letras diferentes em sua cópia se transformam nesses novos ícones, ela não apenas parece incrivelmente divertida e envolvente, mas também mostra um pouco da sua personalidade - e no marketing, isso é (principalmente) sempre uma vantagem.

https://dribbble.com/shots/13945869-My-Services

4. Prepare os usuários para uma mudança de estado ou transição

https://dribbble.com/shots/11258557-Creative-Coding-5

O comércio eletrônico ou uma experiência de navegação na web são inundados de transições. Você está sempre indo do ponto A ao B ao C e assim por diante. As transições rígidas proporcionam uma experiência de usuário cansativa. Ninguém gosta de se sentir sacudido de um lugar para outro. A tipografia fluida e líquida ajuda a manter tudo suave.

Ele prepara as pessoas para uma mudança que está por vir. Diz-lhes para se prepararem para isso. Ajuda-os a entrar na mentalidade para se prepararem para a próxima etapa de compras, downloads ou simplesmente navegação.

Uma transição suave também é eficaz para reter a atenção do usuário. Em vez de uma página estática exibindo um sinal de espera, uma boa cópia com movimento simbólico será muito bem recebida por todos e ajudará na vibração da marca.

5. Enfatize palavras-chave, frases ou áreas do site

https://dribbble.com/shots/11138509-The-Truth-is-Worth-It

Muito do site é composto de texto. Cópia da Web, descrições e CTAs são alguns exemplos. Ao decidir usar o tipo cinético, você pode permitir que esses elementos textuais se tornem animados. Destacar sua mensagem principal fica mais fácil.

Pense em um CTA que se transforma em um ícone de carrinho de compras à medida que você finaliza seu pedido online. Ou uma mensagem de erro que mostra decepção ao se transformar em uma carranca triste. Ou uma lista de episódios de podcast em que cada título se torna maior à medida que você passa o mouse sobre seu nome.

Como parte do design de movimento, o tipo cinético ajuda a acentuar o que você quer dizer. Dobre o poder de suas palavras. Então, use-o com intenção e pensamento.

6. Forneça feedback visual quando uma tarefa for concluída com sucesso

https://dribbble.com/shots/16174668-KEEP-IT-UP

Quando um usuário se envolve com sua interface do usuário, ajuda quando eles sabem que estão fazendo a coisa certa. Mensagens de erro, confirmações e outras formas de feedback visual ajudam os usuários a entender o que precisam fazer. Reforçar a ação do usuário os ajuda a permanecer engajados e aumenta a probabilidade de que eles sigam o que precisam fazer.

A tipografia animada é uma forma eficaz de feedback visual. É rápido, mantém a emoção da experiência intacta e incentiva o usuário a tomar outras medidas.

Ele desempenha especialmente um papel fundamental quando você o usa para suas mensagens de erro. Você quer que as pessoas tentem novamente, não se sinta frustrado e diga a eles exatamente o que deu errado. Assim, por exemplo, quando um usuário digita sua senha incorretamente duas vezes e a terceira vez o bloqueia do aplicativo, você pode incluir uma mensagem de erro animada alertando-o sobre o fato para que ele possa ter mais cuidado agora.

Como você pode ver, você não precisa inundar seu site com o tipo de movimento. A coisa toda vai parecer, francamente, bizarra e muito avassaladora. Como sempre digo, seja mais sutil e atencioso ao trabalhar com qualquer tipo de animação. Faça isso quando melhorar a experiência e, mesmo assim, mantenha o efeito leve e suave.

7. Ajude a definir o tom da marca

https://dribbble.com/shots/17070314-SIMPLE

Embora o texto animado possa ajudar todos e quaisquer setores, é mais eficiente em alguns do que em outros. Por exemplo, bancos ou seguros. Você pode animar sua tipografia lá, mas terá que ser muito discreto. Porque se você exagerar um pouco mais, isso pode fazer com que o caráter da sua marca seja atingido.

Mas pense em moda, estilo de vida, varejo, imóveis, equipamentos/roupas/brinquedos infantis e tantos outros, e uma dose saudável de tipo cinético para tornar a interface do usuário mais interessante parece fazer muito mais sentido.

Embora, sozinho, ele não possa estabelecer toda a sua marca, mas com certeza pode funcionar como um grande ativo ao lado de outras ferramentas.

O take-away

Há três:

1. Seja proposital . Não faça isso apenas porque parece bonito. Faça isso porque serve a um propósito, e depois torne-o bonito.
2. Seja frugal com o seu tipo de movimento . Pode ser muito para tomar. Portanto, adicione-o apenas nas áreas da interface do usuário onde você tem espaço e onde obterá mais resultados.
3. Seja claro . Use estilos de fonte que não percam a legibilidade ao adicionar animação. Além disso, fique longe de estilos de animação que atrapalham estilos de tipo perfeitamente legíveis.