Comment créer un serious game avec un graphisme attrayant ?

Subpoena serious game

On dit de ne pas juger un livre sur sa couverture. Or, plus ou moins consciemment, nous jugeons de la qualité d’un contenu de par son apparence, et ce en un clin d’œil. L’aspect visuel est donc crucial pour attirer et faire adhérer les gens. Par ailleurs, le graphisme dans un serious game n’a pas seulement un rôle esthétique mais aussi un rôle fonctionnel. Une bonne utilisation de l’espace, des proportions, améliore la lisibilité et guide les yeux du joueur sur ce qui est important.

Voici quelques éléments clés de graphisme à considérer pour créer un serious game attrayant :

La couleur

Le rôle des couleurs

Selon le site Gamasutra, la couleur dans les jeux vidéo a un rôle très important, car elle :

  • Rend plus facile l’identification d’objets
  • Instaure une ambiance particulière
  • Participe à l’image de marque
  • Permet de toucher une cible particulière : les couleurs vives sont très appréciées par exemple des casual gamers
  • Indique au joueur ce qui est important et/ou ce qui doit être fait
  • Permet de différencier des éléments et d’alerter sur les propriétés des éléments (par exemple si on peut interagir avec un objet)
  • Donne une impression de variété quand les niveaux sont de couleurs différentes

La psychologie des couleurs

La couleur est un élément de graphisme important pour un serious game car les choix de couleurs influencent les émotions ou les représentations que se font les joueurs.

Par exemple, le bleu déstresse et calme l’agitation physique et mentale.  Il est généralement associé à la sérénité, au calme, à la précision, à la connaissance. Il évoque la propreté, l’aérien, l’eau. De plus, cette couleur froide et formelle s’harmonise bien avec les couleurs chaudes.

Le rouge énergise, excite, stimule l’esprit, capte notre attention et nous alarme. Il symbolise chaleur, émotions fortes, pouvoir, force, amour, passion, anarchie… Ainsi, on pourra utiliser cette couleur pour focaliser l’attention sur du texte et des images, pour inciter à prendre des décisions rapidement, ou pour indiquer un danger. Avec le rouge, on peut mettre en avant des éléments qui seraient dans des coins et non visibles au premier coup d’œil.

Le rose, à petite dose, entretien la bonne humeur. Il est associé aux filles, au romantisme, à la tendresse, au bonheur, à la féminité. Bien que cette couleur puisse apporter délicatesse et dynamisme, elle devient criarde utilisée à l’excès.

Merchants serious game de négociation
Merchants : le serious game de négociation et de résolution des conflits de la société Gamelearn.

Le jaune est perçu comme une couleur enfantine et évoque des sentiments agréables et joyeux. Il favorise la concentration et facilite l’apprentissage en activant la mémoire. Le jaune attire l’attention s’il est associé à des couleurs foncées. Par contre, trop utilisé, il peut perturber et déstabiliser.

L’orange est revigorant et stimule l’activité mentale. Il est utilisé en communication car représente l’enthousiasme et le succès. Cette couleur dynamique a une visibilité très élevée.  C’est pourquoi on peut s’en servir pour attirer l’attention et mettre en évidence des éléments importants.

Le vert est une couleur reposante pour l’œil humain et diminue la tension. Il représente la sécurité, la croissance, l’espoir, le renouveau. Il est très utilisé en communication pour tout ce qui a attrait à la nature, à la santé, et au bien-être…

Le gris est une teinte sobre, et élégante et qui apaise. Passe-partout, il se marie bien avec toutes les couleurs. Utilisé à l’excès, il est fade et véhicule un sentiment de tristesse et mélancolie.

Le serious game santé Lumine
Lumine est un serious game destiné aux enfants atteints d’un cancer et à leurs parents.

Le noir est une couleur formelle et élégante. Il a souvent une connotation négative, et est associé à la peur, à l’inconnu, au chagrin. Il peut apporter perspective et profondeur à un contenu. On prendra garde à ne pas en abuser car il diminue la lisibilité. Il fait contraster les couleurs mais donne une impression d’agressivité quand il est associé avec des couleurs comme le rouge ou l’orange.

Les points d’attention

Pour définir une palette de couleurs qui vont bien ensembles, on peut s’aider d’un cercle chromatique : les couleurs complémentaires, qui s’opposent dans le cercle, pour du contraste, et les couleurs analogues, voisines, pour une palette harmonieuse.

Attention, selon les cultures, les couleurs revêtent des significations différentes ! La couleur du deuil est le bleu en Iran, le jaune en Égypte,  le rouge en Afrique du sud, le blanc en Asie… Le vert est la couleur du mensonge et de l’infidélité en Chine. En Inde, le noir représente équilibre et santé…

Enfin, il faut garder à l’esprit que certaines personnes ont des problèmes de distinction des couleurs. En France, 8% des hommes sont daltoniens. Pour rendre accessibles et jouables les jeux pour ces personnes, d’autres solutions peuvent être envisagées pour remplacer les couleurs (forme, texte, motif…). On peut aussi proposer dans les réglages du jeu un mode daltonien.

Le contraste

Le contraste est un élément de graphisme important pour un serious game. Créer du contraste permet de dissocier des éléments, et de diriger les yeux de l’apprenant-joueur vers les éléments les plus importants du jeu. Il est notamment crucial que les personnages du jeu ressortent bien des arrière-plans. Jouer sur le contraste permet aussi de créer de la profondeur dans les arrière-plans et de donner au joueur une illusion d’espace.

Pour créer du contraste, on peut jouer sur la taille des éléments, sur le contraste des couleurs ou des motifs, sur l’utilisation de polices épaisses ou fines … Par exemple, une police sans-serif conviendra particulièrement bien aux gros titres, et une police serif pourra être utilisée pour des textes.

Le contraste permet de créer des atmosphères particulières. Mais attention à ne pas trop en faire ! Si les couleurs du jeu sont trop saturées, cela peut fatiguer l’œil. En outre, cela peut être plus compliqué pour le joueur de distinguer et séparer les éléments du jeu.

Le serious game Code Combat pour apprendre les langages de programmation et les fondamentaux de l’informatique.

Les autres éléments de graphisme d’un serious game

La répétition

Il est important de répéter des éléments du design car la répétition crée un sentiment d’ordre et d’unité. Le style et la composition graphique doivent être cohérents tout au long du jeu pour créer une unité visuelle : images, arrière-plans, icônes, cadres, boutons, flèches….

L’alignement

Aligner les éléments du jeu, les disposer à égale distance les uns des autres, permet de garder une impression d’ordre et de précision, et de clarifier le rendu.

L’équilibre

L’équilibre des tailles, des formes, des couleurs, des textures permet de répartir la charge visuelle. Par exemple, les couleurs vives ou foncées et les textures élaborées paraissent plus lourds. Pour équilibrer, on peut les compenser par leurs contraires.

Le style

Le style doit être logique et cohérent avec le sujet du jeu pour que l’apprenant-joueur soit embarqué dans un univers. Par exemple, un serious game sur un sujet grave devra reprendre des codes graphiques appropriés. Le style du serious game peut être déterminé par le genre vidéoludique. Par exemple, un jeu de rôle peut être caricatural alors qu’un jeu de simulation privilégie le photoréalisme. En outre, les jeux de puzzle sont en général abstraits. Enfin, la cible du serious game influence le style privilégié : les enfants appréciant un univers caricatural, les adultes ou les hardcore gamers appréciant un style graphique plutôt réaliste.

En conclusion, un serious game avec un graphisme attractif permet de créer une connexion émotionnelle avec les apprenant-joueurs. Il n’est pas nécessaire d’avoir des visuels très travaillés, avec un niveau de détails très élevé. Un design simple, épuré peut tout aussi bien plaire à votre cible. Assurez-vous de tester vos choix de design lors d’une phase de playtest.

Pour en savoir plus sur le design graphique des jeux vidéo, je vous renvoie à cet article et à la vidéo ci-dessous (en anglais).

Des réactions ? Vous pouvez laisser un commentaire ici :