11.2 Comment créer une page d'accueil ergonomique

Souvent, la page d'accueil d'un site Web est la première page visitée par les internautes. Il s'agit de la première impression qu'auront les internautes du site Web. Il est primordial de bien la soigner et surtout de la rendre ergonomique.

Voici quelques principes à respecter :

• Le nom de la page d'accueil peut être prescrit selon le langage de programmation utilisé. Par exemple, en PHP vanille, elle s'appellera index.php.
• Il ne doit pas y avoir de page intermédiaire entre l'arrivée sur le site et l'accès à la page d'accueil. On évitera donc les pages du genre « Choisissez votre langue » et on présentera directement une page d'accueil avec du contenu.
• La page d'accueil joue deux rôles : navigation et information. Elle doit donc donner une information de base et faciliter l'accès aux informations que l'internaute est susceptible de rechercher.
• La page d'accueil doit présenter les informations essentielles suivantes :
  • Nom de l'entreprise (et possiblement logo)
  • Une ou deux courtes phrases indiquant ce que fait le site Web. Ces phrases aideront les robots à bien indexer votre page d'accueil.
• Il doit être possible d'accéder facilement aux éléments fondamentaux du site Web à partir d'un seul clic sur la page d'accueil. Les options de menu les plus susceptibles d'être utilisées pourraient, par exemple, être reprises dans un encadré présentant un lien ou un bouton avec une courte explication. On parlera alors de « remonter » ou de « mettre en avant » les éléments fondamentaux.
• La page d'accueil ne doit pas être surchargée. Elle doit donc présenter les points essentiels du site Web.
• Idéalement, l'information essentielle doit être visible au-dessus d'une ligne invisible qu'on appellera ligne de flotttaison (en anglais : fold). L'espace situé au-dessus de la ligne de flottaison (above the fold) est donc la partie de la page que la majorité des internautes verront sans faire défiler leur écran. Vu la diversité de résolutions d'écrans et d'appareils (ordinateur, tablette, téléphone), la position exacte de la ligne de flottaison est difficile à évaluer. Alors autant utliser une valeur sure : 570px. Certains développeurs préfèrent travailler avec une valeur plus étendue : 820px.

  

Bonnes pratiques

Selon Opquast (Open Quality Standards), voici quelques bonnes pratiques concernant la page d'accueil¹ :

• La page d'accueil expose la nature des contenus et services proposés.
• Si le site est réservé ou destiné à un public spécifique, ce public est mentionné au moins sur la page d'accueil.
• Il est possible de revenir à la page d'accueil depuis toutes les pages.

Emplacement des éléments sur la page d'accueil

Pour augmenter l'utilisabilité de la page d'accueil, voici l'emplacement suggéré de ses différents éléments² :

• logo : coin supérieur gauche
• slogan de l'entreprise : sous le logo ou à sa droite
• zone de recherche : coin supérieur droit
• menu principal : si horizontal : en haut du site; si vertical : à gauche du site, sous le logo
• courte description du site Web : premier contenu présenté dans le corps de la page
• liens utilitaires (plan du site, contact, changement de langue, etc.) : coin supérieur droit et/ou pied de page
• remontées de contenus : corps de la page

Voici un exemple simpliste qui illustre la disposition des éléments.

Pour plus d'information

« L’ergonomie Web vue par les internautes ». Simple Web. http://www.simpleweb.fr/tag/principes-ergonomiques/

« Les sites Web doivent apprendre à accueillir des visiteurs de plus en plus pressés ». Le journal du Net. http://www.journaldunet.com/itws/it_nielsen.shtml

« Ligne de flottaison (Above the Fold) ». Zooka. https://zooka.fr/cro/ligne-de-flottaison/

« Comment augmenter le taux de conversion sur votre site web ». Web rank info. http://www.webrankinfo.com/dossiers/emarketing/taux-conversion

Source

1. « 4 bonnes pratiques de la qualité web correspondent à votre requête "accueil" ». Opquast. http://checklists.opquast.com/opquastv2?q=accueil

2. « Ergonomie de la page d'accueil ». ergolab. http://www.ergolab.net/articles/ergonomie-page-accueil.php