Le développement d’Internet en tant qu’appareil d’information démesuré se reflète dans les innovations en matière de conception qui ont changé l’apparence du World Wide Web au fil des ans. Par-dessus-tout, la révolution mobile a forcé les concepteurs de sites Web à repenser radicalement leur conception. Aujourd’hui, ils sont censés présenter un Internet qui s’adapte sur les écrans les plus petits sans oublier des informations précieuses. Mais aussi à un niveau plus spécifique de Web design, de nouvelles tendances peuvent être observées encore et encore, qui déterminent déjà aujourd’hui l’Internet de demain. Nous vous présentons 8 de ces tendances afin que vous soyez bien préparé pour le Web design moderne en 2019.
Tout d’abord, on peut observer des évolutions basées sur l’adaptation mobile de ces dernières années. Les sites Web doivent devenir encore plus efficaces et conviviaux afin de rester en phase avec la concurrence sur le marché en ligne, que ce soit sur PC, sur tablette ou sur smartphone. Les designs encombrants et légèrement surchargés des années 2000 ont une longue histoire ; l’œil humain en a assez. La nouvelle maxime est la concentration sur l’essentiel.
Le nouveau besoin s’appelle le confort de l’utilisateur, c’est-à-dire la « facilité d’utilisation » des offres Web. La clé de cette tendance est celle qui est si importante pour le marché mobile : le Web design responsif qui privilégie la flexibilité technique en prenant en compte le terminal utilisateur. La conception moderne d’un site Web signifie donc que ce dernier « réagit » efficacement à l’appareil de l’utilisateur et se présente en conséquence. La conception des sites Web responsif est consciemment conçue en tenant compte de la prévoyance afin que les sites Web puissent réagir en toute confiance à de nouveaux systèmes ou à des systèmes qui ne leur étaient pas familiers auparavant. En outre, les concepteurs de sites Web ne se développent plus uniquement pour les navigateurs, de nombreux fournisseurs de sites Web parmi les plus connus permettent une utilisation mobile plus facile via leurs propres applications.
Certains mots à la mode dans le Web design subsisteront en 2019. D’une part, il existe l’Internet des objets qui reconnaît une numérisation croissante de la vie quotidienne et veut offrir aux utilisateurs encore plus de possibilités d’interaction. D’autre part, les progrès significatifs de la recherche sur l’IA signifient que les services Web automatisés s’améliorent de plus en plus ; les concepteurs Web sont susceptibles d’essayer d’exploiter pleinement ce domaine également. Enfin et surtout, l’importance croissante accordée au snackable content signifie également que les offres Web sont aussi accrocheuses que possible et que la convivialité est une priorité absolue. Si ces deux tendances Web design, axées sur la convivialité et le contenu à « grignoter », fonctionnent réellement ensemble et que d’autres idées novatrices et courageuses prévalent, 2019 devrait être une année passionnante pour les concepteurs Web.
Les tendances en Web design n’existent presque jamais dans le vide. Elles ont des tendances adjacentes ainsi que des concurrents qui mènent un élément de design particulier dans une direction différente ou même opposée. Parfois, les contre-tendances se développent à partir d’une réaction à certaines tendances, lorsqu’elles deviennent de plus en plus apparentes. Les concepteurs Web s’appuient souvent sur une contre-tendance pour se démarquer aujourd’hui dans le paysage Internet de demain. Voici quelques exemples de tendances Web design et contre-tendances correspondantes que nous rencontrerons également en 2019.
Tendances | Contre-tendances |
Banque d’images : les images professionnelles d’agences de stock photo qui se laissent intégrer dans de nombreux sites Web constituent une option sécurisée pour enrichir le design de votre site Web. | Images individuelles ou authentiques : elles jouent la carte de la proximité et montrent comment sont réellement les personnes et les entreprises, afin de parler le plus directement possible aux visiteurs. |
Formes symétriques : les formes de boîtes, les « grilles plates », par exemple, des pages Web conçues strictement horizontalement et verticalement facilitent la navigation et sont efficaces à utiliser. Ces pages suivent la nature « rectangulaire » éprouvée et familière du HTML et du CSS. | Formes asymétriques : designs expérimentaux, surfaces Web au design innovant qui rompent avec les conventions communes et veulent se démarquer par l’individualisme et le jeu. |
Conception d’une page, de sorte que toutes les informations importantes sont présentées et regroupées sur une seule page épargnant ainsi autant de clics que possibles à l’utilisateur. Il vaut mieux laisser l’utilisateur (de plus en plus mobile) faire défiler les informations plutôt que cliquer. Certaines mises en page standard sont de plus en plus acceptées, en particulier pour les entreprises qui opèrent sous forme numérique. | Nostalgie des tendances Web design qui veulent revenir aux principes des surfaces Internet des années 2000 (« Web brutalism », minimalisme, texte) ou aux barres de menu et boutons techniquement innovants qui sont encore nécessaires pour naviguer sur le site, mais qui ne sont pas encombrants pour une utilisation mobile (menus hamburgers, micro-interactions) |
Design coloré : des couleurs complémentaires fortes et des dégradés de couleurs qui donnent à un site Web un certain cachet. En outre, il existe un symbolisme de couleur ou une association de couleurs délibérément utilisée (bleu pour les produits numériques, vert pour les entreprises caritatives, rose pour les cosmétiques, etc.) | Minimalisme des couleurs et beaucoup d’espace blanc afin de laisser le plus de place possible aux informations communiquées. Les sites Web strictement bicolores (« Duotone ») se focalisent sur le confort de l’utilisateur et renoncent à l’utilisation de couleurs complexes. En revanche, les marques et les symboles sont souvent utilisés afin d’attirer l’attention. |
Dans l’ensemble, le Web design continue de se développer dans la même direction que celle établie depuis quelques années : attention accrue aux appareils mobiles (Web design réactif), contenu facilement accessible, interfaces orientées sur les objectifs et interfaces utilisateurs réactives ou interactives. Simultanément, les développements dans le domaine de l’intelligence artificielle ont toujours plus d’impact sur les Web designers, à mesure que les nouvelles technologies deviennent plus accessibles. Ce qui est sûr est que l’année 2019 poursuivra les diverses tendances de Web design des années précédentes et ne modifiera pas fondamentalement le paysage Internet. Toutefois, certaines tendances convergent vers une nouvelle amélioration de l’expérience utilisateur sur les plateformes qui veulent contribuer aujourd’hui à façonner l’Internet de demain.
Il s’agit en fait moins d’une tendance qu’un principe fondamental de sites Web bien conçus : la vitesse devient encore plus importante. Ceci est en partie à relier à la révolution mobile : les opérateurs de sites Web souhaitent que leurs pages soient accessibles facilement sur mobile et ne prennent pas trop de volume. Plus les pages Internet se chargent rapidement, meilleure est l’expérience utilisateur. C’était déjà le cas il y a 10 ans. Cependant, il existe une tendance à surveiller : le Web designer renonce souvent au cours du temps à des éléments de sauvegarde intensive afin de garantir l’utilisation la plus rapide possible de son site Web.
Bien d’autres tendances Web 2019 commencent ici. Par exemple, le minimalisme croissant dans la conception des sites Web signifie que les supports à forte intensité de stockage sont en grande partie supprimés et les formats qui maintiennent les coûts de stockage bas sont préférés. Les sites Web à « défilement long », qui placent toutes les informations nécessaires sur une seule page déroulante, marquent des points avec le fait que l’utilisateur n’a plus qu’à charger celle-ci et pas plusieurs sous-pages par la suite. L’espace blanc de plus en plus populaire signifie aussi l’absence d’éléments qui pourraient ralentir la vitesse de chargement d’un site Web.
Internet est devenu de plus en plus rapide en dépit de son temps de développement relativement court. Il y a pourtant des voix qui s’élèvent pour dire qu’il est loin d’être assez rapide. Avant tout en ce qui concerne les réseaux de données mobiles qui ne sont pas encore suffisamment puissants dans de nombreuses régions. Cependant, les Web designer peuvent dès aujourd’hui pallier à ces lacunes en concevant leurs sites Web aussi facilement que possible.
D’autres tendances actuelles du Web design moderne comme les animations interactives, les effets de parallaxe ou un arrière-plan dynamique font sensation et améliorent (efficacement utilisés) la réception de l’information. Cependant, la conception d’un site Web complexe a souvent un effet négatif sur la performance. Les Web designers doivent ainsi examiner attentivement quels contenus multimédias et interactifs offrent une valeur ajoutée à l’utilisateur et lesquels ralentissent de manière inutile le site Web. En règle général : le mieux est l’ennemi du bien, ce qui ne signifie pas nécessairement un retour à une conception « plate ».
À retenir : la performance d’un site Web agit directement sur l’expérience de l’utilisateur. Il faut bien faire la différence entre le temps de chargement ressenti et factuel. Les ralentissements ne sont uniquement problématiques que lorsque les utilisateurs les perçoivent comme tels. Les Web designers s’appuient donc, entres autres, sur les mesures suivantes pour compenser des temps de chargement plus longs :
Si le visiteur doit attendre, il devrait au moins savoir combien de temps. La barre de progression ne raccourcit pas le temps de chargement mais elle peut au moins le rendre plus tolérable si elle est conçue de manière intéressante. L’utilisateur ne devrait tout du moins pas être tenté de quitter à nouveau le site s’il est contraint d’attendre. Après tout, la marge de tolérance de l’utilisateur moderne d’Internet est devenue de plus en plus petite au fur et à mesure que les connexions sont devenues plus rapides.
Un indicateur de progression de chargement peut être affiché avec une barre comme montré ici. Source : http://www.cssflow.com/snippets/animated-progress-bar/demo.
Les sites Web doivent être programmés de telle sorte que les contenus « Above the fold » (au-dessus du pli) doivent d’abord être recherchés et affichés dans le navigateur. Il s’agit des parties de la page qui sont visibles sans devoir faire défiler. Si ce contenu est disponible, il importe peu à l’utilisateur de savoir si un contenu supplémentaire (« below the fold ») sera chargé ultérieurement.
Les images incorporées en JPEG progressive ne s’accumulent pas de haut en bas dans la résolution finale lorsqu’elles sont chargées. À la place, c’est la méthode de l’entrelacement, aussi connue sous le nom d’affichage progressif, qui est utilisée : une image de prévisualisation de faible qualité s’affiche d’abord, et elle est ensuite progressivement affinée jusqu’à ce que les données pour la qualité d’image souhaitée aient été complètement chargées.
Vous trouverez dans notre article plus d’astuces pour améliorer les performances de votre site Web.
En résumé, il en va de même pour les vidéos, les photos et les gadgets de toutes sortes et le contenu : ils doivent être de haute qualité, uniques et pertinents pour l’utilisateur. Il est également logique qu’un tel contenu ne soit chargé que lorsque le visiteur le recherche. Les utilisateurs d’appareils mobiles ou de connexions Internent plus faibles bénéficient en particulier de sites Web bien structurés qui ne contiennent pas de surcharge de données inutiles.
Un coup d’œil sur Internet montre qu’il existe des banques d’images à perte de vue. Ces dernières années, les exploitants des sites Web se sont simplifié la tâche. Au lieu de créer des images spéciales, l’acquisition relativement peu coûteuse de photos à partir de bases de données existantes est désormais une procédure standard. Cependant, cela manque d’originalité. Et la valeur ajoutée pour l’utilisateur s’en trouve limitée lorsque des motifs plus ou moins arbitraires desservent le thème du texte.
Cependant, le plus grand inconvénient des banques d’images est leur adéquation en masse. Les utilisateurs sont susceptibles de trouver les mêmes photos sur une variété de pages sur le Web. Des sites Web avec un contenu vidéo et d’image unique et de haute qualité se distinguent de la foule. Une tendance majeure pour la conception de sites Web en 2019 est l’utilisation d’images de fond, de graphiques et de vidéos dynamiques.
Les éléments d’arrière-plan dynamiques permettent aux opérateurs de sites Web de communiquer des informations plus rapidement et plus directement qu’avec des éléments de texte. De plus, les visiteurs peuvent être touchés sur un plan émotionnel à l’aide de photos, de graphiques ou de vidéos. C’est la raison pour laquelle on utilise souvent un arrière-plan dynamique dans le but de créer des sentiments et de mettre le visiteur dans l’ambiance désirée.
Les micro-interactions sont une tendance dans l’UX Design, dans laquelle les interactions utilisateurs sélectionnées sont accompagnées de petits effets d’animation. Cela peut, par exemple, se traduire par un bouton « like » qui récompense l’utilisateur par un effet de mouvement ou la vibration du smartphone. Pour les experts en UX comme Dan Saffer ce sont ces mêmes détails qui constituent l’expérience utilisateur.
Exemple pour des animations réussies avec lesquelles vous pouvez réaliser de micro-interaction : trouver des opérateurs de site Web sur Awwwards.com ou Dribbble.
La devise « Mobile first » ne vaut pas seulement pour les fenêtres de visualisation et l’affichage sans perte de contenu Web sur différents terminaux. La tendance vers les appareils mobiles aura une influence croissante sur le contenu Web à l’avenir. Une des évolutions les plus importantes dans ce contexte : le passage du clic au défilement. En principe, le site à défilement est une ancienne tradition. Toutefois, les concepts de design tels que le défilement infini ou l’effet de parallaxe continuent à jouir d’une grande popularité et restent donc en vogue en 2019.
Le défilement infini permet aux visiteurs du site Web d’accéder à un nouveau contenu en faisant défiler au lieu de cliquer. Une fois la fin d’une section d’information atteinte, la suivante suit immédiatement. Les réseaux sociaux comme Facebook, Instagram, Reddit et Quora utilisent cette méthode depuis longtemps pour présenter du contenu aux utilisateurs dans un flux d’information continu. Les utilisateurs sont confrontés au « défilement infini » dans les blogs aussi et celui-ci continuera à jouer un rôle à l’avenir.
Le défilement à l’infini est idéal pour les sites Web contenant un large éventail d’informations. Alors qu’un blog de 100 à 200 entrées peut toujours être facilement paginé, l’avantage du fractionnement de page pour les grands projets Web diminue avec l’augmentation du volume d’informations. Il est peu probable qu’un utilisateur appelle spécifiquement la page 812 sur un total de 5782 sous-pages. Le défilement à l’infini, par contre, est habituellement utilisé avec des algorithmes sophistiqués qui pré-filtrent l’information offerte et présentent d’abord les entrées les plus pertinentes aux utilisateurs.
Toutefois, les opérateurs de sites Web qui veulent sauter sur la tendance de défilement infini en 2019 devraient prêter attention à une mise en œuvre conviviale pour les moteurs de recherche. Alors que Google avait au départ du mal à parcourir les sites Web de défilement, le défilement infini peut maintenant être implémenté en toute sécurité grâce aux spécifications de conception détaillée du leader sur le marché des moteurs de recherche. Dans tous les cas, notez les aspects suivants :
Le site Web de démonstration du webmaster et analyste de tendances John Mueller est un exemple d’implémentation du défilement infini dans les moteurs de recherche Google.
Le défilement parallaxe n’appartient pas non plus aux nouvelles tendances Web 2019 mais continue de prendre de l’importance. L’effet du mouvement parallaxe est déjà utilisé depuis quelques années comme une composante de base des sites Web modernes. Par ce biais, les niveaux individuels du site Web se déplacent à des vitesses différentes, créant un effet de perception de la profondeur. Normalement, le site Web devrait également afficher des éléments qui invitent le visiteur à agir en plus de l’effet de mouvement. Le défilement parallaxe peut donc être parfaitement combiné avec le storytelling interactif. La page « Every Last Drop » illustre cela très clairement.
La présentation du contenu Web en fonction du groupe cible est l’un des principes de base de la conception Web moderne. Dans le domaine du commerce électronique en particulier, la sélection du contenu et sa présentation doivent être adaptées aux besoins des clients potentiels. Alors qu’auparavant, l’accent était mis sur des groupes de personnes abstraits, en 2019, l’expérience utilisateur de l’individu sera au cœur de l’objectif.
Alors que des fonctions telles que « Ceci pourrait aussi vous plaire » sont déjà indispensables dans toute boutique en ligne aujourd’hui, des fournisseurs tels que le service de streaming musical Spotify ou le portail de vidéo à la demande Netflix font un pas de plus et adaptent directement la gamme des informations, produits et styles de présentation à chaque personne. Ainsi, deux utilisateurs ne voient presque jamais la même sélection de produits individualisés sur la page d’accueil du portail respectif.
Amazon présente de nombreuses recommandations personnalisées concernant des articles qui « pourraient aussi vous plaire ». Source : https://www.amazon.fr/.
Une tendance Web design 2019 sera le site Web personnalisé où les visiteurs pourront voir le contenu selon leurs habitudes d’utilisation. La base de données pour une interface utilisateur personnalisée est fournie par des outils d’analyse Web tels que Google Analytics ou Piwik qui délivrent aux fournisseurs de contenu une image plus complète de la façon dont les internautes interagissent avec le contenu Web.
Les petites images animées qui sont jouées en boucle connaissent une renaissance spectaculaire depuis 2018. Elles bénéficient de nouveaux formats beaucoup plus puissants tels que WebM et sont disponibles sur de nombreuses plateformes de communication. Elles présentent plusieurs avantages : d’une part, les GIF sont des fichiers relativement petits, d’autre part, ils sont joués automatiquement afin de ne pas entraver l’expérience utilisateur. À l’inverse des Videos WebM et beaucoup d’autres formats animés, les GIF peuvent se passer de son et sont ainsi moins intrusifs.
Une partie essentielle de l’essor des GIF est constituée de diverses bibliothèques GIF comme Giphy, avec l’aide desquelles les GIF peuvent être facilement intégrés partout. En outre, ces bibliothèques offrent un choix incroyablement large, de sorte que presque chaque utilisateur peut trouver un GIF approprié à partir d’une variété de sources. Il n’est donc pas surprenant que la culture mème s’épanouisse au sein de ces GIF. En 2019, la communication en ligne se fera à nouveau non seulement par le texte et les émojis, mais aussi par les GIF qui peuvent être utilisés de différentes manières.
Les programmes pour les tâches de communication ne sont pas nouveaux. Les Chatbots sont issus du domaine de recherche de l’Intelligence Artificielle (IA) et sont déjà utilisés aujourd’hui sur les sites Internet des entreprises ou dans les boutiques en ligne. En règle générale, il s’agit de petites boîtes de dialogue qui reçoivent les questions des utilisateurs et jouent les réponses générées automatiquement. Ceux-ci peuvent être personnalisés grâce à des algorithmes d’apprentissage machine. L’utilisateur a l’impression que c’est un employé humain qui répond aux questions. Les chatbots sont utilisés comme assistants d’achat virtuels ou comme alternative à la FAQ classique.
Sur g2crowd.com, un petit chatbot s’active en bas de l’écran en un clic pour vous aider à trouver le contenu que vous voulez. Source : https://www.g2crowd.com
Les chatbots sont rarement intrusifs mais sont généralement commutés via de petits éléments interactifs. L’utilisateur a ainsi l’impression d’être contacté en temps réel par un employé du service Web. Dans la plupart des cas, l’utilisateur a la possibilité de répondre à la demande sans quitter le site. La méfiance des interlocuteurs contrôlés par l’IA s’est peut-être quelque peu atténuée depuis les succès de Siri, Alexa, Cortana et Co. Dans la plupart des cas, cependant, les chatbots ne sont (pour l’instant) pas plus que des barres de recherche qui réagissent plus dynamiquement aux requêtes de recherche. Il sera intéressant de voir dans quelle mesure les chatbots se développeront en 2019.
Le fait qu’une mise en page judicieuse soit reproduite rapidement et fréquemment est également visible à maintes reprises dans les tendances Web 2019. Les interfaces utilisateur de nombreux sites Web et applications Web s’appuient de plus en plus sur les meilleures pratiques en matière de conception et de disposition du contenu. Ici, la mise en page influence toujours la facilité d’utilisation d’un site Web.
Fondamentalement, vous ne faites jamais rien de mal avec une interface utilisateur (UI) bien rangée. De même, on peut se fier en toute conscience à la conception de portail établie de longue date pour les sites Web étendus ou à la conception de blog pour les sites Web plus petits. Deux tendances de mise en page plus récentes dans la conception Web peuvent être également trouvées sur de nombreuses interfaces utilisateur graphiques en 2019.
Ce phénomène s’est établi si rapidement que de nombreux utilisateurs le considèrent déjà comme allant de soi dans la mise en page de leur menu : le petit bouton de menu latéral, aussi appelé « bouton hamburger » ou « navigation sur le côté ». Initialement, il était principalement utilisé pour les menus déroulants des sites Web mobiles et des applications. L’icône marque également le bouton menu sur de nombreuses versions de bureau. Le symbole rappelle un hamburger stratifié et est souvent représenté par le symbole mathématique « ≡ », qui signifie en fait « identique ».
La deuxième nouvelle tendance en matière de conception de sites Web concerne la présentation du contenu. La mise en page des cartes (aussi appelée « design à base de cartes ») est de plus en plus utilisée. Le contenu textuel et/ou visuel ou les boutons « Call to Action » sont présentés dans plusieurs cases réparties sur l’interface utilisateur. Cela présente plusieurs avantages. En plus des nombreuses possibilités de conception d’un site Web de manière claire et visuellement attrayante, la disposition des cartes dans la conception Web a également ses avantages d’un point de vue pragmatique : comme les boîtes individuelles ou les cartes fonctionnent comme des conteneurs pour le contenu Web, elles peuvent être facilement déplacées à l’intérieur de la grille de conception du site Web. Particulièrement avec une mise en page Web responsive, la redistribution du contenu des pages est extrêmement facile. La mise en page de la carte est devenue populaire principalement par le biais de services Web d’images tels que Pinterest ou de plateformes de conception Web telles que Dribbble.
Disposition de carte sur Pinterest avec le bouton de menu hamburger en haut à droite à côté de la barre de recherche (Source : https://www.pinterest.com/1and1com/we-love-the-internet/)
Les tendances Web 2019 sont sous le signe de l’interactivité. En outre, les sites Web devraient être conçus pour être encore plus conviviaux à l’avenir et permettre un accès rapide. Le contenu Web n’est pas adapté séparément aux différents terminaux, mais est optimisé pour une présentation inter-appareils dans le cadre de la conception réactive.
L’effet de parallaxe et le défilement infini sont des dispositifs stylistiques populaires pour accompagner les visiteurs sur le site Web. C’est aussi le mot-clé de la tendance du storytelling interactif : le client ne reçoit pas l’information désirée de manière directe dénuée de sentiments, mais il reçoit une histoire courte. Des illustrations dessinées à la main, des éléments de fond de haute qualité et des polices de caractères individuelles donnent au site une touche personnelle supplémentaire. Il est plus important que jamais de s’adresser personnellement aux visiteurs du site Web et d’attirer leur attention émotionnellement. Le principe reste le même : un site Web qui s’adresse à l’utilisateur et offre un contenu de haute qualité et attrayant est la première étape d’un parcours réussi sur le World Wide Web.
Si vous êtes en train de concevoir votre propre site Web ou si vous voulez mettre à jour votre site existant, vous devriez vous inspirer de certaines des tendances pour le Webdesign 2019. C’est ainsi que vous adapterez dès aujourd’hui votre site Web aux exigences et aux attentes de demain.
La typographie sur le Web est restée pendant très longtemps un domaine sans intérêt pour les concepteurs de site Web. Désormais, suite à certains progrès techniques en informatique, il est possible d’user de sa créativité grâce aux polices de caractères pour le Web sans que les utilisateurs d’un site Internet n’aient à les installer sur leurs terminaux. La police d’écriture est donc devenue...
L’utilisation d’une icon font pour intégrer des pictogrammes fonctionnels vectoriels dans votre site Internet présente de nombreux avantages. Premièrement, par rapports aux images classiques pixelisées, ces illustrations peuvent s’adapter à tous les supports sans que leur qualité n’en pâtisse. Par ailleurs, l’intégration via CSS présente de nombreuses possibilités de conception en se basant sur le...
Le Web mobile est synonyme de défi mais c’est aussi une belle occasion de réaliser une expérience utilisateur positive. Une mise en œuvre incomplète ou mal réalisée d’un site Internet mobile peut rapidement signifier tout le contraire d’une bonne expérience utilisateur. L’optimisation mobile de votre site Internet doit répondre aux nouvelles exigences d’un Web qui devient inexorablement de plus en...
Pour vous assurer que vos campagnes de newsletters restent efficaces, ne manquez pas ces tendances 2019 en emailing : vous découvrirez en effet plus d’options pour automatiser vos emails, utiliser l’intelligence artificielle, mais aussi des informations concernant la protection des données. Dans cet article sur les tendances relatives aux newsletters de cette année 2019, nous vous donnons quelques...
