IntelDig Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Cómo diseñar formularios web bien

El formulario web es uno de los elementos más importantes y subestimados de una página web. El formulario permite que el usuario ingrese datos que se envían a un servidor para su procesamiento. Tú mismo puedes diseñar formularios web y aquí te mostramos cómo hacerlo.

Cómo diseñar formularios web

A continuación mostramos algunas técnicas prácticas que, si las usas correctamente, te permitirán diseñar experiencias más rápidas, fáciles y productivas de formularios.

Componentes

La forma típica de formulario tiene los siguientes cinco componentes.

Estructura

Implica el orden de los campos, la apariencia del formulario en la página y las conexiones lógicas entre varios campos.

Campos de entrada

Incluye campos de texto, campos de contraseña, casillas de verificación, botones de radio, controles deslizantes y cualquier otro campo para que el usuario ingrese.

Etiquetas de campo

Indican a los usuarios qué significan los campos de entrada correspondientes.

Botón de acción

Al presionar este botón, el usuario desencadena acciones, como el envío de los datos.

Retroalimentación

La retroalimentación implica que los usuarios comprendan el resultado de su entrada. La mayoría de las aplicaciones y sitios web usan texto plano como una forma de retroalimentación. Un mensaje notificará al usuario sobre el resultado y puede ser positivo (indicando que el formulario se envió con éxito) o negativo cuando existe algún dato incorrecto o un campo vacío).

Otros componentes que los formularios pueden tener son:

Asistencia

Una explicación que detalla cómo llenar el formulario.

Validación

Una comprobación automática que garantiza que los datos del usuario son válidos.

Estructura del formulario web

Los formularios son un tipo de conversación con el usuario. Existen dos partes: el usuario y la aplicación. Para que la comunicación sea efectiva para ambas partes, se debe tomar en consideración los siguientes aspectos en la estructura del formulario.

Pregunta solo lo que se requiere

Asegúrate de preguntar lo que realmente necesitas. Los campos innecesarios afectarán la tasa de conversación. Toda información requerida debe tener un por qué y un para qué. En este caso, el tamaño importa, a nadie le gusta pasar mucho tiempo llenando un formulario.

Ordena el formulario lógicamente

Pregunta los detalles de forma lógica desde la perspectiva del usuario, no desde la perspectiva de la aplicación o la base de datos. Por ejemplo, pedir la dirección de una persona antes que el nombre es completamente inusual.

Información relacionada con el grupo

Agrupa la información relacionada en bloques o conjuntos lógicos. De esa manera, el flujo se asemejará a una conversación. Además, agrupar campos relacionados ayudará a los usuarios a entender la información que deben completar.

Una columna vs columnas múltiples

Cuando se crea un formulario de columnas múltiples, es muy probable que los usuarios interpreten los campos de manera inconsistente. Si un formulario tiene campos adyacentes horizontalmente, entonces el usuario debe escanear en un patrón Z, reduciendo la velocidad de comprensión e interrumpiendo el camino hacia la finalización. Mientras que cuando el formulario se presenta en una sola columna, el camino a seguir es recto y fácil de seguir.

Usa contraste

Una vez que guías a los usuarios hacia tu formulario, debes hacer que destaque por sí solo. La mejor forma de hacer destacar un formulario es usando colores que hagan contraste con el fondo. Asimismo, el texto debe sobresalir y ser legible.

Campos de entrada

Los campos de entrada son los que permiten al usuario completar el formulario. Entre los campos de entrada tenemos: campos de texto, campos de contraseña, menús desplegables, casillas de verificación, botones de opción, selector de fechas y más.

Número de campos

Mientras más corto sea un formulario mejor. Así que no hagas que tus usuarios se esfuercen demasiado para darte información, minimiza el número de campos. Esto hará que su formulario se sienta menos cargado, especialmente cuando está solicitando mucha información.

Sin embargo, tampoco te excedas creando una forma de tres campos. Mostrar solo de cinco a siete campos de entrada en un momento dado es una práctica común.

Obligatorio vs opcional

Evita los campos opcionales en los formularios. En caso de que los uses, distingue claramente debajo del campo cuáles son obligatorios. Convencionalmente se usa un asterisco (*) para los campos obligatorios o la palabra “opcional” para los campos no obligatorios (que es preferible en formas largas con múltiples campos obligatorios).

Y si decides usar el asterisco en un campo obligatorio, acompáñalo con un mensaje como: “este campo es obligatorio” para que los usuarios lo tengan claro.

Configuración de valores predeterminados

Evita establecer valores predeterminados a menos que consideres que el 90% de tus usuarios seleccionará ese valor. Y sobre todo evítalo en campos obligatorios porque es probable que introduzcas errores. La gente escanea los formularios en línea rápidamente, así que es poco probable que tomarán el tiempo para analizar todas las opciones.

Pueden saltar algo que ya tiene un valor. Por supuesto que en este caso no aplican los valores predeterminados inteligentes, es decir, los valores establecidos en función de la información disponible sobre el usuario. En su lugar, los valores inteligentes ayudan a que la finalización del formulario sea más rápida.

Máscaras de entrada

Una máscara de entrada es una cadena de caracteres que define el formato de los valores de entrada válidos que a menudo se usa para ayudar a los usuarios a formatear el texto ingresado en los formularios.

La máscara aparece cuando el usuario se enfoca en un campo, y formatea el texto automáticamente a medida que se completa el campo, lo que ayuda a los usuarios a enfocarse en los datos requeridos y a notar más fácilmente los errores. Es una técnica que ahorra mucho tiempo y esfuerzos cuando se trata de datos como números de teléfono, tarjetas de crédito, divisas y más.

Etiquetas

Las etiquetas hacen que los requerimientos sean más accesibles. Una buena etiqueta le dice al usuario de qué se trata el campo y permanece visible incluso después de que el campo se haya completado.

Por lo general a los usuarios no les gusta llenar formularios, así que el proceso debe ser lo más fácil posible. Utiliza todos estos elementos y consejos para facilitar el acceso y el uso y no ahuyentar a tus usuarios con requerimientos engorrosos.

Fuente: este post proviene de IntelDig, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo diseñar formularios web bien

El formulario web es uno de los elementos más importantes y subestimados de una página web. El formulario permite que el usuario ingrese datos que se envían a un servidor para su procesamiento. Tú mis ...

Recomendamos

Relacionado

general diseño web hacer una web ...

¿Quieres Diseñar una Web Rentable?

Bienvenid@ a un nuevo post de Coach2Coach. El único servicio de Coaching de posicionamiento y marketing online en España. Cómo Diseñar una Web Rentable Diseñar una web para que obtenga resultados empieza por identificar sus objetivos, pasa por definir y conocer a sus clientes y culmina en último término con el diseño de la propia web. El diseño, crear la web en sí, consta de muchas otras operacion ...

general diseño web hacer una web ...

Por qué NO Diseñar tu Web en Wix: 7 Razones

Bienvenid@ a un nuevo post de Coach2Coach. El único servicio de Coaching de posicionamiento y marketing online en España. 7 Razones por las que NO diseñar tu web en Wix Si alguna vez has pensado crear tu web gratis, posiblemente hayas oído hablar de Wix. Wix es una plataforma gratuita de diseño web que no requiere conocimiento técnico de nada. Ellos mismos, en su web dicen que con Wix puedes, grat ...

Ayuda o Trucos Diseño Web Coaching Marketing Online o Web Coaching consejos diseño web ...

Diseñar mi Página Web

Cómo diseñar mi página web ¿Te mareas solo de pensarlo? Adiós a las dificultades técnicas, hola soluciones de web coaching. Si estás pensando en tener un sitio web y la pregunta “cómo diseño mi página web” todavía te está rondando la cabeza, no desesperes. Si, además, eres coach, psicólogo o terapeuta, estás de suerte, porque yo me he especializado en el diseño de este tipo de sitios w ...

Plantillas de blogger Uncategorized blogspot ...

Adecuar los formularios de contacto en blogger a la RGPD de forma fácil

Adecuar los formularios de contacto en blogger a la RGPD de forma fácil sin tocar código. La adecuación de la RGPD es casi igual para una empresa de 1000 trabajadores que para un blog con 3 suscriptores, por desgracia Google no ha actualizado su gadget de formularios de contacto y esto es un marrón para los usuarios de blogspot. El problema que tenemos es complicado añadir la casilla de consentimi ...

Artículos Recientes

Cómo diseñar un Front Page perfecto para tu Web

La página de inicio -Front Page- de tu Web es como la fachada de tu empresa y en lo que respecta al comercio electrónico, lo juzgarán igual que un libro, por su cubierta. Casi cualquier visitante que acceda a tu Sitio, aunque sea en páginas secundarias, es seguro en un alto porcentaje que lo hará también a la página principal. No solo se trata de diseño y funcionalidad, también hay otros elementos ...

Crear formularios de contacto en WordPress (con y sin plugin)

Hola amig@s :) ¿Cómo estáis? Por aquí me tenéis un mes más dando guerra con mis plugins y recursos para WordPress. En esta ocasión os voy a enseñar cómo crear formularios de contacto para vuestros blogs o webs en WordPress de dos maneras: con y sin plugins.Apartados que no pueden faltar en tu sitio web Antes de entrar en materia con los formularios de contacto, vamos a ver una serie de apartados y ...

Empresa Digital. Servicios Web

Cómo crear formularios en la web con Typeform

Diseñado por Freepik Los formularios web son de gran ayuda para cualquier organización, sin duda nos ayudan a recolectar información de diversos tipos, ya sea para concentrar información de contacto, recoger opiniones de usuarios o clientes, realizar encuestas, incluso en algunos casos exámenes o test para aplicar a estudiantes. Typeform es una herramienta en línea que nos ayuda a crear un formula ...

Programas y servicios online

Encuestas fáciles y gratis con los Formularios de Google, conoce su funcionamiento!

Los Formularios de Google (Google Forms) son una herramienta ofimática moderna que está siendo cada día más utilizada en todos los ámbitos y de las maneras más impensadas. Los oficinistas también podemos sacarle partido a sus beneficios y ventajas para facilitarnos tareas rutinarias y en éste artículo te explicaremos cómo. ¿Qué son los Formularios de Google? Son una herramienta gratuita proporcion ...

general diseño web hacer una web ...

Tutorial de Diseño Web

Bienvenid@ a un nuevo post de Coach2Coach. El único servicio de Coaching de posicionamiento y marketing online en España. Tutorial de Diseño Web Diseño web definición: Se define diseño web como la actividad que consiste en la planificación, estructuración, diseño e implementación de un sitio web. No es simplemente una aplicación del diseño convencional sobre Internet, como hacerlo gráfico para exp ...

Diseño Web General consejos diseño web diseño páginas web

Claves Decisivas antes de Diseñar tu Página Web

Bienvenid@ a un nuevo post de Coach2Coach. Consejos Básicos para Diseñar tu Página Web Si buscas Consejos para diseñar tu página web, Cómo hacer bien tu página web y términos similares, te darás cuenta de que hay cientos de artículos en Google. Es curioso que todos ellos siempre se centran en consejos como “escribe textos fáciles de leer”, “diseña tu página web responsive”, “que sea fácil de usar” ...