Toque para ignorar

Projetando escotilhas de escape acessíveis para modais

Linzi Berry Blocked Unblock Seguir Seguindo 3 de janeiro

Vamos falar grandes fugas. Não mágico como algemas de Houdini ou bifrost de Thor, em vez disso muito comum – um ícone interativo para remover pop-ups incômodos de seu conteúdo desejado. Se modais, diálogos, pop-ups … o que você quiser chamá-los é um mal necessário para o conteúdo transitório, precisamos construir escotilhas de escape acessíveis.

Design visual

O padrão ux comum para iting X- e- é bastante simples, vocês ver o que eu fiz lá? A história do [x] remonta ao design de computador dos anos 70. Sua primeira aparição foi provavelmente o menu Atari TOS – uma lista de ações ligadas a letras e símbolos do teclado. [x] foi o comando para Exit. Foi então usado pela NeXT , que inspirou o Windows, e se tornou o símbolo padrão para fechar com a adoção em massa do Windows em todo o mundo em 1995. Tudo isso é para dizer que não há necessidade de reinventar a roda aqui, use o símbolo todos do mundo estão esperando.

Design Acessível

Começaremos com o básico – o [x] sempre deve ser fornecido, mesmo que o usuário possa tocar no plano de fundo, passar ou usar o botão Voltar nativo para dispensar o modal também.

Ícone vs letterform

Projete um ícone , em vez de usar uma forma de letra tipográfica, que seja consistente com o restante de seu conjunto de ilustrações. Deve ser claramente entendido como um [x] com todos os quatro apêndices claramente separados. Eu pessoalmente prefiro o design do ângulo de 90 ° e ajuste o peso para combinar com o conjunto.

Alto contraste vs baixo

É cor deve ser neutro e atender a A11y recomendado 4: 1 relação de contraste. Claro, os pop-ups têm um desempenho astronomicamente melhor quando o [x] é cinza quase branco, mas isso, meus amigos, é o que chamamos de padrão escuro. Ao tornar o [x] quase invisível, estamos enganando o usuário para que ele faça a ação principal, fazendo com que pareça obrigatório escapar. Isso leva a uma base de usuários frustrada e a falsos positivos para os negócios.

Contido vs Independente

O ícone deve estar contido para indicar o tamanho relativo do alvo de toque e delinear os ícones interativos dos estáticos, especialmente nas proximidades.

  • Se o ícone e o contêiner estiverem com o tamanho de destino mínimo de toque (48x48dp / pt), crie o alvo de toque para ser maior que o visual do botão e não o sobreponha a outros elementos interativos.
  • Se esse ícone estiver dentro de uma barra interativa, como a navegação de cabeçalho, a barra já estará criando esse espaço para você – hooray!

Colocação

O conteúdo pop-up é opcional, não deve ser bloqueado e a maneira de escapar deve ser facilmente reconhecida como uma ação relacionada ao pop-up. Apesar de começar consistentemente no canto superior direito para a maioria dos softwares do Windows, hoje o design de materiais da Apple, HIG e Google, coloca a navegação icônica no canto superior esquerdo. Nenhum dos sistemas dá uma direção clara quando se trata de modalidade.

Destaques da Auditoria

Posicionamento Modal

A maioria dos conteúdos modais é opcional, com exceção dos alertas, portanto, eles não devem se sentir bloqueados. Apesar de um modal tradicional que aparece no centro da tela, há uma tendência mais recente de fazer com que os modais pareçam menos bloqueados, colocando-os na parte inferior da tela. Dependendo do conteúdo com maior probabilidade de estar sob o modal, você pode inseri-lo pelos lados… ou não.

Bottom vs Center

[x] canal

Inside vs Overlap vs Outside

Dentro aparece dentro do modal. Isso conecta mais claramente o [x] ao modal e funciona bem com uma estética de design plano, no entanto, adiciona complexidade ao layout interno do título dentro do modal.

A sobreposição se sobrepõe ao modal. A quebra na linha contínua chama mais atenção para o [x], mas vem com um estilo de design visual distinto que adiciona complexidade visual e se sente menos refinado.

Fora aparece fora do modal. Isso limpa o design do modal, mas o [x] pode ser confundido com a interface do usuário por baixo.

Direita vs Esquerda. Ícones por Meg Robichaud

End (direita) Colocar o [x] no lado direito é melhor para a capacidade de digitação do polegar da mão direita e não fica alinhado com a iconografia estática.

Start (Esquerda) Colocar o [x] no lado esquerdo segue o paradigma de navegação atual, no entanto, aumenta a altura vertical do modal por causa de sua proximidade à iconografia alinhada à esquerda e é um outro alvo de toque em telefones grandes.

Isto é para idiomas LTR. "Start" é onde o usuário começa a ler o conteúdo e "final", onde eles param. Nos idiomas RTL, você deve virar para a esquerda.

Arranjo Ótimo

Juntando tudo agora – nosso arranjo ótimo atual é um modal alinhado na parte inferior com um [x] iconográfico contido no lado direito superior interno.

Apenas texto, imagem e ícone

Últimos pensamentos

Eu quero reconhecer que você também pode usar dois botões empilhados horizontalmente, onde um é “dispensar”. Esta é uma ótima alternativa e altamente recomendada pelo Material Design, mas no caso em que você não quer que a dispensa seja tão proeminente, acidentalmente. toques, ou você está tendo problemas com traduções de localização, o botão [x] é uma grande solução universal.