Un botón en una maqueta generalmente muestra un estado: el predeterminado. En el producto real, el mismo botón se mantiene sobre el cursor, se enfoca con un teclado, se presiona, se desactiva mientras un formulario está incompleto y se carga mientras se envía una solicitud. Cada uno de ellos es un estado de la interfaz de usuario y cada uno necesita un diseño.
Ayuda a separar dos grupos. Los estados de interacción provienen del usuario: flotar, enfocar, presionar y deshabilitar. Los estados de los datos provienen del sistema: cargando, vacío, datos parciales, error y éxito. Una pantalla de lista, por ejemplo, necesita un diseño para cuando se está cargando, cuando no tiene elementos, cuando tiene un elemento, cuando tiene cientos y cuando falla la solicitud.
Los estados de enfoque merecen una atención especial. Las personas que utilizan un teclado o un dispositivo de conmutación dependen de un indicador de enfoque visible para saber dónde se encuentran. Eliminar el esquema de enfoque del navegador sin reemplazarlo es una de las fallas de accesibilidad más comunes.
El cambio entre estados también es parte del diseño. Una transición breve y clara de predeterminado a presionado confirma el toque. Un estado de carga que se convierte suavemente en éxito le dice a la gente que su acción funcionó. Los saltos bruscos o las animaciones demasiado lentas hacen que la interfaz parezca poco fiable.
Una forma práctica de evitar estados faltantes es enumerarlos para cada componente antes de diseñar, o modelar el componente como una máquina de estados: un conjunto de estados y los eventos que se mueven entre ellos. ExodeUI, que fabricamos, funciona de esta manera. Usted diseña cada estado y las transiciones entre ellos en un archivo, y su código envía los eventos que cambian de estado en la aplicación real.