Barras de desplazamiento personalizadas frente a las nativas del navegador

8

Incluir barras de desplazamiento personalizables basadas en JavaScript (y la funcionalidad de desplazamiento en general, es decir, vincular el control a la rueda de desplazamiento del mouse) en su aplicación web puede ser una gran tentación.

Sin embargo, todas las soluciones que pude encontrar fueron desarrolladas por individuos (que pueden igualar la falta de apoyo formal o futuro). Además, no recuerdo ningún sitio convencional que los use.

En mi caso particular, los entornos sin JavaScript o IE6 / navegador extraño no están destinados a ser compatibles.

¿Deben evitarse las barras de desplazamiento personalizadas hoy en día? Si no, ¿cuál es la mejor opción que uno puede elegir?

web-development front-end

— vemv
fuente

Barras de desplazamiento para qué?

— CaffGeek

En primer lugar, olvide intentar soportar IE6 100%, no va a suceder. Además, el uso del mercado es muy mínimo.

— The Muffin Man

Chad: un menú vertical y una tabla / cuadrícula de datos. Nick - de hecho escribí que no lo estoy apoyando :)

— vemv

55

Ampliando la pregunta de Chad, creo que en general solo debe reemplazar los controles nativos del sistema operativo si es absolutamente necesario para proporcionar una funcionalidad adicional. (Un ejemplo sería una lista de selección completa). No puedo ver por qué necesitaría usar una barra de desplazamiento personalizada. ¿Qué está tratando de lograr?

— Mitch Lindgren

1

Sólo trato de mantener una apariencia consistente con los otros elementos de la aplicación, no se necesita ninguna funcionalidad extra ...

— vemv

16

Un argumento muy importante que siempre me convence cuando se trata de usabilidad es la consistencia. Es posible que desee que todos los identificadores de su sitio se vean igual, noble objetivo, pero piense en cómo alguien usa su aplicación o sitio. No solo están usando el tuyo, están usando cargas. De hecho, tengo 8 pestañas de 6 sitios web diferentes abiertos en este momento. Puedo cambiar a cualquier pestaña y aún tener la misma barra de desplazamiento, luciendo igual, sin importar dónde. Siempre sé dónde puedo desplazar mi contenido.

Entonces, si es posible, y si no molesta a ningún diseñador gráfico, quédese con lo que la gente sabe :) ¡A menos que tenga una idea nueva y brillante, que será una nueva revolución en el desplazamiento!

— Pelshoff
fuente

No estoy de acuerdo con @Pelshoff. Si bien aportó un buen razonamiento, pero basándose en el mismo razonamiento, los diseñadores deberían dejar de crear hermosos menús desplegables, casillas de verificación, botones, etc., porque a medida que los usuarios cambian las pestañas de su navegador, ven a qué están acostumbrados.

— Saeed Neamati

3

@Saeed: pero ese es exactamente el problema de equilibrio. ¿La belleza perjudica la usabilidad y, de ser así, cuál es más importante? A eso me refería con el último párrafo de mi respuesta. Debe sopesar las opciones por proyecto y, por supuesto, disparar a las estrellas si cree que puede diseñar un elemento de control mejor y / o más hermoso. Uno de los principales avances de UX en los sistemas operativos ha sido que 'todos' los programas tienen el mismo botón de cierre, la misma barra de menú, el mismo todo excepto por lo que realmente hace que los programas sean diferentes :)

— Pelshoff

@SaeedNeamati El diseño gráfico debe ser imperceptible. Si el usuario lo nota, entonces es demasiado.

— Tulains Córdova

5

Si agrega sus propias barras de desplazamiento personalizadas, los usuarios tendrán que esperar y procesarlas en sus mentes por un par de momentos, antes de poder usarlas. Esto no siempre es bueno: ya tiene contenido en su sitio para que los usuarios lo vean y comprendan, deje que todo lo demás salga como se esperaba.

Siempre trate de hacer que su sitio sea FÁCIL de navegar. La belleza no debe exigir (o activar) conocimiento .

— codificador de árboles
fuente

¡La última oración lo resume muy bien!

— vemv

3

Creo que reemplazar las barras de desplazamiento no es una buena idea. Cuando está acostumbrado a un sistema operativo y un navegador, el desplazamiento no requiere mucha información de su cerebro. Tener unos bien diseñados es increíble, pero confundirá a sus clientes. Es el valor agregado suficiente para compensar la molestia por el puño pocas veces que lo usan.

— Daniel Iankov
fuente

2

Mi idea es que el uso de barras de desplazamiento personalizadas, si permanece dentro del alcance de la estética, es decir, parece que solo se cambia la máscara de la barra de desplazamiento predeterminada, no es una mala idea. Los usuarios entienden de inmediato otras partes personalizadas de una página web, como botones personalizados, casillas de verificación personalizadas, etc. ¿Tiene problemas para comprender el atributo en el que se puede hacer clic en los botones de voto en los sitios de stackexchange? ¿O tiene problemas para interactuar con cuadros de texto de entrada personalizados para etiquetar preguntas en sitios de intercambio de pila o correo de Yahoo? Las barras de desplazamiento también pueden ser reconocidas rápidamente por los usuarios finales, siempre que no cambien el diseño o la funcionalidad esperada del navegador, por ejemplo, desplazarse en la dirección inversa o crear una barra de desplazamiento circular. Eres bueno para ir siempre y cuando solo cambies la piel.

Sin embargo, hay algunos problemas con las barras de desplazamiento personalizadas que debe considerar:

Por lo general, necesitan una cantidad de tiempo considerable para convertirse en un navegador cruzado
Es posible que no sean compatibles con versiones anteriores, es decir, al lanzar nuevas versiones de navegadores, pueden interrumpir el funcionamiento.
Debe implementar manualmente el comportamiento de desplazamiento. Para este artículo, considere los botones HTML. Cuando les agrega un disabled='disabled'atributo, el navegador simplemente no aceptará clics o ingresará más en ellos. Sin embargo, cuando utiliza un <div>elemento para imitar el comportamiento de un botón, debe implementar el comportamiento deshabilitado por su cuenta. Las barras de desplazamiento personalizadas también deberían implementar la funcionalidad de desplazamiento, que ya está implementada por el navegador.

A pesar de lo que decimos, le recomiendo que comience un proyecto de pasatiempo (no de producción) para experimentar el uso e implementación de barras de desplazamiento personalizadas. Vea esta página para buenos ejemplos.

— Saeed Neamati
fuente

1

Jacob Nielsen tiene una gran entrada en las barras de desplazamiento y lo que debe hacer con ellas. Recomienda específicamente no usar las barras de desplazamiento del sistema operativo y advierte contra el desplazamiento horizontal.

— Malfist
fuente

Ese artículo es bastante antiguo, especialmente en términos web. Por lo que entiendo, el redil es principalmente un mito, dependiendo, por supuesto, de su público objetivo. Todos mis amigos se desplazan primero (!) Cuando abren una nueva página. Consulte este artículo para obtener más información: designfestival.com/the-fold-exists-but-does-it-matter

— Pelshoff

Nelson lo revisó unos años más tarde en un artículo de seguimiento. Encontró que, en gran medida, el pliegue ya no importaba. Pero las recomendaciones sobre cómo hacer que una barra de desplazamiento se vea y se sienta sigue siendo muy válida.

— Malfist

Bueno, si hay una oración para mantener en todo este artículo, sería esta: las barras de desplazamiento son fáciles de entender. De hecho, cuanto menos trabajo haga, mejor será su barra de desplazamiento. La usabilidad casi siempre se mejora cuando usa las barras de desplazamiento integradas en lugar de diseñar las suyas propias.

— MrUpsidown