Voilà plus de 15 ans que travaille dans le milieu de l’internet, et presque autant d’années à concevoir des sites web.  S’il y a bien une leçon que j’ai retenue au cours de ces années, c’est que la conception d’une page d’accueil est un exercice très périlleux, et pourtant, c’est ce que les clients demandent à voir en premier. C’est un peu comme si vous demandiez à un l’architecte qui va construire votre maison si vous pouviez rentrer dans le salon avant même d’avoir vu les plans. Pour en avoir discuté longuement autour de moi, je sais que je ne suis pas le seul à éprouver de la frustration à ce sujet.

La frustration vient du fait que la page d’accueil d’un site est la résultante d’un long travail de conception, généralement séquentiel. Une page d’accueil ne s’invente pas, elle est fonction de ce que le site va proposer en matière de contenus et fonctionnalités. Commencer le travail de conception par la page d’accueil est à mon avis un non-sens, c’est clairement mettre la charrue avant les boeufs.

Il y a ainsi un certain nombre de tâches à réaliser en amont et des livrables à produire :

• Une liste priorisée des objectifs et des besoins ;
• Un cahier d’exigences et de contraintes ;
• Une description des utilisateurs types (personnas) ;
• Un inventaire des contenus et fonctionnalités nécessaires (comparé à ce l’existant) ;
• Un plan du site et des flux de navigation ;
• Des cas .

Cette liste n’est pas exhaustive, mais elle vous donne une bonne vision du travail préparatoire nécessaire AVANT de se lancer dans le travail de conception. Sans vouloir rentrer dans une polémique sur les méthodologies de conception / gestion de projet web, il y a selon moi trois aspects de la phase de conception :

• La conception fonctionnelle avec notamment les cas d’utilisation pour les fonctionnalités complexes ;
• La conception ergonomique portant sur le système de navigation (plan du site, parcours clients) et les interfaces (storyboards) ;
• La conception graphique qui passe par la création d’une charte.

C’est bien l’empilement de ces trois couches (la logique “métier”, l’interface et la présentation) qui compose les écrans de votre site ou application en ligne. Ces couches nécessitent un minimum de travail et font appel à des compétences et profils très différents. Par expérience, présenter une interprétation graphique de la page d’accueil de façon prématurée peut avoir des conséquences très graves pour la suite du projet, surtout sur la valeur perçue de ce travail de conception (“pourquoi payer le reste alors que l’essentiel du boulot est fait, en plus je n’aime pas les couleurs…“).

Comme j’ai plus d’expérience sur la conception des interfaces, je complète mon argumentation en me concentrant sur ce point. En règle générale, la création de storyboards s’effectue dans cet ordre :

1. Lister et positionner les éléments devant être affichés dans le header et le footer ;
2. Définir un système de navigation clair, robuste et qui ne prenne pas trop de place ;
3. Concevoir les pages de second niveau (ex : page de contenu) ;
4. Concevoir les fonctionnalités complexes (ex : configurateur…) ;
5. Concevoir les pages d’orientation (ex : page de catégorie) ;
6. Concevoir la page d’accueil.

Le travail de création des storyboards est donc un processus séquentiel qui démarre par les pages de second niveau. Les pages d’orientation ou la page d’accueil ne servent qu’à orienter les visiteurs vers la bonne partie du site (sauf dans le cas bien précis des sites mono-page). Commencer la conception par la page d’accueil est selon moi une grosse perte de temps, car cela revient à travailler à l’aveugle.

De même, la conception graphique est un processus créatif qui nécessite de mener à bien une réflexion, d’explorer des pistes et surtout de se conformer aux contraintes fonctionnelles et ergonomiques. Je ne vois pas bien comment il est possible de livrer une charte graphique réaliste avant d’avoir stabilisé les spécifications fonctionnelles et le storyboard.

Bref, tout ça pour dire que même après 15 ans, je suis toujours surpris que l’on me demande “juste” de voir à quoi ressemble la page d’accueil avant de lancer un projet de création ou de refonte d’un site web. C’est comme si vous demandiez à un chef de vous faire goûter avant qu’il n’ait commencé à préparer son plat.

Ceci étant dit, rien n’empêche de montrer des intentions graphiques au commanditaire du projet. Le but de l’opération sera de satisfaire sa curiosité (et/ou son impatiente) avec des illustrations, mais qui ne garantissent en rien une conformité avec le résultat final. Par expérience, je suis très réticent sur ce genre de pratique, car 9 fois sur 10 ça se termine par un “je préférais ce que vous m’aviez montré au début“.

Mais peut-être suis-je devenu grincheux avec l’âge… N’hésitez pas à donner votre opinion et à décrire votre façon de travailler dans les commentaires.

Il est amusant de constater qu’en matière de conception web, certains mythes ont la peau sacrément dure. Autant nous n’abordons plus les mythes de la règle des trois clics ou de la page d’accueil de moins de 60 Ko, autant celui de la limite de visibilité revient régulièrement. Le dernier article que j’avais rédigé à ce sujet remonte à deux ans (En finir avec le mythe de la limite de visibilité), mais je pense devoir m’y coller à nouveau pour définitivement clore le sujet.

Malgré les nombreux articles déjà parus sur le sujet, les discussions persistent, de même que les publications : Life below 600px, Designing ‘Above the Fold’ Necessary?, Is there life below the fold?. Le point de départ de ce mythe est pourtant bien fondé : les contenus au-dessus de la limite de visibilité sont plus lus, de même que les boutons qui sont plus cliqués. Ceci étant dit, les contre-arguments sont également toujours les mêmes :

• L’équipement des internautes évolue et la limite des 600px est repoussée vers le bas avec des écrans toujours plus grands ;
• Depuis 15 ans que le web existe, les internautes ont appris à se servir de la barre de défilement et de la molette de leur souris ;
• L’important n’est pas de faire rentrer tout le contenu au dessus de la limite, mais de faire comprendre aux internautes qu’il y a du contenu supplémentaire en dessous ;
• Même s’il est largement en dessous de la limite de visibilité, un contenu associé à un point d’intérêt (photo, vidéo, illustration…) sera lu.

J’imagine que vous devez en avoir raz-le-bol que l’on vous sorte toujours les mêmes exemples (page produit d’Amazon et page d’accueil de Basecamp), alors pour illustrer mon propos je choisit un autre exemple (la page d’accueil de Backpack) qui démontre bien l’intérêt d’utiliser toute la hauteur de page pour bien valoriser le contenu.

Nous sommes maintenant (presque) en 2012, il faut savoir vivre avec son époque et prendre en compte plusieurs facteurs qui rendent cette limite des 600px encore plus caduque :

• Le volume de contenu disponible a considérablement augmenté ces dernières années avec les médias sociaux et les contenus multimédia, de ce fait, vous aurez besoin de plus de contenus pour attirer l’attention et convaincre les internautes, donc de plus de place ;
• La montée en puissance des terminaux alternatifs (smartphones, tablettes, TV connectées, netbooks/cloudbooks…) brouille complètement les statistiques de taille d’écran.

Ces deux facteurs, dont nous commençons réellement à prendre la mesure à l’aube de cette nouvelle année, remettent en question les règles de conception des sites web (Vers des sites adaptés aux netbooks ?, Faut-il réinventer le web pour les touchbooks ? et Quel va être l’impact de la fin de l’ordinateur individuel ?). De ce fait, de nouvelles pratiques émergent et apportent une solution à ce phénomène de diversification des modes de consultation et d’achat en ligne : 4 feuilles de styles pour 4 expériences de lecture, Le responsive design à l’assaut des terminaux mobiles et Et on reparle de la conception multi-écran.

Donc au final, la limite de visibilité a-t-elle encore une importance ? Non, plus réellement. Certes, les contenus en haut de page bénéficieront toujours d’une meilleure exposition, mais la notion de haut de page devient de plus en plus floue : non seulement les formats d’écrans se diversifient, mais les applications prennent de plus en plus de place dans les modes de consultation (Le choix se complique entre application mobile et application HTML5).

Moralité : les concepteurs sont aujourd’hui confrontés à des défis bien plus complexes que l’identification d’une surface d’affichage optimale. Le débat ne porte plus réellement sur l’emplacement de la limite de visibilité, mais sur les priorités à attribuer aux interfaces web, mobiles, tactiles, aux applications… Mobile First ! (et Content First !) (et Touch is the New Click!) (et Web is Dead!) (et HTML5 Rules!) (bref, il n’y a plus de règles).

Le site Webcredible nous propose ce mois-ci un très bon article résumant 10 comportements-types constatés lors de sessions de test : 10 unexpected online user behaviours to look out for. Ces comportements sont bien connus mais c’est toujours une bonne chose de les résumer pour ne pas les oublier dans vos travaux quotidiens de conception :

• Aveuglement dû aux bannières. Depuis plus de 10 ans que le web existe et que les utilisateurs se font matraquer les yeux de bannières qui bougent et qui flashent, ces derniers ont développés un mécanisme inconscient de protection contre ces agressions visuelles. Surnommé ”banner blindness“, ce phénomène se traduit ainsi : La partie inconsciente du cerveau des utilisateurs leur masque les éléments assimilés à de la pollution visuelle (tout ce qui bouge en haut de page) pour diminuer la charge cognitive. Conséquence : Les éléments de la page avec un traitement graphique trop lourd (animation, beaucoup de couleur dans un petit espace…) sont tout simplement ignorés, et les utilisateurs n’en ont pas forcément conscience.
• Vision tunnel.  Plus vous demandez à un utilisateur d’effectuer une tâche complexe et plus il va concentrer son attention et réduire son champ de vision. Conséquence : Les éléments en périphérie de page ne sont pas vus.
• Esquive de la page d’accueil. Après quelques années de pratique, les utilisateurs savent qu’ils ne trouveront pas ce qu’ils cherchent sur la page d’accueil car le contenu utile ou les fonctionnalités sont dans les pages intérieures. Conséquence : Ils cherchent à quitter au plus vite cette page d’accueil pour explorer les pages intérieures.
• Manque de patiente. Personne n’aime être assis devant un écran et être dans une situation d’échec. Conséquence : Si les utilisateurs de votre site ne trouvent pas rapidement ce qu’ils cherchent, ils vont avoir tendance à le chercher ailleurs sans persévérer.
• Recours excessif au défilement (ou au clic). Contrairement à ce que vous pouvez penser, cliquer ou scroller n’est pas un problème pour els utilisateurs, pire : Ils en abusent. J’ai déjà à de nombreuses reprises pu observer des utilisateurs en panique qui se mettent à faire défiler la page dans tous les sens ou à cliquer n’importe où dans l’espoir de se sortir d’une situation de détresse. Conséquence : S’ils ne trouvent pas ce qu’ils cherchent, les utilisateurs s’énervent et passent en mode “panique”.
• Survol des contenus avec déficit d’attention. En arrivant sur une page qu’ils ne connaissent pas, les utilisateurs commencent par la parcourir de façon chaotique sans réellement s’attarder sur un élément précis. Conséquence : Ils survolent la page et interprètent les bribes d’informations que leurs yeux ont réussis à accrocher.
• La force de l’habitude. Internet est encore un média jeune et intimidant pour bon nombre d’utilisateurs qui progressent à tâtons. Une fois qu’ils se sentent à l’aise dans une tâche (consulter son compte en banque, publier des photos…) ils n’apprécient pas du tout devoir recommencer. Conséquence : Les changements trop importants sur un site peuvent générer beaucoup de frustrations.

Voilà l’essentiel des comportements-types que l’on peut retrouver sur la majorité des internautes. Une fois que vous les avez en tête, il suffit de les intégrer comme des contraintes dans vos travaux de conception :

• Pas trop de trucs qui bougent à l’écran (vous ne pouvez attirer l’attention qu’une seule fois) ;
• Rapprocher visuellement ou géographiquement les éléments qui ont un rapport entre eux ;
• Evitez une trop forte densité de l’information en injectant du blanc et des zones de respiration (quitte à allonger vos pages en hauteur) ;
• Optimiser votre système de navigation (en testant différents cas d’usage de flux de navigation) ;
• Procéder petites évolutions régulières plutôt que par versions majeures (un site web n’est pas une application informatique).

Si vous avez relevé d’autres comportements-types ou avez d’autres conseils génériques, n’hésitez pas à les déposer en commentaire.

J’ai déjà eu de nombreuses occasions de vous parler des bibliothèques de conception d’éléments d’interface (“design pattern gallery“). Aujourd’hui j’aborde à nouveau ce sujet mais pour une bonne cause. Le site UI-Patterns mène en effet une grande enquête auprès de ces lecteurs pour constituer une base de données statistique sur l’emplacement des éléments génériques d’un site web (logo, aide, recherche, navigation…) : UI Patterns Servey. En fait l’idée n’est pas de définir un emplacement idéal (car cela dépend de trop de variables) mais plutôt de répertorier les emplacements génériques pour les plus gros sites et d’en faire des statistiques.

16 éléments sont ainsi listés et il est possible de consulter les résultats (comme ici l’emplacement du lien de retour à la page d’accueil sur près de 80 sites) :

Vous noterez que les résultats sont assez similaires à ceux de la bibliothèque Web Design Practice :

En totu cas une initiative tout à fait intéressante pour ce constituer une base de référence et pouvoir argumenter dans la cadre d’un projet.

(via Imazine)

Quand vous étiez lycéens, vous aviez les “Profil d’une oeuvre” pour vous simplifier les fiches de lecture. Quand vous étiez étudiants, vous aviez les “Que sais-je” pour vous initier rapidement à une discipline. Maintenant que vous êtes en activité, je vous propose de découvrir les Mémentos Sites Web. Il s’agit d’une collection d’antisèches pour la conception web. Deux ouvrages nous intéressent particulièrement :

• Ergonomie Web, un condensé de bonnes pratiques pour rendre votre site plus attractif, plus percutant, plus fonctionnel… rédigé par Amélie Boucher d’Ergolab ;
• Bonnes pratiques, un résumé des 153 critères de qualité du référentiel Opquast rédigé par Elie Sloïm.

Inutile de vous dire que je suis plus qu’enthousiaste quand à ces deux fascicules extrêmement bien conçus et qui résument de nombreuses années d’expérience de conception de sites web.

Bref, une lecture indispensable pour tous les concepteurs / designers / chef de projet car cela permet de faire des “piqures de rappel”.