¿Son las etiquetas flotantes realmente tan problemáticas después de todo?

Esta es una respuesta a la pieza de Adam Silver del 25 de mayo de 2017 titulada Las etiquetas flotantes son problemáticas.

Como el tipo que hizo el diseño original en el que se basó la mayoría de la moda de Float Label, me siento algo obligado a compartir mi perspectiva sobre el asunto.

El diseño original de la etiqueta flotante que publiqué en Dribbble en 2013

Necesito prefacio diciendo que nunca conocí a Adam, pero he leído algunos de sus otros artículos y realmente aprecio y admiro su consideración de los pequeños detalles en sus artículos.

Adam hace muchos puntos importantes en su artículo y, en ciertos contextos, estaría de acuerdo.

Sin embargo, creo que es importante mencionar algunas declaraciones absolutas sutiles en el artículo y señalar su relatividad basada en el diseño en general, en lugar del patrón individual de una etiqueta flotante.

También quiero cubrir todo esto diciendo que no creo que las etiquetas flotantes se deban usar para cada forma que se haya hecho. Si no cree que agreguen valor a su formulario, no los use. ¿De acuerdo?

Si ha probado de una forma u otra, use el método de mayor rendimiento. ¿Quién no quiere tasas de conversión más altas?

Pero solo recuerde, un formulario solo no aumentará las tasas de conversión por las nubes. Debe crear suficiente valor y resolver un problema lo suficientemente grande con su contenido para que un usuario esté realmente motivado a usar su formulario en primer lugar.

Yo mismo no he realizado pruebas oficiales de división de etiqueta flotante y no puedo recomendar con confianza el patrón sobre una etiqueta estándar, basado solo en una investigación pura.

Pero puedo decir que recientemente utilicé etiquetas flotantes en mi formulario de introducción al diseño de iconos y vi una tasa de conversión de más del 30%. Según mi rápida investigación, eso es 10 veces más alto que el formulario de suscripción promedio que genera solo un 3% de conversiones.

Del curso de video gratuito Introducción a los iconos

¿Las tasas de conversión hubieran sido más altas si no hubiera usado etiquetas flotantes? Mi instinto dice "no", pero no tengo datos que lo respalden.

Con todo eso fuera del camino, profundicemos en mi comentario. Los siguientes titulares numerados y citas a continuación se toman directamente del artículo.

1. No hay espacio para una pista

El artículo dice:

Las etiquetas flotantes comienzan dentro del cuadro de texto sin dejar espacio para una pista adicional.
Imagen tomada del artículo de referencia.

De acuerdo, si tiene la intención de poner una pista o una nota sobre el campo de entrada y directamente debajo de la etiqueta, entonces sí, una etiqueta flotante dificultará su capacidad para hacerlo.

Sin embargo, si realmente desea una nota o una pista, puede moverla debajo del campo de entrada y simplemente empujar el otro campo un poco hacia abajo.

Debatir sobre la colocación de pistas es inútil, a menos que tenga una imagen extremadamente clara del problema exacto que intenta resolver con un formulario en primer lugar.

En algunos casos, las sugerencias o etiquetas son increíblemente útiles y en otros casos son una venda en una forma mal diseñada. Simplemente no puede ser un estándar absoluto fuera de contexto.

2. Son difíciles de leer.

El artículo dice:

Las etiquetas flotantes suelen tener texto pequeño, por lo que a medida que flota, ocupa una pequeña cantidad de espacio. Pero el texto pequeño es difícil de leer.
Imagen tomada del artículo de referencia.

Eso realmente depende del tamaño del texto. Y "difícil de leer" es una variable, no una constante, basada en la vista del usuario.

Además, el tamaño del texto es relativo a un diseño en general, no a las etiquetas flotantes. Es bastante posible que las etiquetas flotantes sean del mismo tamaño que una etiqueta estándar.

Si el texto se muestra en un tamaño estándar de 16–18 px, generalmente es aceptable como legible. Quizás más que decir un tamaño de 12-14 px.

Así que aceptemos por un momento que 18px es de hecho más fácil de leer que 12px ...

¿Es demasiado insondable suponer que un 16–18px de fácil lectura, escalado contextualmente a 12–14px después de que un usuario comienza a escribir, sería repentinamente demasiado pequeño para leerlo?

No niego que 12px puede ser más difícil de leer que 18px, pero veo una etiqueta flotante como un artefacto del pasado, en lugar de una pista sobre el futuro.

Es una indicación sobrante en lugar de una instrucción de qué hacer.

3. Necesitan espacio para mudarse

El artículo dice:

Las etiquetas flotantes necesitan espacio para moverse. Si el texto de la etiqueta es amigable (ver punto anterior), no habría espacio guardado de todos modos, solo más espacio en blanco.
Imagen tomada del artículo de referencia.

Esto es cierto, absolutamente.

Las etiquetas flotantes necesitan espacio para moverse y este es uno de los problemas más difíciles de identificar.

Chris Coyier incluso escribió sus pensamientos sobre este tema en particular y concluyó que las etiquetas flotantes no guardan ninguna altura vertical.

PERO…

Si está de acuerdo con que la etiqueta flotante es un artefacto, en lugar de una instrucción, también puede estar de acuerdo en que está bien ir un poco más pequeño en tamaño de texto que una etiqueta estándar.

Y con un tamaño de texto más pequeño, digamos 12px en lugar de 16px, efectivamente ahorraría 4 o más píxeles de espacio. Posiblemente incluso 8px ya que no necesitaría agregar un margen adicional debajo de la etiqueta en el sentido tradicional.

Aquí realmente nos estamos metiendo en la maleza, en cuanto a píxeles, pero un gran diseñador de interfaces será muy consciente de una discrepancia de 4px y los efectos que puede tener en todo el diseño si se usa de manera adecuada o inadecuada.

Entonces, si guarda 8 px en 5 campos de entrada en un formulario, ha guardado un total de 40 px. Es aproximadamente la misma altura de un botón en la pantalla del móvil.

¿Sería útil para su proyecto? No lo sé. Usted, como diseñador, tendrá que decidir eso para cada caso de uso que encuentre.

Déjame darte un ejemplo del mundo real de una forma compleja gigante en la que trabajé hace unos años.

El proyecto involucró una cantidad increíble de datos para el envío comercial y la logística de transporte. Realmente estábamos tratando de hacer lo complejo, simple.

Los siguientes formularios son capturas de pantalla de diseños de "trabajo en progreso" que saqué del archivo.

El formulario de la izquierda utiliza una combinación de etiquetas alineadas en la parte superior y etiquetas alineadas a la izquierda. Estábamos experimentando, tratando de encontrar la solución perfecta.

Luego, diseñé el formulario de la derecha como una alternativa a la gran cantidad de locura que ocurre en el formulario. Todos estuvimos de acuerdo en que se sentía más limpio, menos abrumador y mejor en general.

Imagen tomada del proyecto Shiplify en el que trabajé en 2014

Puede ver que a pesar de que solo la mitad de los campos estaban alineados en la parte superior, aún así se ahorraron más de 420 px de altura vertical.

Incluso tuvimos algunas pruebas improvisadas en las que le preguntamos a la gente, “¿cuál de estas formas parece menos abrumadora?” Y estuvieron de acuerdo en que la forma de la derecha parecía mejor.

Sé que esta no es una prueba 100% válida y estadísticamente concluyente, pero aun así, es un comienzo.

Me ENCANTARÍA probar algo como esto un día, pero hasta entonces es una intuición, no un hecho.

Hay tantas variables como el tipo de contenido, el conocimiento del usuario preexistente y más que hacen que cualquier prueba de formulario simple simplemente no sea 100% aplicable para todos los formularios futuros.

4. La animación es problemática.

El artículo dice:

La animación, incluso si se realiza bien, podría ser una distracción y una desorientación, especialmente para los usuarios con poca confianza o deficientes visuales. Y, al acercar, la etiqueta puede desaparecer de la pantalla.

Espera un segundo. Si una animación se realiza bien, entonces es, por definición, "bueno", "bueno", "satisfactorio", "que desear", etc.

Por lo tanto, la frase "distraer y desorientar" no puede coexistir con "hecho bien".

Animación de formularios de los estudios de casos gratuitos de learnaiux.com

Sé que tengo un sesgo increíble, pero cuando completo un formulario que realmente clava la animación de la etiqueta de flotación, obtengo una pequeña dosis de dopamina cuando la resolución se resuelve y avanzo al siguiente campo. Una pequeña sensación de finalización que antes no existía.

Me recuerda a un juego en el que algo sucede visualmente a raíz del camino de tu personaje. Como una huella

Sin embargo, siento que no puedo prefacio esto suficiente. Si las etiquetas flotantes no tienen sentido para su proyecto y agregan demasiada complejidad innecesaria, entonces, por supuesto, no lo use.

Todavía usaré felizmente su formulario si el otro extremo de su formulario resuelve mi problema.

5. Tienen poco contraste

El artículo dice:

Al igual que el texto de marcador de posición, las etiquetas flotantes tienen bajo contraste para diferenciarlo, pero el texto de bajo contraste es difícil de leer.
Dependiendo del diseño, cuando la etiqueta flota fuera del campo, su color deberá cambiar. De lo contrario, el texto se perderá con el color de fondo.
Imagen tomada del artículo de referencia.

El bajo contraste no tiene nada que ver con una etiqueta flotante y tiene mucho que ver con el tamaño y el color.

El mínimo WCAG 2.0 (Pautas de accesibilidad al contenido web) establece que se necesita una relación de contraste de color de 4.5: 1 para aprobar las pautas AA para el tamaño de texto normal por debajo de 18 ~ px.

El código hexadecimal de color gris más claro que produce una relación de contraste AA aceptable es # 767676 o # 757777 en el fondo #ffffff (blanco). Esto es si está utilizando un peso de fuente normal por debajo de 18px. Si está utilizando un peso de fuente en negrita con un tamaño de 14px, puede diferir a la gran relación de contraste que proporciona el WCAG, que es 3.5: 1 y termina siendo # 898989 en #ffffff. Nota al margen: este es mi verificador de contraste favorito.

Nota al margen: he diseñado proyectos para bancos que requieren una calificación mínima de contraste AA para su producto digital. No me he encontrado personalmente con un cliente que requiera más de AA, pero establecimos AAA como objetivo (y lo alcanzamos) cuando diseñamos el Sistema de Diseño de Unidad de Exxon.

Ok, me he alejado mucho del tema, pero mi punto es que este es un problema de color y diseño, no un problema de etiqueta flotante.

6. Pueden confundirse con un valor

El artículo dice:

La gente puede saltear el campo pensando que ya está completo. Cuando lo envíen, verán un error que debe corregirse. Esto es frustrante y requiere mucho tiempo.

Este es un punto muy válido y también por qué el color y la jerarquía son de suma importancia al diseñar interfaces.

Las etiquetas más oscuras sobre los campos de entrada vacíos son bastante difíciles de confundir con algo que ya está en el campo.

Si establece un precedente para el usuario al activar las etiquetas flotantes en la entrada del usuario Y el color del texto de entrada del usuario es mucho más oscuro que el color del marcador de posición, digamos # 767676 versus # 222222, entonces la posibilidad de confusión podría ser mucho menor.

No puedo decir de hecho que esto no será un problema. No creo que lo sea en muchos casos, pero hacer esa suposición sin datos duros sería ignorante por mi parte.

Diseñe marcadores de posición y etiquetas sabiamente. Si utiliza el contraste adecuado entre el color del marcador de posición y el color de entrada del usuario, esto debería resolver cualquier problema que pueda encontrar.

7. Están ubicados de manera inconsistente

El artículo dice:

Los botones de radio, las casillas de verificación y las casillas de selección tienen etiquetas y leyendas estáticas. Donde los cuadros de texto tienen etiquetas flotantes. Esto crea una experiencia inconsistente.
Al mirar un cuadro de texto, por ejemplo, el usuario debe mirar dentro del control. Para un cuadro de selección tienen que mirar fuera de él.
Imagen tomada del artículo de referencia.

Este es un problema de diseño, no un problema de etiqueta flotante. Shopify hace un trabajo increíble con la etiqueta flotante en sus campos de entrada y cuadros de selección.

8. La etiqueta se puede recortar

El artículo dice:

Si la etiqueta flotante es más larga que el tamaño del campo, el campo la cortará. Debemos diseñar para el contenido, no debemos hacer que el contenido se ajuste al diseño.
Imagen tomada del artículo de referencia.

Este no es un problema de etiqueta flotante per se, es un problema de diseño de formularios incorrectos.

Nadie debería tener una etiqueta de marcador de posición tanto tiempo.

Y si realmente necesita hacer una pregunta de dos líneas como etiqueta de entrada, entonces recomiendo al 100% NO usar una etiqueta flotante.

Simplemente no tiene sentido para ese caso de uso.

9. Ignoran las normas.

El artículo dice:

Sabemos que los marcadores de posición son problemáticos de todos modos. Sin embargo, si vamos a poner texto dentro de un cuadro de texto, debería ser una pista, no una etiqueta.

Este es el estándar al que hace referencia el artículo. Se lee:

El atributo de marcador de posición representa una pista breve (una palabra o frase corta) destinada a ayudar al usuario con la entrada de datos. Una sugerencia podría ser un valor de muestra o una breve descripción del formato esperado.

Hmmm, "¡Una palabra o una frase corta destinada a ayudar al usuario" suena como si pudiera describir una etiqueta!

Ahora los documentos estándar también dicen:

El atributo de marcador de posición no debe usarse como una alternativa a una etiqueta.

Soy plenamente consciente de que hay circunstancias que requieren una etiqueta externa y datos de marcador de posición adicionales para ayudar realmente a ciertos tipos de entrada de campo. A veces es necesario sacar todas las paradas al diseñar formularios para realmente cubrir todas las bases.

Estoy 100% de acuerdo en que ninguna etiqueta y solo datos de marcador de posición es una mala idea. ¡Por eso existe la etiqueta flotante!

La etiqueta flotante se creó DESPUÉS de que se escribió este estándar. ¿No vale la pena desafiar los supuestos originales en documentos antiguos después de que surjan nuevas ideas? Especialmente los que están siendo adoptados tan rápido.

¿Es razonable sentir curiosidad por esto en lugar de ser desdeñoso?

Debe haber alguna razón válida por la que Google adoptó este patrón como estándar en las Directrices de diseño de materiales.

Además de Google, las siguientes compañías han adoptado patrones de etiquetas flotantes en sus aplicaciones.

  1. Shopify
  2. Flojo
  3. Océano digital
  4. Delta
  5. Invision
  6. Mucho más que no puedo recordar ...

Resumen

El artículo dice:

Los formularios no son una fuente de entretenimiento. La etiqueta flotante no hará que los usuarios disfruten usando formularios. A los usuarios no les importa. Solo quieren el resultado.

Estoy de acuerdo en que los usuarios quieren el resultado, pero no estoy de acuerdo con que los formularios no sean entretenidos. Es mucho más probable que un usuario entretenido recuerde su experiencia con su producto.

Sin embargo, agregaré una advertencia de que no debes poner el entretenimiento por encima de la funcionalidad y la claridad.

Existen técnicas mejores y más productivas para mejorar el diseño de formularios. Pasemos tiempo y energía en eso.

Definitivamente estoy de acuerdo con la primera oración y, a veces, mejorar el diseño del formulario es eliminar campos o repensar si un formulario es necesario.

¿Pero no deberíamos pasar tiempo en TODAS las facetas de la mejora del diseño de formularios?

Este artículo se publicó originalmente en mds.is, porque aparentemente ahora tiene que publicar en su propio blog AND Medium porque ¿quién quiere formatear solo una publicación de blog?

Para obtener más recursos sobre los orígenes del patrón de etiqueta flotante, consulte esta publicación.