C’est quoi une bonne homepage ?

Un post qui traine depuis un peu dans mon admin… Je le publie comme Work in Progress. Vos commentaires sont évidemment bienvenus pour faire avancer le débat…

Vaste programme, et point crucial, le design, l’ergonomie et le contenu d’une page d’accueil sont hyper-importants, c’est même la seule chance,  d’une durée d’une a deux secondes dans bien des cas, de faire une impression positive.

L’enjeu : la rétention du visiteur, la captation, peu de taux de rebond comme dirait Google Analytics. En gros, ce qui va faire que le visiteur va aller plus loin dans le site et donc accéder à l’information que vous souhaitez lui faire parvenir et éventuellement passer à l’acte d’achat, à l’abonnement ou à la prise de contact selon les cas.

Et oui, cette semaine je vous propose le brulant : C’est quoi une bonne homepage ?

Vu qu’il y a autant de réponse que de homepages, j’accepte encore une fois volontiers critiques et commentaires constructifs. L’idée ici est de donner un maximum d’éléments pour répondre correctement à cette question cruciale.

Entre la home de Google et celle de Yahoo !, entre la home du site de présentation de la petite entreprise et celle de la boutique en ligne, quels sont les points communs et différences ? Quels sont les partis pris et les incontournables ?

L’identité
C’est sans doute une des seules constantes et c’est assez logique en un sens, la page d’accueil bénéficie le plus souvent d’une identité renforcée, soit par l’utilisation d’un visuel ou d’un logo plus important, soit par le placement plus central de l’identité au sein de la page. On accueil le visiteur en déclinant son identité.

Attention, cependant à ne pas faire de cette présentation la seule raison d’être de la page d’accueil, à la manière des intros flash systématiques d’avant 2000. Cette pratique peut avoir du sens dans certains cas isolés, souvent pour de l’évènementiel ou de l’image pure, mais est généralement à bannir pour tous les sites de contenus ou boutiques.

Il existe cependant des manières de contourner cette règle en réalisant une présentation courte (5 secondes) sur une page comportant des entrées cachées vers toutes les rubriques du site (Rue du commerce est un bon exemple en la matière avec sa promo suivie de liens non visibles). D’une manière générale, l’intro flash et le fameux bouton “passer l’intro” agacent le visiteur plus qu’elles ne proposent une réelle valeur ajouté.

Les entrées
La page d’accueil c’est aussi la page qui permet au visiteur d’accéder à l’ensemble du site. Le push (encart) catégorie ou produit, visuel et impactant permet d’entrer rapidement dans le vif du sujet grâce à des morceaux choisis.

Dans certains cas, le blog notamment, ce sont simplement les derniers articles classées par date décroissante. Dans le cas d’une boutique ou pourra pousser les best sellers ou les promotions, dans le cas d’un site de présentation les activités phares de la société.

L’idée générale est de pousser ce que la majorité des visiteurs vient chercher pour retenir son attention avec un premier “clic facile”. Un utilisateur qui clique ne rebondit pas, c’est un premier pas dans le site via une découverte simple.

Le menu
Exhaustif ou non, le débat cours. Certains sont adeptes de la “règle des 3 clics”, qui veut que tous les contenus soient accessibles en 3 clics, certains non. Quand c’est faisable je dirais que c’est globalement une bonne idée.

Plusieurs possibilités pour arriver à ses fins :

- Le menu déroulant : Grand classique, aujourd’hui bien maitrisé techniquement presque partout, il permet une navigation type plan du site avec menu et sous-menus déroulants.

Attention cependant à bien réfléchir l’organisation et à s’assurer que le déroulement des menus va bien se comporter. Un utilisateur qui voit du déroulant s’attend à trouver ce qu’il cherche dans le déroulant. Si ce n’est pas le cas, il n’ira probablement pas plus loin. Attention aussi aux multiples déroulants tous azimuts dans lesquels on ne se retrouve plus. Exit aussi les menus à l’architecture obscure remplie de termes seulement compris par les salariés de l’entreprise ou les concepts marketing de haut vol utilisés par 3 cabinets parisiens spécialisés.

Un menu déroulant efficace c’est un niveau déroulant avec des mots compréhensibles par votre voisin de palier grabataire.

- Le menu géant : on passe sur une catégorie et apparait un calque qui rempli la moitié de l’écran avec le plan complet de la catégorie. Certains sont fans, d’autres moins. Un avantage non négligeable est l’exhaustivité en un coup d’oeil. Bonne intégration chez Kelkoo par exemple. A réserver aux sites qui ont énormément de contenus différents auxquels il faut accéder.

- Le menu hyper-simple : A la Apple, quelques catégories très simples dans lesquels le détail sera développé. Message : Apple c’est simple…
Note : option assez en vogue, le menu simple avec les catégories ou applications principales et le “More” qui est un menu déroulant vers plus de choses. On voit même quelque fois un “Even more” à la fin de cette liste déroulante pour accéder à une page avec le développé complet. Voir Google ou Techcrunch.

- Le menu pleine page : A la Oracle, tout le plan du site sur la home sous le header. Message : Oracle c’est plein d’applications super compliquées qui font plein de trucs obscures que vous allez nous laisser gérer…

Globalement le menu donne une bonne idée de ce qu’on va trouver et offre immédiatement une image rapide de l’organisation de la société. Je dirais : “simple is beautiful”… et compréhensible par vos visiteurs.

La taille
La taille de la home à énormément d’importance, de même que la largeur du site, et jusqu’à il n’y a pas si longtemps, on raisonnait encore en 800×600. Aujourd’hui on résonne en 1024×768. Ca sonne un peu comme une loi mais c’est vrai presque partout.

Pourquoi ? Pratiquement toutes les entreprises on acheté majoritairement ces 5 dernières années du 1024×768, même pendant l’apparition des 16/10èmes considérés comme “loisirs” et donc boudés par les DSI. Encore aujourd’hui près de 40% du trafic de la plupart des sites pros est encore en 1024×768.

On regarde donc ses stats et on agit en conséquence. En dessous de 15 à 20% du trafic on pourra réfléchir à passer à la taille supérieure. Certains sites spécialisés gamers ou graphistes peuvent se passer de cette contrainte mais c’est à étudier avec attention.

1024×768, en retirant barre de défilement et menus etc… c’est 1000px de large grand max, je préfère retenir 980px et 600px de haut, 620 si on veut jouer avec les limites. Dans 620px de haut on doit donc pouvoir mettre les infos principales qui seront vues sans utiliser la barre de défilement verticale.

Apple (encore) fait dans ses catégories une “double home”, c’est à dire menu+ pushs principaux dans le premier écran, pushs secondaires et  plan du site dans le deuxième, accesible en descendant.

Cette contrainte de hauteur n’est pas vraiment applicable aux blogs et sites d’informations, qui mettent en général leurs derniers articles complets ou une liste d’extraits. On s’attend à scroller sur un site de news et sur 20 minutes on s’attend même a scroller comme un dingue

Le footer
Le footer est souvent sous-exploité, notamment sur la home. Or sur une home on a souvent un nombre restreint de liens, donc d’entrées vers le reste du site pour les moteurs.

Une bonne pratique, souvent utilisée par les blogs, est le gros footer plein de liens, voir avec un plan du site complet, qui permet de faire suffisamment de liens internes pour référencer les différentes pages du site.

SEO
SEO = Search Engine Optimisation = Optimiser son site pour les moteurs.
Donc mettre des images partout sur la home c’est très beau, mais attention à bien faire en sorte de transformer lors de l’intégration toutes ces images en éléments lisibles et référencés par les moteurs.

Les liens de la home seront traduits en catégories et le titre en introduction pour le référencement chez Google et autres. Pensez à bien utiliser les <h1> et <h2> pour architecturer le contenu comme il doit apparaitre dans les moteurs.

De plus il est important de mettre du texte lisible quelque part, plutôt en début de page pour présenter le contenu de la home en vrai texte avec des mots dedans…

Conclusion
Que votre visiteur soit un abonné, un nouveau visiteur, un expert dans votre domaine, un quidam, un moteur de recherche ou un investisseur, on doit répondre à leurs attentes par une belle porte vers l’ensemble du site. Simple, efficace, sans détours.

Il existe des cas particuliers, comme partout, qui permettent de passer outre certaines règles car les considérations qu’elles englobent ne sont pas nécessaires, souvent pour les sites d’image pure, ou les blogs dans certaines mesures…

Quels sont les homepages que vous trouvez fantastiques et pourquoi ? Quels sont les cas particuliers qui éclaboussent ces principes sans arrière pensée ? Vous avez la parole.