css-conception-guide

2.1. Signs & Feedbacks

2.1.1. Dans les jeux vidéos

Selon Marc Albinet – Game director sur Assassin’s Creed : Unity, auteur de _Concevoir un jeu vidéo – les signes et les feedbacks sont des indicateurs de gameplay et de compréhension doublés d’un outil de mise en scène. On va détailler ça.

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:

Pour être réussi, un signe doit:

Un feedback, c’est un retour 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:

Pour être réussi, le feedback d’une action doit:

Les 2 derniers points sont les mêmes que pour les signes, si vous avez bien suivi.

Il faut bien sûr doser les feedbacks par rapport à l’action qui vient de se dérouler pour qu’on en ressente l’impact, d’où la définition qui indique un outil de mise en scène. Quand on blesse un ennemi dans un jeu on a plusieurs feedbacks sonores et visuels à l’impact, et lorsqu’on lui met le coup fatal il y a davantage de retours (un cri plus long, un score qui augmente, une explosion de l’ennemi…); et encore plus lorsqu’on va achever un boss de niveau, avec un ralenti sur la dernière action par exemple.

Si une action basique a un effet disproportionné par rapport à l’action réalisée, le joueur pourra sortir de l’action. C’est parfois le problème rencontré avec les QTE (Quick Time Event), où le joueur doit juste appuyer sur un bouton à un moment donné pour continuer l’action scriptée.

Le feedback sert à hiérarchiser l’action selon l’importance qu’on veut lui donner, et suivant ce qu’on veut lui faire ressentir.

2.1.2. 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 navigateurs Internet Explorer et sous Nescape !

On a très souvent des liens qui sont des boutons, avec un fond bien visible, ou une bordure, et une taille conséquente par rapport à un simple texte. On hiérarchise ainsi l’importance de différents signes. Un exemple assez marquant concerne des emails. Il y a plusieurs années j’avais intégré un email basique avec une grosse image entièrement cliquable, avec sur cette image un bouton. Bien que le curseur de la souris indique que tout était cliquable, les statistiques étaient sans appel: plus de 90% des utilisateurs cliquaient sur l’image à l’endroit du bouton.

Il faut toujours indiquer qu’une action est possible avec un effet de survol et une modification du curseur, afin de montrer à l’utilisateur qu’il peut interagir avec.

Dès qu’une action va prendre un certain temps, comme avec un appel ajax, il faut multiplier les feedbacks:

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 parfois réduits 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. Si vous ajoutez une petite transition entre l’état initial et l’état de chargement, le chargement se lançant en arrière plan le temps que la transition se fasse, l’attente paraîtra moins longue à l’utilisateur du fait de cette animation.

2.1.3. Interactions “Juicy”

En game design, le terme “Juicy” désigne “le sentiment satisfaisant que nous obtenons lorsque l’énergie potentielle est convertie en énergie cinétique”.

Une conférence de Martin Jonasson sur le thème “Juice it or lose it”, explique un peu mieux ce concept. Ils prennent pour exemple un casse brique tout simple, sans couleur ni feedback particulier. C’est jouable, mais on ne ressent pas vraiment de fun. Puis ils ajoutent des effets au fur et à mesure pour arriver à une application complète:

Je n’ai pas listé toutes les possibilités, au final c’est plus d’une trentaine de paramètres qui peuvent être réglés depuis leur démo.

Il ne faut pas abuser de tous ces effets non plus et trouver le juste milieu pour ne pas noyer l’utilisateur, sans oublier les règles des feedbacks vues précédemment. Le but étant de hiérarchiser l’impact d’une action par rapport à une autre.

Sur le web, les actions manquent souvent de feedback. On en aura jamais autant que dans le jeu vidéo bien sûr, mais j’espère que ces exemples vous permettront de mieux concevoir les actions possibles et les réponses à vos utilisateurs, et d’ajouter un peu plus de fantaisie quand c’est possible avec des animations adaptées pour un web plus interactif et des pages moins statiques. \

Lien du jeu pour tester les interactions juicy: http://grapefrukt.com/f/games/juicy-breakout/

This site is open source. Improve this page.