Um botão em uma maquete geralmente mostra um estado: o padrão. No produto real, o mesmo botão é pairado, focado com um teclado, pressionado, desabilitado enquanto um formulário está incompleto e carregado enquanto uma solicitação é enviada. Cada um deles é um estado da IU e cada um precisa de um design.
Ajuda separar dois grupos. Os estados de interação vêm do usuário: passar o mouse, focar, pressionado e desabilitado. Os estados dos dados vêm do sistema: carregamento, vazio, dados parciais, erro e sucesso. Uma tela de lista, por exemplo, precisa de um design para quando estiver carregando, quando não tiver itens, quando tiver um item, quando tiver centenas e quando a solicitação falhar.
Os estados focais merecem atenção especial. Pessoas que usam um teclado ou dispositivo switch dependem de um indicador de foco visível para saber onde estão. Remover o contorno de foco do navegador sem substituí-lo é uma das falhas de acessibilidade mais comuns.
A mudança entre estados também faz parte do projeto. Uma transição curta e clara do padrão para pressionado confirma o toque. Um estado de carregamento que se transforma suavemente em sucesso informa às pessoas que sua ação funcionou. Saltos abruptos ou animações muito lentas fazem com que a interface pareça pouco confiável.
Uma maneira prática de evitar estados ausentes é listá-los para cada componente antes de projetá-lo ou modelar o componente como uma máquina de estados: um conjunto de estados e os eventos que se movem entre eles. ExodeUI, que fabricamos, funciona dessa maneira. Você projeta cada estado e as transições entre eles em um arquivo, e seu código envia os eventos que alternam os estados no aplicativo real.