28/03/2014

Utilizando sonido en sitios web

Utilizando sonido en sitios web

Todos los días ingresamos a sitios web que además de imágenes utilizan sonido. Sin embargo, en la gran mayoría de los casos el sonido proviene de videojuegos en Flash o de los reproductores de audio o video que encontramos en sitios como Grooveshark o YouTube; es decir, de plataformas especialmente pensadas para el contenido multimedia. Pero el sonido puede aplicarse de diversas formas al diseño de la experiencia de usuario:

  • Música de fondo. Reproducir música automáticamente es un recurso en abandono: a la mayoría de los usuarios les resulta irritante, especialmente si ya estaban reproduciendo sonido desde otra pestaña. Debe pedirse permiso para reproducir la música y ofrecerse controles que permitan pausarla o reanudarla. En ciertos casos, como en sitios de bandas musicales o en hot sites pensados para el lanzamiento de una película o un producto, este elemento puede dar buenos resultados. Tal es el caso de Life of Pi.
  • Ayudas sonoras. Los sitios web accesibles suelen brindar conversores de texto a voz y captchas sonoros para ayudar a usuarios con dificultades visuales.
  • Banners. Los banners rich media, generalmente desarrollados en Flash, no deberían reproducir sonido sin el consentimiento del usuario. Muchos reproducen clips publicitarios inicialmente sin sonido; si el usuario se ve atraído por las imágenes, lo activará. Otra opción es que el sonido empiece a reproducirse cuando el usuario pase el cursor del mouse por encima.
  • Infografías. En una infografía interactiva, el sonido puede aportar información que el texto y las imágenes no. El sitio Killing Kennedy brinda una impactante experiencia multimedia a través de efectos sonoros y grabaciones de época.
  • Indicación de eventos. Muchos sitios reproducen sonidos ante ciertas acciones por parte del usuario:
    • Luego del envío de datos a través de un formulario, a modo de confirmación.
    • Cuando el usuario pasa el cursor del mouse por encima de un enlace.
    • Cuando el usuario presiona un botón, para otorgar una experiencia similar a la de presionar un botón físico.
    • Cuando se conecta al chat de soporte un representante de la empresa.

En estos casos, el sonido no debería ser usado como único medio de confirmación de una acción, ya que el usuario puede tener el sonido apagado. Algunas de estas aplicaciones del sonido pueden no ser muy habituales, pero bien entendidas pueden contribuir a una experiencia de navegación más placentera.

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