DESIGN WEB : 10 TENDANCES POUR 2016

Le design web est en constante évolution. Chaque année qui passe amène sont lot de surprises et de changements dans la façon dont nous interagissons avec ce médium toujours en mouvement. Voici quelques tendances qui marqueront définitivement l’année 2016.

C’est bien connu, tout le monde aime se faire raconter une histoire. C’est d’ailleurs la raison pour laquelle le cinéma, les téléromans et les web-séries sont toujours bien vivants. Il n’y a qu’à regarder les statistiques des pubs qui affichent chatons, chiots et bébés pour en être convaincu. Les sites web n’y font plus exception. Pour capter l’attention du visiteur, on tente maintenant de raconter une histoire (storytelling), celle de la marque, touchante, poignante, qui sait rejoindre l’auditoire.

Les appareils mobiles de tous formats nous ont bien éduqués sur l’habitude de faire défiler le contenu (long scroll). De plus, l’humain a plus de facilité à se concentrer sur un élément précis ou à retenir l’essentiel d’un message lorsque le bruit visuel est à son minimum. Tenter d’afficher le plus grand nombre de contenu possible avant le pli de page, au risque de perdre des éléments importants dans le brouhaha est donc un mythe qui s’est éteint depuis un bout déjà.

La nouvelle façon d’afficher le contenu sur des pages plus longues permet, entre autres, de bien mettre en valeur l’idée de raconter une histoire avec des étapes précises, un ton unique et un rythme varié à chaque portion de la page, sans perdre la concentration du visiteur par des clics inutiles.

L’année dernière, Google a lancé un ensemble de règles de design nommé Material Design qui a pour objectif de créer un style contemporain se concentrant sur l’ergonomie de l’interface et la façon dont on y navigue.

Avec son aspect minimaliste, Material Design a donc beaucoup en commun avec une autre tendance devenue exponentielle dans les dernières années sur le web : le flat-design. Cependant, Material Design utilise les ombres portées et la profondeur pour mieux afficher la relation entre les différents éléments graphiques.

Jusqu’à maintenant, la majorité des projets créés par Material Design étaient des applications web. En juillet dernier, Google a lancé Material Design Lite, mieux adapté aux sites web. La version Lite utilise donc une base CSS, HTML et JavaScript destinée à afficher facilement le style Material Design.

CSS3 et Flexbox sont maintenant supportés par tous les navigateurs récents, ce qui signifie un CSS plus propre, des sites Web plus rapides et moins de tours de passe-passe (hacks) dans le code pour obtenir l’alignement désiré dans les mises en pages. Flexbox répond de façon naturelle aux navigateurs, sans l’utilisation des systèmes de grille responsive populaires.

Flexbox ne révolutionne pas l’esthétisme des mises en pages de façon dramatique mais offre plutôt une solution afin de produire des mises en page plus faciles à mettre en place et à entretenir. En conséquence, nous verrons peut-être apparaitre plus de créativité dans la disposition graphique des éléments sur la page.

Les animations sont utilisées fréquemment afin d’améliorer la narration d’un site, ce qui rend l’expérience plus interactive et ludique.

Cependant, il ne faut pas ajouter des animations n’importe où. En effet, il s’agit d’examiner attentivement si celles-ci améliorent une certaine fonctionnalité et si elles ajoutent de la personnalité à l’histoire que raconte votre site web.

Les animations tombent dans plusieurs catégories :

LES GRANDES ANIMATIONS. Celles-ci sont utilisées comme outil d’interaction primaire. Elles ont plus d’impact sur les utilisateurs et incluent des effets tels que le scrolling parallaxe et les notifications pop-up.

LES ANIMATIONS DE SURVOL. Les visiteurs qui sont incertains face à une fonctionnalité ont tendance à faire un survol avec la souris pour obtenir une réaction visuelle de la part de l’interface. Prendre le temps de bien animer les contenus pertinents tels les boutons, les icônes, les images et les liens menant à d’autres contenus peut améliorer la circulation sur le site web.

LES ANIMATIONS DE CHARGEMENT. On a vu l’apparition d’interfaces intermédiaires subtiles adoucissant le temps d’attente lors du chargement de la page réelle et de toutes ses données. Les applications Facebook et LinkedIn les ont implantées depuis un moment déjà. Ces états intermédiaires permettent d’avoir une idée générale de la mise en page lors du temps d’attente et ainsi rassurer l’utilisateur.

Remplir un formulaire en ligne peut souvent sembler long et inintéressant. On a donc vu l’apparition de formulaires morcelés en plusieurs étapes. Pour chaque étape, à peine un ou quelques champs à remplir. On passe d’une étape à l’autre pour poursuivre. Ici, tout est une question de perception. Puisque la longueur de chaque étape est moindre, le formulaire semble plus facile à remplir.

Les couleurs saturées ont fait leur retour sur le web depuis un moment. Par exemple, des bleus qui rappellent le bleu primaire des liens URL sur les premiers sites web des années 90.

Google propose avec Material Design des couleurs inspirées par des teintes fortes et saturées juxtaposées sur des couleurs neutres, un contraste entre des ombres profondes et des reflets brillants. Material Design s’inspire de l’architecture contemporaine, la signalisation routière, les bandes de couleurs vives peintes sur le pavé et les terrains sportifs. Les palettes de couleurs sont inattendues et dynamiques.

De son côté, Pantone prend une direction sociale avec le choix d’annoncer non pas une, mais deux couleurs de l’année. Un rose et un bleu pâle font donc leur arrivée côte à côte. «Cette approche coïncide avec les mouvements sociaux vers l’égalité et la fluidité des sexes, l’augmentation du confort du consommateur en utilisant la couleur comme une forme d’expression, une génération qui est moins préoccupée d’être cataloguée ou jugée et un échange d’information numérique qui a ouvert les yeux sur différentes approches de l’utilisation des couleurs.»

Autre courant populaire qui fait un retour en force : les années 80. La mode y est plongée depuis quelques années : les skinny jeans et les mom’s jeans à taille haute en sont quelques exemples. Même la populaire série télé Gotham, qui joue avec le côté intemporel des styles empruntés à toutes les époques, coiffe ses actrices avec des têtes immenses tout droit sorties d’une époque où la couche d’ozone n’était pas mise en danger par les CFC que l’on retrouvait dans les hair spray. Adidas, Reebok et les autres grands joueurs de la mode sont en tête du peloton avec des couleurs et des styles rappelant cette époque.

Avec ce courant, les violets, verts turquoise, rouges rosés et jaunes très vifs sont à l’honneur. Les textures non symétriques reviennent au goût du jour.

Déjà annoncé dans mes tendances de l’an passé, je reviens à la charge cette année avec cet item important.

Les micro-interactions se produisent tout autour de nous. On les fait sans y penser deux fois. Il est probable que vous avez débuté votre journée avec une micro-interaction. En désactivant l’alarme sur votre téléphone mobile, vous vous êtes engagé avec une interface utilisateur en un seul instant. Aimer une photo de chaton sur votre Facebook en est un autre exemple.

Les micro-interactions servent surtout à :

Les micro-interactions sont une partie importante de presque tous les projets web. Vous aurez du mal à concevoir un site web ou une application mobile qui ne comporte pas un élément avec lequel l’utilisateur doit interagir. Chacune de ces interactions doit mener à un résultat centré non seulement utilisateur, mais fait de façon humaine et naturelle. C’est lorsque l’on place l’utilisabilité au cœur de nos préoccupations qu’un outil est adopté facilement par la masse.

Le design a maintenant sa place au conseil et pour se faire, il se doit de parler le langage des affaires : les mesures, le taux de rebond, d’ouvertures ou de clics, le taux de conversion, les canaux, les analyses, etc. L’ergonome et le designer doivent désormais avoir accès à ces données pour pouvoir faire leur travail correctement. La définition même du design est ce croisement entre l’harmonie visuelle et l’efficacité de fonctionnement. Il ne suffit donc plus qu’un site soit beau, mais il doit répondre à des demandes précises d’utilisabilité afin de maximiser son rendement.