Diseño centrado en el usuariousabilidadUX

Cómo mejorar un formulario

By 28 mayo, 2016 No Comments

Cuando hablamos de optimización de formularios, no es cuestión de pintarlo “bonito” pero sí orientar el usuario en todo momento: paso en el que se encuentra, cuál se ha completado, detectar y mostrar errores y siempre siempre indicarle que en cualquier momento se puede volver atrás y editar cualquier paso que se haya dejado.

Gran parte de los proyectos que nos llegan el 90% tiene malas funcionalidades en sus formularios (demasiados campos por rellenar sin importancia, pasos importantes ocultos, dificultad para encontrar una forma de volver atrás y etc…).

Cuando tenemos una aplicación que nos parece fantastica y la han pintado super bonita, debemos siempre tener en cuenta quién la va utilizar y hacer las siguientes preguntas:

  1. ¿Los campos de los formularios son intuitivos y proporcionan ejemplos de edición?
  2. ¿Mis usuarios saben dónde se encuentran dentro de mi aplicación/web?
  3. ¿Mis usuarios pueden volver en el punto que estaban antes?
  4. ¿Saben dónde pedir ayuda sin salir del formulario que esté rellenando?
  5. ¿Mis usuarios tienen total control sobre la interfaz: volver atrás, editar campos, ir a la siguiente página sin que pierda las acciones realizadas anteriormente…?

Ejemplos de los puntos anteriores:

Validación de campos:

No hay que ser estricto cuando se trata de campos de textos o numéricos y hay que pensar en todas las posibilidades que pueda necesitar tus usuarios. En este ejemplo vemos un campo para introducir el DNI, pero el usuario en concreto solo tiene NIE o Pasaporte, pero desea disfrutar del servicio/producto que ofrecen en esta página:

form

via GIPHY

¿Qué pasa ahora? Muy sencillo, el usuario hará varios intentos tales como separar su número de identificación con comas, con guión, quitar la letras… hasta que se fruste y se vaya. Los mensaje de error no le dará ninguna pista de lo que está haciendo “mal” (como mucho notificará que el número introducodo es incorrecto, o que falta una letra).

intentos

Una mala experiencia que podría haberse resuelto de la siguiente forma:

1º- Un mensaje que me avise que no puedo utilizar la app/web porque no tengo DNI Español

2º- O una mejora considerable a nivel de uso: si admiten todos los tipos de documentos, se deja el campo más largo dónde se pueda elegir el tipo de identificación y continuar con mi proceso.

formulario-ux-mejoras-nounseven

Campos de fecha

Dividir los campos es una buena solución para aumentar la intuitividad y la percepción del usuario sobre los datos que le van solicitando a lo largo del proceso. Puedes utilizar este calendario por ejemplo, que es mundialmente conocido, así podrá introducir manualmente o hacer clic en el icono para que salte la ventanita de completa:

fechafecha2

 ¿Botones de Aceptar/Cancelar a la derecha o izquierda?

Es una discusión infinita dónde cada consultor, blog de interacción o guía de sistemas operativos te dirán una cosa u otra. Yo intentaré poner ejemplos en base a mi experiencia y los miles de tests que hice a lo largo de esos años diseñando dashboards.

Empecemos con un par de planteamientos que solemos ver en las interfaces:

formularios

formularios

No hay distinción visual entre las acciones y tenemos que detenernos para encontrar la que mejor nos conviene. Lo primero que debemos pensar es que nosotros no leemos la información como en un papel impreso, así que en la web solo “pasamos la vista por encima” y buscamos lo más relevante. Ahora que tenemos en cuenta que solo escaneamos la info, también es muy importante saber que al ser occidentales, leemos de izquierda a la derecha y en diagonal, de esta forma lo primero que “ojearemos” será el botón a la derecha.

Un ejemplo claro es como navegamos y utilizamos los botones de volver atrás  y avanzar. Nos hemos acostumbrado a una serie de patrones, que para la usabilidad hay que dar toda la prioridad que puedas, para generar una mejor experiencia de uso.

navegador

Este es el planteamiento: destacamos el botón de guardar y simplificamos con un sencillo enlace a la izquierda para “Cancelar” la acción. De esta forma, lo veríamos así:

planteamiento ux formularios

En mi punto de vista, lo correcto es destacar de alguna forma el botón con la acción más importante, cuidando al extremo los colores para no confundir al usuario. Fíjate en este ejemplo ¿Cuál te llama más la atención? Seguramente el botón rojo, si añadimos a que solo escaneamos la info, daremos por hecho que el botón que debemos hacer clic es el que se destaca más (en internet navegamos por intuición):

 

mala-practica

Referencias: UX.StackExchange | Guía OS | Guía Microsoft

 

¿Te gustó los ejemplos?

Si necesitas una consultoría para optimizar los formularios de tu APP, Tienda Online o Website no dudes en contactarnos :)