14/04/2016

Aplicando creatividad a los formularios web

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

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce