Estoy diseñando un formulario de entrada larga HTML y estoy debatiendo entre unas pocas opciones de diseño:Mejor diseño de un formulario de entrada larga HTML
¿Alguna investigación o mejor práctica aquí?
El sitio usability.gov del gobierno de EE. UU. Tiene an interesting article sobre el resultado de un estudio del National Cancer Institute sobre la usabilidad de formularios, pero no cubre exactamente sus opciones; se centra más en el diseño de los elementos del formulario.
Alsol, Dey Alexander Consulting tiene a list of form design usability resources que podría serle de ayuda.
Actualización: En cuanto a muchas de las otras respuestas, hay muchas "aquí es correcto y las otras opciones son incorrectas". La respuesta final es que no hay un enfoque correcto aquí; Sin embargo, un poco de contexto puede ayudarlo a guiarlo hacia una buena solución. Como ejemplo, dividir un formulario en varias páginas HTML puede ser ideal si tiene que hacer una buena validación y derivación de decisión (por ejemplo, lo que aparece en la página 2 del formulario depende completamente de la respuesta que el usuario da a una pregunta en la página 1), ya que esto le permite mantener el código de validación y bifurcación al 100% del lado del servidor. Pero incluso entonces, hay opciones alternativas que podrían ser mejores en su caso, pero es difícil responder sin saber más acerca de su caso.
Parece que se ha movido el enlace al artículo de usability.gov. [¿Quizás es este?] (Http://www.usability.gov/get-involved/blog/2009/10/online-form.html) –
aunque no puedo citar ninguna investigación, he visto muchas formas de varias partes populares en uso.
algunas de las mejores formas en línea que he visto siempre han tenido:
Eso, yo diría que, en caso de ser la mejor práctica :)
Como usuario, definitivamente prefiero la opción 1.
Todo lo demás es una mentira. Crees que has completado la burocracia requerida, y luego hay más.
Por otro lado, como propietario de un sitio web, a menudo quiere engañar a un usuario en el proceso de registro, tentándolo con una simple pantalla 1 del formulario.
Las interfaces de pestañas no tienen precio para la navegación, pero son, IMO, casi nunca útiles para la entrada secuencial.
Esto es un poco blanco y negro, Pavel; hay formularios de varias páginas increíblemente bien diseñados que no tienen el problema que usted cita como su problema, porque tienen marcadores claros de la cantidad de forma que ha completado (y aún le queda por completar), e incluso contextual pistas sobre el contenido de las secciones restantes que no están en la página. – delfuego
Tal vez sea así ... Y, sin embargo, preferiría desplazarme a mí mismo. Me da el privilegio de mirar hacia adelante, tener un valor moral de "no tienen nada que ocultar". Creo que esta bien. –
Combinar 2 y 3.
guiar al usuario a través de las páginas con los botones siguiente y vuelta, y establecen algunos elementos de la interfaz (pestaña son grandes, pero también se etiqueta como migas de pan ..) para que el usuario salto directamente a las páginas.
Permite a los usuarios desplazarse. Si utiliza un enfoque de "asistente", los usuarios tendrán dificultades para revisar o modificar las informaciones ya ingresadas.
Me gusta la opción 1, la mejor. Puede agrupar elementos lógicamente en divs o fieldsets, luego los usuarios pueden desplazarse hacia abajo en el formulario.
Con formularios de varias páginas siempre es molesto tener que hacer clic en siguiente y luego volver a escribir.
En primer lugar, un buen artículo es, como de costumbre, Nielsen.
Un buen análisis también se puede encontrar en this post.
mis propios pensamientos (muchos años de diseño de aplicación web, más los estudios de posgrado de diseño y facilidad de uso de nivel de interfaz de usuario en el pasado como base):
1. pros y los contras
formularios HTML largos:
Difícil de navegar haciendo clic en la barra de desplazamiento (muy estrecho) pero bastante fácil de navegar usando la rueda de desplazamiento del mouse.
múltiples páginas con enlaces "siguiente"
peor de ambos mundos. Es difícil hacer clic ("siguiente" es un objetivo pequeño), no hay acceso aleatorio a ninguna parte del formulario (si tiene sentido). Esta opción SÓLO es útil cuando DEBE completar las partes del formulario en un orden específico y volver no es una opción.
interfaz Tab
Ésta es una buena opción, pero con inconvenientes. El único inconveniente es no ver toda la información del formulario a la vez (y debe recordar qué pregunta estaba en qué pestaña si desea navegar hacia adelante y hacia atrás).
2. Conclusión
así que es un cara o cruz entre # 1 y # 3, dependiendo de lo que sus usuarios a encontrar más fácil (desplazarse de página vertical larga vs. clic en las pestañas).
3. Toma nota de
Tenga en cuenta que las GUI de Windows utiliza casi universalmente formas con pestañas, lo que muy probablemente la investigación demostró que es mejor usabilidad sabia, pensó que no tengo ninguna referencia a la CIE el momento.
Tenga en cuenta que tener "oportunidad de hacer validaciones/comprobaciones/guardar/etc ..." a través de llamadas AJAX no tiene NADA que ver con las opciones anteriores: puede iniciar una llamada AJAX una vez que el elemento que elija una forma pierde/gana foco.
El único beneficio de la interfaz con pestañas para eso es que es señal impulsada por el usuario "He terminado con este conjunto de elementos de formulario", lo cual puede hacerse inteligentemente a través de JS sin tener las pestañas y sin que el usuario lo ha hecho explícitamente (e .. se centra en el siguiente elemento).
También puede desactivar los elementos de formulario "todavía no está listo para usted" hasta que todos los elementos requeridos anteriormente estén 100% completos.
4. Lado señala
Por qué es exactamente lo que tiene una forma tan largo? Uno de los puntos principales de la investigación de usabilidad es que el llenado de cualquier formulario es largo, difícil y odioso para los usuarios. Entonces, a menos que DEBES obtener la información, no la solicites. Esto se aplica especialmente a los formularios de registro; vea Nielsen y otras referencias.
Personalmente, utilizo el enfoque de varias páginas, pero también podría adaptarse a pestañas. Estos son algunos de mis motivos:
Dicho esto, debe asegurarse de incluir un sentido de cuánto progreso ha realizado el usuario si el número de páginas es más de 2-3. Debería permitir navegar tanto hacia adelante como hacia atrás a través del formulario. Definitivamente es más trabajo para ti pero, creo, una mejor experiencia de usuario para la mayoría.
Si decide ir con un formulario con pestañas. Usaría AJAX y haría la validación en la navegación de pestañas. De esta manera está validando una pestaña a la vez y puede mostrar más fácilmente los errores de validación. Puede aplicar el orden de las pestañas habilitando solo pestañas, ya que las pestañas anteriores se han completado, si es necesario. Creo que su interfaz con pestañas debería degradarse a la variedad de varias páginas si JavaScript no está disponible.
Para una forma larga utilizada para hacer la entrada de datos durante todo el día, los usuarios se familiarizan rápidamente con el diseño. Aquellos que son competentes en el teclado no les gusta navegar entre los controles con un mouse. Si configura el orden de las pestañas y utiliza un formulario de desplazamiento vertical largo, eso puede complacer a las personas que ingresan datos. Podrán completar los campos de datos mucho más rápido que si tienen que usar el mouse para hacer clic entre las pestañas o los botones Siguiente.
Lo mejor de ambos mundos: Un híbrido interesante que utilicé permitió al usuario elegir el estilo de visualización. Las personas que ingresan datos pueden ver la versión larga y verticalmente desplazable. Otros usuarios que solo estaban viendo los datos (y posiblemente editando los campos seleccionados) podían ver una versión con pestañas que evitaba el desplazamiento vertical. Usamos personalización para establecer la preferencia del usuario para la vista predeterminada.
Prefiero (1) la simplicidad de desplazar html con secciones claramente definidas.
Muchos sitios web comerciales prefieren el enfoque simplificado de (2), con tal vez un poco de (3) para permitir a los clientes revisar sus opciones. (2) mantiene todo en pantalla, se asegura de que el usuario esté leyendo lo que quiere que lea.
Tenemos formularios similares en nuestra empresa, y terminamos con las combinaciones de 2 y 3, es decir, mostrar la pestaña en la parte superior de la pantalla, también incluye un botón Siguiente para ir a la siguiente pestaña. Estos son algunos motivos/consideraciones, 1, utilice ajax para cargar cada pestaña, para hacer que el formulario sea más pequeño en el lado del cliente, generalmente el usuario solo ve/edita una o dos pestañas cada vez. 2, podemos mostrar diferentes pestañas cuando se carga el formulario, con base en el escenario diferente. 3, similar a 1, podemos mostrar/ocultar algunas pestañas en base al privilegio del usuario. 4, algunos campos están relacionados, por lo que cuando se actualiza la pestaña anterior, cambiamos algunas configuraciones en la otra pestaña en consecuencia. 5 y, a veces, el formulario es demasiado largo para trabajar si no se separa en pestañas.
con vistas parciales, básicamente estoy construyendo tanto # 1 como # 3 y voy a recibir comentarios de mis usuarios. Mi sensación inicial es que # 3 va a ser más escalable a medida que agrego más y más datos.
escribí un plugin para este propósito específico - principalmente para su uso en los ámbitos de salud y legales - pero funciona para cualquier forma larga html requisito:
No me gustan las formas muy largas en una página. Encuentro difícil de navegar porque es difícil encontrar un campo entre muchos cuando intentas verificar tus entradas. Otra cosa que no me gusta de ellos es que, en algunos casos, puede llevar un tiempo terminar el formulario y ¿qué haces si te interrumpen? Otra posibilidad es que si la sesión se cae, o el navegador se bloquea o la red se cae o hay guerra nuclear, etc.
Me gusta mucho más las pestañas para cada sección con próximos & botones anterior. Otra cosa que agrego es que cuando el usuario navega de una sección a la siguiente, guarda los datos. La otra opción es incluir una característica de guardado automático.
Las formas más cortas son mejores, pero a veces solo se necesitan los datos y no se les da ninguna alternativa.
También podría tener una interfaz de pestañas sin Ajax, simplemente mostrando y ocultando divs. Carga de página inicial más simple, pero obviamente más larga. –