Zoom sur les 6 tendances 2016 en matière de design de site web

Le design est un des éléments les plus importants sur un site internet. Un site au design bâclé fera forcément mauvaise impression sur vos visiteurs. Le design doit donc être particulièrement soigné et réfléchi. Sur internet, le terme « design » fait à la fois référence aux aspects purement visuels et esthétiques mais renvoie aussi à l’ergonomie. Nous allons voir dans cet article à quel point les deux aspects sont inséparables et comment les tendances 2016 en matière de design de site internet placent l’expérience utilisateur au coeur des préoccupations. Voici les 6 grosses tendances 2016 identifiées par Jerry Cao du site Uxpin.com.

1. Le Responsive Design, pour s’adapter aux nouveaux usages internet

Le Responsive Design reste une tendance lourde pour 2016. Pour celles et ceux qui ne sont pas encore familiers de ce concept, un design « responsive » est un design dont le mode d’affichage s’adapte en fonction de l’appareil utilisé par le visiteur. Concrètement, un site qui utilise un thème « responsive design »s’affiche aussi bien sur ordinateur, sur mobile et sur tablette. Le « Responsive Design » n’est certainement pas une mode passagère. Il répond à une nécessité structurelle : la montée en puissance du mobile, de la navigation internet sur smartphone et sur tablette. Plus de la moitié des connexions s’effectuent aujourd’hui à partir d’un appareil mobile.

Un design responsive mal codé peut contribuer à ralentir la vitesse de votre site internet, et donc ses performances. Pour éviter cela, les développeurs doivent prendre en compte un certain nombre de bonnes pratiques. Guy’s Pod, dans un de ses articles, donne 5 conseils au webdesigners pour optimiser votre design responsive :

1. Eviter les images cachées utilisant une technique de chargement basée sur JavaScript ou CSS. Si la balise display:none permet de cacher certaines images aux internautes, ces images sont tout de même chargées par le serveur. C’est donc contreproductif et ça ralentit votre site internet inutilement.
2. Utiliser des images responsive, c’est-à-dire des images dimensionnées en fonction du mode d’affichage (mobile, desktop…). Ce qui suppose de créer plusieurs versions de chacune de vos images.
3. Utiliser la technique du chargement conditionnel JavaScript. Lors de l’affichage de vos pages sur un petit écran, certains éléments JavaScript ne s’afficheront pas.
4. Utiliser un RESS, acronyme pour Responsive and Service Side, afin d’optimiser l’affichage de votre site pour les visiteurs connus.
5. Utiliser un outil de test de performance afin d’identifier les éléments à améliorer et les éventuels problèmes existants au niveau du design de votre site. Vous pouvez utiliser un outil comme Google PageSpeed Insights. Il en existe quantité d’autres, gratuits ou payants.

Il est très important d’optimiser la performance (c’est-à-dire la vitesse de chargement) de votre site responsive design. Au moins pour deux raisons : 1/ un site trop lent impacte très négativement la qualité de l’expérience utilisateur et 2/ la vitesse d’un site internet est un facteur important pour le référencement. La lenteur d’un site nuit à son référencement SEO. Si ce sujet vous intéresser, voici 10 astuces SEO pour booster le trafic du référencement naturel. Toujours concernant le SEO, rappelons que Google a annoncé publiquement en 2015 avoir fait du mobile-friendly un facteur de référencement. C’est dire l’intérêt du responsive design. Plus qu’une tendance design, le responsive design est déjà devenu une bonne pratique. Une bonne pratique pas prête d’être remise en cause.

Découvrez 9 techniques pour améliorer la vitesse de chargement de votre site WordPress (les conseils valent aussi en partie pour les autres sites !).

2. Les animations, pour enrichir l’expérience utilisateur et personnaliser votre site

De plus en plus de sites intègrent des animations afin d’enrichir l’expérience utilisateur et l’interactivité. Les animations, bien placées et bien choisies, permettent aussi d’apporter une touche personnelle à votre site internet, de le personnaliser. Voici une série d’exemples d’animations :

1. Les animations lors du chargement de vos pages

Les internautes détestent les sites qui mettent trop de temps à se charger. Raison pour laquelle vous devez toujours chercher à optimiser le temps de chargement de votre site, comme on l’a vu. Malgré tout, il est impossible de supprimer entièrement les temps de latence. Pour réduire l’impact négatif de ces moments d’attente côté visiteur et pour divertir les internautes, certains sites utilisent des animations. Ces « loading animations » sont de plus en plus populaires. Vous avez déjà du en apercevoir. Voici un exemple (Slack) :

Un conseil : évitez d’ajouter du son. Votre animation doit être simple et purement visuelle de préférence. Faites en sorte que votre animation soit en phase avec l’image de votre site (dans le choix des couleurs notamment). Vous ne connaissez pas (encore) Slack ? Nous vous invitons vivement à découvrir notre article de blog sur le phénomène Slack, sa croissance et ses usages possibles et à rejoindre la communauté Slack de La Fabrique.

2. Les « hover animations »

Il est difficile de traduire le terme « hover animations » en français. Par contre, le concept est très simple. Il s’agit de lancer une animation dans une zone spécifique au moment où l’internaute la survole. Cela crée un effet de dynamisme et d’interactivité très intéressant et très efficace.

3. Les slideshows

Les slideshows (ou galeries) est une technique qui consiste à faire défiler plusieurs images. C’est en général très efficace et permet : 1/ de proposer aux visiteurs des images de grande taille, 2/ de ne pas surcharger les visiteurs en images simultanées (le visiteur ne voit qu’une seule image à la fois) et 3/ de rendre votre site plus dynamique. Les slideshows sont très utilisés sur les sites de photographies, les portfolios mais aussi sur les sites de showcases.

4. Le smooth scrolling

Le smooth scrolling (défilement doux), qui est créé grâce à une fonction JavaScript, rend la navigation sur votre site plus fluide et plus agréable. Le smooth scrolling permet notamment de faire défiler la page vers le haut ou vers le bas sans l’effet de cran désagréable du scrolling traditionnel. Le smooth scrolling peut être complété par un effet parallaxe (voir plus bas). Exemple du site de l’éditeur Squarespace :

Vous êtes à la recherche d’images ou d’icônes gratuites ? Nous avons sélectionné pour vous plus de 200 ressources graphiques gratuites (banques d’images, icônes, etc.).

5. Les animations mobiles

L’oeil est naturellement attiré par les éléments en mouvement. Intégrer des animations mobiles sur votre site permet de mieux capter l’attention de vos visiteurs et de créer de l’intérêt. Les animations mobiles peuvent être utilisées pour mettre en valeur certains éléments clés sur votre site : formulaires, call-to-actions, produits. Voici un exemple par mi d’autres (Bugaboo) :

3. Le « Material Design », pour rendre le design de votre site internet plus interactif

Le « Material Design » est un ensemble de règles de design modernes proposées par Google en 2014. Au départ à destination des applications Android, les techniques de Material Design peuvent aujourd’hui être intégrées sur les sites internet. L’objectif du Material Design est de fournir aux visiteurs une expérience utilisateur de meilleure qualité. Non seulement plus intuitive, mais aussi basée sur des interactions. Il permet par ailleurs de proposer aux internautes une expérience unifiée et d’un même niveau de qualité sur tous les types d’appareils mobiles. Très proche du Flat Design (voir plus bas), le Material Design s’en distingue par l’utilisation des effets d’ombre, de mouvement et de profondeur. Cet ensemble de règles proposées par Google ne repose sur aucun framework spécifique mais utilise des langages très variés, du vanilla CSS au JavaScript en passant par le HTML. Encore très peu de sites internet utilisent ces règles, mais c’est clairement une tendance 2016. Le Material Design n’a pas fini de faire parler de lui.

Google Now utilise les règles du Material Design :

4. Le Flat Design, pour une expérience utilisateur plus simple et plus intuitive

Certains pensent que le Material Design a signé la mort du Flat Design. En fait, il n’en est rien. Le Flat Design reste une tendance importance sur internet. Il peut d’ailleurs s’enrichir par ajout d’éléments de material design. Les deux sont donc complémentaires plus que concurrents. Exemple de site utilisant un Flat Design (Build in Amsterdam) :

Le Flat Design est caractérisé par l’utilisation de formes simples, par l’absence de textures et d’effets de volumes et enfin par l’utilisation de couleurs souvent vives qui permet de distinguer facilement les différents éléments de page. Plusieurs nouvelles tendances se dessinent au niveau Flat Design. Notamment l’utilisation :

• D’effets d’ombre pour donner plus de profondeur.
• De couleurs de plus en plus vives et tranchantes.
• De typographies simples et sans fioritures pour rendre les textes plus lisibles.
• De boutons cachés, s’affichant uniquement lorsque la souris passe dessus (hover effect).

5. Les micro-interactions, pour humaniser l’expérience utilisateur

On dit parfois que le diable se cache dans les détails. En l’occurrence, les détails sur un site internet, ce sont notamment toutes ces petites interactions qui font la différence et qui contribuent à rendre votre site unique. Les micro-interactions, comme leur nom l’indique, ce sont tous les petits éléments d’interaction entre le visiteur et l’interface digitale. Les micro-interactions sont omniprésentes sur le mobile. Exemple : le geste pour éteindre son alarme d’iPhone (à la limite on pourrait même dire que les micro-interactions sont l’essence même des applications mobiles). Mais elles sont aussi de plus en plus présentes sur les sites internet. De fait, les micro-interactions représentent une tendance lourde sur le net. En faisant de l’internaute un acteur, elles améliorent considérablement l’expérience utilisateur et permettent de l’humaniser.

Découvrez les 8 tendances ergonomie / design sur les sites ecommerce.

6. Les Design Patterns, pour optimiser la conception et la personnalisation de votre site internet

Les design patterns, ce sont des modules ou des règles graphiques qui permettent de simplifier l’expérience utilisateur. Ce sont aussi des éléments de personnalisation de votre site internet. Ils permettent de se différencier visuellement et graphiquement des autres sites. Ce qui est en soi une très bonne chose, quand on constate le nombre de sites qui se ressemblent. Mais les design patterns ont aussi pour fonction d’optimiser l’ergonomie de votre site, et notamment la navigation. Voici quelques exemples de design patterns qui ont actuellement le vent en poupe :

1. Le menu hamburger, pour masquer le menu sans le supprimer

Les menus prennent parfois beaucoup de places sur vos pages et peuvent paradoxalement contribuer à complexifier l’expérience utilisateur. Surtout lorsque vous affichez dans le menu des dizaines et des dizaines de catégories et sous-catégories. Une astuce consiste à afficher une icône en forme d’hamburger bien reconnaissable dans un coin de votre site (en général en haut à droite ou en haut à gauche). Le visiteur n’a qu’à cliquer dessus pour que le menu s’affiche. Amazon comme bien d’autres a opté pour cette solution :

Vous pouvez aussi opter pour ce qu’on appelle un « mega menu ». Pour en savoir plus, découvrez notre article « Mega menu en ecommerce – Analyse des tendances« 

2. Le long scroll, pour en dire le maximum sur une seule et même page

La règle des trois clics prétend qu’un internaute doit pouvoir accéder à n’importe quelle page du site ne moins de trois clics. Cette règle vaut ce qu’elle vaut. Elle a au moins le mérite de souligner une chose : les internautes sont feignants. Ils veulent accéder le plus simplement et le plus rapidement possibles aux informations qu’ils recherchent. Peu d’entre eux prennent la peine de fouiller dans les pages du site. D’où l’intérêt d’ajouter un maximum de sections sur une même page. Au moins sur vos landing pages. L’internaute n’aura qu’à scroller la page pour trouver ce qu’il cherche. Il est beaucoup plus simple et beaucoup moins pénible de scroller que de cliquer. C’est pour le coup une règle vérifiée sur le web. Voici un exemple de site qui présente une page d’accueil longue (Atlassian) :

Autre exemple : le site True Digital dont nous avons déjà parlé plus haut. Pour rendre ces pages longues lisibles et claires, pensez à bien distinguer vos sections en utilisant un fonds différent à chaque fois par exemple. Pensez aussi à placer les informations les plus importantes au-dessus de la ligne de flottaison pour que vos visiteurs les aient sous les yeux dès qu’ils arrivent sur la page.

3. Les patterns de création de compte

Ce pattern apparaît à chaque fois qu’un visiteur tente de s’inscrire sur le site. Il peut s’agit d’un formulaire à remplir ou même simplement d’un bouton d’inscription via les réseaux sociaux (Facebook Connect par exemple). Un conseil : proposez à vos visiteurs un formulaires en plusieurs étapes avec un assistant logiciel pour réduire la friction et encourager les visiteurs à suivre le processus d’inscription jusqu’au bout. Voici un exemple (WordPress) :

4. Les images full-screen (hero image)

Les images full-screen sont, comme leur nom l’indique, des images qui prennent toute la largeur et toute la longueur de l’écran. On parle aussi de « hero images ». Les hero images, quasiment toujours affichées tout en haut de la page, attirent instantanément le regard de l’internaute qui atterrit sur la page et contribue à créer un effet d’immersion très efficace. Ces images de grande taille jouent le rôle d’une introduction – à votre univers, à vos valeurs, à votre offre, etc… Elles permettent aux internautes de comprendre instantanément ou presque sur quel site ils ont atterri. Voici un exemple (Sweet Basil) :

Conseil : pensez à bien optimiser le poids de vos images afin d’éviter de ralentir votre site. Vous pouvez utiliser par exemple un outil comme « Tiny PNG » (qui gère aussi, comme son nom ne l’indique pas, le format JPG).

5. Les cartes, pour une présentation claire des éléments de page

C’est Pinterest qui le premier a utilisé ce type de pattern visuel. Les cartes sont aujourd’hui présentes sur de nombreux sites internet en raison de la clarté d’affichage qu’elles permettent d’obtenir. La séparation nettes des cartes et le jeu sur leur dimension rendent le scanning du site beaucoup plus simple pour l’internaute. Voici un exemple (CNET France) :

Autre exemple :

On peut constater que toutes ces tendances actuelles en matière de design de sites web ont un point commun : elle place l’expérience utilisateur. Toutes cherchent, à un degré ou à un autre, à rendre la navigation sur les sites internet plus facile, plus rapide, plus intuitive, plus interactive aussi. Il existe certainement d’autres tendances design. N’hésitez pas à les partager en commentaire !

Vous avez besoin d’un logo ? Découvrez le coût de création d’un logo (zoom sur 4 options).