Hacer que los sitios web sean conscientes de la ubicación con la geolocalización HTML5

Las suposiciones pueden ser un negocio arriesgado en el mundo de la experiencia de usuario, pero algunas de ellas pueden permitirte ofrecer una experiencia de usuario más personalizada a tus visitantes. Vamos a ver cómo mejorar la experiencia del usuario haciendo que tus sitios web sean conscientes de la ubicación.

La experiencia del usuario ha pasado a ocupar un primer plano en el diseño web durante los últimos diez años. Como usuarios, constantemente se nos pide que proporcionemos información actualizada sobre nosotros. Cualquier cosa, desde Twitter preguntándonos «¿Qué está pasando?» a Facebook preguntándonos qué nos ‘gusta’. Todo esto le permite a estas empresas, entre otras cosas, construir un perfil bastante detallado y preciso de ti para poder proporcionarte una experiencia de usuario más personalizada.

Más o menos al mismo tiempo que se anunciaba HTML5, W3C nos presentó otra API. Estoy bastante seguro de que habrás oído hablar de ella; la API de geolocalización. Esto permite que tu sitio reciba información sobre posicionamiento geográfico mediante JavaScript.

¿Cómo funciona la geolocalización?

Se puede acceder a los datos de geolocalización a través de varias y distintas fuentes. Tradicionalmente en los sitios web, estaría determinado por la dirección IP del visitante. A continuación, se conectaría a un servicio WHOIS y recuperaría la dirección física del visitante a partir de su información ‘whois’. Sin embargo, recientemente se ha vuelto habitual utilizar una forma más popular y precisa de acceder a esta información; usando un chip GPS incorporado en un dispositivo. Estos se encuentran en la mayoría de los teléfonos inteligentes y tabletas y son responsables del aumento de la popularidad de los servicios que reconocen la ubicación que podríamos utilizar. Piensa en Foursquare o en cualquier otra aplicación en la que puedas hacer un registro o ‘check in’.

Privacidad del usuario

En la especificación de la API publicada por el W3C se indica:

Los agentes de usuario no deben enviar información sobre la ubicación a los sitios web sin el permiso expreso del usuario.

Antes de que un dispositivo o navegador pueda acceder a los datos de geolocalización de un visitante, el visitante debe conceder su autorización previa. Así es como aparece en Google Chrome:

Los usuarios son conscientes, ahora más que nunca, de qué información almacenan sobre ellos los sitios web, por tanto, tus usuarios tendrán que sentirse seguros en relación a lo que vayas a hacer con sus datos. Infórmales sobre por qué exactamente necesitas esta información e indica cómo les beneficiará al poder crear una mejor experiencia online.

Cuando se usa un sitio web o una aplicación con geolocalización, es recomendable controlar la cantidad de información que compartes con otras personas. La mayoría de las aplicaciones y servicios que comparten ubicaciones ofrecen algún tipo de control sobre la privacidad, así que asegúrate de utilizar esto y de no compartir nunca tu dirección personal.

Usos de la geolocalización

Una vez tengas un sitio o una aplicación que reconozca la ubicación, podrás proporcionar contenido más preciso y relevante para tus visitantes. Echemos un vistazo a cómo puede ser útil la geolocalización.

Geomarketing

El geomarketing es un término relativamente nuevo y se puede describir como:

La integración de la inteligencia geográfica en diversos aspectos del marketing, incluyendo ventas y distribución.

Aunque es un nuevo término, el principio real del geomarketing ya ha existido durante un tiempo. Facebook ha estado utilizando este enfoque desde hace ya algún tiempo. Recopila datos basados en la ubicación (usando las direcciones IP de los usuarios) y muestra anuncios adecuados a esa región geográfica. Google y otros motores de búsqueda también han hecho uso de esto e incluyen resultados de búsqueda basados en la ubicación para sus usuarios.

Crowdsourcing

No son solo los profesionales del marketing los que pueden beneficiarse de servicios de geolocalización, los tipos creativos también se han beneficiado de ellos, probablemente sin darse cuenta. La gente la ha utilizado para acceder a un gran número de personas, todas las cuales están situadas en la misma zona y tienen un mismo objetivo, «hacer que algo suceda». Esto puede ir desde «flash mobs», a rutinas de baile a gran escala, a la creación de grupos comunitarios para personas que comparten intereses similares.

También se ha utilizado en situaciones como el terremoto de Haití de 2010, cuando grandes grupos de personas normales y corrientes se reunieron para impulsar la ayuda a través del poder de las redes sociales y la geolocalización.

Ofertas

Recientemente han comenzado a surgir una gran cantidad de «sitios de ofertas» por todas partes. En especial Groupon, que fue lanzado en noviembre de 2008. Groupon ofrece servicios que presentan ofertas del día a sus usuarios y el sitio tiene cada día una cantidad limitada de descuentos para cada oferta. Cada artículo debe interesar a los usuarios lo suficiente como para que se inscriban a esa oferta; al hacerlo lo recibirán, pero sólo si se alcanza el número mínimo de personas establecido para ella.

Este concepto reduce el riesgo para los minoristas y les permite vender a granel, haciendo que el concepto sea un ganador durante todo el año. El poder de Groupon reside en su sólida integración con la ubicación de sus usuarios. Al ofrecer a sus usuarios ofertas y descuentos locales se ha convertido en uno de los sitios de cupones más populares y su formato ha sido ampliamente replicado.

Ejemplos prácticos

Ahora que entiendes un poco más sobre la geolocalización, echemos un vistazo a algunos ejemplos del mundo real.

The Rocky Horror Show

El sitio web de Rocky Horror te permite obtener los distintos horarios del representación del espectáculo en lugares cercanos a ti. Dirígete simplemente al sitio y haz clic en «Find my location» («Buscar mi ubicación» en español).

Lugares de Flickr

Usando la misma tecnología, Flickr muestra las fotografías que otros han estado subiendo al sitio web desde ubicaciones cercanas a aquella en la que tú te encuentras.

Mapumental

Mapumanetal fue lanzado en 2006 cuando el Departamento de Transporte del Reino Unido se comunicó con la startup para trabajar con la información que tenían sobre los datos de transporte público. En Mapumental describen lo que hacen de la siguiente manera, «Creamos mapas que ayudan a las personas a tomar mejores decisiones, más rápido». Ofrece una variedad de herramientas y servicios que proporcionan distintas formas de visualización de datos sobre trayectos en tiempo real.

Implementación de la geolocalización

Si no has implementado con anterioridad la geolocalización en sitios web o aplicaciones, la buena noticia es que no podría ser más sencillo. En este tutorial voy a mostrar cómo se puede obtener la ubicación de un usuario en tu sitio o aplicación web.

El código HTML

He diseñado esto de manera que puedas añadirlo a tu propio sitio web con bastante facilidad. El objetivo es que el usuario presione un botón que después obtendrá su ubicación, mostrándola en el sitio con un poco de ayuda de la API de Google Maps.

Comenzamos con un elemento contenedor que centre el diseño. He decidido que tenga una anchura de 960px, pero puedes usar cualquier tamaño que se adapte a tu diseño. Dentro de este ‘envoltorio’ he creado un div en donde se asentará el mapa una vez se haya generado. Le he asignado el ID ‘Mapa’.

Dentro del div ‘Mapa’ tengo un span al que le he asignado una clase denominada ‘helper’. Esto será una pequeña guía auxiliar que le indicará al usuario lo que debe hacer. Esto podría parecer algo un poco innecesario, pero siempre es una buena práctica ayudar a los usuarios siempre que sea posible.

Después tenemos una imagen de precarga a la que le he asignado el ID ‘preloader’. Si estás buscando precargadores, echa un vistazo a preloaders.net.