Mejorando la experiencia de usuario con mapas dinámicos

En toda web de comercio electrónico se busca ofrecer la mejor experiencia de usuario (UX) y una buena usabilidad en el proceso de compra a los clientes, ello contriburá a una mayor satisfacción del cliente y probablemente consigamos un mayor procentaje de conversión final de entre el total de visitas y como consecuencia un mayor número de compras. Un cliente que ha tenido una buena experiencia de usuario quizá vuelva a confiar en un futuro en la misma web para realizar otras compras o se la recomiende a un conocido. En la experiencia de usuario entran multitud de factores desde la web, hasta la atención del cliente, entrega del producto, ... en algunas ocasiones se tiene la intuición de que y como mejorar la UX pero en otras hay que hacer pruebas de que opción da mejores resultados.

Desde hace ya bastantes meses una de las formas de mejorar esa UX que estamos persiguiendo en la página de listado de entradas de un evento es a través de los mapas dinámicos o mapas interactivos.

Hasta el momento para proporcionar información del recinto y a que lugar del mismo corresponde cada categoría o sector usábamos una imagen. Con la imagen el buscar la localización de unas determinadas entradas de una categoría o sector es algo que requería cierto esfuerzo y también algo de tiempo al usuario.

Con los nuevos mapas dinámicos o interactivos pretendemos que el usuario pueda ver más fácilmente y rápidamente la localización de una determinada categoría de entradas, además en las entradas en las que los vendedores han especificado el sector queda reflejado en el correspondiente sector del mapa (los sectores con un borde y un color más oscuro), otra posibilidad es con un cuadro emergente mostrar cuantas entradas hay disponibles en la categoría y cuantas entradas hay en el sector. También si el usuario se posiciona en un determinado sector se marcan los sectores de la misma categoría y si se hace clic en un sector se filtra el listado de entradas por su categoría. En definitiva los mapas han pasado a ser un elemento activo dentro de la página y que puede proporcionar más información más rápidamente y fácilmente.

Aún siendo los mapas dinámicos (intuimos) una mejora respecto a las imágenes aún son el primer paso de todo lo que se podría hacer con ellos. Ahora el mapa solo filtra por categoría, se podría hacer que el mapa filtrase por sector para aquellos que tienen entradas de tal forma que el usuario encuentre las entradas de un determinado sector más rápidamente ya que aún filtrando por categoría algunos eventos tienen listados de entradas largos, esto solo es una posible mejora pero podría haber muchas más. Los mapas dinámicos parecen una avance respecto a las imágenes que esperamos las pruebas en determinados eventos confirmen. Como todo para continuar mejorándolos solo hace falta de disponer de ideas que aplicar, la otra parte es tener tiempo (ese recurso escaso en el desarrollo) para materializarlas.

En cuanto a la parte técnica de los mapas están desarrollados empleando svg y javascript, tecnologías más amigas de la web que los flash. A pesar de lo visuales que son los mapas y lo complicado que pueden parecer el manejo de esos elementos gráficos no es nada distinto de manejar cualquier otro elemento de una página con javascript aún siendo el número de elementos a manejar mayor. Las partes menos simples son las funcionalidades de desplazamiento y zoom ya que requieren el manejo de eventos y de cierta técnica para proporcionar la funcionalidad de arrastrar y soltar asi como cierta lógica para restringir los límites entre los cuales se puede desplazar el mapa, hacer zoom, colorear los sectores según haya selección en el mapa o se esté encima de un sector.

Las librerías en las que nos hemos apoyado para hacer la programación más simple han sido jQuery, noUiSlider, Opentip, Backbone.js y svg.js.