En todo estas vos

Digital BA

Gobierno Abierto, Gobierno Electrónico y Nuevos Medios

Repensando el Mapa interactivo de Buenos Aires


Publicado el

Por Federico Abad, Subgerente Operativo de Experiencia de Usuario.

Todo tiene un inicio

El mapa interactivo es uno de los proyectos más interesantes para participar bajo el amplio paraguas de oportunidades que otorga la Dirección General de Gobierno Electrónico. La Unidad de Sistemas de Información Geográfica (USIG) ya tenía un proyecto consolidado que brindaba un servicio muy útil y actualizado a los ciudadanos. La información, las bases de datos, la tecnología y los algoritmos usados en el mapa funcionaban perfectamente, por lo tanto, para la versión 3.0 había que hacer hincapié en la reorganización de los elementos para priorizar algunas funcionalidades sobre otras.

Mapa de la Ciudad v2.2

Mapa Interactivo de Buenos Aires 2.2

Simple y por objetivos

Cuando comenzamos a trabajar, una de las primeras observaciones que hicimos fue que el diseño de la versión 2.0 tenía muchas interacciones posibles y muy diversas al ingresar por primera vez. Si bien, puede parecer como una ventaja, esto dificultaba al usuario encontrar la acción por la cual había entrado al sitio. Por lo tanto, el primer paso fue priorizar acciones y usuarios.

Mapa interactivo de Buenos Aires 3.0

Mapa interactivo de Buenos Aires 3.0

Las estadísticas

Analizando los datos, vimos que lo más usado era la búsqueda de recorridos y que se encontraba a un click de distancia en la versión anterior. Entonces decidimos poner esta función mucho más visible y como la principal atracción.

mapa.buenosaires.gob.ar es usado por muchos usuarios con perfiles diferentes, desde alguien que busca cómo llegar desde a su casa, arquitectos, inmobiliarias o incluso personas jurídicas que vienen a consumir datos duros. A todos estos (y más) teníamos que brindarles una solución por igual.

Teniendo en cuenta la variedad, se crearon grupos de interacciones. De ahí nace la barra lateral, con accesos directos a los distintos puntos de interés.

Cómo llego: el lugar donde cualquier usuario, nuevo o asiduo, viene a consultar un recorrido en transporte público, a pie, en bici o auto. El centro de la aplicación y donde está la real diferencia con respecto a nuestros competidores locales e internacionales.

Cómo llego, buscador de recorridos.

Cómo llego, buscador de recorridos.

Mis direcciones: se almacenan datos relevantes para el usuario y permite un rápido acceso a la información previamente consultada. El usuario recurrente encontrará acá sus lugares más buscados.

Mis direcciones

Mis direcciones

Información: donde los datos duros viven. Se repensó completamente para poder tener en un solo vistazo todos los datos importantes del lugar (foto, coordenadas e información catastral). Con un solo click se puede visualizar toda la información de una sin tener que navegar por varias pestañas. Se prestó mucha atención en presentarlo en forma tabular y de plantilla, para una lectura más rápida y comprensible.

Información de parcela

Información de parcela

Buscador de lugares: si bien ya existía, estaba algo perdida. Esta sección es para el que no busca una dirección ni un recorrido, sino que quiere consultar lugares (bares, farmacias u hospitales, etc.). Es un filtro de todos los datos de lugares que tiene el mapa.

Buscador de lugares

Buscador de lugares

Mapas temáticos: una forma más que interesante de visualizar los datos del mapa. Categorizados y explicados, cada uno muestra de una forma similar diferentes datos sobre el mapa. Se trabajó sobre la lectura y la ayuda visual, sumando iconos para poder descubrir rápidamente de qué se tratan y qué tipo de información representan.

Mapas Temáticos - Red de Ciclovías

Mapas Temáticos – Red de Ciclovías

Navegación  

Quizás uno de los mayores cambios dentro del mapa. En la versión 2.0, la navegación se realizaba únicamente con el botón izquierdo: click, click y arrastrar y doble click. Estas interacciones eran confusas. Click sobre el mapa, desplegaba un pop-up con datos. Click y arrastrar, te permitía mover el mapa. Y doble click para hacer zoom. Esto generaba interacciones no deseadas. Por eso decidimos usar el botón izquierdo solo para navegar sobre el mapa (zoom y movimiento sobre los ejes X, Y) y el botón derecho para desplegar acciones sobre el mismo.

Iconografía

Se definió una iconografía completamente nueva, algo más simple y flat por sobre los elementos con gradientes y profundidad. Se rediseñaron iconos para mejorar su comprensión. Es un trabajo que todavía estamos haciendo.

Agregamos una ayuda visual a los recorridos por colectivos mostrando en cada medio y línea de transporte sus respectivos colores, desde la Línea D –verde-, hasta el colectivo 59 -verde rojo y negro-. Esto ayuda a los usuarios a la hora de saber qué transporte se deben tomar ya que conocen sus colores además del número o nombre.

Nueva iconografía

Nueva iconografía

Performance

Se mejoró el tiempo de carga al decidir usar la técnica de sprites de imágenes y usando, sin abusar, gradientes en CSS3. Para no hacer un uso extremo de imágenes, dejamos siempre la posibilidad de un color liso para los navegadores que no soporten esta propiedad. Con la combinación de estas técnicas se logró bajar mucho los tiempos de carga del mapa.

Markup

Para optimizar el markup, elegimos el framework Bootstrap. Más precisamente, un fork que hizo Gobierno Electrónico que aplica la marca del Gobierno de la Ciudad, llamado BAstrap. Con esto se garantiza un código sólido, con buena performance, velocidad y al día con las buenas prácticas.

Pay no attention to that man behind the curtain

Detalles, en eso nos centramos. Mejoramos muchas de las micro-interacciones dentro del sitio: un mejor lector de direcciones al que se le puede agregar texto extra e igual comprende lo que estamos buscando, la dirección guardad en favoritos es recordada como principal a la hora de auto-completar, los recorridos en auto siempre tienen en cuenta los cortes de calles, y muchas más. El objetivos es que el usuario se encuentre con menos fricción, reciba mejor información y de forma más placentera.

Mobile

Uno de los grandes focos en el que nos vimos obligados a trabajar fue el desafío móvil. Repensamos totalmente el mapa para soportar dispositivos móviles y estar siempre actualizado, sin tener que trabajar para cada dispositivo en particular. Estamos terminando, ahora mismo, esta funcionalidad y esperamos que dentro de muy poco todos los usuarios puedan ver el mapa en sus smartphones.

Resumiendo

El mapa no fue rediseñado, fue reorganizado y replanteado. Se crearon nuevas bases sólidas para seguir creciendo y agregando funcionalidades, se pensó algo a largo plazo y que pueda mantenerse por mucho tiempo, actualizándose y renovándose.

Muchos tipos de usuarios conviven en nuestra página y tratamos de darle una solución por igual a cada uno, ya que sus necesidades son muy diferentes. Este fue el mayor desafío.

Estamos muy contentos por el resultado pero aún más por lo que se viene. Tenemos muchas ideas y queremos llevarlas a cabo.

Ahora entrá en mapa.buenosaires.gob.ar y descubrí tu ciudad.

Tags: , , , ,


7 thoughts on “Repensando el Mapa interactivo de Buenos Aires

  1. Pablo says:

    La v2.0 (correspondiente a la captura publicada) es del 2010. Desde entonces el mapa tuvo 2 versiones: 2.1 y 2.2. No sería más honesto poner una captura de la última versión anterior al rediseño?

  2. Horacio Milberg says:

    Es posible que el mapa interactivo no se pueda utilizar con Safari? I limitaciones en el tipo de browser que el mapa pide? Gracias por una respuesta.

  3. Elda says:

    Sería muy útil que puedan verse sobre el mapa los recorridos de las líneas de colectivos, como en la versión antigua.
    Al clickear sobre una avenida bajo la cual circula una línea de subte, no se muestran las líneas de colectivos que circulan por dicha avenida.
    Se podrán agregar estas utilidades? El mapa es excelente y muy completo; lo uso hace varios años. Gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>