18 · Los bloques de la interfaz, vivos
Componentes
Botones, campos, selección, avisos y diálogos. Todos son reales: puedes enfocarlos con el teclado, escribir y comprobar cada estado.
Un solo botón primario por vista. «Cancelar la cita» lleva ícono y palabra y se aleja visualmente del primario.
Estados de un botón
| Estado | Botón | Cambio |
|---|---|---|
| Reposo | Solar con texto Cristal; en claro, borde Ámbar profundo | |
| Hover | Brillo #ffd23f; sin mover el texto | |
| Foco | Anillo de 3 px con separación de 2 px, siempre visible | |
| Pulsado | Baja 1 px y oscurece un 6 % | |
| Cargando | Texto cambia a gerundio; el botón no cambia de ancho | |
| Desactivado | Gris con borde; se explica por qué en el texto cercano |
Como quieras verlo en la agenda.
Con código, 11 números. Escribe unos dígitos para ver la validación.
A la cédula le faltan números. Revisa que esté completa.
La etiqueta va siempre arriba y visible; el marcador de posición no sustituye a la etiqueta. El error lleva ícono, texto y un borde más grueso (2 px) además del color. El teléfono de ejemplo es ficticio.
Cada opción mide 44 px de alto como mínimo. El interruptor dice «Activado» o «Desactivado» en palabras: no depende de su color ni de su posición.
Los avisos no desaparecen solos si contienen una acción o un error. Los de confirmación pueden cerrarse a los 6 segundos, y se pueden pausar. Más reglas en Estados clínicos.
¿Cancelar la cita del martes a las 9:00 a. m.?
Paciente Ejemplo A recibirá un aviso si tú lo envías. El horario quedará libre.
El diálogo repite la acción en sus botones («Sí, cancelarla») en vez de «Aceptar». La opción segura es la primera en el orden de tabulación. Solo se confirma lo que no se puede deshacer.
Sí
- Etiquetas arriba, visibles, con el verbo o el sustantivo exacto
- Botones con verbo: «Guardar cita», «Cambiar la hora»
- Errores junto al campo, con ícono y texto
- Foco visible de 3 px en todo lo que se puede usar
No
- Marcadores de posición como única etiqueta
- Botones «Aceptar» sin decir qué se acepta
- Quitar el contorno de foco por estética
- Deshabilitar un botón sin explicar por qué