Les 6 tendances 2020 à adopter pour votre site web – Conception et web design

Publié par Thomas Ferret
Retour au blogue

Qu’il soit une simple page, un e-commerce, un catalogue en ligne ou même pas encore créé, votre site web se doit de suivre les tendances afin de toujours proposer à vos visiteurs une navigation agréable et leur projetant une image professionnelle, dynamique et qualitative de votre entreprise / activité.

Pour cela, autant en manière web design qu’en conception, l’univers du web « oblige » votre site internet à évoluer et être mis à jour. Selon votre marché cette évolution peut être réalisée tous les 3-6 mois, 1 an ou 2-3 ans mais jamais plus, si vous ne souhaitez pas que votre site web paraisse obsolète et qu’il reflètent une image négative (non actuelle, stagnant, non rigoureux) de votre entreprise.

Mais tout ceci vous devez déjà le savoir puisque vous êtes en train de lire cet article sur les tendances web 2020.

2020, l’année de la vidéo

Il n’y a pas longtemps de ça, les spécialistes du web vous expliquaient qu’un site Google friendly / optimisé « SEO » était un site léger et rapide à se charger. Les images sur votre site web se devaient être les plus légères possibles.

Alors pourquoi parlons-nous de vidéos qui sont bien entendu plus lourdes que des images!?

Des serveurs plus puissants et un réseau internet performant pour la quasi totalité de la population n’est même pas la raison numéro 1.

La raison numéro 1 est qu’avec une bonne intégration, la page ne charge pas la vidéo en premier lieu, la page web est chargée avec seulement l’emplacement vide de la vidéo, c’est une fois que la page est affichée que la vidéo peut se charger et être jouée (manuellement ou automatiquement). C’est donc en ce deuxième temps que le réseau internet de l’internaute entre en jeu pour jouer sur la vitesse de chargement de la vidéo.

Ok, la vidéo n’est pas néfaste pour le SEO, mais pourquoi l’adopter sur un site web?

Car plus que du texte ou d’une image, la vidéo est le média qui est le plus apprécié par les internautes,

Le gif : « vieille technologie » mais utilisation moderne

Dans cette même volonté d’animer votre site web, le GIF vous apportera des avantages que la vidéo ne vous permet pas.

Dans des pages web avec du long contenu texte (page informative, article de blogue…), le GIF permettra d’ajouter de l’animation et de souligner le message principal d’un paragraphe ou d’une section. Le fait de toujours être actif en tournant en boucle, vous permet de contrôler ce que verra vos visiteurs. Au contraire de la vidéo, qui demande un clic pour être lancée, ou si jouée automatiquement ne vous permet pas de savoir quel moment de la vidéo vos visiteurs verront.

Attention de ne pas en abuser et de rester pertinent afin de ne pas avoir l’effet inverse et paraître « dépassé ».

Quelques exemples de bonnes utilisations des gifs sur des sites e-commerce

Mettez en avant l’urgence d’une promo. Lou & Grey Demandez de l’interaction et attirez le regard. Ann Taylor
Montrez le maximum de vos produits. Away

Les micro-interactions : pour un site vivant et dynamique

En 2020, un site ne peut plus être un enchaînement de blocs HTML statiques mis les uns au-dessus des autres.

Une micro-interaction est un mouvement d’une partie de votre site web suite à une action de l’internaute (cliquer, écrire, survoler avec la souris…). Leurs avantages sont autant fonctionnels que design.

Pour le côté fonctionnel, les micro-interactions peuvent faciliter la compréhension de votre site et donc l’expérience utilisateur. Sur un site e-commerce, si lors de l’ajout d’un produit dans le panier, une bulle rouge pop sur le panier avec le nombre de produit, cela attirera l’oeil de l’internaute et lui permettra de voir où se situe son panier. Elles peuvent également guider le visiteur et l’emmener à la partie du site que vous souhaitez mettre en avant.

Pour le côté design, c’est assez évident. Un site statique sera toujours moins agréable qu’un site web évoluant et qui réagit aux actions réalisées par le visiteur. En l’utilisant de façon pertinente, la micro-interaction permet de communiquer une image moderne et dynamique avant même de lire votre contenu. Elles permettent également de vous différencier avec des interactions originales, par exemple Facebook Messenger qui fait trembler l’emoji lorsqu’il est appuyé « trop » longtemps ».

Comme pour les GIF, l’utilisation des micro-interactions doit être là pour rendre mémorable et original votre site web ou encore améliorer l’expérience utilisateur, attention de ne pas en abuser pour pas devenir illisible et perdre vos visiteurs.

Quelques exemples de micro-interactions créatives et inspirantes

L’ajout d’un produit au panier par Oleksandr Pronskyi

La confirmation d’ajout d’un produit au panier par Alberto Conti


Un bouton de partage par Yancy Min

Votre site ne s’adapte plus aux mobiles, il est « pensé mobile »

alias « mobile first ».

Depuis quelques années, les visites des sites web sont plus nombreuses via un mobile qu’avec un ordinateur ou une tablette (environ 6 visites sur 10 sont faites avec un mobile).
Les chiffres varient selon les marchés, à vous de vérifier la répartition des appareils utilisés par vos visiteurs – Google Analytics vous donnera très facilement cette information. Cette expansion de l’utilisation du mobile a fait évoluer la conception des sites web de « responsive » (qui s’adaptent aux mobiles – lecture verticale et clic digital entre autre) à « mobile first » soit les maquettes et la structure du site pensées mobiles (qui s’adaptent par la suite aux autres appareils).

En premier lieu, cette nouvelle tendance a fait naître les sites « One page » où l’on scroll sur une seule et même page pour avoir toutes les informations disponibles. Ceci avait pour but de simplifier la navigation sur mobile. Mais aujourd’hui, le design pour mobile est de rigueur, une des grosses disparition est la barre de menu fixe pour laisser place à un menu adapté au digital sous former d’icône burger qui fait découvrir les onglets du menu.

Penser votre site pour une navigation mobile permettra d’améliorer l’expérience utilisateur et donc convertir plus.

Comme l’écran est plus petit, les smartphones n’ont pas besoin d’images aux milliers de pixels ou encore retina, cependant les ordinateurs demandent toujours ces images pour afficher une qualité de haute définition. Pour répondre à ce problème, Google a créé en 2016 le format d’images AMP acronyme de « Accelerated Mobile Pages », oui tout est dans le nom. En utilisant le format AMP, un site internet permettra d’afficher les images au format classique pour les ordinateur et au format AMP plus léger (et donc plus rapidement) sur les smartphones et tablettes.
Bien entendu, Google améliorera le référencement de vos pages avec l’utilisation de son format optimisé. 

Une statistique intéressante, plus d’1 personne sur 2 dans le monde navigue sur internet avec son téléphone.

Le fait de penser votre site en version mobile en premier vous permettra de penser à utiliser les avantages de ce dernier :

  • La mobilité et la géolocalisation : pourquoi ne pas utiliser la géolocalisation pour afficher les offres les plus proches de vos visiteurs ou même les guider vers votre point de vente à proximité.
  • L’accès à un appareil photo aux objectifs avant et arrière :  Avec la réalité augmenté, un opticien peut faire essayer aux visiteurs les modèles de lunettes directement sur leur mobile ou encore un magasin de décoration peut ajouter leurs fournitures dans la maison de leur visiteur.
  • Lien vers des applications mobile : Faites télécharger une application partenaire ou bien la vôtre en un simple clic. Par exemple, une boutique qui a développé son programme de fidélité via une application tierce ou sa propre application.
  • Les appels sont disponibles en 1 clic : Et oui, le numéro de téléphone que vous affichez sur votre site web peut être utilisable en 1 clic avec un mobile, pensez-y pour accroitre les coup de fil 😉

Et bien sûr Google aime ça, un site optimisé pour les mobiles sera très bien vu par le moteur de recherche qui n’hésitera pas de pousser votre référencement.

Les assistants virtuels pour une meilleure relation client

alias Chatbot (et encore plus loin Voicebot).

Quand on parle chatbot, on parle relation client.
L’utilisation de chatbot a commencé depuis des années et se popularise de plus en plus sur les sites web grâce à l’amélioration de ces derniers. Plus qu’un simple parcours de questions/réponses, les nouveaux chatbots utilisent l’Intelligence Artificielle.

Une étude complète réalisée en 2018 par les entreprises Drift, Salesfroce, Audience et myclever nous apprend que de plus en plus d’internautes sont prêts à communiquer avec un chatbot afin d’avoir des réponses rapides à leurs questions urgentes (37%), résoudre leur problème (36%) ou encore avoir des explications ou plus de détails sur les services (34%). Dans cette même étude, on apprend que les deux frustrations les plus fréquemment rencontrées lors d’une visite d’un site web est de ne pas pouvoir avoir des réponses instantanées  à des questions simples (31%) ou de l’aide pour naviguer sur le site web (34%) deux problèmes qui peuvent être réglés par les chatbots.

Les avantages du chatbot ont été prouvés tandis que leurs défauts relevés par les utilisateurs diminuent au fil du temps. Les principaux défauts des chatbots relevés sont des réponses non pertinente, des questions trop précises non adaptées au problème ou encore une froideur des messages. Des défauts qui sont de moins en moins d’actualité grâce à l’intelligence artificielle plus précise.

En quelques points, voici les avantages d’un chatbot pour votre entreprise :

  • Une disponibilité 24h/24 et 7j/7 qui pourra guider vos visiteurs et engendrer de nouveaux leads / ventes
  • Des réponses instantanées qui diminuent les frustrations
  • Une diminution du service clientèle de 35% grâce au filtre sur les questions simples et courantes
  • Une augmentation des conversions (ventes, abonnements…) et de la fidélisation
  • Peut vous aider à mieux connaître vos visiteurs, leurs profils et envies

Pour aller plus loin, vous pouvez lire l’étude d’Oracle « Le virtuel peut-il remplacer l’humain? » où on apprend que 95% des consommateurs pensent que les services clients bénéficieraient considérablement des chatbots ou encore que 34% des cadres affirment que le temps libéré grâce à l’usage d’un chatbot leur permet de se concentrer davantage sur des tâches plus complexes et créatives.

La 3D ou montrer plus pour convertir plus

Selon une enquête du Cefrio en 2018, 72% des internautes québécois consultent les catalogues en ligne des marques et commerces avant de se rendre en magasin pour faire des achats (ceci est le web-to-store).
De plus, selon plusieurs enquêtes, on apprend qu’en France, au Canada et aux USA, les commerces en ligne face aux magasins physiques représentent 8 à 10% des ventes.

Alors oui, le e-commerce est de plus en plus populaire, mais pourquoi seul 1 achat sur 10 est fait sur le web?

Si on écoute les réponses des internautes, ce sont les délais de livraison et le fait de ne pas pouvoir toucher / bien voir les produits qui font pencher la balance vers les magasins physiques.

  • Pour les délais de livraison, des options ont été développées pour améliorer les délais d’acquisition de la commande : le click & collect en est un exemple.
  • Pour le fait de ne pas pouvoir bien voir les produits, le titre de la partie de cet article est un indice de réponse 😉

Oui, la 3D est une solution a un des gros problèmes du e-commerce.

Une des tendances du moment qui est destinée à durer est la personnalisation de produit. Les consommateurs cherchent de plus en plus des produits « uniques » qu’ils auront personnalisé dans les moindres détails comme on peut le voir avec le succès des modèles de chaussures Nike by You ou encore Customs de Vans. Et pour cela, la 3D permet facilement de personnaliser des produits de façon ludique et intuitive.

Cependant, la 3D n’est pas encore la méthode la plus utilisée par les sites e-commerce.
Elle paraît dispendieuse et longue à mettre en place, mais en 2020 ce n’est plus le cas.

De nombreuses entreprises se sont spécialisées dans l’imagerie 3D afin de proposer des tarifs identiques à un shooting photos pour vos produits et autant voire plus rapide à finaliser que tout le travail nécessaire après un shooting.

Exemple d’un produit de la boutique Lolo Chatenay présenté en 3D par l’outil de Hapticmedia:

En quelques points, voici les avantages de la 3D pour votre site web :

  • Permet de présenter le produit sous tous ses angles et rassurer les clients
  • Donne une image moderne et novatrice à vos visiteurs
  • Permet de vous différencier de vos concurrents
  • Donne la possibilité de personnaliser vos produits et voir le résultats instantanément
  • Permet de proposer des visuels de très haute définition et donc de pouvoir zoomer sur les détails
  • Permet des corrections rapides et moins dispendieuses comparé à une séance photo classique

Alors maintenant, vous n’avez plus d’excuses pour afficher vos produits en 3D sur votre site web.

Articles d'intérêt