La conception de l’arborescence est issue d’une réflexion des différents acteurs du projet Internet. Elle se présente sous la forme d’un schéma qui reprend toutes les parties du site Internet. C’est un élément indispensable de l’UX.

Avec les systèmes de gestion de contenu, cette phase est primordiale pour lutter contre le duplicate content, lourdement sanctionné par les moteurs de recherche mais aussi pour éviter les pages trop profondes et les contenus trop similaires.

L’arborescence

Elle correspond a l’organisation des contenus dans l’architecture du site Internet.

L’arborescence est généralement présentée dans le plan du site, bien que celui-ci ne reprenne pas obligatoirement l’ensemble des contenus.

Les pages ne doivent pas être trop profondes pour faciliter le travail des robots d’indexation des moteurs de recherche.

Elle est directement liée à la réécriture des URLs qui rendent ces URLs lisibles pour les internautes.

Chaque page doit être unique et doit disposer d’une seul et unique URLs !

On retrouve l’expression de l’arborescence dans le Fil d’Ariane ou breadcrumb.

La navigation

La ou les navigation(s) ont pour objectif d’aider les visiteurs à parcourir le site à la recherche des contenus.

Ces barres de navigation sont le plus souvent présentent sur l’ensemble d’un site ou sur une section et facilitent le parcours des internautes dans les contenus plus profonds.

Elle doit être le reflet de ce que recherchent les internautes et facilement identifiable.

Chaque barre ou menu présente un univers interne du site web.

Le mélange des genre est à éviter, il faut distinguer les liens génériques, des liens liés à un espace membre ou client, les liens institutionnels.

Face à l’impact important des technologies mobiles, il est important d’avoir des barres de navigation efficaces, contenant les liens essentiels.

Il ne faut pas oublier que ces liens étant sidewide, un trop grand nombre peut perdre les visiteurs et avoir un impact négatif sur votre référencement.

Le positionnement des barres de navigation sera défini par les wireframes et leur aspect par les mockups.

Exemples

Arborescence

  • Page d’accueil
    • Ma page

Navigation

  • Accueil
  • Ma Page

URL

  • (http://)mon-site.fr
  • (http://)mon-site.fr/ma-page

Fil d’ariane

  • Accueil
  • Accueil > Ma Page