Share
Assumption peut être une entreprise risquée dans le monde de l'expérience utilisateur, mais certaines hypothèses peuvent vous permettre d'offrir une expérience utilisateur plus personnalisée à vos visiteurs. Nous allons améliorer l'expérience utilisateur en rendant vos sites Web sensibles à la localisation..
L’expérience utilisateur s’est imposée à la pointe de la conception Web au cours des dix dernières années environ. En tant qu'utilisateur, on nous demande constamment de fournir des informations à jour sur nous-mêmes. Quelque chose de Twitter nous demande "Qu'est-ce qui se passe?" à Facebook nous demandant ce que nous aimons. Tout cela permet, entre autres, à ces sociétés d’établir un profil assez détaillé et précis de vous afin de vous offrir une expérience utilisateur plus personnelle..
À peu près au moment où HTM5 a été annoncé, une autre API nous a été présentée par W3C. Je suis sûr que vous en avez peut-être entendu parler. l'API de géolocalisation. Cela permet à votre site de recevoir des informations de positionnement géographique à l'aide de JavaScript..
Les données de géolocalisation sont accessibles via différentes sources. Traditionnellement, sur les sites Web, cela serait déterminé par l'adresse IP du visiteur. Il serait ensuite connecté à un service WHOIS et récupérerait l'adresse physique du visiteur à partir de ses informations whois. Récemment cependant, un moyen plus populaire et plus précis d’accéder à cette information est devenu courant; en utilisant la puce GPS intégrée d'un appareil. Ceux-ci se retrouvent dans la plupart des téléphones intelligents et des tablettes et sont responsables de la popularité croissante des services sensibles à la localisation que nous pourrions utiliser. Pensez à Foursquare ou à toute autre application pour laquelle vous pourriez vous "enregistrer".
Dans la spécification de l'API publiée par le W3C, il est indiqué:
Les agents d'utilisateur ne doivent pas envoyer d'informations de localisation à des sites Web sans l'autorisation expresse de l'utilisateur..
Avant qu'un appareil ou un navigateur puisse accéder aux données de géolocalisation d'un visiteur, celui-ci doit d'abord l'autoriser. Voici comment cela apparaît dans Google Chrome:
Maintenant, plus que jamais, les utilisateurs remarquent le contenu des informations que les sites Web stockent sur eux et vos utilisateurs devront avoir confiance en ce que vous utilisez leurs données. Informez-les de la raison pour laquelle vous avez besoin de ces informations et expliquez-leur en quoi cela leur sera utile pour créer une meilleure expérience en ligne..
Quand en utilisant un site Web ou une application de géolocalisation est une bonne pratique pour contrôler la quantité d'informations que vous partagez avec d'autres personnes. La plupart des applications et des services de partage de localisation offrent une sorte de contrôle de confidentialité, alors assurez-vous de l'utiliser et de ne jamais partager votre adresse personnelle..
Une fois que vous avez un site ou une application sensible à la localisation, vous êtes en mesure de fournir un contenu plus précis et plus approprié à vos visiteurs. Voyons comment la géolocalisation peut être utile.
Le géomarketing est un terme relativement nouveau et peut être décrit comme suit:
L'intégration de l'intelligence géographique dans divers aspects du marketing, y compris la vente et la distribution.
Bien qu’il s’agisse d’un nouveau terme, le principe même du géomarketing existe depuis longtemps. Facebook utilise cette approche depuis un certain temps maintenant. Facebook rassemblerait des données localisées (basées sur les adresses IP des utilisateurs), puis afficherait des publicités appropriées pour cette région géographique. Google et d'autres moteurs de recherche l'ont également utilisé et incluent des résultats de recherche basés sur la localisation pour leurs utilisateurs..
Ce ne sont pas seulement les spécialistes du marketing qui peuvent bénéficier des services de géolocalisation, mais les types créatifs l’ont également exploitée (probablement sans même s’en rendre compte). Les gens l'utilisent pour avoir accès à un grand nombre de personnes, toutes situées dans la même zone et ayant le même objectif "de faire bouger les choses". Cela peut aller des mobs flash aux routines de danse à grande échelle, en passant par la création de groupes communautaires pour des personnes partageant les mêmes intérêts..
Il a également été utilisé dans des situations telles que le tremblement de terre en Haïti en 2010, lorsque de grands groupes de citoyens ordinaires se sont rassemblés pour collecter de l'aide, grâce au pouvoir des réseaux sociaux et de la géolocalisation..
Récemment, un grand nombre de "sites d'offres" ont commencé à apparaître partout. C'est notamment Groupon, qui a été lancé en novembre 2008. Groupon propose à ses utilisateurs des services de proximité et chaque jour, le site propose un nombre prédéterminé d'offres pour chaque offre. Chaque article doit intéresser suffisamment d'utilisateurs pour s'inscrire à cette offre; en le faisant, ils le reçoivent, mais seulement s'il atteint le nombre de personnes prédéterminées.
Ce concept réduit les risques pour les détaillants et leur permet de vendre en vrac, faisant ainsi de ce concept un gagnant. La puissance de Groupon réside dans l'intégration étroite qu'il a avec l'emplacement de ses utilisateurs. En proposant à ses utilisateurs des offres et des offres locales, il est devenu l’un des sites de coupons les plus populaires et son format a été reproduit à plusieurs reprises..
Maintenant que vous en savez un peu plus sur la géolocalisation, examinons quelques exemples concrets..
Le site Web de Rocky Horror vous permet d’obtenir des séances pour le spectacle dans des lieux proches de vous. Il suffit d'aller sur le site et cliquez sur "Trouver ma position".
En utilisant la même technologie, Flickr montre ce que d’autres ont mis en ligne sur le site près de chez vous..
Mapumanetal a fait son apparition en 2006 lorsque le Department for Transport du Royaume-Uni a contacté la startup pour travailler avec les informations qu’ils détenaient sur les données de transport public. Ils décrivent ce qu’ils font chez Mapumental comme suit: "Nous créons des cartes qui aident les gens à prendre de meilleures décisions, plus rapidement." Il offre une variété d’outils et de services permettant de visualiser des données de voyage en temps réel..
Si vous n'avez pas encore implémenté la géolocalisation dans des sites Web ou des applications, la bonne nouvelle est que cela ne pourrait être plus simple. Dans ce tutoriel, je vais vous montrer comment vous pouvez localiser un utilisateur sur votre site Web ou votre application Web..
J'ai conçu cela pour que vous puissiez l'ajouter sur votre propre site web assez facilement. L’objectif est de permettre à l’utilisateur d’appuyer sur un bouton qui indiquera ensuite son emplacement sur le site avec l’aide de l’API Google Maps..
Nous commençons avec un wrapper pour centrer la conception. J'ai choisi de le faire à une largeur de 960 pixels, mais vous pouvez choisir la taille qui vous convient le mieux. Dans ce "wrapper", j'ai créé un div qui est l'endroit où la carte va s'asseoir une fois qu'elle a été générée. J'ai donné à ceci un identifiant de 'Carte'.
Dans la division "Map", j'ai ensuite une durée que j'ai donnée à une classe appelée "assistant". Ce sera un petit guide d'assistance qui expliquera à l'utilisateur ce qu'il doit faire. Cela peut sembler un peu inutile, mais il est toujours bon d’aider les utilisateurs lorsque cela est possible..
Nous avons ensuite une image de préchargement à laquelle j'ai attribué un identifiant de "préchargeur". Si vous cherchez des préchargeurs, vous pouvez consulter le site précontraint.net..
Voici ce que vous devriez avoir jusqu'à présent:
Cliquez sur le bouton ci-dessous pour afficher votre position sur la carte.
Après le div 'map', j'utilise un simple tag d'ancrage qui servira de bouton sur lequel l'utilisateur pourra cliquer. Cela a une classe de (oui vous l'avez deviné) 'bouton'.
Une fois que l'utilisateur a cliqué sur le bouton, nous souhaitons non seulement afficher la carte, mais il peut également s'avérer utile d'afficher l'emplacement, la longitude et la latitude de l'utilisateur. Pour cela, j'ai créé une div avec un ID de 'résultats' qui contient ensuite trois étendues chacune avec une classe pertinente. Pour le balisage c'est tout. Voici ce que tout le balisage devrait aimer:
Cliquez sur le bouton ci-dessous pour afficher votre position sur la carte.Trouver ma position
Le CSS est assez simple. Le voici en entier:
@charset "utf-8"; html background: # 222222; famille de polices: helvetica, arial, sans-serif; .wrapper width: 960px; marge: 0 auto; position: relative; #map position: relative; text-align: center; couleur: # 363535; text-transform: majuscule; largeur: 425px; hauteur: 350px; marge: 0 auto; marge supérieure: 20px; rembourrage: 5px; bordure: 1px noir uni; arrière-plan: # 474747; box-shadow: 0px 0px 3px 3px rgba (0, 0, 0, .3); #map .helper display: block; poids de police: gras; taille de police: 12px; couleur: RGB (54, 54, 54); largeur: 180px; hauteur de trait: 135%; marge: 0 auto; marge supérieure: 140px; #map #preloader position: absolute; en haut: 141px; à gauche: 190px; affichage: aucun; #map iframe border: 1px solid black; .button padding: 13px 40px; couleur de fond: # 00caa7; couleur: # 00caa7; border-radius: 3px; Couleur blanche; bloc de visualisation; texte-décoration: aucun; box-shadow: incrément 0px 1px 0px rgba (255, 255, 255, 0,3); largeur: 122px; marge: 0 auto; marge supérieure: 20px; .button: hover background-color: # 00b495 #results color: rgb (0, 180, 149); position: absolue; marge supérieure: 20px; text-align: center; hauteur de ligne: 23px; largeur: 100%;
Une chose à noter est que le préchargeur est le seul élément div qui est absolument positionné. Ceci est absolument positionné par rapport à la div 'carte'. Pour ce faire, assurez-vous que la position de la div "map" est définie sur relative. Cela permettra au préchargeur de se positionner par rapport à son parent par opposition au document entier..
Pour ses services MAP, Google propose une gamme d’API gratuites jusqu’à certaines limites d’utilisation. Après cela, des frais seront appliqués.
Heureusement, les deux services que nous allons utiliser sont entièrement gratuits. En fait, l'une des techniques n'utilise pas du tout l'API, mais l'utilisation de l'iframe de carte standard dans laquelle nous allons modifier certaines des valeurs que nous obtenons du navigateur de l'utilisateur..
Tout d'abord, dans certains >
Accentsconagua
var button = jQuery ('. bouton'); var preloader = jQuery ('# preloader'); var longitudediv = jQuery ('. longitude'); var lattitudediv = jQuery ('. lattitude'); var locationdiv = jQuery ('. location'); Cela fait, nous devons vérifier que le navigateur prend en charge l’API de géolocalisation. Nous pouvons tester cela avec la déclaration 'if' suivante.
if (navigator.geolocation) // Le navigateur le supporte, nous sommes prêts à partir! else alert ('Désolé, votre navigateur ne supporte pas l’API de géolocalisation'); Une fois que nous avons établi la prise en charge du navigateur, nous allons détecter le clic sur le bouton dans la partie où il est commenté "Le navigateur le prend en charge, nous sommes prêts à partir".
L'événement clic sur le bouton devrait ressembler à ceci:
button.click (fonction (e) e.preventDefault (); preloader.show (); navigator.geolocation.getCurrentPosition (exportPosition, errorPosition););
Une fois le bouton cliqué, le préchargeur s’affichera. La partie importante à regarder ici est la deuxième à la dernière ligne contenant «navigator». Cela signifie effectivement: "récupère l'emplacement des utilisateurs et, en cas de succès, envoie la position de l'emplacement à la fonction 'exportPosition', sinon envoie une erreur à la fonction errorPosition".
Alors sautons et créons ces fonctions. La fonction d'erreur est assez simple:
function errorPosition () alert ('Désolé, nous n'avons pas trouvé votre position'); pretext.show (); Dans la fonction ci-dessus, vous pouvez voir que la fonction va alerter et une erreur, puis afficher à nouveau le préchargeur.
Dans la fonction de réussite ci-dessous appelée "exportPosition", nous obtenons la latitude et la longitude fournies par l'API de géolocalisation et les définissons comme variables avec le même nom..
Une fois que nous les avons, nous pouvons les utiliser dans le code intégré iframe de Google Maps. Nous pouvons également les utiliser dans les plages qui affichent la longitude et la latitude à l'utilisateur. Voici à quoi ça ressemble:
function exportPosition (position) // Récupère les propriétés de géolocalisation et les définit en tant que variables latitude = position.coords.latitude; longitude = position.coords.longitude; // Insère l'iframe de google maps et modifie l'emplacement à l'aide des variables renvoyées par l'API jQuery ('# map'). Html (''); longitudediv.html ('Longitude:' + longitude); lattitudediv.html ('Latitude:' + latitude); L'important est l'url de l'iframe. Dans l'URL, j'insère les variables '+ latitude +' et '+ longitude +'. De près, cela ressemble à:
Ceci insérera le MAP dans le div '#map' et révélera également la longitude et la latitude à l'utilisateur. Il y a aussi une dernière chose que nous aimerions savoir. ceci étant le nom de l'emplacement de l'utilisateur. Pour ce faire, nous devons appeler l'API Google Maps via AJAX. Nous ajoutons cette fonction AJAX à la fonction 'exportPosition'. Cela ressemble à:
// Appelez l'API Google Maps pour obtenir le nom de l'emplacement jQuery.ajax (url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+', '+ longitude +' & sensor = true ', tapez:' POST ', dataType:' json ', success: function (data) // Si l'opération réussit, ajoutez les données à' location 'div locationdiv.html (' Location: '+ data.results [0] .address_components [2] .nom_long);, erreur: fonction (xhr, textStatus, errorThrown) errorPosition ();); Dans la réponse de réussite, nous prenons le nom de l'emplacement reçu de l'appel AJAX et l'ajoutons à la plage ".location". Si, pour une raison quelconque, il y a une erreur dans cet appel, il exécutera la fonction 'errorPosition' et avertira l'utilisateur qu'il ne peut pas trouver son emplacement..
L'API de géolocalisation fonctionne dans tous les navigateurs modernes. Cependant, certaines versions de Safari utilisent CoreLocation pour obtenir des données de géolocalisation, cela signifie que vous devez être connecté à Internet via WIFI. Si vous êtes connecté via Ethernet ou similaire, vous pouvez avoir des problèmes pour collecter les données de localisation.
Il convient également de noter que ces fichiers de didacticiel doivent être téléchargés sur un serveur Web en direct pour fonctionner et ne fonctionneront pas sur localhost..
J'espère que vous avez maintenant une meilleure compréhension de l'API de géolocalisation, de son fonctionnement et de la manière dont vous pouvez l'implémenter avec très peu d'effort. En utilisant la géolocalisation de manière créative et efficace, vous devriez maintenant être en mesure de fournir une meilleure expérience utilisateur à vos utilisateurs..
Avez-vous implémenté l'API de géolocalisation sur les sites sur lesquels vous avez travaillé pour encourager une meilleure expérience utilisateur? L'avez-vous vu utilisé de manière cool et créative? Faites-nous savoir dans les commentaires ci-dessous.
