Etiquetas en formularios móviles (2024)

Este artículo fue publicado originalmente enVinculado en.

Las etiquetas describen el propósito de los controles de formulario, incluidos los campos de texto, las casillas de verificación, los botones de radio y los menús desplegables, entre otros. En las aplicaciones móviles, el espacio en pantalla es limitado. Esto obliga a los desarrolladores de aplicaciones a ahorrar espacio colocando etiquetas en diferentes posiciones en pantallas diminutas. Las etiquetas se pueden colocar de muchas maneras diferentes. Cubro cinco enfoques variados en este artículo.

Colocación de etiquetas: la forma correcta

1. Etiquetas en línea

Las etiquetas colocadas dentro del campo de formulario se denominan etiquetas en línea. Estos siguen siendo una moda para muchos programadores después de que Apple los introdujera en la mayoría de sus aplicaciones.

ventajas

• mirada simplista
• Eficiencia del espacio y mejor uso de los bienes raíces móviles

Contras

• Pérdida de contexto: cuando el usuario comienza a escribir o incluso al ingresar al campo, la etiqueta se pierde, lo que elimina el aspecto de memorabilidad del campo.

En la aplicación Dash Lane, los campos de texto tienen una etiqueta en línea. Tocar el campo de texto mantiene intacta la etiqueta en línea, hasta que el usuario comience a escribir en ella. Si el usuario elimina los datos existentes, vuelve a aparecer la etiqueta en línea para recordarle al usuario el contexto del campo, por si acaso, el usuario olvidó lo que significa el campo.

Las etiquetas en línea se adaptan mejor a los formularios con menos campos. Por ejemplo, en los formularios de inicio de sesión, es difícil olvidar qué campo es para qué tipo de entrada (nombre de usuario, contraseña), en su mayor parte, ya que hay menos campos con un objetivo directo.

La etiqueta en línea podría ser una gran característica si se usa de la manera correcta. Un buen enfoque es usarlo como texto de apoyo o descripciones breves que brinden pistas a los usuarios.

Luke Wroblewski, escribe pautas simples para las etiquetas de entrada en su libro Mobile First.

Una etiqueta dentro de un campo de entrada:

• Nunca debe convertirse en parte de la respuesta de alguien. Esto parece bastante simple, pero aún sucede con bastante frecuencia cuando las cosas no se han cargado o no están codificadas correctamente. ¿Alguna vez intentó buscar solo para encontrar que la palabra "buscar" se ha convertido en parte de su consulta?
• No debe confundirse con una respuesta real en un campo de entrada. Si las etiquetas y las entradas se parecen demasiado, las personas podrían (correctamente) asumir que ya se les proporcionó una respuesta. He visto que esto sucede con demasiada frecuencia en las pruebas de usabilidad.
• Por lo general, está ausente cuando alguien comienza a responder una pregunta y cuando termina de responder un conjunto de preguntas. Esto puede hacer que sea más difícil saber qué pregunta se está respondiendo o volver atrás y verificar las respuestas después de que las etiquetas hayan desaparecido.

2. Etiquetas flotantes

La pauta de Material Design nos presentó las etiquetas flotantes, es decir, la etiqueta aparece como una etiqueta en línea en la pantalla (campo Descripción). Tan pronto como el usuario comienza a escribir en el campo, la etiqueta flota lentamente hacia arriba y se coloca en la parte superior del campo (campo Título).

Una desventaja de este enfoque es que, a menos que las funciones estén codificadas para la accesibilidad, los usuarios con discapacidades visuales pueden tener dificultades para comprender este comportamiento.

3. Etiquetas alineadas en la parte superior

Las etiquetas se alinean sobre los campos de entrada, de ahí el nombre Alineado superior. Olvidé la aplicación móvil de donde elegí esta captura de pantalla. Eso nos lleva a otro problema. ¿No debería tener cada pantalla el logotipo de la aplicación, por si acaso, los pacientes con amnesia como yo podrían recordar en qué aplicación estamos? Bueno, solo puedo decir que el mundo es duro allá afuera.

ventajas

• Tiempo de finalización más rápido de los usuarios segúnLos hallazgos de Matteo Penzo
• Funciona bien para etiquetas largas.
• Las etiquetas que requieren localización pueden tener una buena flexibilidad

Contras

• Ocupan una gran cantidad de bienes raíces verticales, lo que lleva a un desplazamiento/deslizamiento vertical perenne para formularios móviles largos.

4. Etiquetas alineadas a la derecha

Las etiquetas están alineadas a la derecha mientras que los campos de entrada las siguen en alineación a la izquierda.

ventajas

• Tiempos de finalización ligeramente más lentos en comparación con las etiquetas alineadas en la parte superior
• Menos espacio vertical

Contras

• Cuando las etiquetas cambian, esta alineación genera problemas de flexibilidad en el diseño.

5. Etiquetas alineadas a la izquierda

Las etiquetas están alineadas a la izquierda, mientras que los campos de entrada las siguen alineados a la izquierda.

ventajas

• Ideal para formularios en los que los usuarios necesitan reducir la velocidad y escanear los campos. Por ejemplo, formularios bancarios

Contras

• El tiempo de finalización más lento en comparación con las etiquetas alineadas en la parte superior y alineadas a la derecha
• Difícil de analizar campos en formularios largos

Luke Wroblewski, ha hablado sobre etiquetas alineadas arriba, derecha e izquierda de una manera elegante,aquíeso es casi imposible para mí de vencer.

Como notó en la aplicación móvil Polar anterior, las etiquetas en línea se pueden usar como texto de marcador de posición dentro de los campos de entrada para complementar las etiquetas con información adicional. Tenga en cuenta que Polar se ha asegurado de que la marca esté intacta en las pantallas de inicio de sesión con su título "Únete a Polar". Hay pocas posibilidades de que un usuario olvide qué aplicación es esta. Por cierto, la aplicación Polar fue diseñada por Luke Wroblewski, que fue adquirida por Google hace un tiempo.

Las etiquetas parecen ser los elementos menos importantes en las pantallas de los móviles, pero juegan un papel importante en la forma en que estas pantallas se muestran a los usuarios. Necesitamos prestar atención no solo a su comportamiento, sino también a su ubicación.

¿Cómo manejan las etiquetas en sus aplicaciones?