Este documento ofrece recomendaciones para mejorar la usabilidad de los formularios web. Sugiere que los formularios deben ser fáciles y rápidos de completar para satisfacer las necesidades y limitaciones de tiempo de los usuarios. Recomienda estructurar los formularios de manera lógica, usar etiquetas claras y pedir solo la información necesaria. Además, aconseja proveer retroalimentación y ayuda a los usuarios para evitar errores.

1. Formularios
accesibles
Hagamos + felices a los usuarios
04/08/2018 Diana Rodríguez. Información y Tecnologías 1

2. 04/08/2018 Diana Rodríguez. Información y Tecnologías 2

3. El usuario
NECESITA el formulario para
interactuar
Su objetivo NO es completar
formularios
Tiene
• POCO tiempo
• POCA paciencia
Por ello el formulario debe ser
FÁCIL y RÁPIDO
04/08/2018 Diana Rodríguez. Información y Tecnologías 3

4. Aspectos de un
formulario
04/08/2018 Diana Rodríguez. Información y Tecnologías 4
Estructura y organización
Textos literales de los campos
Campos de completitud
Botones
Ayuda y retroalimentación

5. Consideraciones
generales
5
• Procurar buen contraste texto/botón
con el fondo
• Utilizar fuentes sin serifa
• Colocar la letra en un tamaño adecuado
para la lectura
• Que el texto y las cajas sean expandibles
• Redactar en un lenguaje comprensible
por el destinatario
• Respetar los códigos de color
• Ubicar el formulario en las zonas
acostumbradas por los usuarios
Diana Rodríguez. Información y Tecnologías
04/08/2018

6. Estructura y organización
04/08/2018 Diana Rodríguez. Información y Tecnologías 6
Solicitar únicamente los campos necesarios
Si se pide información sensible, indicar para qué
Ordenar la información de forma lógica
Los campos, mejor en una sola columna
• salvo que estén asociados como Calle y Número, por ejemplo

7. 04/08/2018 Diana Rodríguez. Información y Tecnologías 7

8. 04/08/2018 Diana Rodríguez. Información y Tecnologías 8

9. Textos literales de los campos o etiquetas
04/08/2018 Diana Rodríguez. Información y Tecnologías 9
No reemplazar la etiqueta por el texto aclaratorio
• Si no hay otra opción, agregar el texto aclaratorio por fuera del
campo
Las etiquetas de los campos deben ser cortas y bien descriptivas
Es mejor si las etiquetas se colocan en la parte superior del campo.
• O en su defecto, a la izquierda
No usar mayúsculas en las etiquetas
Relacionar visualmente cada etiqueta con su campo adecuadamente

10. Diana Rodríguez. Información y Tecnologías 1004/08/2018

11. Campos de completitud de datos
04/08/2018 Diana Rodríguez. Información y Tecnologías 11
Resaltar el campo que el usuario está por rellenar
Para el caso de dispositivos móviles, ofrecer el teclado apropiado a la
finalidad del campo a rellenar (letras o números)
Ser prudentes con el auto-rellenado de los campos
• utilizar solo cuando sea una opción del 90% de los potenciales
usuarios (por ejemplo, país)
Ofrecer ayuda en campos problemáticos como los de fechas

12. Campos de completitud de datos (cont.)
04/08/2018 Diana Rodríguez. Información y Tecnologías 12
Otorgar a los campos la extensión adecuada
En el caso de los dispositivos táctiles, que la distancia entre
los campos se adapte a los tamaños de los dedos (45 a 57 px)
Para el caso de los botones de selección, si son pocos es
mejor colocarlos en sentido vertical

13. 04/08/2018 Diana Rodríguez. Información y Tecnologías 13

14. Botones
04/08/2018 Diana Rodríguez. Información y Tecnologías 14
Es mejor no colocar botones del tipo “Limpiar”, “Borrar”, “Restablecer”,
“Cancelar” o similares
• Si no hay otra opción, deberán tener un peso visual inferior al botón “Enviar”
Cuidar el orden natural de los botones y su ubicación
Hacer botones de acciones precisas para el usuario. Es mejor “Comprar” que
“Confirmar”, por ejemplo
Los botones que indican acciones positivas se colocan a la derecha: “Aceptar”,
“Enviar”, “Buscar”

15. 04/08/2018 Diana Rodríguez. Información y Tecnologías 15
Botones de radio o botones de opción
• Cuando se desea que el usuario conozca y
compare todas las opciones
• Cuando son menos de 5 opciones
• Cuando la respuesta rápida es prioridad
Botones desplegables
• Cuando la opción predeterminada es la
recomendada
• Cuando hay un gran número de opciones

16. Ayuda y retroalimentación
04/08/2018 Diana Rodríguez. Información y Tecnologías 16
Indicar al usuario al inicio del formulario, cuáles campos son obligatorios
• “Los campos con * indican datos obligatorios” o “Todos los campos son obligatorios”
Si se necesita brindar ayuda contextual en algún campo, que esté visible en ese
campo
Ídem para los errores. Si el usuario cometió un error, indicárselo en el campo
donde se produjo
Habilitar la validación de cada campo en el momento que el usuario finaliza de
completar ese campo; no al enviar el formulario

17. 17
Gracias por procurar mi felicidad…04/08/2018 Diana Rodríguez. Información y Tecnologías

18. Fuentes consultadas
• Carreras, O. (2008). Formularios usables. 60 Directrices de usabilidad.
Disponible en: https://olgacarreras.blogspot.com/2007/02/formularios-
usables-60-directrices-de.html#titulo
• Gil Ripoll, D. (2017). Usabilidad y UX en formularios web. Disponible en:
http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-
formularios-web/
• Minhas, S. (sf). 7 Rules of using radio buttons vs drop-down menus.
Disponible en: https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-
drop-down-menus-fddf50d312d1
• Whitenton, K. (2016). Website forms usability: Top 10 Recommendations.
Disponible en: https://www.nngroup.com/articles/web-form-design/
04/08/2018 Diana Rodríguez. Información y Tecnologías 18