Vous connaissez ViaMichelin ? Nous en avons construit un meilleur.
Pendant les deux derniers mois, j’ai travaillé à la reconstruction de l’application web HAKmap. Nous avons catapulté l’ancienne application web de navigation dans l’ère moderne des applications JavaScript et du responsive web design, et assuré la prise en charge de trois moteurs cartographiques différents.
HAKmap est une carte interactive de la Croatie, conçue pour aider les conducteurs, notamment les touristes, à planifier leur trajet, à trouver des lieux d’intérêt comme les stations-service, les centres commerciaux ou les bureaux de poste, et à obtenir des informations actualisées sur la situation du trafic, les travaux routiers ou la météo. Pensez à un ViaMichelin plus riche en fonctionnalités et plus beau, mais conçu pour fonctionner au mieux à l’intérieur des frontières croates.
Quoi de nouveau?
Comme prévu, nous nous sommes concentrés sur les choses qui manquaient dans l’ancienne application et que les utilisateurs demandaient. Voici quelques-unes des principales nouvelles fonctionnalités :
- Une meilleure expérience utilisateur et une interface plus intuitive
- Un design réactif et la prise en charge des appareils mobiles
- Une fonctionnalité de planification d’itinéraire rapide et solide (avec de nouvelles options de transport comme les ferry-boats)
- Une fonction de recherche intelligente
- La prise en charge de plusieurs fournisseurs de cartes
- Des applications mobiles natives pour iOS, Android et Windows Phone
Le nettoyage du fouillis visuel
Bien que l’ancienne application fonctionnait bien sur un navigateur de bureau, elle avait désespérément besoin d’un rafraîchissement visuel et d’un support pour les navigateurs mobiles. En outre, au fil du temps, l’application a accumulé une grande quantité de dette technique, au point qu’il était presque impossible de mettre en œuvre des mises à jour de fonctionnalités.
L’ancienne interface utilisateur était trop encombrante, distrayant l’utilisateur de la carte, et encombrée de trop d’étiquettes et d’options. Nous avons essayé de simplifier les éléments de l’interface et de les afficher aux utilisateurs uniquement lorsqu’ils veulent vraiment les utiliser.
Nous avons utilisé des barres latérales coulissantes et des options regroupées selon leur fonctionnalité. Par exemple, tous les paramètres de l’application sont regroupés et se trouvent dans la barre latérale « Paramètres », qui est la même sur les appareils de bureau et mobiles.
Optimiser la recherche
Nous avons optimisé l’UX pour les deux utilisations les plus courantes des applications cartographiques :
- L’utilisateur veut trouver un certain lieu ou un point d’intérêt sur la carte
- L’utilisateur veut planifier son voyage et trouver le meilleur itinéraire entre les arrêts
Lorsqu’un utilisateur commence à taper dans la barre de recherche, il se voit présenter des suggestions de recherche générées à partir des résultats de deux requêtes – vers le fournisseur de cartes (nous donnant tous les lieux et emplacements) et vers la base de données Points d’intérêt.
Fonctionnalité de recherche intelligente – la recherche de ‘Rijeka’ nous donne à la fois la ville et les POI ayant Rijeka dans leur nom
Il y a une autre fonctionnalité pratique ici – si vous tapez le mot clé « to » dans la barre de recherche, il reconnaît automatiquement que vous essayez de trouver un itinéraire entre deux points, par exemple : « Zagreb à Rijeka ».
Planification d’itinéraire
L’une des grandes caractéristiques de HAKmap est la possibilité de planifier un itinéraire pour votre voyage et d’obtenir des informations supplémentaires sur votre voyage. La carte vous donnera les étapes exactes et des conseils d’itinéraire, vous indiquera la longueur de votre itinéraire, le temps qu’il vous faudra pour aller du début à la fin et les dépenses totales, y compris votre consommation de carburant estimée et les prix des péages.
En ce qui concerne les prix des péages – une fonctionnalité assez unique est l’option de vérifier les coûts actualisés des péages lorsque vous voyagez en Croatie. Cela inclut les péages d’autoroute ainsi que les prix des billets de ferry.
En outre, vous pouvez rechercher plus de 50 000 POI (points d’intérêt) en Croatie et trouver des informations supplémentaires à leur sujet. Vous ne pouvez pas trouver des informations détaillées de ce type sur un autre service web de cartes ou sur un appareil GPS autonome.
Multiples fournisseurs de cartes
L’ancienne carte utilisait Mireo comme seul fournisseur de cartes, donc dans la nouvelle version, nous avons voulu ajouter une innovation intéressante – multiples fournisseurs de cartes.
Il y a une carte pour tous les goûts – Mireo, Google et Bing map, respectivement.
Nous avons décidé de prendre en charge trois moteurs de cartes différents : Mireo, Google et Bing maps, mais d’autres moteurs peuvent être facilement ajoutés.
L’idée était de rendre HAKmap indépendant du fournisseur de cartes sous-jacent. Pour cela, nous avons dû créer une abstraction solide de la couche cartographique de base. Comme chaque moteur cartographique a son propre mode de fonctionnement et fournit différentes fonctionnalités de différentes manières, cela a été une tâche difficile du point de vue de la programmation.
Applications natives pour les plateformes mobiles
La même expérience riche est également disponible sur mobile via les applications natives
Le principal inconvénient de toute application web est que l’utilisateur doit ouvrir le navigateur pour l’exécuter. Sur les téléphones mobiles, les utilisateurs ont davantage l’habitude de tapoter sur les icônes des applications. C’est pourquoi nous avons créé des applications mobiles qui accèdent à la même application web, mais l’emballent comme une application mobile native, et que nous pouvons publier sur divers app stores.
La plateforme Cordova nous a aidés à packager notre application web pour plusieurs plateformes et à y parvenir avec un minimum d’efforts.
Une application développée dans des technologies modernes
HAKmap est une application JavaScript purement côté client dont les données sont fournies par l’API RESTful HAK. Elle est construite sur le framework Backbone.js qui nous a permis de créer une application frontale modulaire et extensible. Cela permet une maintenance et des mises à jour futures plus faciles, ce qui est très important pour ce type de projet qui doit être développé en continu.
Ce n’est que la première itération de la nouvelle HAKmap. Avec un peu de chance, nous ajouterons de nombreuses autres fonctionnalités sympas à l’avenir pour offrir une expérience encore meilleure à nos utilisateurs.
Voyager à Paris avec via michelin , suivez le lien via michelin itinéraire
