La búsqueda de formularios web más inteligentes

Los formularios en línea son una de las áreas más difíciles para el desarrollo de sitios web, especialmente con tantas cosas que pueden salir mal. La naturaleza cambiante de la forma en que las personas acceden al contenido en línea también ha tenido un impacto en una tecnología que se desarrolló años antes de que las personas esperaran poder usar un teléfono lo que normalmente harían con una computadora. Es una tecnología que ha experimentado muy poca evolución.

El diseño de formularios web debe ser una profesión independiente. Los diseñadores de sitios deben contratar los servicios de diseñadores de formularios web profesionales a tiempo completo para ayudarlos en su tarea. Pero esto no se considera lo suficientemente económico, por lo que la mayoría de las veces el diseñador del sitio también es responsable del diseño de los formularios utilizados en el sitio.

Pero diseñar formas es una habilidad altamente especializada. Requiere comprender cómo las personas interactúan con la información y comprender las mejores maneras de recopilar y presentar información. Cuando el diseño web general se centra principalmente en presentar información e imágenes de formas atractivas pero prácticas, el diseño de formularios exige que enfoquemos nuestra atención en la naturaleza de la información y luego decidamos la mejor manera de estructurarla en la página para que funcione como destinado a. La estética es una consideración menos importante en este caso, pero aún no debe ser olvidada.

En este artículo analizaremos el arte del diseño de formularios web y veremos si podemos encontrar una manera de hacer que nuestros formularios web sean más inteligentes tanto en términos de su aspecto como de cómo funcionan.

Las herramientas de creación de formularios web.

Las herramientas estándar que nos han proporcionado los desarrolladores de navegadores y W3C para armar nuestros formularios web no son exactamente ideales, y antes de aplicarles CSS, en realidad son bastante horribles. Esto es lo que parecen:

También hay otro control de entrada estándar llamado seleccionar, pero debe evitar usar esto a menos que ahorrar espacio sea una preocupación seria. Hay mejores formas de manejar la tarea realizada por el control de selección, como veremos más adelante. Los controles de Textarea también deben evitarse cuando sea posible porque son muy problemáticos y anticuados.

Además de estos elementos de entrada estándar, también hay nuevos especiales creados para HTML5. Excepto cuando un documento se está preparando estrictamente para uso interno y donde se conoce el entorno del navegador, solo se deben usar los componentes que funcionan tanto en Firefox como en Chrome. Es bueno si un componente también funciona en otros navegadores, pero no debería -sólo- Trabajar en otros navegadores. Aquí están los componentes HTML5 como aparecen en Firefox:

Y su aspecto ligeramente diferente en Chrome:

Ahora, obviamente, es muy importante tener en cuenta que las entradas de HTML5 se verán y funcionarán de manera diferente entre Chrome y Firefox, pero seguirán funcionando. Los controles de entrada estándar también se ven un poco mejor en Chrome que en Firefox. Tenga en cuenta que Chrome impone el estándar de fecha norteamericano, que los usuarios pueden no apreciar. Además, la versión de Chrome del control de fecha hace que no sea adecuado para la visualización y solo se debe utilizar para la entrada. La adición de un selector de fechas es la mejora principal en Chrome, pero probablemente podamos esperar ver esto en futuras versiones de Firefox.

Debido a que Firefox es de código abierto, puede hacer que su propia versión personal de Firefox genere las entradas de la misma manera que Chrome descargando el código fuente del navegador de código abierto de Chromium en el que se basa Chrome, y portando la sección correspondiente del código a la fuente de Firefox código (pero luego tendrás que hacerlo cada vez que actualices Firefox a una nueva versión).

El punto principal es, sin embargo, que incluso con las mejoras de Chrome, la apariencia predeterminada de los controles de entrada es pequeña y poco atractiva. Hay algunos otros controles disponibles, pero como no funcionan tanto en Chrome como en Firefox, no deben usarse en sitios destinados al público.

La respuesta de Bootstrap (casi adecuada)

Bootstrap aplica un estilo a los controles estándar que mejora su apariencia en cierta medida. Pero debido a la filosofía de diseño centrado en dispositivos móviles de Bootstrap, causa algunos efectos indeseables en formularios que no están diseñados para ser mostrados como una sola columna, y hace que los campos de entrada cortos se vean graciosos cuando abarcan una columna completa de manera predeterminada. Es posible que el mundo se haya movido, pero las formas no se inventaron teniendo en cuenta a los usuarios móviles

Bootstrap expande los controles para llenar el ancho horizontal de su contenedor, lo que significa que todos los controles tendrán el mismo ancho, le guste o no (a menos que anule este comportamiento manualmente), y le permite vestir algunos tipos de control con brillo adicional. La solución de Bootstrap es elegante y supera algunos de los problemas de los controles que tienen diferentes apariencias en diferentes navegadores, pero solo funciona con los controles estándar. Los controles HTML5 no están implementados en las versiones actuales de Bootstrap, por lo que tendrás que personalizarlos por tu cuenta.

Bootstrap también te permite combinar controles juntos. A veces esto es bueno y otras no tan bueno. La combinación de una entrada de texto con un botón y una casilla de verificación puede parecer buena, pero podría confundir al usuario acerca de cómo deben interactuar con un control tan desconocido.

Lo que Bootstrap proporciona son dos de mis dispositivos favoritos de creación de formularios, el panel y la bien. Estos son muy útiles para agrupar datos de formularios para dar una indicación visual de qué datos están relacionados con qué otros datos, y también para segregar datos.

Creación de formularios inteligentes 101

Ahora estamos listos para pensar cómo se pueden construir las formas de manera más inteligente. Para hacer esto, debemos estar pensando más allá de los valores predeterminados. Debemos ser conscientes de las raíces de los controles de formulario vinculadas al escritorio, y también de la necesidad de compatibilidad móvil. Y debemos preocuparnos por cosas como la usabilidad y la validación (si el formulario se utilizará para la recopilación de datos).

Ese último punto es bueno, porque mientras que los controles de formulario se usan para recopilar información, también se usan para mostrar datos almacenados. El usuario promedio de la web está (y debería) estar más interesado en obtener información de usted que en brindarle información.

La recopilación de datos es fácil. La gente llenará cualquier cosa que pegues delante de ellos, incluso si es un desastre. Pero cuando se trata de mostrar datos, son más exigentes. En consecuencia, aquí nos centraremos más en el uso de formularios para mostrar datos que para recopilarlos, ya que la pantalla requiere más cuidado y más "inteligencia".

1. ¿Necesitamos un formulario?

Antes de crear un formulario, debemos verificar que realmente necesitamos uno. Si los datos se pueden representar de manera adecuada y sin confusiones como una tabla, una tabla generalmente será más eficiente y práctica.

Un formulario es necesario si:

  • Estamos recogiendo información del usuario.
  • Tenemos una gran cantidad de datos para mostrar
  • Los datos deben estar claramente segmentados.
  • Es probable que el usuario acceda a los datos desde un dispositivo móvil

Si alguno de los elementos anteriores no es verdadero, entonces no es necesario usar un formulario, y una tabla será suficiente. El desafío al que nos enfrentamos con la compatibilidad móvil es que ni las tablas ni los formularios son realmente adecuados para una pantalla móvil. El hecho de que los diseñadores de teléfonos inteligentes les dieran a sus usuarios la opción de usar un navegador en orientación vertical y que la mayoría de los usuarios prefieren sostener sus teléfonos de esa manera causa la mayoría de los problemas de compatibilidad móvil que los diseñadores de sitios tienen que enfrentar.

En cualquier caso, los formularios son más adaptables a una pantalla móvil que las tablas. Entonces, si realmente debe asegurarse de que todos los datos se puedan ver fácilmente en una pantalla móvil, los formularios son una mejor opción que las tablas ... ¡a veces!

2. Diseñar el diseño del escritorio.

Es cierto que, en general, se supone que primero debe diseñar un diseño móvil, pero cuando se trata de formularios, no es la mejor manera, ya que necesitamos saber cómo se agruparán los datos, y solo podemos hacerlo si puede ver todos los campos a la vez, lo cual es algo que no se puede hacer en un móvil a menos que esté mostrando tan pocos datos que no debemos molestarnos en diseñar el formulario.

La forma más rápida de simular un diseño de formulario es con InkScape. En este ejemplo, construiremos un sistema para administrar los registros de recursos humanos. Aquí está la maqueta para el prototipo de escritorio:

El rectángulo exterior representa el espacio completo de una pantalla 1024 x 768 px. En cualquier navegador de escritorio, no tenemos acceso a tantos píxeles a menos que el usuario esté en modo de pantalla completa (lo que rara vez es el caso). Entonces nuestro

el diseño es 900 x 600px, que debe encajar en el área disponible de la mayoría de las pantallas de escritorio.

Cuando el área disponible es menor que 900px de ancho, nuestras columnas 2 x 450px se romperán y aparecerán como una columna continua de 450px. Esto resuelve el problema de la compatibilidad móvil, al menos hasta que Google exija que hagamos que todos nuestros sitios puedan caber en una pantalla de reloj de pulsera.

Notará que la mayor parte de la pantalla solo está compuesta por cuadros de entrada comunes, que pueden parecer aburridos, pero en realidad es casi siempre la mejor manera de hacerlo. También note el uso de una fuente de ancho fijo. Esto ayuda a mantener la uniformidad en el diseño de la forma.

Nuestras columnas serán en realidad un poco más que 450px, más como 600px cada una, pero si quisiéramos forzar el ancho de la columna a ser 450px simplemente reducimos el tamaño de nuestra columna de 6 a 5. Pero una columna 600px debe caber en una pantalla móvil en modo retrato sin envolver, de todos modos.

Probaremos nuestro diseño con este código:

Y podemos ver que todo se ve bien (porque temporalmente agregamos bordes para mostrarnos).

El widget de la regla de pantalla de Linux, obviamente, no forma parte de la página web, pero está ahí para mostrarnos que nuestras columnas no se romperán en una pantalla más pequeña. Vamos a lo que sucede en diferentes anchos de pantalla comunes:

3. Creación de tamaños de entrada personalizados y posición de etiqueta

Si dejamos todo en forma predeterminada, sin agregar ningún CSS personalizado, esto es lo que sucederá cuando agreguemos nuestra primera fila de controles de entrada:

Esto sucede porque la etiqueta para cada entrada se encuentra por defecto a la izquierda de la entrada y porque no hemos establecido un ancho personalizado para los controles de entrada. Podemos solucionar ambos problemas con el CSS.

Ahora simplemente configuramos la propiedad de visualización de los elementos de la etiqueta en "bloque", establecemos los campos de Primero y Último en la clase "in40w", y el campo MI en la clase "in10w", y todo debería verse mucho mejor.

Como puede ver, se ve mejor, pero el diseño ya no es correcto. Ahora las cajas están apiladas. Entonces, cómo solucionamos eso es eliminando la idea de utilizar el elemento de etiqueta, porque realmente no lo necesitamos. Solo aplicaremos nuestro in40w y in10w clases, además de hacer una nueva clase llamada inLeftOf.

El cual, una vez aplicado, soluciona el problema que vimos anteriormente, como este:

Pero esto no está dejando suficiente espacio para el campo SSN. Esto se debe a que nuestra columna izquierda es más grande de lo esperado, por lo que 40% es en realidad más espacio del que necesitamos para estos campos, por lo que podemos reducirlos a in30w, y el campo intermedio es más grande de lo que debe ser, por lo que podemos hacer eso in5w. Esto es lo que sucede:

Así que ahora hay más que suficiente espacio para agregar el campo SSN, que completa la primera línea de nuestro formulario de entrada. Después de suavizar todos estos detalles, construir el resto de la columna izquierda debería ser muy fácil. Podemos deshacernos del borde temporal ahora, y también aplicar el fondo correcto a la columna. Aquí está la mitad superior del panel, antes de llegar a las áreas especiales del formulario:

Algunas cosas han sucedido en esta etapa. La primera fue la parte fácil de configurar el color de fondo para la columna (rgb (235,235,246)), y aunque no puede verlo aquí, el color del texto para todas las entradas se ha establecido en #427DB4 y el peso de la fuente se puso en negrita para reducir la fatiga visual. El texto se configuró para transformarse automáticamente en mayúsculas utilizando la propiedad de transformación de texto CSS, a fin de acelerar la entrada de datos y reducir los errores.

La cuestión más compleja de alinear los controles y asegurarse de que mantendrían una alineación decente en cualquier tipo de pantalla requiere más reflexión. Ya viste la técnica utilizada para la primera línea de entradas y sus etiquetas. Esta técnica funcionará cuando no sea necesario que haya espacio adicional entre las entradas, pero si necesitamos agregar espacio, es mejor usar otra técnica.

Esta otra técnica consiste en crear una fila de columnas anidadas dentro de nuestra columna principal, lo que ayudará a mantener los controles correctamente espaciados. El número de columnas y sus tamaños cambian según los requisitos de cada conjunto de controles. Recuerde que todo responde, por lo que cuando se cambia el tamaño de una columna, todo lo que está dentro de la columna intentará cambiar el tamaño para que coincida con el cambio. Esta es una buena noticia para los usuarios con discapacidades visuales, ya que pueden ampliar la ampliación en su pantalla y todo se alineará correctamente como para cualquier otro usuario.

Pasando a la parte más compleja de la columna de la izquierda, el concepto original descrito en la maqueta requería una estructura que hubiera sido difícil de implementar. Afortunadamente, me di cuenta de que los datos en el panel de derechos podrían duplicarse si se usaran las casillas de verificación estándar, y esto solucionó el problema de complejidad del diseño:

Los paneles más claros alrededor de las secciones especiales son pozos Bootstrap normales. Para ingresar datos de religión, es necesario elegir de una lista establecida de religiones oficiales predefinidas (incluyendo "otras"). El desarrollo de las columnas del lado derecho fue incluso más fácil, y solo usamos las mismas técnicas del primer conjunto de controles en la columna izquierda, organizando los controles en un formato de tabla, pero sin usar una tabla.

Para que este proyecto fuera un éxito, tenía que proporcionar una capacidad de respuesta perfecta en todos los tamaños de pantallas oficiales. Veamos cómo resultó el resultado. Primero con la versión de resolución completa:

Eso es lo suficientemente cercano al prototipo de que podemos estar satisfechos con él. De hecho, es incluso una mejora. Ahora veamos el diseño de respuesta en cada una de las diferentes secciones de la página:

Bootstrap y HTML5 han hecho que el desarrollo de formularios sea más rápido y más fácil que antes, pero muchos desarrolladores socavan este progreso al hacer que los formularios sean demasiado complicados (usar los elementos de formulario especiales de HTML5 solo porque están ahí para ser usados ​​en lugar de porque son necesarios para el proyecto ), y creando formas totalmente unidimensionales que ni siquiera intentan aprovechar el diseño responsivo. Con solo un poco de cuidado y trabajo extra, se puede hacer que cualquier dato se vea más presentable en cualquier tamaño de pantalla.

Es posible que tenga algunos fallos menores en el tamaño de pantalla más pequeño en el diseño de retrato en el tamaño de pantalla más pequeño (en el caso de este proyecto, el campo Inicial del medio en la primera fila es un poco más pequeño de lo que sería ideal), pero los usuarios móviles generalmente acepte que esta es la compensación que tienen que hacer para no sostener sus teléfonos adecuadamente.

Hazlo bien, y tus formularios de datos pueden verse así:

En lugar de, uh, esto:

imagen del encabezado cortesía de

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.