Dans le terme webdesign, il y a le mot design. Le design est au cœur du succès de bien des sociétés. Il explique également l’échec de nombreux produits commercialisés. Quand on analyse correctement la faillite de certains systèmes, on s’aperçoit souvent que les choses avaient été dès le départ très mal dessinées. Le fait est que lorsqu’un produit est mal désigné, il trouve difficilement son public. Dans certaines sociétés en situation de souffrance économique, il n’y a pas de département design du tout. Le problème vient parfois simplement du fait qu’un travail indispensable est réalisé par des gens qui n’en ont absolument pas la compétence, le problème venant alors non pas des gens présents mais de l’absence des gens compétents qui auraient dû être présents pour mettre les projets sur les bons rails. A contrario, beaucoup d’industries fonctionnent et fleurissent grâce aux designers d’excellence qu’elles emploient. Dans le secteur automobile, par exemple.
Il existe de nombreux ouvrages de référence traitant du design. Les deux mots clés du design sont « beau » et « fonction ». On peut créer quelque chose de beau sans aucune finalité particulière, si ce n’est le beau en lui-même : dans le domaine de l’art, par exemple. On peut créer quelque chose de très utile sans que cela soit beau ni pas beau : dans le domaine urbain par exemple. On peut également créer quelque chose de beau qui soit à la fois très utile et quelque chose de très utile qui soit à la fois très beau. C’est le sens du design. Et quand beau et fonction fusionnent pour ne faire plus qu’un, c’est du grand design. Le design s’applique à toutes les disciplines, il s’adapte à tous les domaines, il se singularise par son universalité. On peut par exemple désigner une idée en la modelant avec des mots pour un résultat à la fois esthétique et utile à tous, comme dans un article traitant du webdesign par exemple.
Le design se transpose dans tous les domaines : le web n’échappe pas à la règle. L’importance qu’a prise le webdesign depuis deux décades vient de l’évolution rapide des technologies numériques depuis la création d’internet entre 1991 et 1993. Au départ, internet vient d’une trouvaille utile qui va s’avérer être une idée absolument géniale : l’idée qu’il serait bien plus pratique de transférer des données grâce au net que grâce à des disquettes, surtout lorsque celui qui transmet ces données se trouve à des kilomètres de celui qui devra les recevoir. Au début de l’internet, les pages web se ressemblaient toutes peu ou prou, dans la mesure où peu de technologies et des technologies très simples – simples au regard des possibilités techniques sophistiquées d’aujourd’hui – étaient employées. C’est au fur et à mesure que ces technologies vont être développées et que d’autres technologies vont être créées, à des fins utiles et pour améliorer les fonctionnalités du web, que les possibilités de variation en termes de webdesign vont se démultiplier.
Il est bon ici de rappeler qu’un site internet, c’est avant tout du texte (des lettres et des chiffres). Désigner, c’est donc rédiger. La plupart du temps, les images et les éléments de style d’une page web sont « appelés » par le navigateur qui affiche à l’écran d’un ordinateur ce qu’il lit dans les fichiers de la page web correspondante qui sont envoyés par le serveur de l’hébergeur qui accueille le site web de celle ci. Ces fichiers sont très souvent écrits en html, php et javascript, mais pas uniquement. Ils contiennent généralement les éléments fonctionnels d’une page web, tout ce qui étant de l’ordre de l’esthétisme étant traité grâce à des fichiers annexes de type numérique (dans le cas des photos, par exemple) ou informatique (dans le cas de typographies, par exemple). Cela permet d’optimiser la performance d’une page web, et notamment sa vitesse de téléchargement, ce qui est capital :
- Les internautes privilégient les pages web qui s’affichent rapidement et correctement à l’écran : au delà de quelques secondes, ils se montrent très impatients et cliquent ailleurs. C’est le zapping du numérique.
- Les moteurs de recherche et Google donnent un meilleur PageRank et un meilleur classement aux sites web qui apparaissent rapidement à l’écran. C’est le ranking du numérique.
Le fait que les éléments de style et les images soient appelés grâce aux premiers fichiers lus par les navigateurs contribue à la performance d’un site web : au lieu qu’une page web soit téléchargée dans son ensemble en une seule fois, ce qui peut prendre plusieurs secondes, les éléments fonctionnels d’une page web – et notamment la structure de la page web – vont apparaître en priorité avant les images et les éléments de style. Souvent, ces différentes séquences ne se voient pas du tout à l’œil nu. Sur certains sites web très lourds, ou lorsque le débit de la connexion est particulièrement bas, on voit bien les différentes phases de téléchargement et comment une image de fond d’écran va par exemple apparaître dans un second temps après l’apparition du texte de la page.
On ne peut pas parler de webdesign sans parler de technique web. Un webdesigner se doit d’ailleurs d’avoir des compétences à la fois en termes de design et en termes de technique web. Son rôle est de créer quelque chose de beau et de fonctionnel. Si par exemple il crée une très belle page web qui, pour des raisons techniques, s’affichera en une dizaine de seconde, le résultat ne conviendra pas, même avec un sablier apparaissant à l’écran pour faire patienter le cybernaute. Les études marketing montrent qu’au delà de 3 secondes de téléchargement, l’internaute moyen de moins de 50 ans s’impatiente et s’agace. Aussi la moyenne du temps de téléchargement des pages web, qui s’élève à 6,3 secondes d’après GTmetrix, s’avère être une moyenne très en dessous de la moyenne que l’on devrait attendre si on devait la confronter aux études marketing traitant du comportement des internautes. Un webdesigner se doit donc de vérifier à la fin de son travail la performance de la page qu’il vient de désigner. Si la page se télécharge en plus de 2 ou 3 secondes, il peut mettre en place sur sa page un sablier numérique avec un % allant de 0 à 100 indiquant à l’internaute l’évolution du téléchargement de la page web qu’il souhaite consulter. Le fait est que si une page se télécharge en 4 ou 5 secondes sans sablier, la probabilité pour que l’internaute la quitte est grande. Alors que si la même page se télécharge en 4 ou 5 secondes avec un sablier, la probabilité pour que l’internaute ne quitte pas la page augmente, malgré sa lenteur. Le sablier capte son attention et le divertit, l’oblige à réfléchir sur le temps de téléchargement restant et pendant tout ce temps, l’internaute pense … et la page finit par arriver à son écran. Là aussi, le webdesigner doit soigner cette « page sablier » : plus cette page sera réussie, plus elle permettra d’augmenter la tolérance à l’attente du cybernaute, et donc son temps de présence. Car l’un des objectifs principaux d’une page web, c’est évidemment que a) l’internaute accède à cette page web b) l’internaute reste sur la page web c) l’internaute navigue aisément sur les autres pages web du site web.
100% gratuit - 3 min
L’installation d’une belle page « sablier » pour faire patienter l’internaute peut aider à garder ce dernier, surtout si elle a été bien désignée. Mais elle peut également ajouter quelques microsecondes supplémentaires au temps de téléchargement global de la page web. Au final, il faut donc trouver le parfait équilibre pour obtenir un temps de téléchargement optimal, avec sablier ou sans sablier, réduisant le plus possible son intolérance à l’attente. On peut tout à fait mettre en place dans un premier temps une belle page web avec un sablier, travailler sur le design général et la performance de la page en question, pour ensuite enlever le sablier quand celui-ci n’est plus utile.
Quelque soit la méthode utilisée, il faut vérifier la performance de chaque page web désignée. gtmetrix.com permet par exemple d’analyser dans le détail ce que l’on nomme dans le web le waterfall, c’est-à-dire l’ensemble des séquences ayant lieu entre le moment où l’on souhaite accéder à une page web et le moment où la page web apparaît, avec le temps calculé au millième de seconde près pour chaque séquence.
Exemple d’analyse GTmetrix opérée sur le site saffyr.com
On peut procéder de différentes façons pour réaliser le design d’une page web. On peut par exemple désigner une page web en modifiant des pages de programmation, et notamment le fichier CSS lorsque le site web a été construit avec une arborescence dans laquelle les éléments de style sont gérés à partir de ce fichier. Tout dépend en réalité de la personne qui devra réaliser le travail de webdesign. Si c’est un créateur de start-up, il devra optimiser au maximum son temps de travail pour ne pas consacrer trop de temps à de la programmation. Tout le temps consacré au webdesign est en effet du temps qui n’est pas consacré à la pure action commerciale. Si le travail est réalisé par un webdesigner à la demande d’une société disposant d’un budget marketing important, celui-ci devra passer plus de temps à la programmation du site web à développer. Beaucoup d’agences web mettent en place des équipes polyvalentes composées, entre autres, d’un webdesigner et d’un développeur web. Dans ce genre de configuration, le webdesigner donnera les instructions relatives au design et le développeur assurera la faisabilité technique du design à réaliser, si le design en question à réaliser est réalisable, évidemment. Le webdesign est donc également une question de budget : faire travailler un webdesigner et un développeur web à plein temps, ce n’est pas le même budget que faire réaliser le travail par une seule personne ou par une personne qui devra en plus de ce travail gérer tout une série d’autres travaux.
Dans le cas de budgets modérés, l’utilisation des CMS de référence prouve toute son utilité. Avec les années, la bibliothèque de webdesigns qu’ils proposent est impressionnante. Aussi on peut partir d’une idée de webdesign de départ et aller rechercher dans la bibliothèque de webdesigns des CMS celui qui collera le plus au webdesign que l’on souhaite. Au lieu d’investir dès le départ une grosse somme d’argent pour obtenir un design sans savoir quel en sera le retour sur investissement, on choisit un design de qualité qui existe déjà, ce qui permet de réduire sensiblement l’enveloppe budgétaire allouée au projet web dans son ensemble. Utiliser des fichiers qui existent déjà est bien plus pratique que d’écrire de nouveaux fichiers ex nihilo. Rien n’empêche après d’investir dans des travaux de développement web supplémentaires en fonction des premiers résultats de la plateforme numérique créée. Car tout design proposé par les CMS de référence est customizable et fait pour que des travaux de développement web et de transformation puissent être effectués. De nombreux templates permettent également de travailler sur le CSS directement dans le backoffice, ce qui évite d’avoir à aller modifier les fichiers qui se trouvent chez l’hébergeur à chaque fois que l’on souhaite modifier le design.
Concernant le choix du design d’un site web en lui-même, les technologies se sont tellement perfectionnées avec les années que le champ des webdesigns de qualité tend vers l’infini. A chaque projet web sa spécificité et une analyse ad hoc et au cas par cas est nécessaire pour pouvoir déterminer quel design conviendra le mieux à un site internet (cf ci-après l’exemple d’un cas d’excellence, celui de l’entreprise Amazon). Les problématiques et les enjeux stratégiques en termes de design dépendent en tout premier lieu du type de plateforme numérique à désigner : application numérique, site vitrine, site marchand, blog, réseau social, portail, forum … la question du webdesign est totalement différente d’un type de plateforme numérique à l’autre. La question du webdesign est également totalement différente d’un type de terminal à l’autre : smartphone, tablette ou ordinateur, les spécifications techniques et les utilisations ne sont pas les mêmes. Idéalement, il faudrait mettre en place non pas un webdesign par plateforme numérique mais trois webdesigns pour une seule plateforme numérique, en fonction des trois principaux types de terminal (smartphone, tablette et ordinateur) permettant de nos jours de visualiser une plateforme numérique. Concernant ce sujet, le webdesign rejoint à nouveau la technique web et plus particulièrement le référencement naturel (SEO) car Google privilégie dans son classement les sites web avec des webdesigns pouvant être lus par son Googlebot. Lorsque ce dernier ne parvient pas à les lire, il donne un mauvais classement. Par ailleurs, avec l’essor spectaculaire des portables et des smartphones, Google prête une attention particulière aux sites web dits mobile friendly, c’est à dire avec un webdesign parfaitement adapté aux smartphones.
L’exemple que fournit l’entreprise Amazon est exemplaire. La marque a su adapter les designs de ses plateformes numériques en fonction des différents types de terminal. En termes de webdesign, tout est fait pour agrémenter l’expérience numérique et rationaliser les différentes étapes tout au long du chemin qui amène un cybernaute à procéder à un cyberachat. Tout est pensé au pixel près. La présence du nom Amazon en elle-même est très discrète. Le plus important, ce sont des éléments fonctionnels et bien visibles tels que le panier, dessiné de façon très moderne et présent sur quasiment toute les pages du site web. En termes d’ergonomie, le site web est un cas d’école. Les produits sont très bien mis en valeur, avec des possibilités de zoom pour voir t-shirts et jeans de façon très précise. Tout est fait pour que le design des pages web n’alourdisse pas le site et ne rallonge pas le temps de téléchargement, qui est optimal. La couleur dominante est le blanc et la charte graphique est judicieusement neutre et passe-partout pour qu’elle puisse à la fois correspondre à une image de marque globale et être adaptée telle quelle par les principales filiales de la société américaine. Le webdesign est parfaitement adapté au marché domestique de la marque, celui des Etats-Unis et par extension de l’Amérique du Nord avec le Canada, qui a la priorité d’un point de vue marketing. Il se décline parfaitement dans tous les pays industrialisés disposant d’un important pouvoir d’achat. Le résultat final en termes de webdesign est minimaliste, efficace, sobre, neutre, impeccable, simple et ultra performant puisque dans le web, l’entreprise Amazon, c’est vraiment une réussite.
