Posición de la etiqueta del formulario para una mejor usabilidad

16

Estoy creando una forma que le pedirá a un visitante por su firstname, middle initialy lastname. Quiero que esos campos de texto estén todos en línea, pero ¿dónde debo colocar las etiquetas? A la izquierda, arriba o debajo de los campos.

Estoy buscando el mejor enfoque desde el punto de vista de la usabilidad.

html usability user-input forms Shane Stillwell
fuente
¿No es esto más apropiado para uxexchange.com? ( uxexchange.com )
Bobby Jack
Wow, no sabía que existía uxechange.com, gracias. A juzgar por el número de votos positivos sobre esta pregunta, definitivamente está en la mente de los Webmasters Pro.
Shane Stillwell
Sí, es un poco un "problema". Creo que uxexchange se configuró utilizando el modelo 'antiguo SO'. Los sitios que usan el nuevo modelo, como los webmasters, parecen estar recibiendo mucha más atención. Entonces, algo que es más relevante para uxexchange termina teniendo más éxito en los webmasters. No estoy seguro de cuál es la solución: ¿migrar uxexchange?
Bobby Jack

Respuestas:

10

Echa un vistazo a este estudio de UXmatters . Es bastante profundo, incluye datos sobre seguimiento ocular y concluye que las etiquetas en la parte superior son en general la mejor solución.

Hay un artículo similar de Luke Wroblewski , también bastante detallado. ¡Vale la pena leer ambos artículos!

Grant Palin
fuente
+1 Iba a publicar esos mismos recursos exactos. Realmente, cualquier respuesta a esta pregunta debe incluir estudios.
Virtuosi Media
Esto es lo que estaba buscando, algunas comparaciones de izquierda contra arriba. Estoy seguro de que mucho de esto es subjetivo, pero no obstante, debería haber algunos diseños que sean un poco mejores en igualdad de condiciones. Gracias.
Shane Stillwell
Lo que también es interesante sobre el artículo de UXmatters fue que encontraron que las etiquetas en negrita distraían a los visitantes y ... "Las etiquetas en negrita eran más difíciles de leer y percibir para los usuarios, probablemente porque había más confusión visual entre el texto en negrita y los bordes adyacentes pesados de los campos de entrada ". Bueno saber.
Shane Stillwell
no para ser una nelly negativa, pero uxmatters.com no tiene una sección de "artículos principales" ni utiliza las herramientas de Google para webmasters para que pueda encontrar sus artículos más leídos, ¡lo cual no es muy experiencia del usuario!
Neil McGuigan
5

Lo más importante es ser coherente con el resto de su sitio. En general, la mayoría de los sitios web hacen las etiquetas a la izquierda de los campos de texto. En esta causa, sería una descripción larga, así que asegúrese de tener espacio y que fluya bien.

Si a la izquierda no se ve bien o no hay espacio para hacerlo, entonces lo haría arriba. Como eso está muy claro.

El único método que evitaría es colocar las etiquetas debajo de los campos de texto. cuando las etiquetas están debajo de los campos es más confuso.

Ben Hoffman
fuente
3
En cualquier caso, no olvides el foratributo.
Pierre-Alain Vigeant
4

Normalmente, para su situación, en la parte superior o a la izquierda es mejor. Solo asegúrese de que la etiqueta aparezca antes del campo de entrada para accesibilidad.

Todavía hay muchas formas diferentes de diseñar una página y ser accesible.

Las etiquetas de formulario realmente pueden aparecer casi en cualquier lugar que desee, siempre que lo haga desde entonces. Vale la pena echar un vistazo a este recurso, http://patterntap.com/tap/collection/forms

Kevin
fuente
3

Hay dos opciones que se consideran mejores:

  • etiquetas a la izquierda del campo, enjuagadas a la derecha para que estén cerca de la entrada.
  • etiquetas sobre el campo en sí

Otra cosa importante a tener en cuenta para la usabilidad es asegurarse de que está utilizando el atributo for de la etiqueta, de modo que al hacer clic en la etiqueta se centra en el campo que etiqueta.

GSto
fuente
1

Respuesta: ninguna de las anteriores. Use texto de marcador de posición dentro del campo mismo. El atributo de marcador de posición es una parte integrada de HTML-5.

De lo contrario, diría que lo coloque sobre los campos, alineados a la izquierda.

Adam L Davis
fuente
0

Esto es un poco tangente, pero no utilice nombre / apellido / inicial. No todos los nombres pertenecen a esa ordenada agrupación.

Citando a mí mismo en StackOverflow:

Muchas culturas asiáticas ponen el nombre de la familia primero, porque la familia se considera más importante que el individuo.

Al señalar que hay un buen número de personas que usan un nombre que no es el que le otorgan sus padres, he utilizado el siguiente esquema con cierto éxito:

Nombre completo (como se escribe normalmente para direccionar correo); Apellido; Conocido como (el nombre comúnmente usado en la conversación).

P.ej:

Nombre completo: William Gates III; Apellido: Gates; Conocido como: Bill

Nombre completo: Soong Li; Apellido: Soong; Conocido como: Lisa

Consulte /programming/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 para obtener más información.

Bevan
fuente
Veo el valor en su recomendación, pero la pregunta clave será "¿quién es su público objetivo?" Si el 99% de mi audiencia sean estadounidenses, entonces elegiría Nombre / Apellido / Apellido. Creo que muchos estadounidenses no entenderían de inmediato cómo sería un apellido. Como dijo @RandomBen, debe ser coherente y la mayoría de los sitios de EE. UU. Usan Nombre / Apellido / Apellido.
Shane Stillwell