Ni humoristique ni hérétique, heuristique vient du verbe grec et signifie «trouver».

Encore appelé MindMap® ou carte heuristique, ce système de navigation présente à l’internaute l’étendu du site en un clin d’oeil. Voir aussi 012 Carte conceptuelle.

Exemple sur www.petillant.com

Pour qui ? Pour quoi ? Particulièrement colorée et d’aspect ludique, cette navigation est souvent adaptée aux sites « tutoriels » ou aux sites pour les enfants.

Une carte heuristique est une manière de représenter et de lier des idées entre elles. La carte heuristique, en anglais Mind Maps®, est utilisée pour innover, préparer des réunions, des documents, mémoriser des informations, aider un enfant à apprendre ses leçons, faire le résumé d’un livre…

Une carte heuristique est une représentation du contenu du site sous forme de schéma. C’est un arbre circulaire dont chaque branche représente une catégorie. Chaque catégorie peut avoir des sous-catégories.

Note accessibilité « La nature schématique de ce type de présentation est sans doute une des mieux adaptée aux personnes ayant un handicap cognitif. En revanche, elle ne l’est pas pour des personnes ayant une vision parcellaire ou linéaire de la page. » Tanguy Lohéac, Expert en accessibilité, metro-connexion.org

Chaque branche utilise une variété de couleurs et d’images. Cela permet au cerveau gauche (cerveau logique) et au cerveau droit (cerveau capable de reconnaître un visage) de collaborer et ainsi d’aider à l’apprentissage.

Une carte heuristique est généralement présentée au format paysage. L’ensemble du schéma doit se voir à l’écran sans avoir à faire utiliser les barres de défilement. Si le schéma est affiché en haut de page, assurez-vous que l’on voie le début du contenu de la page. Sinon l’internaute ne verra pas le changement sur les pages. Exemple pour rester compatible avec un écran en 800×600, votre carte heuristique devra faire moins de 500×760 pixels.

Les cartes heuristiques doivent contenir un mot clé par branche. Associez à ces motsclés une image-clé. Les anglais ont un dicton « une image vaut 1000 mots », en anglais « an image is worth a thousand words ». Selon la méthode de Tony Buzan, chercheur anglais qui a développé cette dernière dans les années 70, les branches doivent être courbées, évitez les branches anguleuses moins attractives selon ses études du cerveau humain.

Les cartes heuristiques sont particulièrement adaptées aux plans de site. La taille disponible à l’écran n’étant pas infinie, cette navigation peut vous limiter en nombre d’éléments affichables à l’écran.

Pour quels types de sites la carte heuristique est-elle adaptée ? « J’ai sélectionné cette navigation car j’aime trouver rapidement et sur une seule ligne les principales informations concernant un site. Sans avoir à naviguer sur de multiples menus dans lesquels je me perds. » Denis REBAUD, www.rebaud.fr

Côté technique Il existe des logiciels qui vous permettront de facilement créer des schémas heuristiques. Voir mindmanager.com ou conceptdraw.com… Certains designers préfèrent utiliser des logiciels de création graphique tel qu’Illustrator ® pour créer la carte heuristique.

Pensez lorsque vous implémentez ce type de navigation en Flash à :

répéter les liens compris dans le Flash (si Flash, il y a) en HTML

laisser allumées les catégories en cours de consultation

Ce type de navigation convient aux sites dont le contenu change peu. La mise à jour de la carte ne pouvant pas encore être totalement automatisée. L’opération de mise à jour peut-être assez fastidieuse car elle fait intervenir des compétences graphiques et techniques.
Exemple sur www.rebaud.fr

Si vous implémentez en HTML une image map, afin de la garder accessible, veillez à:

ordonner de manière logique chacune des zones de l’image map dans le code.

déclarer les zones de l’image map juste après la déclaration de l’image map elle même.

à chaque zone de l’image map de lui attribuer un élément ALT.

ce que tous les textes affichés sur l’image sont aussi accessibles sous forme de texte dans le code.

que les couleurs utilisées dans l’image sont assez contrastées.

utiliser les balises TITLE pour afficher une description de la catégorie afin qu’elles s’affichent en infos bulles au survol de la souris.