Publié le 3 janvier 2017

Webdesign : quelles sont les tendances pour 2017 ?

Intéressant cet article ?

[Total : 1    Moyenne : 5/5]

À l’aube de 2017, il est de bon ton de se demander quelles seront les tendances graphiques et ergonomiques pour les mois à venir. Plus que des prédictions tirées d’une boule de cristal, faisons le point sur l’état actuel des tendances UX & UI, en ayant un regard tourné vers le futur.

1. Un menu hamburger ? Là où l’on va, pas besoin de menu hamburger…

Bien installé depuis maintenant plusieurs années, le menu hamburger est devenu un design-pattern pratiquement indétrônable. Il est compris de tous et il est devenu naturel de l’intégrer dans nos maquettes, surtout mobiles. Alors pourquoi s’interroger sur sa pertinence ?

Exemple de menu hamburger

Il faut dire que le menu hamburger a été tellement bien adopté sur les interfaces mobiles qu’il a également fait son nid sur desktop. Seulement voilà, les principaux inconvénients de ce menu sont tout simplement qu’il oblige l’utilisateur à effectuer une étape supplémentaire (clic, appui…) pour accéder au contenu désiré. En plus de cela, il cache du contenu, empêchant Mme Michu de trouver la recette de la ratatouille, perdue dans les méandres des sous-catégories. Et après tout, qu’est-ce que ferait une recette de ratatouille sous un hamburger ? Bref.

Évidemment sur web mobile, il reste souvent indispensable au vu des éléments présents dans la navigation.

C’est d’ailleurs ce qui nous amène à aborder ses points positifs : il simplifie l’interface. De manière globale, chaque page web doit être construite de manière à avoir un but précis, par exemple vendre un produit, récupérer une adresse mail ou encore donner une information… Chacun de ces objectifs doit être atteint grâce à un appel à action principal par page. En ayant ça en tête, on peut amener l’utilisateur là où il a besoin d’aller en lui évitant tant que possible, de prendre des détours en passant par exemple, par le menu hamburger.

Pour conclure sur le menu hamburger, disons qu’il n’est pas forcément à bannir de toutes nos interfaces mais qu’il doit être utilisé de manière plus réfléchie et moins automatique.

2. Les micro-interactions

Les micro-interactions sont des animations interactives qui accompagnent une interface pour la rendre plus attrayante et surtout plus compréhensible. Elles permettent à l’utilisateur de savoir ce qu’il se passe, ce qu’il s’est passé et également ce qu’il se passera lors de sa prochaine interaction avec l’interface.

Quelques exemples pour mieux comprendre :

Exemple 1 de micro-interactions

Dans cet exemple, l’utilisateur clique sur un bouton, celui-ci lui montre qu’un cours chargement est en cours, puis le bouton présente un check lui confirmant que l’action a été correctement traitée.

Cette tendance n’est pas sans rappeler ce qui a été mis en place par Google avec ses nouvelles guidelines Material Design :

Exemple 2 de micro-interactions

Ayez en tête que ces micros-interactions doivent toujours rester simples et être au service de l’utilisateur. Le but ici n’est pas d’avoir l’animation la plus incroyable au clic sur le premier bouton venu mais de permettre à l’internaute de comprendre ce qu’il se passe à chacune de ses actions.

3. Les formulaires step-by-step

Exit les formulaires longs comme le bras, la tendance des formulaires par étapes commence à se répandre depuis l’année dernière et devrait poursuivre son expansion en 2017. Cette tendance vise essentiellement à guider l’utilisateur plus efficacement et à lui permettre de se concentrer spécifiquement sur l’information qui lui est demandée en éliminant un maximum de distractions visuelles.

Exemple de formulaire step-by-step

4. Les scrolls intelligents

06_tendances_design_2017_scroll

En parlant de « scrolls intelligents », on ne fait pas forcément référence à des scrolls effet « wouahou » avec de la parallaxe à en faire vomir un astronaute. On parle d’une expérience de scroll entièrement au service de l’utilisateur (encore lui). Le scroll doit être pensé de manière à ce que les différents éléments et blocs du site soient mis en avant non plus comme des éléments qui vont dérouler de manière statique sous les yeux de l’utilisateur, mais comme des éléments vivants sur la page.

Cela peut simplement se traduire par le fait d’afficher certains éléments au moment exact où l’utilisateur arrive à un certain niveau de scroll de la page. De cette façon on attire son attention à un endroit précis qu’il n’aurait peut-être pas vu si celui-ci était passé sous ses yeux de manière statique. Ces détails apportent une réelle valeur ajoutée à l’expérience globale de navigation. On peut trouver plusieurs bons exemples de cette pratique sur les sites www.philcasabon.com ou www.revols.com.

5. Un design transverse à tout support

Nous entrons dans une ère dans laquelle un design ou une identité de marque qui s’adapte uniquement à un PC, une tablette ou un mobile ne suffit plus. Avec l’arrivée des nouveaux types de supports comme les wearables, les télévisions connectées ou encore la domotique, nous sommes confrontés à de nouveaux enjeux ergonomiques qui doivent être pris en compte. Le design doit être pensé de manière globale et pouvoir fonctionner partout. Le dernier exemple en date de société ayant répondu à cet enjeu est Google et sa nouvelle identité repensée pour s’adapter aussi bien à une affiche print de 4 par 3 qu’à un écran de montre de 290 x 290 px.

Exemple de design transverse

On pourrait encore lister bon nombre de tendances graphiques et ergonomiques tant le sujet est riche. Cependant, si on ne devait citer qu’un point, ce serait de sans cesse garder en tête l’utilisateur. Chaque choix, graphique ou ergonomique, doit être motivé par l’idée de rendre service à l’utilisateur et lui apporter la meilleure expérience possible.

Envie d’en savoir plus sur l’une de ces tendances ? Faites-le nous savoir en commentaires !

Christophe

comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
0 Commentaires
Répondre
Se joindre à la discussion ?
Vous êtes libre de contribuer !
Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *