Contenido del Articulo
Definición
Encabezados pegajosos (o persistente titulares) son un patrón común para mantener el título de un sitio web o aplicación en el mismo lugar en la pantalla mientras el usuario se desplaza hacia abajo en la página. Una variación de este patrón es encabezado parcialmente pegajosoque (re) aparece en la parte superior de la página tan pronto como el usuario comienza a desplazarse hacia arriba.
Si se hacen correctamente, los encabezados adhesivos permiten a los usuarios acceder rápidamente a la navegación, la búsqueda y la navegación del servicio sin tener que desplazarse hasta la parte superior de la página. Aumentan la capacidad de descubrimiento de elementos en el encabezado y la probabilidad de que los usuarios los utilicen.
Sin embargo, cuando se implementan de manera deficiente, los encabezados pegajosos son molestos, distraen e interfieren con el contenido de la página.
A continuación, presentamos 5 consejos que le ayudarán a asegurarse de que el diseño de titulares fijos ayude, no obstaculice, a sus usuarios.
1. Aumente la proporción de contenido a contenido de Chrome manteniéndolo pequeño
Los encabezados fijos ocupan de forma inherente espacio en la pantalla que se puede usar para contenido, por lo que es importante que use ese espacio de manera responsable. Este factor es aún más importante para los dispositivos móviles, dado el pequeño tamaño de la pantalla. Desea que la proporción de contenido a cromo sea lo más alta posible, de modo que su título adhesivo ocupe la menor cantidad de espacio que aún brinde texto legible de manera adecuada y tamaños de destino personalizables.
En los dispositivos con pantalla táctil, asegúrese de que todos los puntos táctiles sean de al menos 1 cm x 1 cm, todo el texto tenga aproximadamente 16 puntos (dependiendo de la altura a lo largo del eje x y la legibilidad general de las letras en el tipo de letra, el mínimo correspondiente puede ser ligeramente más pequeño o más grande) y luego minimizar cualquier altura vertical adicional más allá de estas dimensiones (manteniendo las consideraciones estéticas apropiadas, por supuesto).
En el escritorio, si bien hay mucho más espacio para trabajar, todavía no se recomienda disfrutar de píxeles en blanco excesivos para el encabezado, solo para hacer que el logotipo sea lo más grande posible. Nuevamente, comience con tamaños de texto legibles para los elementos de encabezado y minimice la altura vertical desde allí.
Derecha: la proporción de contenido a cromo de Lollar Pickups es un miserable 2: 1 en el mismo dispositivo, con un encabezado de logotipo semitransparente de gran tamaño que no proporciona suficiente contraste con el contenido (por eso lo consideramos cromo) y una pestaña duplicada innecesaria. una tira en la parte inferior de la página, que también es pegajosa.
2. El contraste con el contenido es importante
Para elegir el color de fondo correcto para un título fijo, considere si es suficiente para distinguir visualmente entre el título y el contenido. en todas partes de la página. Dado que el título aparecerá en la parte superior de cada punto de la página, es importante que tenga suficiente contraste visual con el fondo para que sea visible, legible y claramente distinguible del contenido sobre el que se desplaza. Cualquier submenú expandido o lista desplegable también debe estar claramente separado del fondo.
Como resultado, el encabezado adhesivo debe ser de un color opaco, diferente del fondo de las áreas de contenido principal. A pesar de que los encabezados adhesivos translúcidos están destinados a crear más Debido a que el contenido de la página es (parcialmente) visible, la baja relación de contraste resultante de estos títulos hace que el contenido indivisible sea difícil de leer y, a menudo, molesta y distrae a los usuarios.
3. Mantenga el movimiento mínimo, natural y receptivo.
La animación a menudo se interpone en el camino, distrae y molesta a los usuarios, así que trate de usarla lo menos posible para títulos pegajosos. En general, es mejor no usar animación en absoluto y mantener el título en su lugar mientras el usuario se desplaza. Hay dos casos en los que puede ser necesaria la animación: reducir un área grande del encabezado o encabezados parcialmente permanentes (más sobre este tema en el consejo n. ° 4 a continuación).
Si bien generalmente no se recomienda un área de encabezado muy grande, a veces por razones que no son de UX (y a menudo enraizadas en la política de la organización) se requiere un logotipo grande en la parte superior de la página; el logotipo se encoge a medida que el usuario se desplaza, como en el ejemplo de Michigan.gov a continuación. Esta animación debe ser rápida, fluida e instantánea: el título debe encogerse a una velocidad de desplazamiento aproximadamente normal y no debe desvanecerse, saltar o intimidar al usuario.
Los títulos adjuntos también deben permanecer en una ubicación fija en la parte superior o lateral de la ventana del navegador, en lugar de moverse a la posición deseada después de un retraso (un patrón conocido como “menú del acosador”).
4. Considere titulares parcialmente persistentes.
Parcialmente Los títulos permanentes se encuentran con mayor frecuencia en sitios móviles y, en algunos casos, ofrecen lo mejor de ambos mundos: un título al que se puede acceder fácilmente desde cualquier lugar de la página, pero que permanece discreto a medida que lee y se desplaza hacia abajo.
Este estilo funciona razonablemente bien. Los encabezados parcialmente persistentes sugieren que alguna desplazarse hacia arriba indica que el usuario desea acceder al título. En muchas situaciones esto será cierto, pero en otras no; por ejemplo, es posible que el usuario simplemente desee volver a leer el párrafo anterior. En tales casos, la animación asociada con un título parcialmente persistente puede distraer al usuario.
Por lo tanto, dichas animaciones deben ser discretas y no aparecer ni demasiado rápidas ni demasiado lentas. Nosotros recomendamos Sentir como si el usuario lo desplazara manualmente, pero en realidad se activa cuando el usuario se desplaza hacia arriba unos pocos píxeles (es decir, si el usuario deja de desplazarse hacia arriba, el título debería seguir animándose completamente a la vista). Una animación enchufable con una duración de aproximadamente 300-400ms conservará esta sensación natural sin distraer la atención.
5. Considere si necesita un título pegajoso
El último aspecto a considerar es si realmente necesita un encabezado fijo. En última instancia, al usar un encabezado fijo, está regalando algo de espacio en la pantalla en cada página de su sitio. Y, si un encabezado fijo es inútil para sus usuarios, cualquier otra optimización que realice en su diseño es discutible. Realice un análisis de costo-beneficio de sus titulares fijos respondiendo las siguientes preguntas:
- ¿Qué tipo de elementos contendrá tu título? Navegación básica? Utilidad de navegación? ¿Logo?
- ¿Es probable que estos elementos se necesiten con frecuencia o en cualquier momento durante una sesión?
Por ejemplo, si el botón de inicio de sesión está en su encabezado, ¿es probable que sus usuarios inicien sesión en cualquier página de su sitio? Si sus principales categorías de navegación están en el encabezado, ¿los usuarios saltarán de una categoría a otra en una sesión, o es más probable que permanezcan en la misma categoría todo el tiempo?
Las respuestas a estas preguntas dependerán del tipo de sitio, así como de los objetivos y contenido que apoya.
Resumen
Los títulos adhesivos pueden ser una adición positiva a su sitio, pero solo si realmente tienen un propósito para sus usuarios. Si un título pegajoso realmente tiene valor para sus usuarios, asegúrese de que sea lo más pequeño posible, tenga un alto contraste con el fondo, no use animaciones innecesarias, oscurezca el contenido o distraiga a sus usuarios.
…
