Formularios
Las reglas para el formulario completo, antes de cualquier campo: pregunte poco, una columna, la etiqueta en vista y el error debajo del campo.
En esta página
Reglas para el formulario completo
- Pregunta solo lo necesario. Cada campo extra es trabajo para la persona. Si puedes averiguarlo tú mismo, no preguntes.
- Una columna. Campos uno debajo del otro, en el orden que piensa la persona. Lado a lado solo cuando son una cosa (hora y minuto).
- Etiqueta siempre visible, arriba del campo. El texto de marcador de posición nunca ocupa su lugar.
- Todo es obligatorio, excepto lo que dice "(opcional)". Marcar lo opcional es más corto que dispersar asteriscos.
- Cuanto más cerca, más juntos. Dentro de un campo,
space-1; entre opciones en un grupo,space-2; entre un campo y el siguiente,space-5. - El error va debajo del campo, con icono y palabra, y un resumen arriba cuando hay más de uno. Abajo, no rompe un formulario de dos columnas.
- El servidor siempre valida. El error vuelve con los valores rellenos; nada lo que escribió la persona se pierde.
- Un botón principal al final, diciendo qué pasa: "Guardar recordatorio". La retroalimentación muestra en el formulario mismo.
Un formulario completo
Time format:
Intentar guardar con un nombre vacío: el error aparece debajo del campo y el foco se traslada a él. Con un nombre, la retroalimentación muestra en el formulario mismo.
Texto de marcador de posición
- Permitido como un ejemplo extra breve, bajo una etiqueta que permanece: "por ejemplo. Regar las plantas", "Buscar tareas".
- Nunca en lugar de la etiqueta o la pista: desaparece cuando la persona escribe, y lo que dice va con ella.
- Nunca con información necesaria (formato requerido, límites): eso va en la pista, que permanece.
- En el color de texto suave, que pasa la relación de contraste 4.5.
Hacer y no hacer
Do
Subject
La etiqueta permanece visible, y el ejemplo solo ayuda.
Don’t
El ejemplo en lugar de la etiqueta, con una regla dentro: todo desaparece cuando la persona escribe.
Do
Note (optional)
Solo el campo opcional está marcado, en palabras.
Don’t
Name *
Asteriscos en todo, con la clave abajo.
Do
Name
El error debajo del campo, con icono y palabra.
Don’t
Name
El error arriba, vago, y solo por color.
Escribiendo
- Etiqueta: un sustantivo corto o una pregunta directa ("Nombre del recordatorio", "¿Cuándo recordar?"). Sin dos puntos al final.
- Sugerencia: solo si ayuda a acertar la primera vez. Si cada campo tiene una sugerencia, ninguna se leerá.
- Error: qué hacer, no qué está mal ("Escribe un nombre", no "Campo inválido").
Componentes
- Campo, TextInput, TimeInput, Select, Checkbox, Radios, Switch: las piezas.
- Mensaje de error y Resumen de errores: los errores.
- Retroalimentación en el lugar: lo que ocurre después de Guardar.