El desplazamiento es un componente clave de cualquier diseño de sitio web que se extienda más allá de una única página de destino. ¡Cualquiera que piense que el pergamino está muerto necesita saltar del 2005!
Las acciones de desplazamiento mueven a los usuarios a través del contenido vertical u horizontalmente y son un patrón de usuario comúnmente aceptado. El pergamino está vivo y bien gracias a muchas técnicas de diseño interesantes y un cambio hacia el acceso a sitios web completos en pantallas más pequeñas. ¡Vamos a ver!
6 maneras de usar las acciones de desplazamiento
Una acción de desplazamiento no es solo un truco ingenioso para el diseño de su sitio web. Necesita hacer algo y hacer que los usuarios se involucren con contenido específico o realicen una determinada acción. A menos que se cumplan esos criterios, las acciones de desplazamiento son solo trucos tontos.
Hay algunas formas diferentes de involucrar a los usuarios con el desplazamiento:
- Desplácese verticalmente: Este es el patrón más intuitivo donde los usuarios se mueven hacia arriba y hacia abajo de la página. Incluso sin mucha más información, los usuarios intentarán desplazarse hacia abajo si tienen algún interés en el diseño o contenido.
- Desplácese horizontalmente: Si bien este patrón se está volviendo más común gracias a la proliferación de controles deslizantes de imagen, la mayoría de los usuarios todavía necesitan una señal de desplazamiento horizontal, como una flecha o una instrucción. Luego, debe decidir si el desplazamiento horizontal es una acción de una o dos vías.
- Utilizar capas: Los objetos en capas ayudan a los usuarios a ver patrones y movimientos (piense en los principios de Diseño de materiales). Al apilar elementos en un fondo y en primer plano, puede fomentar el desplazamiento.
- Dígales a los usuarios que se desplacen: No hay nada malo con un ícono o un poco de microcopia que les dice a los usuarios dónde y cómo desplazarse. Incluye el elemento justo arriba de donde se rompe la pantalla? y los usuarios tendrían que desplazarse para ver más.
- Usa click para desplazarte: Si utiliza un icono o elemento para fomentar el desplazamiento, actívelo también con un clic. (Los usuarios casi no pueden evitar hacer clic en los elementos que parecen botones). El uso de una acción de hacer clic para desplazarse proporcionará una agradable sorpresa que los usuarios pasarán al siguiente bit del contenido.
- Desplazarse por todas partes: No hay una regla que diga que el desplazamiento tiene que ser hacia arriba y hacia abajo o hacia la izquierda y hacia la derecha. Se puede mover de muchas maneras. Considere patrones redondos, diagonales u otros, siempre que sean fáciles de entender para los usuarios en relación con el contenido y fomente el compromiso.
10 ejemplos asesinos para la inspiración
Ahora que tienes una idea de cómo diseñar acciones de desplazamiento, inspírate con algunos ejemplos de un gran diseño. Para aprovechar al máximo todos los ejemplos a continuación, asegúrese de hacer clic en los sitios web y aprovechar para aprovechar al máximo cada experiencia interactiva.
Notarás que cada proyecto se acerca al desplazamiento un poco diferente. Algunos son más intuitivos que otros, pero todos proporcionan una línea de base interesante para comenzar. ¡Disfrutar!
Producciones IMS
IMS Productions utiliza el desplazamiento vertical para presentar eficazmente las historias en una pantalla. a la vez Cada desplazamiento lleva a los usuarios a un nuevo perfil que llena la pantalla y ofrece una mini experiencia propia. Tenga en cuenta las sutiles líneas verticales y la flecha que todos los usuarios dirigen para desplazarse por el diseño del sitio web.
Amor instantáneo
Instant Love empareja las acciones y el sonido en un experimento musical que es muy divertido. Cada acción de desplazamiento presenta una nueva canción para que el usuario la escuche, completa con información sobre la pista y el artista. Las acciones de desplazamiento se utilizan como un juego para fomentar el compromiso y la interacción durante un período prolongado.
Estados Unidos inteligente
Smart USA utiliza una gran cantidad de técnicas de desplazamiento, incluida una vista de 360 grados, para ayudar a vender autos. Este tipo de función de desplazamiento puede ser valioso para el comercio electrónico y las ventas de productos porque los usuarios pueden explorar los productos con más detalle que solo con imágenes.
Havaianas
Havaianas utiliza el desplazamiento horizontal para exhibir productos. Lo bueno de este patrón es que cada diapositiva en el desplazamiento incluye una llamada a la acción y una barra de progreso en la parte inferior. Mientras los paneles se desplazan automáticamente, los usuarios pueden tomar el control en cualquier momento para ver el contenido que están buscando.
Exagerar
Playup es una aventura animada de partes móviles que cambian y cambian con cada movimiento del mouse. Hay mucho que hacer con las acciones de desplazamiento, pero los movimientos son rápidos y atractivos, especialmente con las opciones de colores más audaces. Además, los usuarios pueden desplazarse hacia arriba o hacia abajo y siempre hay una indicación visual a la derecha que le permite saber qué acciones están disponibles.
Pharrell Williams
Pharrell Williams tiene uno de los sitios web de desplazamiento más divertidos que encontrarás. Se mueve en todas direcciones, rebota, cambia y cambia de forma ante tus ojos. Y cada parte del diseño está dirigida por acciones de desplazamiento. Una vez que los usuarios hacen clic en las tarjetas de la página de inicio, las páginas interiores también aprovechan al máximo el desplazamiento continuo con movimiento de paralaje para mantener la misma vibra.
Tubelectric
Tubelectric no se ve como un diseño que tendrá muchos efectos de desplazamiento, pero utiliza capas y animaciones simples para resaltar el producto. Hay sorpresas de diseño inesperadas con cada movimiento del mouse para un sitio web que podría haber tenido un diseño general plano.
El sitio web más alto del mundo
El sitio web más alto del mundo es un ejemplo tonto de desplazamiento hacia el extremo. Simplemente sigue desplazándose por más de 11 millas. ¡Que te diviertas!
Laboratorio de cohetes
Rocket Lab utiliza un desplazamiento vertical más tradicional debajo del video de la página completa para presentar la información. ¿Qué es especialmente bueno es la microcopia? - para decirle a los usuarios que sigan desplazándose por más.
Deslizadores
Los controles deslizantes utilizan una acción de desplazamiento de paralaje para mostrar el restaurante y los elementos del menú. El diseño general es bastante simple y las acciones de desplazamiento no son complicadas, pero todo se une con facilidad. Este es un gran ejemplo de cómo combinar las acciones de la interfaz de usuario con las imágenes estelares.
Conclusión
El desplazamiento viene en muchas formas diferentes.Esperamos que estos ejemplos lo inspiren a crear algo con un patrón de desplazamiento interesante o nuevo para ayudar a atraer una nueva base de usuarios.
Solo recuerda, como con cualquier cosa nueva. Pruébalo Mira la analítica. Realice los cambios necesarios para asegurarse de que sus patrones experimentales de desplazamiento y diseño sean exitosos y sirvan bien a los usuarios.