Qu’est-ce qu’un “bon” “design” pour votre projet de jeu web? Que vous apportera un investissement (en argent ou en temps) dans l’élaboration de ce design?

Les conseils de base

De manière générale, un bon design de jeu web doit coller au style et à l’ambiance que vous voulez donner à votre jeu, mais aussi à votre cible de joueurs (le design pour des casual gamers et des hardcore gamers ne sera pas le même), à vos moyens, et aux technologies employées (un jeu en PHP/MySQL n’aura probablement pas le même design qu’un jeu en pure JS, 100% client comme la plupart de mes mini-jeux).

Vous devez donc être cohérent d’une page à l’autre, en utilisant une charte graphique et en vous y tenant (un bouton cliquable doit toujours avoir à peu près la même tête dans tout le jeu, et un bouton inactif aussi). De plus, adaptez votre langage à votre cible, ainsi que votre police d’écriture (un jeu à la police illisible fera fuir les joueurs). Adaptez aussi la difficulté du jeu: un casual gamer qui joue pour la première fois à votre jeu n’aura pas les mêmes attentes qu’un hardcore gamer qui joue depuis 2 ans.

Votre design doit plaire à vos joueurs-cible, et aux “visiteurs-cibles” (= de futurs joueurs-cible qui viennent pour la première fois dans votre jeu). Vous vous fichez des autres visiteurs (qui ne seront jamais des joueurs). Vous vous fichez des robots (au delà de votre référencement naturel).

“C’est moche, c’est nul”

Un article sur le beau est utilisable (PDF) avance l’idée que ce qui est beau est utilisable. Mais en réalité, ce n’est qu’une corrélation, et il vaut donc mieux formuler cela comme “ce qui est moche n’est pas utilisable”, car vous mettez votre joueur dans de mauvaises dispositions (et vous induisez un biais cognitif négatif). Vous devez donc rendre votre jeu au minimum “beau” pour qu’il soit joué. C’est probablement la raison pour “jeux commerciaux” vous semblent parfois n’être que “de beaux graphismes creux”: c’est une condition nécessaire (mais pas forcément suffisante) pour que le jeu soit joué. Et ce, même si votre âme de créateur de jeu indépendant en prend un coup. Donc, votre design doit avoir l’air beau et élégant, en fonction de la cible de joueurs que vous avez (des joueurs-types de 15 ans sur leur mobile n’auront pas la même notion de beauté qu’un ingénieur de 40 ans sur son PC).

Cette barrière du “moche” peut être franchie: vos amis, vos testeurs et votre équipent passeront peut-être outre. Mais les joueurs lambdas, probablement pas. Soyez donc prudent dans vos tests car cette barrière invisible auprès de vos premiers testeurs peut vous péter à la figure lors de la sortie du jeu.

La mise en exergue

La mise en avant d’un élément dans un jeu, ou dans un site en général, est très courante: bouton d’inscription (ou de démarrage du jeu), ressource critiquement basse une fois dans le jeu, attaque imminente à destination ou de la part d’un autre joueur, item rare découverte par le joueur, etc sont autant d’éléments importants qu’il peut être utile de mettre en avant.

Attention toutefois à ne pas mettre plusieurs choses en avant dans la même page. En effet, dans ce genre de cas, la mise en avant va échouer: si trop d’éléments sont “mis en avant”, alors aucun ne l’est plus, et la mise en avant échoue. La mise en avant est en effet une “prioritisation” des choses: une seule chose (ou un seul groupe de choses) doit être prioritaire sur les autres, sinon, la notion de “priorité” n’a plus de sens.

Mettez en avant ce que le joueur (ou visiteur de votre site) est venu chercher (information, bouton d’action, etc). Ce ne devrait être qu’une et une seule information par page. Sinon, revoyez le design de vos pages: elles ont trop d’infos en même temps.

Screenshot du site Amelie
Trop d’éléments mis en avant font qu’aucun élément ne ressort, et le rouge de mise en exergue se mélange dans le thème du site
Screenshot de Terre noire
Au lieu d’encadrer chaque ressource (aucune ne ressort), mieux vaut encadrer l’ensemble des ressources (l’ensemble ressortira)

Mais le devblog?!

Si vous avez parcouru quelques articles de ce devblog (ou même juste lu celui-ci) alors vous verrez que plusieurs éléments sont souvent “mis en avant” dans un même article, au travers des “encarts” de couleur. Cela déroge-t-il à la règle précédemment citée (“ne mettez qu’un seul élément en avant”)? Pas vraiment. En effet, il y a rarement plus d’un encart visible à la fois à l’écran, et cet encart va donc clairement ressortir. Quand le lecteur scrollera, il trouvera d’autres encarts, qui attireront son regard, et la lecture de leur contenu répondra souvent à la question qu’il se posait. La lecture du reste de l’article est alors là pour répondre aux détails de ses questions.

L’effet mur

A l’inverse, si vous ne mettez rien en exergue et que vous avez une foule de contrôles en tous genres (car votre jeu doit avoir un gameplay riche), alors “l’effet mur” vous guette. Il est d’autant plus présent que le joueur est arrivé récemment dans le jeu. Dans ce cas, le nouveau joueur (ou même le visiteur qui vient juste d’arriver sur votre site) va se demander “mais par où commencer?”… Souvent, sa réponse sera “nulle part”, et il s’en ira aussi sec.

Mieux vaut donc désactiver tous les contrôles inutiles, et ne laisser au joueurs que ceux qui lui permettent de remplir son objectif initial. Au fil du temps, de nouveaux contrôles seront débloqués. Cela donnera d’ailleurs un sentiment de progression au joueur, qui l’aidera à savoir (inconsciemment) qu’il progresse bel et bien dans le jeu. Les contrôles peuvent donc être masqués, ou bien grisés.

Griser des boutons sur une interface limite l'effet-mur
Hypora: griser les boutons évite “l’effet mur”

Les choix impossibles

L’effet-mur cache souvent un autre problème: les choix impossibles. Pendant leurs premiers pas dans votre jeu, vos joueurs ne savent rien du gameplay. Vous devez donc ne leur proposer que des choix simples à la portée de la bleusaille qu’ils sont. Par exemple, beaucoup de jeux proposent de choisir une “race” au départ (comme Battalia), avec des spécificités pour chacune d’elles. Un tel choix est souvent difficile quand vous débutez à peine dans le jeu: dur de savoir quel effet aura chaque race sans avoir commencé à jouer.

En revanche, si votre cible vous le permet, vous pouvez vous reposer sur l’expérience qu’a le joueur dans les autres jeux. Par exemple, s’il faut choisir un lieu où commencer (une planète? une étoile? une Lune?) alors vous pouvez indiquer le “style” de jeu associé à chaque lieu: l’étoile pour les guerriers, la planète pour les chercheurs en herbe et la Lune pour les trouillards.

Un joueur face à un choix qu’il ne comprend pas prendra une option au pif (au mieux), ou partira en considérant le jeu comme “trop compliqué” ou “incompréhensible”.

L’impact psychologique des mots

Le design d’une page web (pour un jeu ou un site) est important, mais son contenu l’est tout autant. L’impact psychologique des mots peut ainsi être énorme. Par exemple, si votre jeu dispose d’un bouton “Inscription” alors vous risquez de mettre le joueur dans de mauvaises dispositions: il n’est pas venu s’inscrire à votre jeu, mais y jouer! Le simple changement de texte du bouton pour Jouer! peut suffire à augmenter votre nombre d’inscrits.

Remplacez les termes péjoratifs (qui présentent un mauvais côté d’un action) par des termes mélioratifs (qui en présentent les bons côtés, sans mentir). “Inscription” devient alors “Commencer à jouer”, “Connexion” devient “Reprendre votre partie” et “pour les trouillards” pour les Lunes dans l’exemple précédent devient “pour les pacifistes”.

Les emails

Les emails font également parti de votre jeu web, au même titre finalement que votre blog, votre forum, ou votre Discord. Vous devez donc appliquer les mêmes conseils que pour le jeu en lui-même: faites des emails beaux, utiles, simples, bien codés. D’autant plus que la réception d’un email ne se fait pas suite à une action: on reçoit des emails à n’importe quel moment, et certains finissent alors immédiatement à la poubelle. N’hésitez pas à tester le design de votre email sur votre poste local avant de le déployer en production (via FakeSMTP par exemple). Evitez aussi les services tiers d’envoi d’emails: trop souvent utilisés pour tout et n’importe quoi, ces emails finiront dans le dossier “SPAM” du joueur ou même, n’atteindront jamais sa boite mail (car ils seront classés en “SPAM” par son fournisseur d’accès).

Contrairement aux pages de votre jeu web, le joueur n’a rien demandé ni fait quand il reçoit vos emails: ils doivent donc être d’autant plus parfaits qu’ils peuvent être considérés comme “indésirables” (spam).

Les effets sonores

Dans la droite ligne des choses non-sollicitées qui arrivent quand même, on trouve les effets sonores. Ils peuvent être rangés en trois catégories: les effets intradiégétiques (les sons qui seraient vraiment entendus par le joueur s’il était réellement plongé dans le jeu: son de tir d’un canon dans un jeu de pirates par exemple), les effets d’interface (qui ne sont entendus que parce qu’on joue: bip quand on clique sur un bouton, alarme quand une attaque ennemie approche, etc) et les effets sonores d’ambiance (qui ne font pas partie de l’univers du jeu, mais qui aident à s’y projeter comme une musique d’ambiance).

Dans la plupart des cas, ces effets sonores sont à éviter. Ils risquent en effet de perturber (et de frustrer) le joueur. Il est toutefois envisageable de les utiliser si et seulement si le jeu requière la pleine attention du joueur. Si le joueur peut laisser l’onglet du jeu en arrière-plan, alors vous devez bannir tout effet intempestif (sauf, éventuellement, un effet sonore de notification quand quelque chose d’important intervient). En gros, les effets sonores ne devraient servir que:

  • Suite à une action dans le jeu et si ce jeu n’a pas l’ d’un “site web” classique (par exemple, un bruit de coup de feu quand le joueur tire dans un RPG sur la 2nde guerre mondiale)
  • Dans un (mini-)jeu qui requière la pleine attention du joueur (comme la plupart de mes minis-jeux)), et c’est d’ailleurs le seul cas où une musique d’ambiance peut se justifier
  • Pour attirer l’attention du joueur sur le jeu si l’onglet est en arrière-plan (mais à faire avec parcimonie, l’API Javascript de Notification pouvant être mieux adaptée)

GoodUI: aller plus loin

Pour d’autres astuces de design web, je vous recommande GoodUI (en anglais). Vous y trouverez une foule de conseils très utile pour améliorer le design de votre site ou de votre jeu web. Ils complèteront donc avantageusement ceux énoncés dans cet article.