UX trends 2016: La vidéo et l’anim comme asset

Le flat design, c’est très joli, c’est propre, c’est facile à mettre en place, ça rentre bien dans les cases. Mais ça peut aussi devenir monotone. Le deal passé avec le flat design repose sur le déport de la complexité visuel vers plus de contenus, mais aussi vers un univers plus animé, ou du moins qui propose des animations utiles, qui provoquent une empathie naturelle. Certains appellent ceci un effet Waou. A mon sens, les animations représentent essentiellement le contre-pouvoir du flat design. Si le layout est épuré, ajoutons des zones attractives via des objets mobiles.

Vous n’avez pas pu passer à côté du retour en force du gif animé (prononcer jif, c’est définitif), ce symbole honni du web fourmillant des années 90. Pourtant, de plus en plus de sites en Flat Design proposent l’intégration de ce (trop) vieux format afin de dynamiser les planches de contenus. Souvent en repassant le format dans une moulinette qui va en faire une vidéo, de manière totalement invisible pour l’utilisateur, comme chez Giphy.

giphy

Cette tendance s’inscrit totalement dans une maturité des standards du web et des animations CSS et Javascript (2D Canvas) qui rendent nos pages web (et in extenso nos applications) beaucoup plus agréables, vivantes et permettent de notifier facilement du feedback (roll-over, click, etc…). A voir, ce superbe travail sur les transitions.

le support de l’accélération graphique hardware permet aussi d’ajouter des animations un peu lourdes aux flux de contenus sans ralentissements. C’est le cas sur le site de mon confrère, collègue et ami David Rousset qui intègre une animation 3D dans le header de son site grâce au framework Babylon.JS. Les algos de compression et la puissance de traitement online permettent également d’encoder vite et fort les animations, à peu de frais aujourd’hui. Enfin, les suites logicielles intègrent dorénavant avec une emphase volontariste, l’animation, comme on peut le voir ici démontré par Michael Chaize d’Adobe.

Du contenu ?

La vidéo était jusqu’à présent surtout cantonnée à un usage typé contenu. On ajoute un gif/vidéo par ci, on met un lien vers une publication Youtube par là, on ajoute une section Média de ce côté, on décale les items streamables par ici. Cela commence à changer avec une nouvelle génération d’assets vidéo, non plus pour du contenu, mais bien pour du support visuel. Comme avec ce site qui encapsule une vidéo en arrière plan, asservie au scroll vertical pour vitaliser la navigation des différents éléments.

Une vidéo d'une rue pour soutenir la navigation

Une video en arrière-plan visuel

On trouvera également de jolies expérience avec des sites comme celui-ci. En l’espèce, une belle méthode pour présenter de manière élégante, originale et dynamique un contenu aussi plat qu’un CV, en somme.

On voit aussi beaucoup de vidéos juste positionnées en arrière-plan, sans autre volonté que d’embellir le layout. Et c’est déjà pas mal. Cela augmente le levier du story-telling et éventuellement l’identité de marque. En voici un bel exemple.

Cette disposition en background est utile également pour masquer un tutoriel derrière un prétexte graphique comme sur ce site.

Notons également que de gros sites commencent à tester la vidéo comme asset, notamment via des cartes. Je vous parle ici du site Amazon.com qui teste des assets premium enrichis, comme, en ce moment, une jeune femme habillée d’une robe bleue.

Le site Amazon.com comporte des assets vidéos

La jeune femme en bleu bouge et montre sa robe.

En terme d’animations, on peut réussir de superbes visuels avec des animations SVG et les capacités offertes par ce format vectoriel, comme ici, avec un produit que j’adore.

Une Xbox one en .Svg animé

La Xbox One en svg

Et, encore une fois, si l’on respecte la charte du client, les tendances graphiques actuelles et si l’on a pas 9 mois de prod sur un site ou une application devant soi, on peut toujours se tourner vers de l’animation rapide avec des gifs, comme ici. Non, le gif n’est pas encore mort, même si un dépoussiérage du format, notamment sur le nombre de couleurs possibles, serait le bienvenu. On est tout de même en 2016 et le format date de 1987, pratiquement 30 ans…

Ensemble animé de pictos

Des gifs animés modernes

 

Un peu plus loin ?

Comment ne pas associer les animations diverses que nous venons de voir avec les initiatives de Google et de Bing pour égayer la page de garde des moteurs de recherche. Pour Google, c’est un jeu vidéo simpliste mais efficace qui vient vous proposer une partie  de saute-cactus en cas d’absence de réseau. De l’animation interactive en somme.

La page déconnectée de Google propose un jeu

Le dino de google

Concernant Bing, les backgrounds s’ornent tous les jours d’un nouveau fond d’écran qui quelquefois se mue en image animée, parfois en images 360° interactives. De quoi provoquer surprise et renouvellement de l’expérience.

Publicités