Aviez-vous déjà remarqué que les sites corporate des grands groupes US se ressemblent tous ? Nous savions déjà que le public américain est très friand de mises en page sobres (fond blanc, grille de lecture symétrique, typo unifiée…) mais de là à adopter une structure quasi identique… Jugez plutôt :
Dans cette série nous retrouvons ainsi une structure à 5 niveaux qui facilite grandement le décryptage de la page et permet de bien exploiter la largeur de la page pour laisser un maximum de place à l’image centrale.
Nous avons donc une structure qui ressemble à ça :
La structure générique des sites corporate US
Cette uniformité est-elle due à un processus Darwinien ? Possible car je ne peux que reconnaitre l’efficacité de cette structure qui privilégie l’émotion (très large bandeau identitaire) tout en proposant un contrat de lecture limpide.
Est-ce cela que nous pouvons appeler une convention ? Peut-être : cette structure conviendra au plus grand nombre sans toutefois être une figure de style imposée.
Avec les années la taille des écrans augmente, mais pas nécessairement celle de la surface d’affichage utile. Comprenez par là que si les résolutions d’écrans supérieures à 1024 px sont majoritaires (plus de 55% d’après le W3 Counter), les utilisateurs n’exploitent pas forcément la totalité de l’espace disponible. Résultat : la norme est indiscutablement de faire des mises en page de 1024 px de large (en fait 1005 px quand on tient compte de la barre de défilement verticale).
Problème : Comment faire pour afficher un maximum de choses dans la limite de visibilité (sans scroll de la page) ?
Dans ce très bon article, l’auteur nous livre ainsi différentes techniques pour virtuellement gagner de la place en jouant notamment sur les couches (layers en anglais) et sur une interface plus dynamique (entre autre) :
Le roll-over qui affiche un panneau de contenu (ex. : Miro)
Un exemple de panneau affiché en roll-over
La mise en page progressive qui fait apparaître le contenu au fur et à mesure des clics (ex. : Sursly)
Un exemple de mise en page progressive
Les grilles de lecture marquée qui autorisent une très grande densité d’information sur une seule page tout en assurant une bonne lisibilité (ex. : Neutron Creations)
Les boutons d’action (création d’un compte, ajout au panier…) ne représentent qu’une infime partie d’une interface mais ils n’en demeure pas moins un si ce n’est l’élément le plus important (si l’on part du principe que l’objectif premier de la page en question est de transformer). L’attention que vous devez y porter est donc inversement proportionnelle à l’espace qu’ils occupent.
Je vous propose donc une série d’articles où il est question des boutons d’action (“call-to-action” en anglais) :
Voici comment je résumerais les bonnes pratiques listées :
Emplacement – Le ou les boutons d’action doivent impérativement être dans la partie visible de la page (pas de scroll) et être à proximité de zones d’intérêts (bénéfices, captures d’écrans…) ;
Contraste – La visibilité du ou des boutons d’action doit être optimale, il faut donc utiliser une couleur vive qui tranche avec le fond (idéalement une couleur qui n’est réservée qu’à cet effet) ;
Éditorial – L’intitulé de votre bouton d’action doit être court et percutant, privilégiez des verbes (“Créer un compte“) et adossez-y un bénéfice ou un élément de réassurance (“Inscription gratuite“) ;
Taille – Plus le bouton est gros et mieux il se voit (dans la limite du raisonnable), prévoyez de l’espace intérieur (padding) pour éviter un effet d’enfermement ;
Alternative – Prévoyez une fonction alternative (“Inscription / Visite guidée“) afin de ne pas donner l’impression à l’internaute qu’il est dans un cul-de-sac et n’hésitez pas à utiliser des traitements graphiques différents.
À ces bonnes pratiques je rajouterais mes conseils :
Graphie – N’utilisez pas de majuscule ou de ponctuation (“INSCRIVEZ-VOUS !“) car cela rend la lecture plus laborieuse ;
Formulation – Évitez les tournures de phrase à la première personne (“Je profite de cette offre“) car elles peuvent perturber la compréhension de l’action (à qui cette page s’adresse-t-elle) et rallonge le texte ;
Retour visuel – Prévoyez un état graphique au survol de la souris pour concentrer l’attention lors de la découverte de la page.
Je vous propose maintenant une petite sélection de boutons d’action pour illustrer ces propos.
PlanHQ propose des boutons très intéressants car ils sont encapsulés dans des cartouches pour accentuer le contraste et compléter l’intitulé :
Les boutons d'action de PlanHQ
Cammpaign Monitor utilise deux couleurs très différentes pour ces deux boutons, le contraste est idéal par contre je regrette l’utilisation de lettres majuscules ainsi que le recours à une autre typo que le reste de la page :
Les boutons d'action de Campaign Monitor
Remember The Milk propose une combinaison intéressante d’un bouton et d’un lien alternatif, vous apprécierez également l’élément de réassurance sous le bouton (“for a free account“) :
Le bouton d'action de Remember The Milk
PBWorks utilise deux boutonsaux couleurs contrastées (mais qui pourraient être plus gros) ainsi qu’un retour visuel très efficace (passez votre souris dessus) :
Les boutons d'action de PBWorks
Voilà, tout est dit. En suivant les bonnes pratiques citées plus haut et en prenant le meilleur de ces exemples vous devrez arriver à un résultat optimal. Si vous avez de bons exemples, n’hésitez pas à mettre les liens en commentaire.
Le design de la presse en ligne est un sujet dont on entend parler depuis quelques mois. Hier j’ai pris connaissance d’une présentation très intéressante sur Slideshare. Cette présentation est de Benoît Drouillat, designer interactif. Elle fait l’objet d’un point de référence (non officiel) de la façon dont la presse en ligne (essentiellement américaine) structure ses nouvelles sur une page pour mettre en valeur ses contenus. La présentation est composée de 94 diapositives.
