Formularios para web y app: Auditoría UX (y III)

August 31, 2017
Formularios para web y app: Auditoría UX (y III)

Mediante los formularios obtenemos la conversión, por ello les dedicamos este tercer y último post de nuestra serie sobre auditoría UX. A pesar de que es obvio que los formularios deberían ser las estrellas del desarrollo de aplicaciones y sitios web, es muy frecuente que este tipo de páginas se hagan engorrosas para el usuario y no apetezca seguir el proceso. Uno de los motivos es que a la hora de crear formularios nos olvidamos de que no son una página más. En realidad, un formulario es como una conversación y tenemos que conseguir que sea fluida para nuestro interlocutor.

Consideraciones generales de los formularios

Para analizar la usabilidad de un formulario se deben tener en cuenta sus componentes principales: estructura, campos a rellenar (y sus etiquetas), botones de acción y feedback.

  • Estructura: básicamente con ella se define la apariencia de la página, así como la ordenación de los distintos campos que el usuario debe rellenar y las conexiones lógicas entre ellos.
  • Campos a rellenar y sus etiquetas: son los propios campos en los que el usuario introduce el dato; las etiquetas de los campos son el nombre que le damos a cada campo.
  • Botones de acción: desencadenan una acción, la principal (si es que hay más de una) es la acción objetivo del formulario.
  • Feedback: Tanto cuando el usuario va rellenando el formulario como cuando pulsa el botón de acción, debemos darle feedback para que entienda en qué momento del proceso se halla y si todo va bien o ha habido algún error.

Características específicas para crear un buen formulario web

  • Ordena los campos de forma lógica (no pidas la dirección antes del nombre, por ejemplo).
  • Solicita únicamente los campos que necesites, pues un exceso de campos echa para atrás al usuario, especialmente cuando se incluyen campos sensibles como el DNI.
  • Busca la consistencia en las etiquetas de los campos a rellenar, importante especialmente si tienes más de un formulario en tu sitio web: evita, por ejemplo, usar "Apellido 1" y "Apellido 2" por un lado y "Primer apellido y "Segundo Apellido" por otro.
  • Utiliza siempre la misma jerarquía tipográfica, para facilitar la comprensión de los campos y no inducir a error. Cuando un campo deba rellenarse con minúsculas, asegúrate de que no acaba apareciendo en mayúsculas, lo que puede llevar al usuario a creer que lo ha introducido mal.
  • Los campos en los que únicamente se introducen números no debería aceptar otro tipo de caracteres. Es importante que el texto del interior de los campos sea útil para el usuario, no debe limitarse a repetir el nombre del campo, sino que es mucho mejor que constituya un ejemplo de cómo debe rellenarse.
  • Los mensajes de error deben mostrarse siempre del mismo modo, y en una ubicación en la que se lean de forma correcta. De hecho, debe quedar muy claro cuándo hay un error y cuándo no: por ejemplo, no añadas avisos o feedback con fondo amarillo si no se trata de un error.
  • El asterisco de obligatoriedad de los campos es un estándar, pero no tenemos que dar por supuesto que el usuario lo sabe: siempre deberá aparecer la explicación. En los casos de formularios en los que solo haya un campo o dos, por ejemplo en los formulario de acceso o cambio de login, podemos omitir el asterisco de obligatoriedad de los campos, ya que el usuario entiende que debe introducir los datos que se le solicitan para ejecutar la acción.

Especificidades de los formularios para móviles

Si los campos de formulario son excesivamente pequeños, el usuario tendrá problemas con su interacción y con la introducción de datos. De la misma forma, es problemático que haya poca distancia entre los campos y las llamadas a la acción, con lo que el usuario se puede equivocar.  

Al ser las pantallas de móvil más pequeñas, hay que tener cuidado con los textos introductorios o explicativos, porque no debe ocurrir que en el primer pantallazo, sin hacer scroll, no se detecte que hay un formulario para seguir el proceso.

Si te ha interesado este post sobre la usabilidad de los formularios para web y apps, no te pierdas los anteriores de la serie de auditoría UX, sobre la navegación y la arquitectura de la información y sobre la orientación a tareas y objetivos.

También puedes leer

Page 1

Comparte

arrow black
$(“a”).each(function() { var url = ($(this).attr(‘href’)) if(url.includes(‘nofollow’)){ $(this).attr( “rel”, “nofollow” ); }else{ $(this).attr(‘’) } $(this).attr( “href”,$(this).attr( “href”).replace(‘#nofollow’,’’)) $(this).attr( “href”,$(this).attr( “href”).replace(‘#dofollow’,’’)) });