Krypton Solid

Mapas en el diseño web moderno: escaparate y ejemplos

Mapas en el diseño web moderno: escaparate y ejemplos

La geolocalización fue un tema candente en 2009. Con tantas aplicaciones en teléfonos inteligentes con GPS, la persona promedio podía acceder a más mapas que nunca. Pero, ¿cómo pueden los diseñadores y desarrolladores web aprovechar una base de usuarios cada vez más consciente de la ubicación? Este artículo explora las tendencias existentes, las convenciones y el posible futuro de los mapas interactivos en línea.

Los fundamentos de los mapas en línea

Cuando la mayoría de la gente piensa en mapas en Internet, puede que le vengan a la mente Google, MapQuest y TomTom. Estos son los gigantes de la industria, pero están lejos de ser los más creativos. Estas empresas ofrecen mapas como servicio. Como verá en las aplicaciones de mapas que aparecen a lo largo de este artículo, Google no es dueño del mercado. Todavía hay mucho espacio para la innovación de mapas creativos.

Esta no es una lección de cartografía, pero es importante comprender los propósitos que los mapas pueden cumplir en el diseño web moderno. Tres áreas principales parecen representar la mayoría de las tareas:

  1. Navegación y direcciones,
  2. Mostrar relaciones y tendencias geográficamente.
  3. Muestre puntos de interés.

Mapas interactivos

La expansión de la tecnología web durante la última década ha abierto varias puertas para presentar datos en línea. Una de las herramientas de presentación interactiva que más rápidamente mejora es el mapa.

Mapas interactivos en Internet Presentar datos de manera más efectiva cuando invitan a la acción del usuario.. Mostrar las relaciones entre los datos es más fácil cuando el usuario tiene el poder de cambiar las imágenes. Estas son ventajas que los mapas impresos tradicionales no tienen. Si un mapa impreso no es claro inicialmente, una persona puede hacer muy poco para darle sentido. Con los mapas interactivos en línea, la simple acción de mover los controles deslizantes revela las relaciones entre los datos y el contenido.

La panorámica y el zoom son fundamentales para el mapa interactivo. Estas acciones permiten al usuario enfocar su navegador en la cantidad de información con la que se siente cómodo.

No se requiere leyenda

En los mapas impresos tradicionales, la leyenda sirve como traductor de los símbolos utilizados. Las ventanas contextuales eliminan la necesidad de leyendas en muchos mapas en línea. En lugar de tener que consultar una explicación del símbolo en los márgenes, el usuario simplemente hace clic en un punto para obtener más información al respecto. El resultado es menos pasos y menos movimiento ocular para lograr el mismo objetivo. Para ilustrar cuán intuitivo se ha vuelto este tipo de acción para los usuarios de la Web, pruebe el «Las mejores aventuras de Estados Unidos«Mapa a continuación:


Al hacer clic en un punto, aparece una ventana contextual.

Las leyendas siguen siendo necesarias en determinados casos. Los mapas de calor, por ejemplo, muestran la intensidad por tono de color, y los usuarios generalmente requieren una barra de referencia para dar sentido a la información. Los menús contextuales no hacen que las leyendas se vuelvan obsoletas en todos los ámbitos, solo por simples «puntos de interés».

Tipos comunes de navegación por mapa

Además de la panorámica y el desplazamiento, hay varias formas interesantes de presentar mapas digitales. A continuación se muestran algunos de los mapas interactivos más comunes entre los modernos. Tenga en cuenta que es posible mezclar y combinar la mayoría de estos métodos; uno no excluye necesariamente el uso de otros.

Profundizar

Cuando el usuario tiene que moverse a través de varios niveles de especificidad de datos, comúnmente se ofrece un estilo de navegación detallado. El desglose agrupa claramente la información de magnitudes que van desde el “panorama general” hasta un caso individual.

Google Analytics presenta un estilo de desglose para sus mapas del mundo. Al hacer clic en un país específico, el mapa se reorienta para silenciar a otros países y luego hace lo mismo a nivel de estado y ciudad. Esto permite al usuario controlar la especificidad de los datos sin sentirse abrumado.

Desglose del país

Cronología

Un control deslizante de la línea de tiempo muestra el progreso a lo largo del tiempo en un mapa. El control deslizante no tiene que representar necesariamente el tiempo en sí. El objetivo principal es mostrar la correlación entre la métrica del control deslizante y el contenido del mapa.

Navegación por la línea de tiempo en acción

Zoom

Esto es diferente del método de desglose porque con el zoom, Por lo general, el mapa no se reconstruye ni se reorganiza para cada nivel de aumento.. Con el zoom, el mapa permite que la información se examine más de cerca, en lugar de reagrupar los datos para un área más pequeña.

Es posible que algunos datos no sean visibles hasta que se alcance un cierto nivel de aumento. Esto evita que las vistas más amplias se vean saturadas por detalles que tienen poca relevancia a esa escala. Un ejemplo de esto son los nombres de las calles, que están ocultos a la vista con el aumento que se muestra a continuación.

Zoom de Google Maps

Antes y después de

Al igual que el enfoque de la línea de tiempo, este muestra varios estados de la misma ubicación. La diferencia es que el método antes y después muestra solo dos estados. Este estilo ha aparecido con mucha más frecuencia últimamente, particularmente con imágenes de satélite.

Después del reciente desastre de Haití, el New York Times utilizó imágenes compuestas tomadas desde el espacio para crear un mapa interactivo que mostraba la destrucción. El resultado fue un sorprendente Ilustración del antes y el después de la destrucción de Puerto Príncipe por el terremoto.

Antes y después de la tormenta

Punto de interés

En un diseño de mapa de puntos de interés, todo menos el área objetivo queda en segundo plano. Esto permite al usuario concentrarse instantáneamente en los puntos de interés relevantes. La información adicional puede ser transmitida por el tamaños relativos de los marcadores, haciendolo relaciones fáciles de discernir entre ubicaciones sin desorden.

Odopod lleva esta idea un paso más allá en su página de contacto al ofrecer una foto del frente de su oficina. Encontrar el edificio adecuado ahora es mucho más fácil.

Punto de interés del odópodo

Mapas como herramienta informativa

Internet y la digitalización de la información representan una mejora interesante para imprimir mapas. Utilizados junto con encuestas y comentarios de los usuarios, los mapas pueden convertirse en una representación de información casi en tiempo real. Con este método, comparar dos métricas una al lado de la otra es simplemente una cuestión de seleccionar los rangos deseados.

Los mapas del sitio web de National Geographic ilustran cómo se pueden utilizar los mapas interactivos para mostrar las tendencias mundiales a partir de los datos recopilados. El mapa Earth Pulse, por ejemplo, tiene un menú lateral que permite a los usuarios mostrar información basada en métricas como la población, el consumo de carne y la deforestación.

Del Mundo Político

La ubicación da contexto a los eventos actuales. No es de extrañar, entonces, que las organizaciones de noticias estén visualizando los eventos mundiales con algunos de los mapas más innovadores de la Web.

Quizás el período de tiempo más cartografiado fue la elección presidencial estadounidense de 2008. Diariamente se crearon mapas interactivos para mostrar la opinión de los votantes. Cada vez que se publica una encuesta, puede estar seguro de que pronto aparecerá un mapa interactivo. Debido a que la información estaba vinculada a datos constantemente actualizados, un mapa estático se habría vuelto irrelevante en cuestión de horas.

En el fragor de la carrera CNN lanzó una herramienta que permitía a los usuarios asignar votos y proyectar qué candidato ganaría en última instancia. El mapa, por tanto, no sólo presentado información, pero se convirtió en una herramienta para generar información.

Mapa de votación electoral de CNN

Una vez que terminaron las elecciones, también se mapearon los patrones de votación del país. Una de las versiones más interesantes fue el mapa del Washington Post desglosado por condado. El mapa utilizó Flash para ofrecer una vista completa de 360 ​​grados de las tendencias electorales. Los resultados de toda una campaña fueron resumido eficazmente en un solo gráfico.

Elección 2008 Desglose del condado

Aquí es donde los mapas tienden a superponerse (o incluso a convertirse) en infografías. La diferencia está en la presentación y el diseño. En el mapa del Washington Post, la información estaba directamente vinculada a un área en particular. Los datos, entonces, serían relevantes solo para el contexto en el que fueron recolectados. No es lo mismo una votante de 30 años en California que una votante de 30 años en Nueva York.

Mapas no convencionales

Si bien la mayoría de los mapas de este artículo son de ubicaciones físicas, no sienta que tiene que ceñirse a eso. Los mapas geográficos no son el único tipo de mapas que existen. Los mapas también se pueden utilizar para explorar información más abstracta, no muy diferente infografías estáticas. BUENO ilustra esto con su «Hoja de ruta hacia la armonía”Presentación. El resultado es lógico e inspiradoramente creativo.

Hoja de ruta hacia la armonía
“Roadmap to Harmony” rompe el molde de los mapas basados ​​en la ubicación.

El futuro de la ubicación

La mayoría de los mapas que hemos visto son de ubicaciones físicas y edificios. El futuro de los mapas interactivos también tendrá que adaptarse al papel de las personas, y las personas son un poco más móviles que los ladrillos y las carreteras.

Servicios como Firme y Gowalla se aseguran de que los mapas y la ubicación son parte de la vida diaria de los usuarios de teléfonos inteligentes. Twitter está expandiendo rápidamente su API para incluir datos de ubicación. Dónde te encuentras en un momento dado tiene implicaciones notables. Esto podría llevar a sitios web que recopilen dichos datos y los conviertan en mapas que muestren movimientos y tendencias.

Acción de mapeo desde la ubicación

Considere cuántas personas se registraron en la conferencia SXSWi de este año. Toda la conferencia fue mapeada gracias a las insignias basadas en la ubicación de los asistentes. Se trataba de algo más que de que las personas actualizaran esporádicamente su ubicación; fue una demostración de cómo La «personalidad» de un evento completo podría mapearse en función de las acciones de sus participantes.. Con tantos asistentes que se registran en cada evento, los datos podrían usarse para determinar todo, desde los hábitos alimenticios hasta el interés del panel.

Mapas centrados en las personas

Depender del GPS solo para localizar edificios pronto será cosa del pasado. ¿Podemos comenzar a ver páginas de contacto de diseñadores de sitios web que tienen una sección «Encuéntrame aquí ahora», completa con coordenadas GPS? Jugador de la NFL Chad Ochocinco ya ha llevado este nivel de interacción a un nivel completamente nuevo. Y nada impide que la persona promedio se suba a bordo también (a pesar de las preocupaciones por la privacidad).

Una muestra de mapas en el diseño web

Hoy hemos cubierto mucho terreno. El escaparate a continuación compila más ejemplos de mapas para su inspiración. Gracias a Tap de patrón para hacer que el proceso de búsqueda por elemento de diseño sea relativamente sencillo (aunque todavía no tiene una sección de mapa). Muchos de los ejemplos a continuación se extrajeron de allí y de otras ubicaciones.

Explorar Innovista

Mapa interactivo para el desarrollo futuro de Innovista, un proyecto masivo de la Universidad de Carolina del Sur.

Hostales en Oxford

Hotel Oxford pone su ubicación en contexto.

Puntos Everyblock

EveryBlock muestra las noticias de la ciudad como marcadores de puntos de interés.

Consejo Cubano

Una representación exagerada de la ubicación del edificio.

Kurt Noble
KNI usa mapas para mostrar las ubicaciones de los estudios.

Promoción Victoria Star
Aunque quizás no esté a escala, el mapa de Victoria Star proporciona toda la información que necesitaría para encontrar la empresa.

Encuentra nuestros bares

Una guía aproximada para encontrar barras.

Éste explora las rutas de expediciones famosas.

Un mapa impulsado por jQuery de puestos abiertos de maestros de escuela.

Un mapa interactivo del mundo ficticio de Warcraft.

Construye tu propio

¿Quiere generar su propio mapa para un proyecto? Si bien JavaScript y HTML5 han recorrido un largo camino, Alternativas basadas en Flash como amMaps todavía ofrecen algunas de las soluciones más sólidas para la cartografía interactiva. Casi todos los mapas mencionados en este artículo podrían construirse utilizando este sistema (o uno similar).

Captura de pantalla del sitio amMap

Si está buscando una alternativa que no sea Flash, Carsonified publicó recientemente un excelente estudio de caso sobre el uso de jQuery para mapeo interactivo, que explica el proceso. ¿Conoce algún otro sistema de mapeo basado en Internet que los diseñadores deban conocer? Comparte un enlace en los comentarios a continuación.

Otras lecturas en SmashingMag:

Deja un comentario