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 entender cómo las personas interactúan enformation y la comprensión de las mejores formas de recopilar y presentar enformation. Donde el diseño web general se centra principalmente en presentar enformationes e imágenes en formas atractivas pero prácticas, el diseño de formularios exige que centremos nuestra atención en la naturaleza del interior.formaty luego decida la mejor manera de estructurarlo en la página para que funcione según lo previsto. La estética es una consideración menos importante en este caso, pero aún así no debería ser paragotten.
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 selecciona, 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 , solamente 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 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 en cómo se pueden construir formularios de formas más inteligentes. Para hacer esto, debemos pensar mucho más allá de los valores predeterminados. Necesitamos ser conscientes de la desktop-raíces enlazadas de controles de formulario, y también 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 si bien los controles de formulario se usan para recopilar entradas, también se usan para mostrar datos almacenados. El usuario web promedio está (y debería estar) más interesado en ingresarformation de ti que cederformatión para ti.
La recopilación de datos es sencilla. La gente rellenará cualquier cosa que le pongas delante, incluso si es un desastre. Pero cuando se trata de la visualización de 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 visualización 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.
Independientemente, 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, entonces los formularios son una mejor opción que las tablas ... ¡a veces!
2. Diseña el desktop diseño
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, crearemos un sistema para administrar registros de recursos humanos. Aquí está la maqueta para el desktop prototipo:
El rectángulo exterior representa todo el espacio de una pantalla de 1024 x 768 px. en cualquier desktop navegador, no tenemos acceso a tantos píxeles a menos que el usuario esté en modo de pantalla completa (que rara vez es el caso). Entonces nuestro
el diseño es de 900 x 600 px, que debería caber en el área disponible de la mayoría desktop pantallas.
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 establecemos la propiedad de visualización de los elementos de etiqueta en "bloquear", 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 espaciados correctamente. El número de columnas y sus tamaños cambia según los requisitos de cada conjunto de controles. Recuerda que todo es responsive, por lo que cuando se cambia el tamaño de una columna, todo lo que está dentro de la columna intentará cambiar de 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 de 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 ligeros alrededor de las secciones especiales son simplemente pozos Bootstrap ordinarios. Para ingresar datos de religión, es necesario elegir de una lista establecida de religiones oficiales predefinidas (incluidas "otras"). Desarrollar las columnas del lado derecho fue aún más fácil, y solo usó las mismas técnicas del primer conjunto de controles en la columna izquierda, organizando los controles en una tabla format, pero sin usar una tabla.
Para que este proyecto fuera un éxito, tenía que proporcionar una perfecta responsiveness en todos los tamaños de pantalla oficiales. Veamos cómo resultó el resultado. Primero con la versión de resolución completa:
Eso es lo suficientemente cercano al prototipo que podemos estar satisfechos con él. De hecho, es incluso una mejora. Ahora veamos el responsive diseño 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 fácil que antes, pero muchos desarrolladores socavan este progreso al hacer que los formularios sean demasiado complicados (usando los elementos de formulario HTML5 especiales solo porque están ahí para usarse en lugar de porque son necesarios para el proyecto). ), y al crear formas completamente unidimensionales que ni siquiera intentan aprovechar responsive diseño. Con solo un poco de cuidado y trabajo adicional, cualquier dato puede verse 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
Comentarios Comentarios 0