Décryptons les tendances Web Design & Design Digital de 2017 (Première partie)

Cet article est le premier d'une série de trois sur les tendances du web design en 2017. Il y a peu, nous sommes tombés sur l'ebook "Web Design Trends 2017" du site www.uxpin.com retraçant comme son nom l'indique, les tendances observées durant cette année (qui n'est pas encore finie). Bien sûr, nous pourrions tout simplement vous dire de le télécharger et de le parcourir dans votre coin, mais en tant qu'intervenants plongés tous les jours dans ce domaine, nous vous avons simplifié la tâche et évité de vous faire lire 66 pages dans la langue de Shakespeare. Nous avons donc fait une synthèse, ci dessous, présentant les points clés que nous avons retenus, accompagnés de notre avis sur ces derniers.

Les menus cachés et une navigation qui évolue

Ce n'est un secret pour personne : l'univers du web et du digital en globalité sont des secteurs qui évoluent très vite. Il y a quelques années, nous surfions sur notre écran avec un peu plus de temps devant nous pour découvrir le web et se "balader". Aujourd'hui, nous consultons en urgence et en mobilité, sur nos smartphones, les contenus qui nous intéressent en espérant perdre le moins de temps possible à chercher. De ce fait, ces appareils ayant une taille d'écran limitée, il a fallu repenser les systèmes de navigation avec notamment la "standardisation" du fameux bouton "burger" qui permet de cacher le menu pour en faire un élément à part entière, et qui ne vienne pas charger et polluer les autres contenus d'une interface. Depuis l'arrivée du responsive design, le phénomène qui était auparavant d'adapter un site mobile à partir du site desktop, est en train lentement de s'inverser, c'est à dire partir du site mobile pour en faire découler le site desktop. C'est aussi ce qu'on appelle la technique "mobile first". D'après l'ebook, cette méthode comporte pas mal d'avantages quand on parle de cette adaptation sur le desktop, à savoir :

• Moins de "pollution" visuelle pour laisser s'exprimer l'univers de l'interface et marquer le visiteur (souvent via de grands visuels ou des vidéos)
• Cela permet de donner plus de place et d'importance aux éléments cliquables et structurant quand on ouvre le menu
• Cependant, même si l'on "cache" ce menu, il faut trouver une astuce de design pour laisser apparaître l'interface, ou en tous cas suggérer qu'elle se trouve toujours là, pour ne pas perdre l'utilisateur

Notre avis : Chez Concept Image, nous sommes tout à fait d'accord pour dire que le mobile a changé la façon de designer les sites web, et l'UX de ces derniers de façon plus générale, et qu'il était nécessaire de trouver de nouveaux systèmes de navigation. Pour ce qui est de la généralisation de ces "menus cachés", même si nous trouvons les remarques de l'ebook pertinentes, nous sommes cependant un peu plus partagés. En effet, si l'on se place du côté artistique, bien évidemment c'est un atout. Mais si on se place du côté utilisateur (qui n'empêche pas de réaliser quelque chose d'esthétique) on peut aussi se dire qu'il aura accès directement à son contenu si le menu n'est pas "caché" et qu'il gagnera un clic, et donc du temps. Il est donc nécessaire de qualifier son projet, ses cibles et l'objectif du site. Pour prendre un exemple, le site d'un festival pourra sans doute se permettre de faire transpirer en abondance son identité au lieu de prioriser l'apparence d'un menu. D'une année sur l'autre, le site va changer et au final, les utilisateurs ne chercheront que quelques informations (programmation, horaires...). A l'inverse, le site d'un groupe voulant présenter ses marques, ses gammes de produits, ses actualités et autres, aura tout intérêt à avoir une navigation claire d'emblée, car le site sera déjà suffisamment dense et profond, et il ne faudra pas perdre l'utilisateur (ce qui n'empêche pas, une fois de plus, de travailler un design léché et moderne).

Site de Lepa Vida

L'icône burger, un standard pour représenter le menu (nous ne parlons pas des fast food ;))

Ça fait des années que nous le voyons maintenant, certains ont essayé de le remplacer par d'autres moyens, mais rien à faire. Qu'on l'aime ou pas, ce picto est devenu incontournable et compris par les utilisateurs. Plutôt que de réinventer la roue, il est préférable dans ce cas précis, de le personnaliser et de le souligner par le mot "menu" par exemple. Notre avis : Ici aussi nous sommes d'accord avec cette observation. Le menu burger est un standard (du moins pour le mobile), point ! Et nous risquons de le voir pendant encore de nombreuses années. Alors comme dans l'ebook, nous préconisons plutôt de le personnaliser que d'essayer de le remplacer. Comme par exemple sur un site e-commerce, où les utilisateurs ont leurs habitudes pour trouver leur panier, cela serait un risque de vouloir casser les codes. Cependant, nous voyons quand même une alternative pour ceux qui détesteraient plus que tout ce picto, c'est de tout simplement écrire "MENU" et de le distinguer visuellement, sinon il vaut mieux garder le "burger".

Le Material Design, sûrement "la" tendance de l'année

Ce style a été inventé par Google (et vu l'influence du géant américain, c'est vite devenu un standard ou du moins une tendance à exploiter). Ce type de design d'interface permet de jouer des créations minimalistes/aérées tout en y ajoutant beaucoup de compréhension utilisateur. On peut en effet considérer cette tendance comme une évolution du flat design qui a fait ses preuves ces dernières années en simplifiant la compréhension d'interfaces parfois trop chargées. Le flat design a aussi permis de simplifier le repositionnement de blocs avec la démocratisation du responsive design. Le principe est finalement assez simple, on garde les codes du flat design tout en y ajoutant du volume via des ombres portées pour augmenter son efficacité. Notre avis : C'est incontestable, Google a réussi son tour de force avec cette évolution du flat design, qui devenait vu et revu, en ré-injectant du volume. Le skeumorphisme, qui était la tendance avant l'arrivée du flat design, apportait déjà du volume, mais plus de manière illustrative sur des éléments précis, type icône. Ici, le material design amène du volume à nouveau, mais plus en globalité sur l'interface que sur des éléments précis. Chez Concept Image, nous pensons que c'est un plus pour la compréhension utilisateur. Cependant, nous ne voulons pas nous cantonner à cette tendance. D'une part parce que nous voulons créer des concepts différenciant et ne pas répéter tout le temps les mêmes codes graphiques. D'autre part, parce que nous pensons aussi qu'il existe beaucoup d'autres façons d'apporter de la richesse et de la compréhension graphique à un site web. Comme dans beaucoup de cas, nous sommes d'avis que cela sera pertinent selon l'activité du client, ses cibles, ses envies, sa charte graphiques et tout un tas d'autres composants qui pourront être évoqués lors d'échanges dans le cadre d'un projet.

Une cohérence et la même sensation graphique sur tous les appareils

Comme évoqué dans le premier point, de nombreux projets doivent aujourd'hui être adaptés sur de nombreux types d'écrans (montre connectée / mobile / tablette / desktop...). Il faut donc essayer au maximum de prévoir l'appareil qui sera le plus utilisé, mais aussi le nombre de devices sur lequel l'adaptation devra être parfaite. Par exemple, un projet qui devra fonctionner sur montre connectée, mobile et desktop définira sans doute de lui même l'utilisation d'un design plutôt minimaliste, sans trop de détails. Pourquoi ? Car la montre connectée aura une capacité d'écran très limitée, elle imposera donc de la simplicité, et si on décide que le projet devra être parfaitement adapté à cet appareil, ce dernier sera sûrement le point de départ des autres designs d'interfaces. A l'inverse, un projet dédié à un seul appareil avec une capacité d'écran agréable (comme une borne interactive par exemple) pourra amener une direction artistique s'appuyant sur des éléments graphiques plus "compliqués" et plus "riches" . Notre avis : Une fois de plus nous sommes d'accord avec ce raisonnement. Comme nous aimons le penser et le conseiller à nos clients, la direction artistique et le style graphique d'un projet ne doivent pas dépendre de la subjectivité, mais d'un ensemble de composants. Et le nombre d'appareils avec lesquels une interface devra être compatible joue. De nature, nous faisons en sorte que nos projets web soient adaptés au maximum de terminaux, et dans une configuration parfaite Mais dans le cadre des 2 exemples cités, qui sont assez spécifiques, forcément cela orientera nos choix graphiques.

Site Nike application NRC

Le minimalisme est indémodable

Encore cette année, il apparaît que la plupart des projets sont "minimalistes". L'originalité se joue plus sur les médias (photos et vidéos) ou du décalage de blocs, que sur du graphisme exacerbé. La raison est simple : de par sa simplicité justement, le "minimalisme" sera toujours compris par l'utilisateur. Il permettra donc la mise en avant du contenu principal ou prioritaire. Notre avis : Nous avons un sentiment assez mitigé sur ce point, car nous pensons qu'à l'avenir, avec les technologies qui évoluent, les interfaces vont devenir de plus en plus riches : que ce soit par le graphisme, la mise en page,  et l'animation qui sera sans doute un point clé de la réussite de futurs projets. Nous sommes bien sûr d'accord pour dire que le simple est efficace. Mais ne perdons pas de vue non plus la phrase qui dit que "faire simple est compliqué".

Site du designer Xavier Bourdil

Les écrans partagés (Split Screen Design)

C'est une des tendances que l'on a beaucoup vu se développer cette année : des sites séparant leur interface en deux parties distinctes et parallèles dans la verticalité, avec le nom un peu barbare de split screen design. Ce choix de design offre, sur les appareils avec une capacité d'écran agréable et horizontale, plus de possibilités de mise en avant et de combinaisons de contenus. Par exemple, une partie purement info en face d'une partie purement média. Cela permet de structurer davantage l'info en permettant une connexion évidente entre l'info et le média, tout en donnant autant d'importance à l'un ou à l'autre puisqu'ils sont au même niveau. D'un point de vue analyse, cette zone permet aussi de repérer quelle zone est la plus cliquée, et quel type de contenu intéresse la cible. Cela permettra aussi d'adapter les priorités à adopter lors de futures mises à jour. Notre avis : C'est effectivement une tendance que nous avons perçue cette année. Elle nous semble intéressante. Cependant, et comme souvent, il faudra analyser en amont les objectifs du client, le contenu qu'il a à mettre en place, etc. Car si la priorité doit être donnée au mobile, à cause de la capacité d'écran limitée, l'écran ne sera plus partagé sur une même zone horizontale, mais "empilé", et l'impression ne sera plus la même en ce qui concerne la hiérarchisation de contenu. D'autre part, le fait de généraliser cet usage sur tout un site pourrait être ennuyant pour un projet ayant beaucoup de contenus à caractères différents, et ne permettrait pas une distinction assez nette. Mais cela reste une technique très intéressante, notamment en jouant sur l'animation de l'interface et le double scroll pour réaliser des expériences vivantes et compréhensibles.

Site Sewage Free Seas

Lire la suite : Décryptons les tendances Web Design & Design Digital de 2017 (Deuxième partie)