Le web évolue. De plus en plus vite même. Chez AdFab nous testons et utilisons régulièrement des nouvelles librairies pour nos développements afin de rester à jour et découvrir ce qui est l’avenir de notre métier. Et pour arriver à concevoir des applications dynamiques, il faut que les modèles de conception utilisés évoluent.

Depuis le début du lycée je voulais travailler dans le monde du jeu vidéo. J’ai d’abord fait un cursus de développeur classique, puis une école de Game Design pour me spécialiser dans le jeu.
Ces notions de conception m’ont servi pour participer au développement de jeux web, et aujourd’hui chez AdFab nous mettons en place les mêmes principes de conceptions que les jeux vidéos pour réaliser nos sites et animations web. 
Je vous propose une série d’articles qui vont traiter de certains points de conceptions des jeux vidéos, et comment les appliquer pour le développement de vos sites, applications et animations sur le web.

Sign & Feedback

Dans les jeux vidéos

Un jeu bien conçu contient énormément de sign & feedback. C’est essentiel pour savoir ce qu’on peut faire, comprendre ce qu’il vient de se passer. Un signe, c’est ce qui montre la possibilité de faire une action, ou attire l’attention du joueur sur ce qu’il peut faire ou ce qui va se produire:

• Un halo rouge apparaît autour d’un personnage pour indiquer que c’est un ennemi et qu’on peut interagir avec.
• Un bouton se grise quand une action n’est pas possible ou est lumineux si on peut utiliser son effet
• Un bouton apparait pour signaler un QTE (Quick Time Event, action contextuelle que le joueur doit réaliser dans un cours laps de temps pour réussir et passer à la suite)

Un feedback, c’est ce qui informe le joueur qu’une action vient de se passer. Il peut être visuel, tactile, sonore. Par exemple dans un jeu de tir quand un joueur vient de se prendre un impact:

• la manette vibre
• L’écran vibre
• Les bords de l’écran deviennent rouge
• Le personnage émet un cri
• La barre de vie diminue, avec un effet pendant quelques secondes…

Dans cet exemple de Far Cry 2 le personnage est blessé, on voit l’écran qui vire aux tons rouges, la barre de vie, l’impact de la blessure, une tâche de sang sur la caméra Pour une action on peut multiplier les feedbacks sans soucis, afin d’être sûr que le joueur soit averti qu’il vient de se passer quelque chose.

Je vous invite à lire cet excellent article qui explique les sign & feedbacks des sims 2. Les erreurs de conception dans les jeux sont souvent relevées par le joueur du grenier.

Pour notre sujet par exemple dans Home alone, une clé à ramasser n’est finalement pas un bonus.

Certaines règles de conception sont acquises depuis longtemps, il faut les suivre pour ne pas déstabiliser les utilisateurs.

Sur le web

Sur le web, généralement les liens sont soulignés, et d’une autre couleur que le texte.
L’utilisateur sait alors qu’il peut cliquer dessus. C’est un des signes les plus courant. Les liens bleu soulignés sont là depuis… bien longtemps! C’était déjà comme ça à l’époque des premiers IE et sous Nescape!
Si vous mettez un texte souligné d’une autre couleur que le texte du paragraphe, l’utilisateur saura qu’il peut cliquer dessus.

D’une manière générale dès qu’on a un bouton on doit mettre un effet au survol, afin de montrer à l’utilisateur qu’il peut interagir avec.

Avec l’Ajax, il faut multiplier les feedbacks:

• Bloquer son bouton quand l’action est en cours (le griser légèrement en général).
• Ajouter un loader sur la page, même s’il est en haut dans un coin, l’œil le percevra.
• Une fois le contenu chargé: afficher un message que l’action s’est bien réalisée, masquer le loader, scroller jusqu’au contenu ajouté, faire un effet de highlight temporairement pour montrer ce qui a changé sur la page.

Si l’utilisateur clique quelque part et qu’il n’a pas d’effet immédiat, il va cliquer plusieurs fois, et souvent ce n’est pas ce qu’on veut. C’est d’autant plus vrai sur les applications mobile, avec des débits assez lents.
Si rien ne se passe quand l’utilisateur déclenche une action, il va juste arrêter d’utiliser l’application en pensant qu’elle n’est pas réactive.

Avec la multiplication des animations sur nos pages, les méthodes doivent changer.

Photoshop n’est plus un outil suffisant pour l’intégration.
Le graphiste peut utiliser les calques de compositions pour voir différents états, mais on n’a généralement pas les états intermédiaires ni tous les éléments comme il sera possible de les voir sur le site final.

Dans les années qui viennent il va falloir se tourner vers d’autres outils pour concevoir les maquettes des sites.
Il en existe déjà, mais qu’on n’utilisait pas jusque là sur le web.

Voilà, c’est tout pour ce premier article pour apprendre à appliquer des méthodes de conception de jeux adaptées au web d’aujourd’hui et de demain.

La prochaine fois nous aborderons les « 3C ».

A bientôt!