Améliorer l’expérience de navigation de votre site avec les cartes intelligentes

Tony @Wemap
Wemap
Published in
4 min readOct 23, 2017

--

(Manuel d’intégration de cartes Wemap)

De plus en plus de cartes interactives fleurissent sur les sites d’actualités, de voyage ou encore sur les sites événementiels. Celles-ci sont souvent intégrées au sein d’un article ; elles permettent d’enrichir les contenus et de proposer une nouvelle expérience de l’information.

Les gens cherchent de plus en plus à savoir ce qu’il se passe autour d’eux, qu’il s’agisse d’actualités ou d’activités à faire. C’est pourquoi intégrer des cartes intelligentes Wemap à votre site vous permettra d’améliorer le taux d’engagement de vos visiteurs de manière significative.

Comment optimiser l’intégration des cartes Wemap sur votre site ?

Le Ministère de la Culture et de la Communication a ainsi doublé son nombre de visites sur leurs différents sites d’événements, plus de deux millions au total. Les visiteurs ont en moyenne passé 4 minutes sur chaque carte, le taux d’engagement a fortement augmenté.

Aujourd’hui, plus de 50% de la navigation web se fait sur mobile, mais comment gérer l’intégration de cartes au sein de votre site dans un environnement mobile ?

  • 1) sur des pages dédiées :
“Rendez-vous aux Jardins” par le Ministère de la Culture et de la Communication
  • 2) sur des pages hostées par Wemap :
Ecran réalisé pour Le Figaroscope
  • 3) via l’activation de l’option “Cliquer pour afficher en plein écran” gérable depuis la plateforme professionnelle Wemap Pro (surlignée en jaune) :
“Les Journées Européennes du Patrimoine” par le Ministère de la Culture et de la Communication
Tableau des options de cartes sur la plateforme Wemap Pro (https://pro.getwemap.com)

7 manières de présenter les cartes de manière plaisante sur votre site web

  1. Logique “Autour de moi” avec localisation automatique de l’utilisateur, lui permettant de découvrir les points d’intérêt situés près de lui.
Gauche : Carte Le Figaroscope Restaurants | Droite : Carte Travel by Air France sur Mobile (iOS).

2. Article avec icône et texte qui indique qu’il s’agit d’une carte interactive.

Proposition de navigation pour le Figaroscope.fr
Proposition de navigation pour Ouest-France.fr

3. Bannière avec photo et titre qui mène à la carte au clic.

Proposition de navigation pour le Figaroscope.fr
Proposition de navigation pour Ouest-France.fr

4. Sous forme de PNG généré automatiquement via notre plateforme pro, afin de l’inclure par exemple dans une newsletter.

Sur la plateforme Wemap Pro, il est possible de générer des PNG pendant la création ou l’édition d’une carte. (https://pro.getwemap.com)

5. Un aperçu de carte pour indiquer qu’une carte intelligente va s’afficher au clic.

Guide de voyage pour la ville de Pau sur le site Travel by Air France

6. Création d’une application dédiée à partir d’une seule carte intelligente (par exemple, pour un événement tel que la Fête de la Musique) :

Application créée pour le Ministère de la Culture et de la Communication à l’occasion de la Fête de la Musique

7. Logique Google maps

4 conseils pour un affichage optimal de vos cartes intelligentes

  1. Utilisez l’iframe plutôt que la balise script pour l’intégration d’une carte si vous rencontrez des problèmes de CSS dans l’affichage de la carte.
  2. Lorsqu’une carte n’a pas la bonne taille cela peut-être dû à un placement du snippet dans la mauvaise <div> de votre site web.
  3. Passer la carte en largeur 100% au lieu d’utiliser les px pour éviter que la carte ne dépasse de vos colonnes sur votre site :

4. La taille minimale conseillée pour afficher les cartes sur un site est de 400x500 px. En-dessous de ces valeurs, l’affichage ne pourra pas être optimal, ainsi que l’expérience de navigation.

Plus d’infos

Si vous souhaitez consulter notre guide d’intégration pour de plus amples informations sur les différentes façons t’intégrer vos cartes intelligentes dans les pages de votre site et ainsi améliorer la navigation entre celles-ci, contactez-nous par mail à l’adresse contact@getwemap.com, nous vous répondrons sous 48H.

--

--

Editor for

Co-founder. Building smart maps. Working to solve the local information discovery/sharing experience.