08/01/2014

Diseñando sitios web con scrolling horizontal

Diseñando sitios web con scrolling horizontal

Cuando una página web presenta un volumen de contenido que excede las dimensiones de la pantalla, el scroll nos permite desplazarnos a través de ella para acceder al contenido oculto, ya sea a través de una barra del navegador o (en dispositivos táctiles) un gesto con el dedo. Es un importante elemento de navegación, que admite más variantes de las que podríamos imaginar. Existen sitios web que cambian el color de la barra de scroll del navegador, otros que evitan el desplazamiento concentrando todo el contenido en las dimensiones de la pantalla y otros que incluyen scrolling en bloques de contenido dentro de la página. Y, si bien en la gran mayoría de los casos el scrolling es vertical, siempre existe la opción de desplazarnos horizontalmente. Pero ¿es conveniente imponer esta forma de navegación tan poco familiar para los usuarios? Conozcamos sus características:

  • Es ideal para dispositivos móviles. Los usuarios tienden a colocar sus smartphones en posición apaisada para tener el mayor ancho de pantalla posible. Una página con desplazamiento horizontal se adaptará mejor a esta modalidad.
  • Es especialmente indicado para sitios web con muchas imágenes, como portfolios de diseño. No se recomienda para páginas con mucho texto o aplicaciones web. Si se desea colocar contenido de texto, lo mejor es separarlo en varias columnas.
  • No es recomendable si el sitio web no se dirigirá a usuarios avanzados. El experto en usabilidad Jakob Nielsen asegura que el scrolling horizontal traiciona las expectativas del usuario y que la combinación de dos dimensiones de desplazamiento es problemática para usuarios discapacitados.
  • Para muchos, en cambio, no adaptarse a lo que el usuario espera le brinda a un sitio web una característica distintiva que lo vuelve especialmente memorable, incluso aunque haga de la navegación una tarea más difícil.

En conclusión, la implementación del scrolling horizontal es una medida riesgosa, pero si sabemos aplicarla a los casos indicados, puede dar buenos resultados estéticos.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce