Cmo disear un formulario perfecto

Inicia sesin

Buscar

Buscar

Cmo disear un formulario perfecto Caso

de estudio

Carlos Jimnez

agosto 26 2015

Twittear

Los formularios son ms que el medio para capturar datos. Son la principal
herramienta de comunicacin entre nuestra aplicacin y el usuario. Por lo
tanto, es indispensable entender el fujo de interaccin y el uso correcto de los
elementos en el diseo cuando creamos un formulario. Ah radica la diferencia
entre adquirir un nuevo cliente o perderlo.
En este artculo analizaremos un caso de xito de un formulario en una web.
Aprenderscmo crear un formulario que convierta, en lugar de ahuyentar a tus
clientes. Comencemos!

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

Los dos pilares que soportan el xito de un formulario son los mismos de una
buena comunicacin:

Objetivo del formulario

Lo primero que debemos tomar en cuenta es que nadie va a completar un
formulario por gusto. Normalmente requieren de datos sensibles, informacin
que no est a la mano y adems, llenarlos toma tiempo.
Como diseador, tienes todo en contra para enfrentarte a esto y debes ser muy
cuidadoso. Presenta un objetivo claro y valioso para el usuario. Invtalos a
registrarse, iniciar sesin, comprar, etc. Esta ser su nica motivacin y el punto
de partida de nuestro trabajo.

Confanza para el usuario

El fujo de interaccin en un formulario es una comunicacin de dos vas y como
tal, necesita un nivel mnimo de confanza para funcionar. Esta confanza no se
establece por el simple hecho de decir cosas como Tu contrasea est cifrada bajo
los estndareso por la credibilidad del producto.
La respuesta est en la correcta eleccin de colores, tipografas, botones,
pertinencia de campos, etc. Es decir, la interfaz tiene la capacidad de establecer
esta base de confanza.
Considerando lo antes mencionado, trabajemos sobre un ejemplo puntual. El
siguiente formulario es el registro del Banco BBVA (para Colombia) y lo eleg
porque el mal diseo de experiencia es el
comn denominador en las interfaces de los bancos. Este ser nuestro caso de

estudio:

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

En este ejemplo, un slo vistazo hace falta para desconfar. No hay presencia de
marca, no es claro el objetivo y no tiene mayor reparo en el diseo. Analicemos a
detalle sus caractersticas, aciertos y errores.

Objetivo
Para defnir el objetivo del formulario, debemos responder dos preguntas:
Para qu es este formulario?Para generar el acceso al sistema
Qu le permite al usuario una vez lo complete?Hacer transacciones y
consultas online
La idea es dejaresto claro al inicio de la interfaz con un estilo de fuente que lo
ubique primero en la jerarqua.

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

Pertinencia
Cada campo debe ser coherente con el objetivo del formulario. Por ejemplo,
exigencias cmo sexo, edad o color favorito no parecen naturales en la compra de
un dominio, pero tienen sentido en una tienda de ropa.
En ocasiones, existenintereses de marketing y segmentacin de usuarios. Pero para
obtener estos datos debemos encontrar el momento adecuado y hacerlo conla
mnima friccin posible. Entregar algunos benefcios y permitir que el usuario los
complete voluntariamente es una buena solucin para obtener ms informacin.

Opcionales
Cada vez que un campo es opcional preguntmonos si realmente vale la pena
tenerlo. Si lo hacemos, aclaremos que lo es.
El asterisco cmo convencin est bastante difundido para estos casos. Usemos un
asterisco u otro signo, lo importante es aclarar qu signifca.

Alineacin
La alineacin de Label y campo es un error comn. Una alineacin horizontal no
es la mejor opcin para labels largos o formularios extensos. Ya que puede ser
difcil entender qu campo corresponde a qu etiqueta.
Aprovechemos el espacio vertical, mantengamos una sola columna y una lectura
limpia desde el objetivo hasta el Call to Action principal. Aqu puedes encontrar
un estudio a fondo sobre la alineacin de los campos.
https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

Agrupacin
Agrupar campos relacionados mantiene una comunicacin coherente. Tambin
hace ms fcil incluir descansos visuales en formularios muy extensos y genera la
sensacin de pequeas victorias en lugar de una larga tarea.

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

Ayudas
Las ayudas son valiosas si son pertinentes, de lo contrario confunden ms. Un
ejemplo es el tipo y nmero de identifcacin. Por qu ofrecer una ayuda siempre
visible a todos los usuarios si slo aplica a unos pocos? Adaptemos la ayuda para
que aparezca nicamente cuando se necesita.

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

De paso, un desplegable en blanco no es buena idea. Seleccionar la opcin ms

comn por defecto es una buena prctica, le ahorramos un campo a la mayora de
usuarios.
La solicitud de nmero de tarjeta es el mayor error de usabilidad en nuestro
ejemplo. No existe razn algunapara separar los primeros 4 nmeros de la tarjeta
en un desplegable enorme. Es mucho mejor usar un slo campo con un
placeholder que mantenga la agrupacin de nmeros. Luego, aprovechar los
estndares internacionales para confrmar el tipo de tarjeta.

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

Validacin
Es incmodo que un campo de mail te diga mail incorrecto cuando slo has
digitado una parte.Seamos gentiles con nuestra validacin, ya que es un punto de
comunicacin constante con el usuario. Evitemos la validacin en tiempo real
cuando no es necesaria.Slo es til cuando se enfoca en ayudar y no en corregir.

Este campo es el ms importante de todo el formulario por eso lo vemos

destacadocon un fondo diferente. Aqu omitimos el campo adicional en la
confrmacin de la contrasea. Y aunque sta es una discusin un poco ms larga,
en trminos generales es redundancia de campos y no garantiza que el usuario
recuerde que ingres. Un buen sistema de recuperacin y cambio de contraseas
es mejor.
La validacin del backend suele ser frustrante. Pasa que ests a punto de terminar y
al enviar los datos, te saltan errores que no entiendes. Para evitar esto, ubiquemos
una descripcin cerca del call to actioneindiquemos cules son los campos con
problemas.

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

Call to Action
La accin fnal es el cierre y confrmacin de todo lo construido. Es importante
diferenciar la accin principal e indicar cul es el objetivo. Botones genricos
como Enviar reducen la conversin.
Asumir que el usuario es elinterlocutor es la forma correcta de enfrentarse al
diseo de interaccin. Con estos conocimientos transformaremos un formulario
mediocre en un diseo usable que aumentar notablemente la conversin y la
percepcin general de la marca.

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

Si quieres aprender a disear increbles webs desde cero con el mejor programa

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]

Cmo disear un formulario perfecto

de diseo de interfaces. No te pierdas el curso de Sketch en Platzi. Regstrate hoy

y empieza a crear wireframes, mockups, prototipos y mejora el proceso de llevar
una idea interactiva a su desarrollo.

Te contamos todo lo que pasa en Platzi, directamente en tu bandeja de entrada

Nombre

Correo electrnico

Registrarme

Twittear

Carlos Jimnez
unavacaverde

https://platzi.com/...ormularios/?utm_content=buffer2cec6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer[27/08/2015 04:42:21 a.m.]