As janelas modais foram criadas inicialmente como alertas para eventos importantes ou essenciais exibidos nas interfaces de usuário. À medida que o mundo do design avançava cada vez mais, as empresas exploravam as diversas maneiras de coletar os dados necessários para expandir seu público. Uma dessas práticas incluía essas práticas caixas pop-up (muitas das quais bloqueiam completamente o conteúdo da página principal), que posteriormente se tornaram abusivas e mal utilizadas, atendendo aos desejos de designers, partes interessadas e profissionais de marketing e, infelizmente, à custa de uma boa experiência do usuário.
Veja como.
Ninguém gosta de ser interrompido, mas às vezes essa interrupção merece o inconveniente.
Suas telas modais são interrupções necessárias ou gratuitas?
Por exemplo, se você estiver tendo uma conversa importante e alguém o interromper para dizer que alguém está assaltando seu carro ou que sua casa está pegando fogo, você agradeceria profusamente e entraria em ação para resolver a emergência.
Entretanto, se alguém interrompesse essa mesma conversa importante para perguntar sobre o tempo ou sua cor favorita, você provavelmente ficaria bastante irritado com essa intromissão desnecessária.
O mesmo vale para diálogos modais (ou diálogos). Quando usados corretamente, eles salvam vidas (bem, são benéficos para o usuário, pelo menos); quando mal utilizados, são irritantes, inibem o fluxo de trabalho e prejudicam a experiência do usuário.
No artigo de hoje, explicaremos o que é uma janela modal e por que é importante que seu uso demonstre respeito aos seus usuários e visitantes para manter as práticas recomendadas ideais de UX.
Modalidade e UX
Quando se trata de modalidade, os designers de UX devem sempre demonstrar respeito especial pelo fluxo de trabalho do usuário e interrompê-lo apenas com informações essenciais.
Como o Grupo Nielsen Norman estados:
As caixas de diálogo modais interrompem os usuários e exigem uma ação. Elas são apropriadas quando a atenção do usuário precisa ser direcionada para informações importantes.
O que determina "informações importantes" pode ser, na melhor das hipóteses, controverso. Certamente, para que a experiência do usuário seja a melhor possível, essa decisão deve estar nas mãos do usuário. Se você não consegue respeitar o conceito básico ou não tem certeza do que é importante para o usuário, não se preocupe. essenciais significa para os seus usuários, testes simples podem fornecer os dados necessários para orientar o uso adequado da janela modal.
O que é Modalidade?
Uma janela modal aparece dentro ou em cima da tela principal, tornando inativos todos os elementos funcionais da página. A janela diálogo modal é projetado para alertar os usuários sobre um evento específico, exigindo a interação do usuário para fechar a janela antes que ele possa continuar interagindo com o conteúdo ou o software como antes.
Modalidade em ação
É bastante simples ver a importância de um salvar diálogo A janela modal é. Quando essa caixa de diálogo modal aparece, ela pergunta se você deseja salvar as alterações feitas em um documento antes de fechar. Todos nós já fomos vítimas de perda de trabalho por não salvar documentos, portanto, essa opção se torna uma ajuda bem-vinda para qualquer pessoa que esteja criando documentos importantes. Com opções para salvar, cancelar ou não salvar antes de continuar, a decisão pode interromper as operações, mas vale a pena. Qualquer pessoa que já tenha passado pela frustração de perder um trabalho ficará muito feliz em ter seu trabalho protegido por essa janela modal iniciada pelo sistema.
No outro extremo da escala, um pop-up que aparece alguns segundos após a visita a uma nova página da Web solicitando que você se inscreva na lista de e-mails da empresa ou que permita que ela o incomode com notificações antes que você possa acessar o conteúdo que deseja ler não é tão essencial ou importante para o usuário. É um inconveniente leve, mas, ainda assim, um inconveniente que, no design de UX, não merece interromper o fluxo de trabalho do usuário.
Como opção adicional para reunir novos contatos, é possível entender por que os profissionais de marketing adoram essa ação, mas, no que diz respeito à experiência do usuário, há fortes argumentos sobre o uso correto desse componente e o debate sobre como o recurso é usado de forma abusiva.
Tipos de modalidades
Diálogos modais
Os exemplos a seguir mostram como as janelas modais são usadas nos ambientes digitais atuais:
- Pop-ups e lightboxes que preenchem toda a tela
- Alertas e notificações (incluindo a caixa de diálogo de salvamento que salva vidas e outras telas modais que evitam erros do usuário)
- Avisos e instruções no software e no navegador
- Opções de ação e fluxos de trabalho complexos
- Coleta de detalhes de entrada necessários, como logins de contas e métodos de pagamento, ou concessão de acesso a câmeras de telefones celulares, álbuns de fotos etc.
- Algumas dicas de ferramentas
- Confirmação de uma ação, por exemplo, quando um formulário é enviado com sucesso
- Assistentes de integração ou alertas de novos recursos ao abrir um aplicativo ou site
- Solicitações de marketing, como assinaturas de boletins informativos, contas e descontos/ofertas
Diálogos sem modelo
Como pesquisadores de UX, queremos incentivar a participação do usuário, mas sem afetar o fluxo ou a satisfação dos usuários com nossos produtos.
As alternativas às janelas modais são opções que podem fazer o mesmo trabalho sem serem tão intrusivas e sem bloquear o conteúdo da página principal. Conhecidas como janelas de diálogo sem modelo ou janelas não modaisSe o usuário não tiver a opção de fazer uma solicitação, essas opções não ocupam toda a tela e a interface do usuário e geralmente aparecem na mesma página. Elas deixam o usuário livre para continuar com o que está fazendo, ignorando quaisquer solicitações adicionais ou deixando-as para depois.
Em dispositivos móveisQuando o espaço é limitado, uma tela modal e as janelas não modais podem ser muito semelhantes, pois ambas provavelmente ocuparão a tela para exibir a mensagem. Entretanto, a principal diferença está na barra de navegação e no cabeçalho, que permanecem visíveis nas janelas não modais. Nas telas modais, elas têm seu próprio cabeçalho ou rodapé com opções para cancelar ou avançar fornecendo a entrada solicitada ou exigida; nas alternativas de janelas não modais, a barra de navegação permanece intacta, permitindo muitas das mesmas opções de antes.
Como é a aparência de uma janela não modal em comparação com uma tela modal? Aqui estão alguns exemplos das que você provavelmente vê e usa diariamente:
- Caixas de diálogo na página, como caixas de bate-papo e funções de pesquisa
- Avisos em linha, como entradas incorretas em campos de formulários
- Colocar informações em uma página separada usando o botão de link externo
- Entradas em linha, pesquisas e caixas de comentários
- Apresentações de slides e players de vídeo em linha
- Notificações de cookies em uma barra pop-up na parte superior ou inferior da página
- Fornecimento de conteúdo visível na página
- Menus de guias
- Acordeões
- Criar pop-out de mensagem de e-mail
- Caixas de pesquisa
- Diálogos pop-out na barra lateral
Benefícios do uso de janelas modais
- Foco no usuário ? As janelas modais mantêm o usuário concentrado no que o designer da página acredita ser mais importante, alertando-o sobre eventos críticos relacionados ao conteúdo ou à operação.
- Conclusão da tarefa ? O designer inclui uma janela modal que solicita informações para concluir um processo, como um login de conta, sem o qual o fluxo de trabalho ou a jornada digital não pode continuar.
- Prevenção de erros ? Novamente, uma tela modal importante que evita erros críticos ao exigir a atenção do usuário para tomar uma decisão essencial.
- Cenas modais que dividem fluxos de trabalho complexos em etapas gerenciáveis ? Por exemplo, na editoração eletrônica, as janelas modais apresentam ao usuário um conjunto contido de opções para aplicar formatação, filtros ou outras configurações.
Desafios e desvantagens
- Frustração do usuário ? Pop-ups desnecessários interrompem o fluxo do usuário, muitas vezes fazendo com que ele perca a concentração ou seu lugar em um documento ou o distraia completamente do que estava fazendo.
- Interrupções desnecessárias ? Adicionar uma tarefa irrelevante à operação atual do usuário é desagradável e causa distração.
- Eles bloqueiam o acesso ao conteúdo ? A desativação da página principal pode impedir que o usuário acesse as informações necessárias para concluir a solicitação definida na janela modal.
- Preocupações com a acessibilidade ? A acessibilidade é uma das principais áreas de preocupação nas janelas modais. Todos podem navegar pela interrupção, interagir com ela ou descartá-la, independentemente de sua situação pessoal?
Práticas recomendadas para a implementação de modalidades
Gostaríamos de sugerir que as práticas recomendadas deveriam ser de senso comum; no entanto, sabemos o quanto as partes interessadas e os profissionais de marketing ávidos por metas adoram chamar a atenção dos usuários com suas últimas promoções ou exercícios de coleta de dados.
Para garantir que as telas modais operem com valores de UX saudáveis:
- Ter um objetivo claro e crucial ? Considerando a distração que as exibições modais em tela cheia criam, certifique-se de não interromper desnecessariamente a concentração ou o contato dos usuários com a tela principal.
- Controle de usuários ? Se for necessário usar uma exibição modal, certifique-se de que os usuários possam descartá-la facilmente. Dar aos usuários controle sobre como eles consomem o conteúdo e fornecem informações deve ser uma alta prioridade no seu design de UX.
- Recursos de acessibilidade ? Certifique-se de que cada tarefa modal forneça a rotulagem, o acesso e a operação necessários para usuários de teclado e leitores de tela. Também é fundamental salvar o último estado ativo do usuário para que ele possa continuar de onde parou, assim que esses modais forem resolvidos.
- Testes e feedback ? Dada a importância da iteração nos testes de usuários e da coleta de feedback por meio de pesquisas regulares de UX, não deveríamos ter que dizer o quanto isso é importante. Nossos usuários devem estar no centro de todas as jornadas de usuário.
Conclusão
Quando usadas corretamente, as janelas modais podem ser incrivelmente positivas e eficazes. Elas desempenham um papel fundamental em pacotes de software, SaaS, sites e aplicativos. No entanto, como já discutimos, o uso excessivo de modais pode ter sérias desvantagens para a experiência do usuário quando usado sem respeito pelos usuários e visitantes do site.
Para garantir uma experiência positiva de design da interface do usuário, precisamos entender o que é importante o suficiente para limitar o acesso ao conteúdo até que o usuário interaja explicitamente com a caixa de diálogo modal. Embora possamos consultar várias estruturas de decisão para considerar se uma janela modal é realmente necessária, talvez a melhor maneira de fornecer o que o usuário deseja, como em toda boa pesquisa de UX, seja perguntar a ele.
Nossos especialistas em pesquisa de usuários estão disponíveis para ajudá-lo a se aproximar dos seus clientes. Se quiser agendar uma chamada sem compromisso, entre em contato conosco pelo e-mail hello@ux247.com ou compartilhe suas necessidades usando o formulário abaixo.
