Accueil » fr » Etudes de Cas » Ardèche verte
Retour à la liste

Ardèche verte

Le contexte

L’Ardèche verte avait besoin d’étendre la promotion de son offre touristique en continu. Elle s’est donc munie d’un site web multi-support lisible sur les bornes tactiles, les Smartphones ainsi que sur les navigateurs web classiques. Le tout développé en Responsive webdesign afin que l’ergonomie de l’interface s’adapte au support de navigation de l’internaute. Découvrez comment nous avons procédé pour réaliser ce projet.

Phase 1

Wireframe

Du papier, des feutres, des ciseaux...

Nous imaginons les bases de la réalisation au moyen de croquis. Nous entamons des réflexions sur les interactions possibles entre l’utilisateur et l'interface. Nous dessinons et redessinons la structure des menus et des pages, nous révisons les modes de navigation. Le résultat ? Beaucoup de pistes explorées, beaucoup de choix à faire et pas mal de papier froissé.


Phase 2

Prototype

Un Mac + Keynote

La mise au propre des wireframes est faite sur ordinateur, puis animée à l’aide du logiciel keynote. Nous recensons les transitions, composants et intitulés exacts de l’application finale. Cette présentation permet de bien comprendre l’application dans son ensemble. Elle est destinée au client, mais elle est également utile pour le développeur et le designer de l’application.

Phase 3

Design

Photoshop, Spotify et stylet sont les meilleurs amis du designer ! C’est ici que l’on dessine les icones et que l’on choisit les couleurs et les textures. Chez NOE interactive, on aime bien les PSD très ordonnés, avec des calques bien nommés. Pas de « Calque 107 copie » !

Pictogrammes


Palette de couleurs

#403523
Texture
#7dae00
#f3a41b

Fonctionnalités

HTML5, CSS3, jQuery... Les meilleures technologies pour un site aux fonctionnalités optimisées


Géolocalisation

Toute l’interface est basée sur une carte interactive. Du javascript, de l’HTML5 et Google Maps permettent de localiser le positionnement de l’utilisateur et lui proposer du contenu pertinent à proximité.


Clustering marker

En évitant qu’une multitude de points n’obstrue la lecture de la carte, le clustering marker permet de regrouper les points d’intérêts et d’indiquer leur nombre dans des zones géolocalisées.


Météo

Selon le lieu de consultation, la météo est affichée en direct sur la carte interactive.


Distance/Calcul d’itinéraire

L’utilisateur a la possibilité de calculer l’itinéraire qui le sépare d’un point d’intérêt. Le dessin de l’itinéraire, la distance, la durée et les détails du parcours apparaissent directement sur l’interface.

Favoris

Si le visiteur le souhaite, il peut constituer un carnet de voyage composé de ses points d’intérêt favoris. Il prépare son voyage avant l’heure et reçoit son carnet de voyage par mail.

Phase 4

Mise en place

Aujourd’hui, une dizaine de bornes tactiles sont installées en vitrine des offices de tourisme et sur les sites remarquables de l’Ardèche verte.

Partager