Web design et idées reçues

Idée n°1 : Je ne veux pas avoir à scroller

S’il est vrai (et assez logique) que les informations situées dans les deux premiers écrans de la page auront un impact accru, le défilement vertical – ou “scroll” en anglais – n’est pas à fuir, bien au contraire, car il constitue la première interaction de l’utilisateur avec votre site. Un utilisateur qui scrolle fait déjà un pas en terme d’engagement sur votre site, il s’implique, ce qui est une bonne chose.

Par ailleurs, depuis l’explosion de la navigation web sur smartphones et tablettes qui a aujourd’hui largement surpassé la navigation sur grand écran, les usages du web ont drastiquement changé. La petite taille d’écran des smartphones obligeant à présenter l’information sur la hauteur, les usagers ont pris l’habitude de faire défiler les pages web pour accéder à leur contenu. Cette habitude s’est naturellement répercutée sur les ordinateurs de bureau. Le défilement vertical n’est donc plus un frein.

Enfin, vouloir donner un maximum d’informations à sa cible d’un seul coup est tentant, mais pas toujours judicieux. Ce faisant, les infos à l’écran risquent de se concurrencer entre elles, nuisant alors à la lisibilité globale. La hiérarchisation et le choix des données à montrer à l’utilisateur forment une étape de réflexion importante à avoir en amont même du design d’un site. Exploiter la verticalité d’une page web est une piste à ne pas négliger, car elle est bien ancrée dans les us et coutumes du web. Le tout, pour le succès de votre site, est de le faire de manière pondérée et réfléchie.

Idée n°2 : le corps du texte est trop gros

Cette idée vient avant tout de la bureautique et du monde de l’impression. Un livre imprimé avec une typographie de 12pt (en termes web, nous parlerons plutôt de pixels, abrégés px), présente le bon compromis entre confort de lecture et quantité de texte.

Sur le web, les choses sont différentes. Lire du texte en quantité sur un écran est nettement plus éprouvant pour les yeux que ça ne l’est sur un livre. Avec l’avènement du responsive design, nous pouvons (et devons) aujourd’hui nous affranchir de l’argument du manque de place à l’écran, pour augmenter le confort de lecture sur les écrans les plus grands. Ainsi, la norme actuelle en termes de taille de texte sur grand écran se situe entre 16px et 20px, rendant la lecture confortable malgré la distance qui nous sépare aujourd’hui de nos écrans.

Le responsive design permet ensuite d’adapter cette taille selon que le texte soit visualisé sur un écran de smartphone (plus petit et généralement tenu plus près de l’oeil) ou sur une tablette.

De manière générale, plus le corps du texte sera confortable à lire (c’est à dire, adapté au support sur lequel il est consulté, finalement), plus votre site aura d’impact sur l’utilisateur, car le message qu’il diffuse apparaîtra plus clair.

Idée n°3 : il ya beaucoup de blanc à l'écran

Du vide

La réponse ici est plus complexe. Certains designs aux partis-pris un peu justes peuvent amener une page (ou une section de page) à apparaître comme “vide”.
Le manque de structure d’une page, des élément flottants sans raison, ou un manque de rythme vertical ou horizontal trahissent généralement un manque de réflexion autour du design, et dans ces cas-là, on parle bien volontier de vide.

De l'espace négatif

Aux mains de designers expérimentés, l’espace négatif (qui comprend les zones laissées libres, les marges, etc), est un élément structurel à part entière, un aspect maîtrisé du design global, et sert toujours un propos.
Il permet notamment de mettre en valeur le contenu en le “laissant respirer”. Cette respiration permet une meilleure lecture de l’information, qui n’est alors pas perturbée par d’autres éléments avoisinants, ou augmente l’impact d’une image, d’un titre, ou d’un élément graphique. De fait, l’espace négatif donne aussi à l’utilisateur une séparation visuelle des diverses informations du contenu, le gratifiant d’une meilleure compréhension du propos.

Avec le responsive design et l’habitude de scroll désormais bien ancrée chez les utilisateurs, les designers donnent de plus en plus d’importance à l’espace négatif dans le design des sites web, quite à augmenter un peu la hauteur des pages.
Même si cela peut-être difficile à cerner à cette étape, il arrive que ce qui paraît "vide" à l’état de maquettes graphiques statiques trouve tout son sens une fois transposé en maquette avec des technologies web, l’interactivité et le format du navigateur mettant tout le design en perspective.

Idée n°4 : un 6ème niveau pour cette arbo

Une histoire d'échelle

Le souci principal de la réflexion en amont d’un site, c’est de savoir quelles informations présenter et où les présenter. L’essentiel du travail va être de sélectionner et hiérarchiser les infos en termes de pages, et cela conduit parfois à des menus dantesques.

Soyons réalistes : un site web doit avoir une arborescence cohérente et qui reflète son échelle.

Il est plutôt concevable qu’un site de vente en ligne international comme celui d'Ikea fasse naviguer ses usagers dans pléthore de sous-niveaux avant d’arriver au produit recherché. En plus de servir le propos (emmener le client au travers des rayons pour qu’il achète plus que ce qu’il recherche), il est logique de classer les milliers de références dans une imbrication de sous-catégories bien choisies.
C’est beaucoup moins logique pour le site vitrine d’un artisan, par exemple, qui aura tout intérêt à restreindre son arborescence à un ou deux sous-niveaux maximum afin de ne pas perdre inutilement son potentiel client dans un dédale de pages web.

C’est pourquoi il est crucial de définir en amont des scénarii de navigation, des sortes de “voies royales” dans lesquelles les utilisateurs pourront s’engager pour accéder à l’info que vous souhaitez leur donner à lire.
En outre, au premier niveau du menu, il est conseillé de limiter la navigation à quatre ou cinq grandes entrées. A sept entrées, on atteint un très grand maximum à ne pas dépasser. Si vous vous situez au delà, il serait sans doute judicieux de tenter de remanier votre arborescence un peu plus en profondeur ou de faire appel à nous ;)

Idée n°5 : je mets tout dans un diaporama

Trop de slideshows, tue le slideshow !

Bon, je l’admets, j’ai un peu forcé le trait, cette fois, mais s’il est malgré tout une erreur qu’on retrouve de temps à autres sur internet, c’est celle d’utiliser des slideshows à tort et à travers pour “gagner de la place”.

Mais dans un écosystème comme le web où l’utilisateur passe peu de temps sur un même écran, à moins d’y trouver du premier regard l’info recherchée, c’est une pratique dangereuse pour le propos d’un site. En effet, pour peu que l’utilisateur scrolle trop vite sans attendre le changement de diapositive (slide), il n’aura alors pas accès à l’information qui pourrait être contenue dans celle-ci.
Pire, si le slideshow se trouve bas dans la page et est en lecture automatique, vous ne contrôlez toujours pas le moment auquel il arrivera à voir votre diaporama, et ne pouvez donc prévoir quelle diapositive il verra en premier.

Chi va piano va sano

Il est donc conseillé de ne pas surcharger les slideshows, puisque, dans les faits, seuls 2 ou 3 slides auront de réelles chances d’être visionnés. Dans le contenu des pages, réservez les slideshows pour présenter des galeries ou des listes réduites ne nécessitant pas d’ordination particulière et n’ayant pas de rôle déterminant dans la navigation sur le site.