Usabilidad en el diseño de formularios

Escrito el 20 marzo, 2009 por Nacho Plaza

Hay veces que visitando algunas webs llego a secciones en las que hay que rellenar algún formulario que se convierte en un martirio. Así que os ofrezco algunos consejos, basados en mis experiencias junto con información que he encontrado por la web, para mejorar la experiencia del usuario a la hora de completarlos.

1. Poner siempre un título descriptivo al formulario.
2. Pedir información estrictamente necesaria.
3. Diferenciar los campos obligatorios, y si es posible, agrúpalos al principio del formulario.
4. Si el formulario dispone de varios pasos o páginas, indicar al usuario tanto el paso en que se encuentra como los que le quedan para finalizar (Paso 2 de 4).
5. En formularios de varios pasos, permitir que el usuario navegue al paso anterior o siguiente sin que pierda los datos ya introducidos.
6. No pedir los mismos datos varias veces. Por ejemplo, para los campos de una sección “Dirección de entrega” habilitar un checkbox “Usar los mismos datos del comprador”.
7. Agrupar los campos de forma lógica.
8. Usar una única columna de datos.
9. La anchura de los campos debe ser suficiente para que entre el texto estandar de ese campo, y campos contiguos deberían tener la misma anchura.
10. Si hay campos que sólo se deben completar dependiendo de un campo anterior, mantenerlos ocultos y mostrarlos sólo cuando el usuario tenga que completarlos.
11. No solicitar datos mediante popups o ventanas externas.
12. Realizar la validación de campos en el navegador, y preferiblemente mientras el usuario lo completa.
13. Si la validación la hacemos en el servidor, informar al usuario detalladamente de los campos incorrectos, y nunca borrar la información que ya ha completado.
14. Para campos que deben validarse en el servidor, usar AJAX. Por ejemplo, para que el usuario sepa de antemano que el nombre de usuario que quiere escoger ya está en uso.
15. Si se usa javascript, debes asegurarte de que el formulario se envía correctamente si se tiene desactivado.
16. Mostrar un texto de ayuda exclusivamente en campos que puedan ofrecer dudas de qué información se está solicitando.
17. Evitar elementos visuales que puedan molestar al completar el formulario.
18. Si no permitimos el uso de contraseñas débiles, tener un contol que informe de la fortaleza de la contraseña.
19. Para las fechas, si usamos controles de calendario nos evitamos problemas por los diferentes formatos internacionales .
20. En campos con “fecha desde” y “fecha hasta”, dar preseleccionado el campo “fecha hasta” con un valor posterior a “fecha desde”, y evitar que pueda seleccionar un valor anterior.
21. Evita los combos si no son estrictamente necesarios.
22. En los combos, los valores tienen que tener un orden lógico (orden alfabético, por ejemplo).
23. Como excepción al punto anterior, podemos poner como primera opción de la lista desplegable en valor que sabemos que hay más probabilidad que seleccione el usuario. Por ejemplo, si mostramos la versión francesa del formulario, colocar “Francia” en primer lugar del combo “País”.
24. En combos anidados (país, comunidad, provincia), no recargar la página para cargar la lista de los siguientes combos. Usar javascript o AJAX. Si recargas la página, asegurate de mantener los campos ya completos con el valor que tenían.
25. Incluir un valor “Otros” en los combos si no cubrimos todas las posibles opciones a completar.
26. Marcar siempre un valor por defecto en los combos o radiobuttons, aunque sea “Ninguno”.
27. Usar radiobuttons cuando ofrecemos como máximo tres respuestas. Si ofrecemos dos posibilidades y el texto es corto, podemos ponerlos en horizontal en vez de en vertical.
28. No marcar los checkbox que no sean obligatorios.
29. No pedir información que podemos obtener nosotros a partir de otros campos. Por ejemplo, podemos obtener la provincia a partir del código postal o la letra del DNI a partir del número de documento.
30. No incluir un botón “Limpiar formulario”.
31. Usar etiquetas (labels) descriptivas asociadas a cada campo.
32. Permitir la navegación entre campos mediante tabulación, siempre desde el campo superior al inferior.
33. No incluir las etiquetas en la navegación mediante tabulación.
34. Finalizar la navegación por tabulación en el botón “Enviar”.
35. Asignar la tecla “Intro” para que realice la acción principal.
36. Evitar que el usuario pueda enviar el mismo formulario más de una vez.
37. No fijar un timeout demasiado corto para completar el formulario.
38. Si el proceso de envío del formulario es lento, mostrar un mensaje “Enviando formulario”.
39. Una vez recibido el formulario, informar al usuario de que el proceso ha finalizado correctamente.
40. En caso de errores, mostrar información detallada, evitando el típico mensaje de “No se ha podido enviar el formulario”.

Artículos relacionados:

• Making the Web Easy to Use for Users With Disabilities
• Formularios largos: ¿una pantalla con scroll o varias páginas?
• Best practices for form design
• Directrices de usabilidad para el diseño de formularios
• Usabilidad al diseñar formularios de contacto

Be Sociable, Share!

•