Estado e interação no Material: camada, foco e toque

Um estado mostra em que situação um componente está agora. O Material Design define estados como a situação de interação de um componente ou elemento de interface (em inglês) e mantém dois indicadores visuais para que o sinal sobreviva a um canal fraco (em inglês). O guia é exato sobre a sobreposição e os números por trás dela. Ele fixa uma opacidade por estado e não nomeia contraste mínimo para essa sobreposição em cada combinação de cor. Ele também define o hover em torno de um cursor e não diz nada sobre uma tela sem ponteiro. Os dois casos são decisão do time de produto, não do guia.

O que o estado comunica

Um estado responde a duas perguntas simples: dá para usar isto, e o que acabou de acontecer com ele. Um componente ativo parece pronto para receber entrada, e um desativado parece indisponível porque de fato está. O NN/g abre o próprio artigo no mesmo terreno, notando que pistas visuais sutis dizem se um botão é clicável, pressionado ou apenas sob o cursor (em inglês). O sinal importa mais que o enfeite. Quem não distingue um controle desativado de um ativo vai clicar, esperar e clicar de novo. O guia pede mais uma coisa: aplicar estados de forma consistente entre componentes (em inglês), para que a mesma mudança visual signifique a mesma coisa em toda parte.

Os seis estados e onde cada um aparece

O guia nomeia seis: ativo, desativado, hover, foco, pressionado e arrastado. Cada um tem uma definição amarrada a uma entrada. Ativo marca um componente interativo (em inglês) e desativado marca um que não é (em inglês). O hover aparece quando um cursor repousa sobre um elemento (em inglês), e o foco aparece quando alguém destaca um elemento com teclado ou voz (em inglês). Pressão marca um toque (em inglês), e arrasto marca uma pressão seguida de movimento (em inglês). Os estados também se combinam, como mostra a regra de que eles podem ser somados, por exemplo seleção e hover (em inglês). O alcance de cada um não é uniforme. Hover e foco são herdados por componentes de ação, seleção e entrada, o que inclui botões, cartões, chips, itens de lista e campos de texto. Desativado segue os mesmos grupos. Arrasto fica estreito e alcança apenas cartões, chips, itens de lista e sliders. Componentes de navegação e comunicação ficam de fora da maior parte disso, então barras de app, diálogos, menus e abas não herdam hover. O guia também limita a contagem. Só existe um hover, um foco e uma pressão na tela por vez.

A camada de estado

Quem faz isso funcionar é a camada de estado. O guia descreve uma cobertura semitransparente sobre um elemento que indica o estado dele (em inglês), montada com opacidade e não com uma cor nova. A camada usa a mesma cor do conteúdo sobre o qual fica (em inglês). Um botão de texto tinge com a cor do rótulo, e um botão preenchido tinge com a cor do texto sobre o contêiner. Cada cor de contêiner tem uma cor on correspondente para o conteúdo, e a camada se apoia nela. Quatro valores cobrem os estados: hover com 8% de opacidade, foco com 10%, pressão com 10% e arrasto com 16% (em inglês). Desativado é um caso à parte, com 38%. Dois limites importam. Só uma camada se aplica por vez, e ela é menor que a área que o dedo atinge: a camada de estado tem 40dp enquanto o alvo interativo tem 48dp (em inglês). A diferença entre os dois números é deliberada. A tinta cresce quando alguém interage, mas o alvo continua grande o bastante para pegar um toque alguns pixels fora.

Por que a elevação não é o sinal geral de pressão

No estado pressionado, muita gente apela para a elevação, e o guia limita bem esse recurso. Estados pressionados devem ter alta ênfase e provocar mudança de composição (em inglês), então o ripple ou a troca de preenchimento carrega o sinal. A elevação é opcional e estreita: apenas alguns componentes, como botões e cartões, podem herdar elevação para significar pressão (em inglês). A mesma contenção aparece no arrasto, em que o guia pede estados arrastados com ênfase baixa para não distrair da tarefa (em inglês). Levantar todo controle ao pressionar transforma um estado em animação. Também disputa espaço com o anel de foco e com a camada, que já carregam a mensagem. O NN/g faz o ponto vizinho pelo outro lado. Mudar um botão de plano para tridimensional aumentou cliques em um estudo antigo (em inglês), o que trata de ser clicável e não de resposta à pressão. Uma pista de pressão que dispara em todo toque merece o orçamento menor.

Foco e teclado

O foco é o estado que precisa funcionar mesmo nas piores condições. O guia o define como o destaque em um elemento alcançado com teclado ou voz (em inglês). Ele acrescenta um anel visível, o indicador de foco de teclado, para que a pessoa veja onde está na página. A ordem importa tanto quanto a visibilidade. Nas regras de entrada, o foco deve seguir uma ordem lógica, da esquerda para a direita e de cima para baixo na maioria das páginas (em inglês). A tecla Escape remove o foco e limpa a seleção (em inglês). O NN/g acrescenta a restrição que decide se o anel funciona. Ele recomenda um contorno no lugar de mudança de cor isolada (em inglês), porque uma troca de cor pode não ser percebida por algumas pessoas com deficiência visual (em inglês). O guia também limita a um foco por vez, e um controle desativado não pode receber foco, arrasto ou pressão (em inglês). Quem tabula por um botão desativado recebe silêncio onde um motivo ajudaria.

Seleção e entrada: escolher um item contra digitar um valor

A seleção e a entrada se separam numa linha simples. A seleção pede que a pessoa escolha de um conjunto que o sistema já conhece, e a entrada pede que ela forneça um valor. O guia mostra a seleção com um check, um checkbox, uma mudança de cor da superfície ou uma combinação (em inglês). Ele também dá às superfícies de navegação, como abas e rail, um indicador ativo (em inglês). A divisão também ocorre por dispositivo: pressionar e segurar ou usar dois dedos inicia a seleção no toque (em inglês), e passar o cursor revela um checkbox no desktop (em inglês). A regra antiga do NN/g organiza os dois controles com clareza. Radio buttons servem a uma lista de opções mutuamente exclusivas em que exatamente uma escolha vale (em inglês). Checkboxes servem a uma lista em que qualquer número pode ser marcado, incluindo nenhum (em inglês). A mesma página dá um motivo para preferir opções visíveis a um menu suspenso, já que uma lista de radio tem carga cognitiva menor porque todas as opções ficam visíveis (em inglês). Outra regra dela cai no trabalho diário: uma lista de radio deve sempre trazer uma seleção padrão (em inglês).

O que medir

Três checagens resolvem quase todos os desvios. O alvo de toque vem primeiro, porque tem um piso físico, coisa que preferência de design não tem. O guia nomeia 48dp como alvo interativo enquanto a camada de estado fica em 40dp (em inglês). O NN/g chega à mesma escala em centímetros: um alvo deve medir no mínimo 1cm por 1cm para a pessoa selecionar rápido e com precisão (em inglês). A mesma página nomeia o modo de falha, em que alvos pequenos e espaçamento apertado aumentam a chance de um deslize para o controle errado (em inglês). A forma carrega a segunda checagem. O NN/g avisa contra dar a um item não clicável a aparência de botão (em inglês), o que é o sistema de estados trabalhando ao contrário. A terceira checagem é o contraste do próprio estado, e aqui o guia entrega uma opacidade fixa e nada além. Teste cada estado sobre cada cor de contêiner e leia o resultado, porque uma camada de 10% sobre uma superfície clara pode sumir numa captura de tela.

As peças daqui ficam ao lado de o post sobre Material Design, o post sobre espaçamento e grade, o post sobre HTML acessível e o post sobre contraste no modo escuro. Um sistema de estados compensa quando a mesma pista significa a mesma coisa em toda tela, e quando alguém que nunca toca num ponteiro ainda sabe onde está. Nomeie o piso de contraste da sua própria paleta em vez de confiar que a opacidade padrão se sustenta.