Diseñando formularios para simples mortales

Adrián Gómez
Dec 28, 2017 · 6 min read

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.

Algunos ejemplos de input. Metronic (http://keenthemes.com/metronic/)

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.
Dropbox 😟.
  • 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.

Dropbox oculta la etiqueta del input, mientras que Amazon lo mantiene siempre visible.

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.

La cercanía de la etiqueta con el input y la posición mejoran el flujo de lectura para el usuario

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.

Hacer el formulario en una sola columna le permitirá entender de una mejor manera qué tan extenso será para el usuario,

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.

Creativería

Somos un estudio creativo de innovación y desarrollo.

Creativería

Facilitamos la innovación y la transformación digital mediante el diseño de soluciones digitales simples a desafíos complejos de negocios; utilizando el diseño centrado en las personas, metodologías ágiles y tecnologías emergentes.

Adrián Gómez

Written by

UX Lead Designer. Creativería. Costa Rica

Creativería

Facilitamos la innovación y la transformación digital mediante el diseño de soluciones digitales simples a desafíos complejos de negocios; utilizando el diseño centrado en las personas, metodologías ágiles y tecnologías emergentes.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store