22
Nov

Les expériences web : pourquoi et comment ?

Lors du premier événement sur le story-telling de notre initiative “Playground by My Client is Rich”, nous avons soulevé à plusieurs reprises qu’en 2018, il est important de savoir susciter les émotions de sa cible afin de pouvoir lui conter l’histoire de votre marque. Les expériences digitales (et web) sont un des moyens les plus populaires pour atteindre sa cible. Dans cet article, nous allons faire un rapide tour d’horizon des outils et méthodologies que votre équipe peut (et devrait !) employer.

Start with why

De la même façon que tout le monde fait de la publicité, à l’ère digitale, tout le monde possède un site web.

Les expériences web, c’est un nouveau moyen de se démarquer au travers d’une représentation audiovisuelle accessible par tous et donc efficace : pas d’iOS vs Android, pas de jaloux entre ordinateur fixe, portable, tablette, et mobile. Immersive et interactive, l’expérience web permet de connecter votre cible à votre marque de manière plus profonde, sur un plan émotionnel : c’est ainsi que la loyauté de vos clients peut naître.

Il est cependant important de noter que les expériences web ne sont pas adaptées à tous les produits, toutes les cibles ou tous les projets. L’expérience doit être fluide, avoir un impact fulgurant, et surtout être pertinente.

Ces moments privilégiés avec vos clients et prospects sont les plus pertinents lorsque vous avez une histoire à raconter : un story-telling bien établi. Il est donc important de ne pas faire une expérience web juste pour faire une expérience web, mais bien pour concrétiser ou venir renforcer votre identité de marque.

Expériences web : comment les mettre en place ?

Afin de réussir le challenge qu’est une expérience web, il est important de comprendre l’importance de la chaîne de travail et la façon dont chacun des maillons est relié. Un(e) bon(ne) développeur(se) n’est pas suffisante. Un(e) bon(ne) directeur(trice) créatif n’est pas suffisant : il faut une bonne équipe.

L’idée & le concept

Se lancer tête baissée, sans concept, sans idées, dans le prototypage d’un produit n’est jamais une bonne idée ! La première question à se poser, c’est Pourquoi ?

Pourquoi faire une expérience pour ce produit ? Qu’est-ce-que l’expérience apportera au produit dans sa globalité ? Pourquoi une expérience web est-elle le bon média pour mon produit ? Qu’est-ce que j’essaye de mettre en avant ?

En se posant les bonnes questions, on arrive assez rapidement à de premières idées, et éventuellement un premier concept.

Le design

Dans le webdesign “standard”, généralement, on produit des maquettes, à l’aide d’un logiciel comme Adobe Photoshop, ou plus récemment : Adobe XD, Sketch, Framer, Figma, etc…

Si aujourd’hui les derniers outils de cette liste sont de plus en plus utilisés, ce n’est pas un simple hasard. Lors de l’élaboration d’un produit, l’UX (User Experience) est un facteur crucial à la réussite du projet. Ces nouveaux outils sont construits autour de l’optimisation de l’expérience utilisateur, et permettent notamment de réaliser des prototypes semi fonctionnels très rapidement.

En parlant de prototypes, les expériences web sont souvent un travail de patience et de persévérance dans le prototyping. C’est un travail sous forme d’itérations : on crée un premier prototype graphique, une note d’intention, et on évolue assez rapidement vers une V2, puis V3, etc… You get it.

Dans les expériences web, il est assez rare de travailler avec des maquettes statiques, l’expérience étant, par définition, dynamique. Si l’on voit une expérience web comme une représentation interactive d’un film, il n’est que logique d’emprunter les méthodologies du 7ème Art : scénario (de navigation), storyboards, prototypes itératifs, etc…

La technique

Tout au long du projet (avant, pendant et après), il est primordial que le développeur et le directeur créatif communiquent régulièrement afin de permettre à tout le monde de bien s’imprégner du concept et de bien saisir la problématique.

Lors du développement de l’expérience, on retrouve encore cette notion de travail itératif. Le développeur va créer un prototype technique, valider avec le directeur créatif (ou non), puis optimiser son travail par la suite. Cette démarche permet notamment d’éviter de perdre du temps sur un prototype qui ne serait pas retenu !

Parlons d’ailleurs un peu plus d’optimisation.

L’optimisation est rarement la même entre un projet 2d et 3d. Sur un projet 2d, on va se retrouver à optimiser le poids des images, le temps de chargement du site, la fluidité des animations dans une moindre mesure, et c’est à peu près tout.

Dans un projet 3d, avec un moteur de rendu tel que WebGL, on va se retrouver à optimiser chaque modèle 3d en réduisant au maximum le nombre de triangles de notre ou nos scène(s), et ce pour alléger les besoins de calculs du GPU (Graphical Processing Unit, ou plus simplement Carte Graphique). Moins il y aura de calculs à faire, plus fluide sera l’expérience. Cette dernière est dite fluide dès les 60 images par seconde, ce qui laisse à votre GPU 16.666 millisecondes pour calculer chaque image. C’est peu ! Ajoutons aux triangles les effets de post processing, les animations, les aller-retours avec le processeur qui créent du délai, et nos 16.666 millisecondes deviennent encore plus difficiles à maîtriser.

Il existe une myriade de techniques visant à réduire la charge imposée à votre GPU, et parfois il existe plusieurs techniques pour faire la même chose : il est important de connaître le coût de chacune de ces techniques afin d’optimiser l’expérience !

Ressources

Dans ce court article, il est difficile de donner plus de détails sur comment confectionner une expérience parfaite, voilà donc une partie des ressources qui vous permettront de découvrir les outils et concepts utilisés par les plus grands !

Livres

Start with Why – Simon Sinek
Tell to win – Peter Guber
Made to Stick – Chip Heath & Dan Heath
The anatomy of Story – John Truby
The Writer’s Journey – Christopher Vogler
Learning Three.js – Jos Dirksen
WebGL Insights – Patrick Cozzi

Sites web

Awesome Case-study : une liste de case studies des meilleures expériences digitales récente
The Book of Shaders : apprentissage interactif du langage glsl utilisé avec WebGL
ShaderToy : le codepen du langage glsl !

Top

0 Commentaire

Laisser un commentaire

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