Diseñando formularios para simples mortales
Los formularios, dentro de una aplicación móvil o página web, nos sirven para solicitar información como parte de un proceso, por ejemplo, un inicio de sesión o un pago en línea.
El hecho de utilizar un formulario nace de la necesidad de mantener una conversación con el usuario, de solicitar información y dar retroalimentación; proceso que, “cara a cara”, parece ser mucho más fácil que en medios digitales, donde debió diseñarse la forma correcta de realizarlo.
¿Y qué mejor que apegarse a aquello que ya conoce el usuario?
Hacer que la interacción del usuario con el formulario sea lo más parecido posible a una conversación entre dos personas, parece lo más congruente 🤔.
Por tanto, el diseño en un formulario debe buscar la comunicación clara con el usuario, que éste entienda qué se le solicita y de qué forma; tratando de preveer cualquier duda que pueda tener el usuario en el proceso.
Elementos como el tamaño del texto, colores y alineación hasta la forma en que le hablamos al usuario al hacerle una consulta y cómo le mostramos mensajes, son aspectos importantes en el diseño.
A continuación definimos todos los elementos que debe tener un formulario y características que debe cumplir para ser usable:
Componentes de un formulario
Existe un estándar sobre estos, los principales son:
1. Mensajes
Damos retroalimentación al usuario por medio de mensajes, lo mantenemos actualizado del proceso.
2. Etiquetas
Las etiquetas le indican al usuario que información es necesaria en cada caso.
3. Inputs
Los inputs o campos para introducir información permiten al usuario dar la retroalimentación que deseamos; estos incluyen: campos de texto, campos para contraseñas, combo box, check boxes, radio buttons, sliders, list boxes, pickers.
4. Validación
Muy similares a los mensajes, pero específicamente le dicen al usuario si la información que ingresó es correcta o no.
5. Ayuda
Elementos que le indican al usuario cómo llenar un campo.
6. Acciones
Enlaces o botones que producen una acción al ser presionados.
Aspectos fundamentales en la usabilidad de un formulario
En el libro Forms That Work: Designing Web Forms for Usability, Caroline Jarrett and Gerry Gaffney, definen tres aspectos fundamentales a tomar en cuenta para asegurar la usabilidad de un formulario:
1. Relaciones
Establecer una relación entre el usuario y la entidad o empresa.
¿Por qué debemos procurar crear una relación con nuestro usuario?
- Las relaciones están basadas en confianza; debemos lograr esa confianza en nuestro formulario a través de la apariencia y el tono de voz. El usuario se sentirá más tranquilo brindando la información a una organización de confianza.
- Cada relación posee un objetivo: en una romántica es el amor y la felicidad, ¿En su formulario?¿Está claro el objetivo? Dé un mensaje claro al usuario.
- Tal como es esencial en una relación conocer al otro, es importante conocer al usuario que va interactuar con el formulario.
Comunique cuál es el objetivo del formulario
Indique su objetivo al inicio del formulario, mediante un título, y utilice una palabra lo suficientemente descriptiva en el botón de finalizar (ejemplo: Registrarme, Ordenar ahora, Pagar).
Además, el hecho de brindar una descripción del por qué es necesaria la información que consulta, hará menos probable que el usuario no quiera compartirla.
2. Conversaciones
Establecer un diálogo con el usuario.
Conozca a los usuarios
Tenga en cuenta las características del usuario: escolaridad, experiencia en la utilización del dispositivo; utilice palabras que les resulten familiares.
Piense en el flujo de la conversación
¿Tiene sentido el orden de las preguntas? ¿Voy de lo general a lo específico? y en caso de ser extenso, ¿Mis consultas tienen una categorización clara?
Valide la información, si es posible, hágalo en el momento
Es importante transmitirle al usuario si la información que ingresa es correcta, al menos para nuestros parámetros.
Retomando nuestra analogía inicial ¿Qué pasaría si converso con una persona, y después de responderle una serie de preguntas, me dice que no le parece mi primera respuesta? Pierdo el hilo de la conversación, tengo que volver y retomar un tema que ya olvidé en parte.
Lo mismo sucede en los formularios, se corta el flujo cuando el usuario debe volver preguntas arriba a realizar una corrección.
Minimice la cantidad de inputs
Cuando los formularios se perciben complicados o extensos, es aún más difícil para el usuario empezar a completarlos.
Debe tener claro que reducir la cantidad de inputs no lleva solamente trabajo gráfico, adicionalmente debe analizar la forma en que pide la información y la cantidad real que necesita.
Algunos consejos específicos:
- Hable muy claro, evite nombrar acciones, secciones u opciones de una forma similar. Un caso muy común que debemos evitar es el “Sign in & Sign Up”, son muy similares y fáciles de confundir en una lectura rápida.
- Utilise smart defaults: Ayude al usuario a completar el formulario rápidamente adivinando la respuesta del usuario y utilizando solamente un paso de confirmación para esto.
- No solicite crear un username: nuestro usuario deberá tomarse un tiempo para crear uno, que no se repita, además que querrá utilizar alguno que ya fue tomado por otro usuario. Aún mejor, solicite un correo o número de teléfono, dato que el usuario va a recordar porque utiliza comúnmente.
3. Buena apariencia
Una buena apariencia apoya los dos puntos anteriores.
Evite colocar todo en mayúsculas
All caps le complica la lectura al usuario.
Muestre siempre la etiqueta
Utilice un formato que le permita al usuario saber siempre qué información se le solicita. Lo anterior, utilizando la etiqueta fuera del input, evitando lo conocido como Inline Labels.
Agrupe la etiqueta con su respectivo input
Presente al usuario la etiqueta cerca del correspondiente espacio para introducir la respuesta, e incluya más espacio entre cada pareja de elementos, creando claros grupos de elementos.
Las etiquetas deben alinearse a la parte superior de los inputs
Los usuarios completarán los formularios que posean este tipo de alineación más rápido que aquellos formularios en los cuales se mantengan alineada la etiqueta, esto porque poseen un mejor flujo de lectura.
El placeholder es solo un ejemplo
No utilice los placeholder para información adicional, como descripción del input o para agregar cualquier otro dato que el usuario necesite ver al momento de ingresar la respuesta.
Muestre los inputs en una sola columna
Nunca utilice dos o más columas en un formulario. Evite que el usuario haga una lectura en Z, dé un orden claro a la información.
Casos específicos:
- Permita al usuario ver su contraseña: Es común durante el proceso de registro o login que el usuario introduzca erróneamente su contraseña. Se recomienda utilizar la opción de “mostrar contraseña” mediante un checkbox o más bien un ícono que permita realizar esta misma acción.
- No agregue un botón de “Reset”: ¿Qué el usuario lo necesita? Bullshit!! Es una excelente oportunidad para perder todo el avance.
Conclusión
Definitivamente podemos jugar un poco con las reglas, pero para llegar a eso debemos conocer a profundidad a nuestro usuario; las verdaderas reglas vienen de los esquemas mentales.
