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

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

general blogging

Integrar formulario de pedido en Blogger

Hace poco una chica llamada Ana me decía en el formulario de sugerencia de tutoriales y posts... He estado revisando rápidamente los temas que has ido tratando y he encontrado algunos parecidos a lo que yo necesito, pero no exactamente lo que quiero. Te comento: mi marido tiene una explotación ecológica y hace venta directa a particulares. Cada semana publica un post en su blog con el contenido d ...

Wordpress

Los mejores plugins de formularios para WordPress

Los mejores plugins de formularios para WordPress Sí hay algo que nunca falla en ninguna página web es un formulario de contacto, una decisión más relevante de lo que pueda parecer. Gracias a ellos podremos conseguir información fácil y rápida de nuestros usuarios más interesados, por ello es importante que la experiencia de usuario y usabilidad de la página sea correcta. En este artículo indicaré ...

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

Diseño Gráfico Diseño Web Estudios ...

10 formas de mejorar la experiencia de uso de tu web: Las Leyes de la Usabilidad

Un buen diseño tiende a seguir unos principios generales en cuanto a colores, proporciones, espacialidad, geometría o tipografía, pero para los diseñadores de sitios web, tiendas online o interfaces de usuario existen, además, una serie de leyes o reglas de usabilidad que se deberían considerar a la hora de diseñar una interfaz con la que un usuario vaya a interactuar y del que se pretenda consegu ...

general coaching marketing online hacer una web ...

Mailchimp WordPress Plugin (s): Insertar tu Formulario de Suscripción de Forma Sencilla

Bienvenid@ a un nuevo post de Coach2Coach. El único servicio de Coaching de posicionamiento y marketing online en España. Cómo Insertar Formularios de Suscripción con Mailchimp WordPress Plugin(s) Cualquier MailChimp WordPress Plugin es la forma más sencilla para insertar tu formulario de suscripción en tu web o blog. Lo único que tienes que hacer es instalar el plugin que elijas y configurarlo, q ...

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

facebook easypromos herramientas CM

EasyPromos

En posts anteriores estuvimos explicando distintas herramientas para Facebook para Community Mangares. En este post explicaremos EasyPromos, una herramienta para crear promociones en Facebook. Existen distintos tipos de sorteo: Sorteo regalo y directo: es una promoción en la que los usuarios rellenan un formulario y entran directamente a un sorteo o reciben un premio directamente. Cupones desc ...

general otros tutoriales

Cómo personalizar un formulario de Google Docs

Cada vez más bloggers aprovechan los formularios de google docs para sus sorteos, encuestas, inscripciones, etc. Y si bien muy prácticos, las opciones para personalizar que nos ofrecen no son especialmente bonitas. ¡Vamos a ver cómo arreglar eso personalizándolo nosotras como queramos! :) Es muy fácil: Paso 1 - Entramos en nuestro Google Drive Paso 2 - Le damos a Nuevo - Crear formulario Según le ...

Diseño web Seo

Importancia del UX en el diseño web y posicionamiento seo

¿Qué tal queridos lectores de Planeta SEO? Soy Álvaro Peredo de Galerna Estudio. Hoy os traigo un post en el que me gustaría resaltar la importancia del UX tanto en el diseño como en el posicionamiento. En el momento en el que empezamos a diseñar una página web nos solemos olvidar de un aspecto esencial como es la experiencia del usuario, también conocido como UX. La razón por la que deberíamos te ...