SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Formularios Web
Walter Ponce
@waltermitas7
#MMDD8
Í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
¿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
Algunos de los usos que pueden tener los formularios:
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…
Asumámoslo…
¡Odiamos rellenar formularios!
¿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
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips
(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.
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.
Ingreso de datos
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips
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
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.
Acciones
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips
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
Ayuda y tips
Layout
• Posicionamiento de
etiquetas
• Agrupación de
contenido
Ingreso de datos
• Formatos, campos
requeridos
Acciones
• Primaria y
secundaria
Ayuda y tips
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
¿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
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.
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.
¡Gracias!
Gràcies!

Weitere ähnliche Inhalte

Ähnlich wie Colaboración clase Master Marketing Directo

TRABAJO EN GOOGLE DRIVE
TRABAJO EN GOOGLE DRIVETRABAJO EN GOOGLE DRIVE
TRABAJO EN GOOGLE DRIVElpupi
 
TRABAJO FORMULARIO EN GOOGLE DRIVE
TRABAJO  FORMULARIO EN GOOGLE DRIVETRABAJO  FORMULARIO EN GOOGLE DRIVE
TRABAJO FORMULARIO EN GOOGLE DRIVElpupi
 
¿De verdad necesitas saber si tu cliente está casado?
¿De verdad necesitas saber si tu cliente está casado?¿De verdad necesitas saber si tu cliente está casado?
¿De verdad necesitas saber si tu cliente está casado?Arsys
 
Introducción al ebusiness y Comercio electrónico - Rafael Trucios Maza
Introducción al ebusiness y Comercio electrónico - Rafael Trucios MazaIntroducción al ebusiness y Comercio electrónico - Rafael Trucios Maza
Introducción al ebusiness y Comercio electrónico - Rafael Trucios MazaRafael Trucios Maza
 
Informe del sistema ctas por cobrar
Informe del sistema ctas por cobrarInforme del sistema ctas por cobrar
Informe del sistema ctas por cobrarmirameyvenauditoria
 
Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)ULEAM
 
Grupo6 Caso Plaza21.com Taller de Usabilidad
Grupo6 Caso Plaza21.com  Taller de UsabilidadGrupo6 Caso Plaza21.com  Taller de Usabilidad
Grupo6 Caso Plaza21.com Taller de UsabilidadFernando Ponce
 
Formulario web
Formulario  webFormulario  web
Formulario webanita203
 
Formulario web2
Formulario  web2Formulario  web2
Formulario web2anita203
 
III MGGHUB - El poder del dashboard - Analítica web
III MGGHUB - El poder del dashboard - Analítica webIII MGGHUB - El poder del dashboard - Analítica web
III MGGHUB - El poder del dashboard - Analítica webmadridgeekgirls
 
15 Errores Comunes En E Commerce DiseñO
15 Errores Comunes En E Commerce DiseñO15 Errores Comunes En E Commerce DiseñO
15 Errores Comunes En E Commerce DiseñOUtopia Z
 
Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Alex Naupay
 
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)Titiushko Jazz
 
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)Titiushko Jazz
 

Ähnlich wie Colaboración clase Master Marketing Directo (20)

TRABAJO EN GOOGLE DRIVE
TRABAJO EN GOOGLE DRIVETRABAJO EN GOOGLE DRIVE
TRABAJO EN GOOGLE DRIVE
 
TRABAJO FORMULARIO EN GOOGLE DRIVE
TRABAJO  FORMULARIO EN GOOGLE DRIVETRABAJO  FORMULARIO EN GOOGLE DRIVE
TRABAJO FORMULARIO EN GOOGLE DRIVE
 
¿De verdad necesitas saber si tu cliente está casado?
¿De verdad necesitas saber si tu cliente está casado?¿De verdad necesitas saber si tu cliente está casado?
¿De verdad necesitas saber si tu cliente está casado?
 
Introducción al ebusiness y Comercio electrónico - Rafael Trucios Maza
Introducción al ebusiness y Comercio electrónico - Rafael Trucios MazaIntroducción al ebusiness y Comercio electrónico - Rafael Trucios Maza
Introducción al ebusiness y Comercio electrónico - Rafael Trucios Maza
 
Formularios y Encuestas. Herramientas tecnológicas
Formularios y Encuestas. Herramientas tecnológicasFormularios y Encuestas. Herramientas tecnológicas
Formularios y Encuestas. Herramientas tecnológicas
 
Bd ejercicios
Bd ejerciciosBd ejercicios
Bd ejercicios
 
Base de datos
Base de datosBase de datos
Base de datos
 
Formularios y Encuestas. Herramientas tecnológicas
Formularios y Encuestas. Herramientas tecnológicas Formularios y Encuestas. Herramientas tecnológicas
Formularios y Encuestas. Herramientas tecnológicas
 
TVCABLE
TVCABLE TVCABLE
TVCABLE
 
Informe del sistema ctas por cobrar
Informe del sistema ctas por cobrarInforme del sistema ctas por cobrar
Informe del sistema ctas por cobrar
 
Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)
 
Grupo6 Caso Plaza21.com Taller de Usabilidad
Grupo6 Caso Plaza21.com  Taller de UsabilidadGrupo6 Caso Plaza21.com  Taller de Usabilidad
Grupo6 Caso Plaza21.com Taller de Usabilidad
 
Formulario web
Formulario  webFormulario  web
Formulario web
 
Formulario web2
Formulario  web2Formulario  web2
Formulario web2
 
III MGGHUB - El poder del dashboard - Analítica web
III MGGHUB - El poder del dashboard - Analítica webIII MGGHUB - El poder del dashboard - Analítica web
III MGGHUB - El poder del dashboard - Analítica web
 
15 Errores Comunes En E Commerce DiseñO
15 Errores Comunes En E Commerce DiseñO15 Errores Comunes En E Commerce DiseñO
15 Errores Comunes En E Commerce DiseñO
 
Laboratorio 2
Laboratorio 2Laboratorio 2
Laboratorio 2
 
Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)
 
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
 
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
Unidad vii esp parte 3 clase de inteligencia de negocios (datawarehouse)
 

Kürzlich hochgeladen

Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Katherine Concepcion Gonzalez
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfAlfaresbilingual
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICAÁngel Encinas
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesYanirisBarcelDelaHoz
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024IES Vicent Andres Estelles
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024IES Vicent Andres Estelles
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxlclcarmen
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 

Kürzlich hochgeladen (20)

Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonables
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 

Colaboración clase Master Marketing Directo

  • 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…
  • 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.