14/04/2016
Aplicando creatividad a los formularios web
Los formularios representan uno de los componentes más importantes y sin embargo menos valorados de la Red. En un sitio web, un formulario de contacto puede servir para que un potencial cliente solicite un presupuesto; un formulario de registro puede ser el primer paso que deban afrontar los usuarios antes de comprar un producto; una lista de preguntas con multiple choice puede permitirle al usuario calificar nuestros servicios; un simple campo para ingresar la dirección de email puede bastar para que el usuario reciba periódicamente las novedades de nuestra empresa. Por lo tanto, en muchos casos, un formulario es el puente que debe atravesar el usuario para involucrarse con nosotros.
Sin embargo, los formularios (tanto en papel como en la pantalla) son aburridos, y, a menos que usemos la creatividad para volverlos atractivos, es altamente probable que los usuarios se resistan a completarlos. Para lograr que más personas se vean inclinadas a llenar los formularios de nuestro sitio web, podemos inspirarnos en los ejemplos que mostraremos a continuación.
Mostly Serious
El formulario de contacto de esta agencia digital presenta un diseño extremadamente simple, donde se destaca el inusual detalle de un botón circular y animado. Sin embargo, el mayor ejemplo de creatividad está en los placeholders (texto de relleno) de los campos: en vez de decir «Nombre», «Email» y «Mensaje», preguntan «¿Cómo te dice tu mamá?», «¿A dónde podemos enviarte un email?» y «¿Qué tienes en la cabeza?». Este tono informal genera cercanía con el usuario y lo anima a completar el formulario.
Saus
Este estudio de diseño holandés hace uso de una idea que no es del todo original, pero sí muy atractiva: presentar el formulario de contacto como si se tratara de una tarjeta postal. Es interesante el uso de renglones para indicar el área donde se escribe el mensaje; esta pista visual es poco común y puede hacer que el usuario identifique más fácilmente la función de ese campo que si fuera un simple rectángulo blanco.
SVN 2 FTP
Los formularios de este sitio web parecen dibujados a mano sobre hojas de colegio, en línea con una estética claramente infantil. Los botones son animados e imitan las teclas de un teclado de escritorio. El resultado final no se parece en nada a los formularios web a los que estamos acostumbrados, lo cual logra, como mínimo, capturar nuestra curiosidad.
Emporium Pies
Pedir una torta por Internet puede ser una tarea complicada cuando tenemos que especificar una fecha, un lugar y una forma de entrega, además de brindar nuestros datos personales y, obviamente, elegir una o más tortas en particular. ¿Cómo lograr que el usuario complete todos esos campos sin aburrirse en el proceso? Esta tienda resolvió el problema de manera inteligente. En primer lugar, algunas opciones están ilustradas con simpáticos dibujos o fotografías de buena calidad, de manera que el texto no nos abrume y, además, podamos ver cada torta antes de pedirla. En segundo lugar, gracias a estrictas reglas de validación de datos, el proceso está adecuadamente guiado para que desarrollemos los pasos en orden, y algunos campos no se muestran hasta que estén completos los anteriores; de esta manera, se evita saturar la pantalla a primera vista. Por último, la mayoría de los placeholders son muy graciosos; por caso, el email de ejemplo es john@dameesepastel.com, y, a la hora de brindar nuestra dirección, la ciudad de ejemplo es Pueblo Pastel. Un claro ejemplo de cómo motivar al usuario a completar un formulario extenso.
Symbolset
Esta tienda de icon fonts nos presenta un carrito de compra en distintos tonos de gris, donde los elementos van cambiando de color a medida que completamos los datos. Por ejemplo, el botón de comprar es originalmente gris (desactivado), pero se vuelve verde (activado) apenas elegimos un producto; mientras que el nombre de ese producto pasa de gris a negro. A través de este tipo de interacciones, el usuario comprende fácilmente el estado actual de su transacción. A pesar de que la idea visual es buena, debe decirse que algunos datos no se validan correctamente.0