Guia prático: Entenda e utilize modais no web design

O que é um modal?

Um modal é um elemento que é exibido na frente e desativado outro conteúdo da página.

Web design Compreende muitos elementos que ajudam seu site a se destacarem aos usuários e a manter seu interesse. Os modais são um complemento essencial para muitas estruturas de sites e você pode usá -las para muitos propósitos.

https://www.youtube.com/watch?v=jkagtkz4gks

Esta página quebrará o básico dos modais da web design nas seções a seguir:

Continue lendo para saber mais sobre as janelas modais e quando usá -las no web design. Ou ligue 21-973221936 Para conversar com um estrategista sobre táticas de web design!

Não perca o nosso gerente de marketing e -mails insider!

Junte -se a 200k profissionais de marketing inteligentes para as notícias e insights de marketing mais quentes em sua caixa de entrada.

Formulário de assinatura embutida

““*”Indica os campos necessários

O que é um modal no web design?

Um modal é um elemento que é exibido na frente e desativado outro conteúdo da página. Os usuários devem clicar manualmente no modal antes de retornar à página que estavam navegando.

Os modais podem assumir muitas formas, incluindo:

• Formulários de contato
• Inscrições de e -mail
• Breves pesquisas
• Verificações de segurança

Benefícios do uso de modais

Os modais são populares para o web design porque ajudam você a atingir seus objetivos de marketing. Os benefícios do uso de modais no web design incluem o seguinte:

• Aumente a hora da sessão: Os modais podem aumentar o tempo da sessão, incentivando os usuários a fornecer suas informações de contato. Esta etapa os mantém na página e os empurra para se envolver com seus negócios.
• Melhorar a visibilidade: Seus modais podem ajudá -lo a ganhar inscrições por e -mail e aumentar sua visibilidade. O modal chamará sua atenção quando os usuários chegarem ao seu site, e os e-mails de acompanhamento os manterão envolvidos.
• Dê instruções claras: Um claro Chamada à ação (CTA) pode ajudá -lo a obter mais conversões. Os modais podem dizer aos seus usuários a próxima etapa ou dar a eles uma opção para entrar em contato com você.

Seus modais também podem beneficiar seus clientes. Eles podem desfrutar de descontos, informações fechadas e muito mais quando se envolverem com seus modais.

Modais vs. pop -ups

Modais e pop -ups aparecem na sua página e chamam a atenção do seu leitor. Então, qual é a diferença real entre um modal e um pop -up?

UM Aparecer é uma pequena sobreposição que aparece quando desencadeada por um elemento interativo. Por outro lado, um modal é uma sobreposição maior que bloqueia o acesso ao conteúdo da página. Um modal solicita ao usuário informações ou exibir informações importantes que requerem atenção imediata.

Aqui está um pop -up que aparece na lateral da tela sem interromper o fluxo:

Aqui está um modal, que ocupa muito mais espaço e limita o acesso à página:

A principal diferença é como os usuários devem interagir com eles. Os pop -ups geralmente permitem que os usuários continuem trabalhando com o conteúdo da página, enquanto os modais exigem ação. Os modais estão mais interrompidos para a experiência.

Como usar os modais no web design

Depois de entender o que é um modal de design da web, você pode começar a pensar em como deseja usá -los em seu site. Aqui estão algumas práticas recomendadas para adicionar janelas modais às suas páginas:

1. Use -os com propósito
2. Verifique se eles são do tamanho certo
3. Permitir que os usuários os fechem
4. Use instruções claras
5. Crie texto do botão
6. Não os repita

Vamos ler mais sobre cada dica abaixo!

1. Use -os com propósito

Seus modais devem sempre ter um objetivo claro e específico. Se você interromper a sessão de um usuário para mostrar algo a eles, é melhor valer a pena.

Por exemplo, pegue este modal de vinho fino e bom humor:

Nesse caso, o modal ajuda o site a cumprir os requisitos legais e impedir a responsabilidade. Como eles não podem vender para usuários com menos de 21 anos, esse ponto de verificação garante que o usuário confirme sua idade.

2. Verifique se eles são do tamanho certo

Um modal deve ser grande o suficiente para chamar sua atenção, mas não tão grande que você está impressionando o usuário. Eles devem ser capazes de ver as instruções enquanto ainda visualizam o conteúdo por trás do modal.

Aqui está um exemplo do Urban Outfitters:

Nesse caso, o modal aparece quando o usuário está comprando, dando a eles a chance de obter uma porcentagem de seu pedido. Eles ainda podem ver a tela por trás do modal e não leva muito da página.

3. Permitir que os usuários os fechem

Se você quiser manter as pessoas em seu site e Abaixe sua taxa de rejeiçãoverifique se os usuários podem fechar o modal. Este exemplo da Aerie tem um conveniente “X” no canto que diz aos usuários como fechá -lo:

Imagine que alguém vem ao seu site procurando algo específico. Se eles ficarem presos com um modal e não quiserem interagir, eles vão embora e não retornarão. Dê aos usuários a chance de ignorá -lo para mantê -los envolvidos.

4. Use instruções claras

As instruções devem ser claras e fáceis de seguir se você deseja que os usuários se envolvam com o modal. Não sobrecarregue os usuários com várias opções e espaços em branco – mantenha -o direto.

Confira este exemplo da H&M:

Esse modal possui vários campos, mas ainda é sucinto e ajuda o usuário a obter mais da experiência.

5. Crie texto do botão

Os botões facilitam a ver qual é o próximo passo além do modal. Com os botões, você pode chamar a atenção do leitor e dizer a eles o que você espera.

Aqui está um exemplo do New York Times e seus termos atualizados:

Para ultrapassar o modal, o usuário deve clicar no botão e ler os termos, se desejar. Esse botão facilita a transição para o site e impede que o usuário fique frustrado.

6. Não os repita

Você não quer afastar as pessoas, forçando -as a interagir. Use apenas seus modais uma vez por visita ao site. Veja este exemplo da Rolling Stone:

Se os usuários não quiserem fazer compras na página inicial, provavelmente não querem perguntas repetidas à medida que navegam no site. Somente o uso de seus modais uma vez impedirá a frustração e incentivará a navegação.

Quanto custa construir o site dos seus sonhos?

Use o nosso LIVRE Design de sites Calculadora de custos para ter uma ideia!

Calculadora de custos de web design

Otimize os modais do seu site com MidiaPro

Uma janela modal pode ajudá -lo a capturar mais leads e manter seu público -alvo no funil de vendas. Como você pode configurar modais em suas páginas e quando você deve começar a adicioná -las?

UM Agência de Web Design Como o MidiaPro pode ajudá -lo a responder a essas perguntas e prosseguir com os modais. Se você deseja simplificar o processo de design da web, podemos ajudar – lançamos mais de 1.058 sites até agora e podemos incorporar modais de maneira eficaz.

Entre em contato conosco online hoje E veja o que podemos fazer pelo seu negócio!