Estados de elemento

As variações visuais de um componente conforme a interação: padrão, hover, ativo, desabilitado, erro.

Hard

O que é

Estados de elemento são as aparências diferentes que um componente assume conforme a interação ou a situação do sistema. Os mais comuns são padrão, hover (mouse em cima), ativo (sendo clicado), desabilitado e erro. Desenhar cada um deles é o que dá retorno pra quem está usando.

O estado funciona como sinal de que a ação foi registrada. Um botão que muda de cor ao ser clicado tranquiliza a pessoa, porque ela vê que algo respondeu. Sem esse retorno, ela clica de novo, gera erro e se frustra. Um estado bem feito é quase uma placa de trânsito, já que diz onde você está e o que pode fazer dali.

Pra produto, isso importa porque define requisito e consistência. Se cada botão da plataforma se comporta de um jeito no hover ou no erro, o produto fica confuso. Alinhar a definição dos estados entre design e engenharia mantém tudo previsível. E o estado desabilitado precisa contrastar o suficiente pra não sumir pra quem enxerga pouco.

Em uma frase

Esse botão precisa dos cinco estados especificados, senão a engenharia vai inventar o hover e o erro.

A pergunta que ele responde

Por que meu componente fica inconsistente quando chega na engenharia?

Quando usar

Faz sentido ao desenhar qualquer componente interativo, como botão, campo, item de navegação ou toggle.

Como não usar

O cuidado é entregar só o estado padrão e deixar hover, erro e desabilitado pra engenharia inventar, o que cria inconsistência.

Na prática

Pense num botão de envio. Você especifica os cinco estados dele, padrão, hover, ativo, desabilitado e erro, pra que a engenharia implemente todos e nenhum fique faltando.

Não confunda com

Vale separar estado de variante de componente. O estado é a reação à interação, como hover ou erro, ou seja, ele muda conforme o que a pessoa faz. A variante é um tipo fixo, como botão primário ou secundário, que existe independente da interação. Um é momentâneo, o outro é permanente.

D

Em inglês

Element states

Pronúncia

n/a

Também chamado de

estados de componente, states

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre estados de interação e feedback