Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Construir una interfaz de formulario de varios pasos

by
Length:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

La usabilidad de formularios es un tema increíblemente importante en el diseño web. Como una de las interfaces de entrada principales proporcionadas a los usuarios, la facilidad de uso de un formulario es esencial para una buena experiencia de usuario.

Hoy, vamos a construir un formulario de varias partes, completo con validación y animación. Vamos a cubrir un montón de terreno, así que ¡abróchate el cinturón!


Formular mejores prácticas de alto nivel

El diseño de la interfaz de formulario es una mina de obstáculos de usabilidad. Antes de comenzar, hablemos sobre algunas de las mejores prácticas.

No hagas que tus usuarios piensen demasiado

Las formas generalmente no son el lugar para fomentar una interacción única. Las buenas formas proporcionan técnicas de navegación obvias y transparencia total. Las buenas formas están bien etiquetadas y son fáciles de navegar.

No te pongas demasiado elegante

Es importante no desviarse demasiado de los comportamientos de forma predeterminados. Existen estándares que son la base de los comportamientos predeterminados de los formularios. La desviación de estos estándares puede tener efectos negativos en la accesibilidad, así que considere la posibilidad de mantener esos estilos predeterminados cuando sea posible.

Recuerda, el usuario no tiene que quedarse.

El usuario de su formulario no tiene que quedarse. Eligen quedarse. Completar un formulario es una tarea, así que hazlo fácil. (Si es posible, ¡diviértase!) No confunda ni exija al usuario; en su lugar, establezca un diálogo alrededor de las preguntas que el formulario está haciendo. Sea cortés.

Cuándo utilizar técnicas multisección.

Las formas multiseccionales son ciertamente una buena técnica, a veces. No hay una sola respuesta para "cuántas entradas se necesitan antes de que deba dividir el formulario". En su lugar, siempre considere si dividir el formulario en secciones separadas ayudará o dificultará la usabilidad. En segundo lugar, considere si ayuda u obstaculiza otros aspectos del diseño de interacción.

Si tiene formularios con secciones muy distintas, puede valer la pena separarlos en varias partes. Los procesos de pago son un ejemplo común de esto. (La información personal, la información de envío, la información de pago y la confirmación son secciones muy distintas y generalmente importantes).


Planificación de la interacción

Vamos a crear un formulario de registro con campos arbitrarios. Necesitamos saber en qué sección estamos actualmente, por lo que necesitaremos un indicador en la parte superior del formulario. Queremos hacer una transición horizontal de nuestras secciones de formulario, deslizando de derecha a izquierda. Para lograr esto, configuraremos las diferentes secciones para que tengan una posición absoluta dentro de un elemento de "ventana" de sección. También queremos tener dos botones; uno es el botón de envío normal. El otro es un botón de "siguiente sección".


El marcado

Aquí está nuestro formulario:

El marcado es bastante sencillo, pero hablemos de algunas piezas.

  • Conjuntos de campos: los conjuntos de campos son un elemento semántico para agrupar entradas; esto se adapta perfectamente a nuestra situación.
  • Classnames: jQuery Validate usa clases para definir tipos incorporados. Veremos cómo funciona esto en un minuto.    
  • Los campos son arbitrarios. Hemos envuelto las entradas de radio en una etiqueta de párrafo para facilitar el formateo.    
  • Botones Enviar y siguiente: la etiqueta de anclaje con una clase de botón se usará para ir a la siguiente sección. La entrada de envío se mostrará cuando sea apropiado a través de JavaScript.

Los Estilos (Variacion-LESS)

Esto es largo, prepárate ..

Caminemos por la parte importante de los estilos.

Visión general

El formulario en sí se establece en un ancho específico, centrado con el margin: 0 auto, luego se establece en position:relative. Este posicionamiento permite el absolute positioning de los elementos secundarios para colocarlos absolutamente, en relación con la forma contenedora. El formulario que contiene contiene tres tipos principales de elementos: las pestañas de sección y la "ventana" del conjunto de campos, así como los botones.

Las pestañas de la sección se colocan en relación con el elemento que las contiene y se "suben" con un margen superior negativo. Compensamos el efecto en el resto del diseño con un margen de fondo igual.

La "ventana" del conjunto de campos está configurada para ser posicionada absoluta, relativa al elemento de formulario principal. El ancho y la altura están ambos configurados al 100%. El propósito de esta ventana es mantener elementos, luego ocultarlos cuando caen fuera de los bordes con overflow: hidden. No pudimos hacer esto en el formulario, porque queremos conservar las pestañas del indicador.

Finalmente, los elementos de los botones (una etiqueta de anclaje y una entrada de envío) están diseñados para colocarse de manera absoluta en la esquina inferior derecha del formulario, compensados ​​por 20 píxeles desde la parte inferior y la derecha. También hemos agregado una transición CSS simple a los elementos del botón para oscurecer el fondo al pasar el cursor.

Algunas notas mas

  • Los conjuntos de campos se establecen para ser position: absolute. Tenemos dos clases para dos estados y un estado predeterminado. El estado predeterminado saca el conjunto de campos a la izquierda del formulario; la clase .current coloca el fieldset en el área visible del formulario, y finalmente la clase .next empuja el fieldset a la derecha del formulario.
  • La clase actual tiene una opacidad de 1; los estados predeterminados (y inherentemente el .next) tienen una opacidad de 0.
  • Animamos los campos entre estas clases con simples transiciones css.
  • Las clases .error y .valid ayudarán con el estilo de validación. Estamos utilizando Merriweather Sans, una fuente disponible de forma gratuita a través de Google Webfonts.

El JavaScript

Aquí está la parte que hace que toda la interacción funcione. Algunas notas antes de ver el código: este código depende de jQuery y jQuery Validate. jQuery validate es un complemento que ha existido durante mucho tiempo y, por lo tanto, ha sido probado y probado por miles de personas.

Nuestra estrategia básica: configurar algunas reglas de validación para el formulario, incluida una función personalizada para verificar un número de teléfono. Queremos que los usuarios puedan navegar hacia atrás a través de secciones previamente terminadas. Queremos que puedan usar el botón de entrar para pasar a la siguiente sección; sin embargo, no queremos permitir que los usuarios avancen a las secciones subsiguientes hasta que las secciones anteriores hayan sido completadas y sean válidas.

Si el usuario intenta hacer clic en una pestaña para una sección más allá de las que ha completado, queremos evitar navegar a esa sección.

Queremos confiar en las clases (en lugar de animaciones jQuery) para la transición entre los estados.

Entonces, con estas cosas en mente, aquí está el JavaScript final. (Nota: si no estás al tanto de tu jQuery, esto puede ser un poco desalentador; sin embargo, quédate con él de todos modos, y aprenderás metiéndote en el código). Después del guión completo, tomaremos una parte en Un momento y explicar qué está pasando.

Entonces, vamos a ir pieza por pieza.

Esta función es la función de configuración de jQuery Validate. Primero, le estamos diciendo al complemento que tome el formulario de registro y le aplique la validación. Si la validación es exitosa, agregamos una clase de válida a la etiqueta que el complemento de validación inserta después del elemento de entrada, y reemplazamos el texto con la marca de verificación utf-8 .

También estamos registrando la devolución de llamada de error, aunque en realidad no estamos haciendo nada en esta función. No registrar la función parece tener la misma devolución de llamada que la función de éxito en caso de error. Estamos configurando el gancho onsubmit en falso; esto se debe a que al presionar intro se envía automáticamente el formulario, que de manera predeterminada activa la validación para evitar el envío de formularios no válidos. La prevención del comportamiento predeterminado del envío de formulario no impide la validación del formulario. El resultado es que los campos en la pantalla "siguiente" ya muestran errores de validación, a pesar de que el formulario nunca se envió.

Esta función escucha el evento keyup, activado en el formulario. Si la clave que fue presionada fue enter (código de clave 13), entonces realizamos la siguiente verificación. Si el siguiente botón aún está visible y la sección actual es válida, evite que se presione el botón predeterminado mientras se está en un formulario, que es el envío del formulario.

Luego llamamos a nextSection(), que avanza el formulario a la siguiente sección. Si la sección actual contiene entradas no válidas, esas entradas se identifican y el formulario no avanza. Si el siguiente botón no está visible, eso significa que estamos en la sección final (que veremos en funciones posteriores) y queremos permitir que se produzca el comportamiento predeterminado (envío del formulario).

Estas funciones son sencillas. Si presiona el botón con la identificación de "siguiente", queremos avanzar a la siguiente sección. Recuerde que la función nextSection() contiene todas las comprobaciones necesarias para la validación de formularios.

En el evento de envío en el formulario, queremos evitar el envío del formulario si el siguiente botón está visible o si el conjunto de campo actual no es el último.

La función goToSection() es el caballo de batalla detrás de la navegación de este formulario. Se necesita un solo argumento: el índice de la navegación de destino. La función toma todos los campos con un índice mayor que el parámetro de índice pasado, elimina la clase current y agrega una clase next. Esto empuja los elementos a la derecha del formulario.

A continuación, eliminamos la clase actual de todos los conjuntos de campos con un índice menor que el índice pasado. A continuación, elegimos el elemento de la lista igual al aprobado en el índice y agregamos una clase actual.

Posteriormente, eliminamos la clase actual de todos los demás hermanos li. Establecemos un tiempo de espera, después del cual eliminamos la siguiente clase y agregamos las clases actuales y activas al conjunto de campo con un índice igual al que se pasó en el parámetro de índice.

La clase activa nos permite saber que el usuario puede navegar de nuevo a esta sección en particular. Si el parámetro de índice pasado es 3 (el último conjunto de campos), ocultamos el siguiente botón y mostramos el botón Enviar. De lo contrario, queremos asegurarnos de que el siguiente botón esté visible y el botón Enviar esté oculto. Esto nos permite ocultar el botón de envío a menos que el último campo sea visible.

La función nextSection() es básicamente una envoltura alrededor de la función goToSection(). Cuando se llama a nextSection, se realiza una comprobación simple para asegurarse de que no estamos en la última sección. Mientras no lo estemos, vamos a la sección con un índice que es igual al índice de la sección actual, más uno.

Estamos escuchando el evento clic en los elementos de la lista. Esta función verifica que el elemento de la lista tenga la clase activa, que recibe una vez que el usuario llega inicialmente a esa sección del formulario completando todas las secciones anteriores. Si el elemento de la lista tiene la clase, llamamos a goToSection y pasamos el índice de ese elemento de la lista. Si el usuario hace clic en un elemento de la lista correspondiente a una sección a la que aún no puede acceder, el navegador lo alerta para informarle que debe completar las secciones anteriores antes de avanzar.

Finalmente, estamos agregando un método especificado por el complemento jQuery Validate que verifica manualmente una entrada. No dedicaremos mucho tiempo a esto, porque esta funcionalidad exacta se puede encontrar en la documentación de Validacion.

Básicamente, verificamos que el texto que el usuario coloca en el campo del teléfono coincida con la expresión regular (la larga cadena de números y símbolos). Si lo hace, entonces la entrada es válida. Si no es así, el mensaje "Especifique un número de teléfono válido" se agrega después de la entrada. Podría usar esta misma funcionalidad para verificar cualquier tipo de entrada (no tiene que usar una expresión regular).

Nota: No utilice esto como un método de autenticación de contraseña. Es muy inseguro y cualquiera puede ver la fuente para ver la contraseña.


Conclusión

Hemos utilizado HTML semántico y LESS simple combinados con un mínimo de JavaScript para crear una interacción de formulario robusta. Los métodos utilizados para crear este formulario, especialmente el uso de nombres de clase para identificar el estado y definir funcionalidades y animaciones, se pueden utilizar en casi cualquier proyecto interactivo. La misma funcionalidad podría usarse para demostraciones paso a paso, juegos y cualquier otra cosa que dependa de interacciones simples basadas en estado.

¿Qué más le harías a este formulario? ¿Qué tipos de interacciones ha encontrado para ayudar a los usuarios a fluir de forma más natural a través de un proceso tedioso, como completar un formulario largo de varios pasos? ¡Compártelos en los comentarios!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.