¿Cuál es la mejor manera de indicar que puede desplazarse en un área cuando el área no tiene una barra de desplazamiento?

13

Lo único que se me ocurrió fue decir: "Desplácese para ver el menú completo" arriba. ¿Cuáles son algunas otras formas en que las personas lo hacen?

Morgan
fuente
3
Flechas? El contexto importaría mucho. ¿Puedes publicar una muestra?
Scott
2
¿Por qué necesitas eso? No hay barras de desplazamiento en dispositivos móviles y OSX, las personas no se confunden.
bjb568
2
Es un problema que alguien más causó que no podemos solucionar, por lo que tenemos que solucionarlo.
Morgan
@ bjb568: he usado algunas aplicaciones en las que no me di cuenta de que podía desplazarme en una dirección específica. Si la pantalla corta parte de lo que puedo ver en una dirección u otra, está claro, pero a veces las cosas se alinean con los bordes de la pantalla correctamente, y los usuarios no se dan cuenta de que pueden / deben desplazarse. Me tomó un tiempo darme cuenta de que puedo desplazarme de lado en la nueva aplicación de Facebook, por ejemplo.
Mooing Duck
@MooingDuck Facebook no cuenta, es una mierda: P Pero sí, tienes que hacer cosas como lo que dijo Confused.
bjb568

Respuestas:

9

Las personas se relacionan bien con la relatividad física en las interfaces de usuario. En otras palabras, si desea que una interfaz se sienta natural, o que sus controles sean obvios, puede usar la apariencia de realismo físico para hacerlo. Los íconos adecuados también son siempre una obligación, para una funcionalidad obvia.


¿Cómo se vería físicamente un área de desplazamiento? ¡Sencillo! Una capa de contenido debajo de un marco externo. Para lograr ese aspecto, puede usar una sombra de cuadro en la capa externa.

  • Consejo: Al crear sombras de cuadro CSS, puede poner varias sombras junto con comas. Use una sombra lejana clara con una corta más fuerte para obtener un efecto agradable. ¡Use RGBA (control de opacidad) para un toque ligero!

A continuación, sin una barra de desplazamiento, la mejor práctica que se le viene a la mente es usar JQuery con un cuadro de desplazamiento en el que se puede hacer clic adjunto a los bordes de los marcos que tienen contenido de ese desplazamiento, haciendo que el cuadro se muestre cuando los elementos internos sobresalen del cuadro en cualquiera de las cuatro direcciones.

Si desea que la barra esté ausente u oculta de forma predeterminada, manténgala oculta o ligeramente opaca hasta que el área de desplazamiento se desplace o toque, y luego haga que aparezca el mecanismo de desplazamiento.

  • Uso fácil: el cuadro debe activarse (comenzar a desplazar el elemento secundario) ligeramente en el evento de desplazamiento y completamente con el mouse hacia abajo.

Aquí hay una demostración:

ingrese la descripción de la imagen aquí

Para áreas de desplazamiento largas, el desplazamiento acelerado es imprescindible a través de esta práctica, de lo contrario se inhibirá la capacidad de los usuarios para navegar rápidamente por el contenido.


Después de jugar con esto, creo que puedo crear un complemento JQuery y usar esta práctica para mi próxima aplicación web.

CuriousWebDeveloper
fuente
6

Asegúrese de que la cantidad predeterminada de contenido que se muestra por primera vez muestra un elemento en la parte inferior (suponiendo un desplazamiento vertical) que solo se revela parcialmente, informando así al usuario que hay más a continuación, y que pueden alcanzarlo / revelarlo.

Confuso
fuente
Windows (/ Phone) 8 parece hacer esto horizontalmente con bastante frecuencia: cuando un título ocupa más que el espacio horizontal disponible, lo alienta a deslizar hacia la izquierda / derecha para ver más opciones.
Katana314
1
Posiblemente con un ligero gradiente de opacidad / opacidad en la parte inferior para indicar que hay más.
wchargin
4

Esto es lo que intentaría:

Un degradado suave que cubre un poco del contenido. Esto indica que hay más a continuación. Además, por supuesto, puede agregar una pequeña flecha.

ingrese la descripción de la imagen aquí

benteh
fuente
Gracias, verifiqué las otras respuestas para asegurarme de no repetir.
antes
2

Lo obvio que quiera hacer se reducirá a quién cree que será la audiencia y cuál es el contexto.

Las técnicas habituales de búsqueda de caminos, como flechas y gráficos que continúan más allá del pliegue, pueden ayudar al usuario a viajar. Alternativamente, puede optar por un menú / sistema de navegación anclado, que utilizan muchos sitios de una sola página.

La solución más descarada y fea sería una ventana emergente que informa a los usuarios que deben desplazarse hacia abajo para obtener más contenido, y luego se oculta cuando el actor se desplaza (estilo de notificación de cookies).

C3Lawrence
fuente
1

Otra opción es cambiar el cursor al pasar el cursor sobre el elemento a algo que indique desplazamiento, como una flecha en movimiento que apunta e indica hacia abajo, o algo que indica "leer más al desplazarse".

Por supuesto, esto solo funciona para escritorio.

Dom
fuente