Colaboracion clase Master Marketing Directo. Clase sobre formularios web

1. Formularios Web
Walter Ponce
@waltermitas7
#MMDD8

2. Índice formularios web
1.
2.
2.1
2.2
2.3
2.4
3.
4.
Introducción a los formularios
Best Practice
o Layout
o Ingreso de datos
o Acciones
o Ayudas y tips
Redes sociales en los formularios
Proceso de Login

3. ¿Qué son los formularios web?
Los formularios web son el mecanismo más eficiente
para obtener datos útiles de los visitantes a un site
El usuario proporciona información a la empresa a través de
un site preparado con campos previamente seleccionados

4. Algunos de los usos que pueden tener los formularios:

5. Formularios: ¿Por qué son importantes?
Los formularios son un elemento fundamental para
cualquier sitio web que quiera generar Leads de
calidad y un mayor número de conversiones.
El motivo de realizar un formulario en la web puede ser
diverso: tienda online, contacto, carrito de la compra,
solicitud de información, descarga de información
datos, demos, participación en concursos / sorteos…

6. Asumámoslo…
¡Odiamos rellenar formularios!

7. ¿Por qué los odiamos?
• Son larguísimos
• Son complicados
• Tienen muchos campos
• Algunos campos son sensibles a ser
cumplimentados
• (Existe) repetición de campos
• Dan errores
•Generan desconfianza

8. Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips

9. Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips

10. (Simplificar e)El diseño del formulario de registro simplificado
El usuario debe ser capaz de concentrarse en la tarea que tiene que realizar.
Cualquier distracción tiene que ser eliminada.
Los diseñadores deben eliminar todos los detalles innecesarios y distracciones que no
ayuden al usuario a completar el formulario. A menudo, sólo un logotipo y el formulario
son suficientes, sin ningún tipo contenido o información adicional.

11. Títulos de los campos de entrada
De acuerdo con la investigación
“Label Placement in Forms” de Matteo
Penzo1, poner las etiquetas encima de las
cajas pueden reducir drásticamente los
tiempos para terminar el formulario, ya
que requieren menos fijaciones oculares.
Si se quiere lograr el mismo objetivo, pero
se tienen limitaciones propias de una
pantalla vertical, las etiquetas alineadas a
la derecha funcionan mejor.
Y en caso de que el formulario requiera
que las personas escaneen las etiquetas
para entender lo que se necesita (datos
desconocidos o avanzados), el alineado a
la izquierda funciona mejor.
1 Label Placement in Forms. By Matteo Penzo. Published: July 12, 2006.

12. Ingreso de datos
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips

13. Ingreso de datos
• Indicar campos requeridos cuando:
• Son muchos campos
• Pocos son requeridos
• Se pretende permitir al usuario escanear el
formulario para ver que es necesario rellenar
• Indicar campos opcionales cuando:
• Muy pocos son opcionales
• No indicar nada cuando:
• Todos los campos son requeridos

14. Validación de datos
Es bastante común pedir al usuario que repita los datos
más importantes para asegurar la correcta
introducción de estos.
El “email” y la “contraseña” suelen ser los campos clave
y mas sensibles, por eso se suele pedir que se repitan
para no errar al introducirlos.

15. Acciones
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips

16. No todas las acciones son iguales
Reset, Cancel y Atrás
• Son acciones secundarias, no deberían ser usadas de forma muy seguida
Guardar, Continuar y Enviar
• Son acciones primarias, directamente responsables de la cumplimentación
del formulario
Asegurar una distinción visual clara entre acciones primarias y secundarias

17. Ayuda y tips
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips

18. Ayudas y mensajes de error
Se recomienda poner ayudas cuando:
• Se pregunta por datos poco familiares
• Los usuarios pueden preguntarse porqué se solicita
ese dato
• Hay un formato recomendado de ingreso del dato
• Algunos datos son opcionales
• Se ha realizado correctamente el formulario (se
puede hacer in site o con un email automático)
Mensajes de error:
• Asegurar que todos los datos requeridos son validos
• Etiquetas claras, ayudas, tips y validaciones ayudan a
reducir errores
• Pero algunos errores pueden ocurrir
• Proveer una resolución clara en la menor cantidad
posible de pasos

19. ¿Qué es el ‘Captcha’?
Los usuarios serían felices si no hubiera captchas, pero son necesarios en la práctica,
los sitios web necesitan hacer un filtro para los spam bots (crear numerosas cuentas)
de lo contrario tendrían que filtrar el spam en la base de datos.
Se trata de una prueba desafío-respuesta utilizada en
computación para determinar cuándo el usuario es o
no humano

20. Redes sociales en los formularios
Gracias a las redes sociales se puede hacer
un registro mas fácil y rápido.
A través del registro en una de las redes
sociales se puede traer información al
formulario para evitar tener que rellenarlo.

21. Proceso de Login
"Sign-on”: Las soluciones como Facebook, Twitter, OpenID
han tratado de abordar los problemas de inicio de sesión
mediante la reducción del número de registros, de esta
manera disminuye la cantidad de información que el
usuario debe recordar para acceder a los sites.
Con estos servicios, una cuenta permitirá acceder a
muchos sitios web diferentes.

22. ¡Gracias!
Gràcies!