Les bonnes pratiques de conception suivantes vous aideront à offrir une expérience optimale aux utilisateurs qui jouent à votre jeu sur YouTube sur différents appareils et plates-formes.
Outre les composants du système d'exploitation, l'expérience Playables se compose principalement de trois composants :
- Actions liées aux Jeux intégrés
- Canevas de jeu
- Menus et boîtes de dialogue
Ces bonnes pratiques de conception de jeux fournissent des recommandations sur la façon de créer votre jeu pour le canevas de jeu.
Redimensionner le jeu
Assurez-vous que les jeux s'adaptent correctement à différentes tailles et orientations d'écran en tenant compte de ces pratiques.
Redimensionnez le jeu et adaptez l'UI à la taille et aux proportions du canevas.
Utilisez le pillarboxing ou le letterboxing si le jeu ne peut pas être entièrement responsive à la taille et au format du canevas de jeu.
Évitez de déclencher des barres de défilement. Les barres de défilement ont un impact négatif sur le gameplay et la navigation générale. Remplissez le canevas sans que le jeu ne devienne défilable dans le canevas. Les barres de défilement sont acceptables pour le défilement intentionnel, par exemple lorsqu'un utilisateur fait défiler une longue liste verticale dans l'UI du jeu. Idéalement, les jeux sont entièrement responsifs à la fenêtre d'affichage.
Mise à l'échelle du jeu
S'afficher clairement (sans être floues, pixélisées ni étirées) sur différentes résolutions d'écran.
Assurez-vous que l'UI du jeu (textes, icônes) s'adapte correctement lorsqu'elle est affichée sur des écrans à basse résolution (comme les appareils mobiles 360 x 800) et à haute résolution (comme les moniteurs de bureau 3 840 x 2 560).
Évitez les composants rastérisés basse résolution qui apparaissent flous lorsqu'ils sont mis à l'échelle sur de grands écrans.
Typographie
Assurez-vous qu'ils sont lisibles sur tous les appareils et toutes les tailles d'écran.
Les textes qui s'affichent dans le jeu, comme les boutons, les menus et les bulles de dialogue, doivent être lisibles sur différents appareils et tailles d'écran. Pour ce faire, vous pouvez mettre à l'échelle et adapter le texte automatiquement, ou proposer aux utilisateurs un paramètre permettant d'ajuster la taille de la police.
Si le texte est plus petit que 18 pt, ou s'il est en gras et inférieur à 14 pt, le rapport de contraste des couleurs doit être au moins égal à 4.5:1.
Pour tout autre texte, le rapport de contraste des couleurs doit être d'au moins 3:1.
Pour obtenir des informations générales, consultez WCAG2.1.
 |
 |
| Utilisez des tailles de police suffisamment grandes, avec une épaisseur et un contraste suffisants pour être lisibles. Dans cet exemple, le rapport de contraste est de 4,48:1. | Évitez les petites tailles de police et les couleurs à faible contraste. Dans cet exemple, le rapport de contraste est de 3,07:1. |
Interaction
Cette section aborde les bonnes pratiques concernant les interactions utilisateur et les éléments associés.
Cibles tactiles
Utilisez des zones tactiles suffisamment grandes pour faciliter l'interaction.
Pour faciliter l'interaction, assurez-vous que les cibles tactiles font au moins 48 x 48 dp et qu'elles sont séparées par un espace d'au moins 8 dp (voir les consignes Material Design).
Dans cet exemple, le bouton affiché visuellement mesure 24 dp, tandis que la cible tactile invisible inclut 12 dp autour de l'icône pour atteindre la cible tactile de 48 x 48 dp.
Ajoutez une marge intérieure autour des icônes et des boutons pour augmenter la taille de la zone cible tactile.
Boutons
Utilisez des styles uniques pour chaque état de bouton :
- Activé
- Désactivé
- Survoler (pour les périphériques d'entrée non tactiles)
- en pleine réflexion
- Compacte
Essayez également de différencier les boutons par hiérarchie. Par exemple, les boutons d'action principaux et secondaires dans un menu Démarrer (voir les consignes de conception de Google Material 2 pour les boutons).
Des styles uniques qui distinguent chaque état du bouton
Saisie au clavier
Pour améliorer l'accessibilité du jeu sur les appareils et pour les utilisateurs, ajoutez la saisie au clavier pour toutes les commandes de jeu et la navigation à l'écran, en plus de la saisie tactile et à la souris.
Pour les jeux compatibles avec la saisie au clavier, permettez aux utilisateurs de fermer les menus et les boîtes de dialogue en jeu à l'aide de la touche Esc. Cela s'ajoute à la présence d'un bouton de fermeture visuel (par exemple, une icône X en haut de l'écran). Les menus Paramètres et Pause, les messages d'erreur et les pop-ups d'informations Aide sont des exemples courants de modaux ou de boîtes de dialogue.
Évitez d'associer des actions à l'appui prolongé sur la touche Esc, car elle est utilisée pour quitter le mode plein écran sur les navigateurs Web pour ordinateur.
Pour les jeux qui ont des écouteurs d'appui sur une touche enregistrés, n'utilisez pas preventDefault() avec les événements de touche Esc. Lorsque le jeu est en plein écran dans Safari, l'événement de pression sur une touche est consommé par le jeu sans quitter le mode plein écran.
Technologie tactile
Lorsque cela est approprié, il est recommandé d'utiliser le retour haptique (vibrations) pour rendre vos jeux plus amusants et immersifs.
Moments clés du match
Cette section aborde les moments clés d'un jeu qui créent une expérience agréable pour le joueur.
Tutoriel
Incluez un bref tutoriel ou un niveau d'intégration pour aider les nouveaux joueurs.
L'intégration permet aux utilisateurs d'apprendre les bases du gameplay et les éléments essentiels du jeu pour pouvoir progresser et s'amuser.
Étant donné que les jeux intégrés sont conçus pour être rapides et faciles à prendre en main, essayez de limiter au maximum l'intégration. Bien que tous les jeux ne nécessitent pas de tutoriel, la plupart bénéficient d'une forme d'intégration. Réfléchissez aux mécanismes, règles et compétences clés que le joueur doit connaître pour jouer et apprécier le jeu.
Les tutoriels peuvent être au format suivant :
- Ensemble d'écrans au début du jeu (ou, idéalement, présentés de manière contextuelle tout au long du jeu, le cas échéant)
- Niveau du tutoriel auquel l'utilisateur joue
Pause
Communiquez clairement l'état du jeu à l'utilisateur.
Indiquez clairement à l'utilisateur quand le jeu est mis en pause et comment il peut le reprendre. Évitez de faire croire à l'utilisateur que le jeu a planté ou s'est figé.
Indiquez clairement que l'état du jeu est "en pause" et fournissez une action (bouton) claire pour reprendre le jeu.
Fin du match
Indiquez à l'utilisateur qu'il a terminé le dernier niveau ou le jeu.
Si le jeu a une fin définitive (par exemple, un nombre limité de niveaux), indiquez-le clairement à l'utilisateur. Cela évite que l'utilisateur ne pense que le jeu est cassé ou figé. Idéalement, le jeu célèbre et félicite le joueur pour avoir terminé le jeu.
Audio
Le jeu peut contenir des commandes de volume distinctes pour les effets, les voix et la musique de fond. Les commandes peuvent se composer de curseurs pour régler le volume ou d'un bouton bascule pour activer ou désactiver le son.
Accessibilité
L'accessibilité dans la conception permet aux utilisateurs ayant des capacités diverses de jouer et d'apprécier votre jeu.
Contrairement à la conception Web et logicielle, il n'existe pas de consignes d'accessibilité standards pour la conception de jeux. Pour obtenir une ressource de qualité contenant des consignes supplémentaires sur la conception de jeux inclusifs, consultez les consignes d'accessibilité des jeux. Nous vous recommandons de réfléchir à la façon dont ces consignes peuvent être appliquées à la conception de votre jeu.