Share
Le marché de la téléphonie mobile a commencé à viser les jeunes générations. Des pans entiers des marchés d'applications sont consacrés aux applications et aux jeux destinés aux enfants d'âge préscolaire. Les développeurs ont pris note, et le marché est devenu de plus en plus encombré.
Lorsque vous créez une application destinée à la génération la plus récente, vous devez être conscient de deux points essentiels:
Dans cet article, je parlerai des interfaces utilisateur typiques associées à la plupart des applications à écran tactile et de la meilleure façon de les modifier à l'approche de ce marché..
Un thème que vous remarquerez dans cet article est celui de réduire les barrières à l'entrée. Plus le nombre d'écrans placés entre un jeune esprit et le contenu souhaité est élevé, plus l'enfant est susceptible de devenir impatient et d'abandonner votre application..
Commençons par ce que la plupart des applications commencent leur expérience avec: un écran de démarrage. La livraison rapide? N'en utilisez pas un. Je n'ai jamais rencontré d'enfants de deux ans qui se soucient du fait que JohnSmithDevelopment ait construit son application de chanson et de danse; elle ou il veut juste aller à la musique. Vient ensuite le clic redouté sur le bouton d'accueil, et votre public cible insaisissable est parti pour vérifier quelque chose d'autre.
Les enfants ont une capacité d'attention courte. Vous voulez obtenir les biens de votre application le plus rapidement possible. Commencez la musique de fond au démarrage et ne laissez aucun écran stagnant. L'ennui est ton ennemi.
Souvent, l'élément présenté suivant est un "écran de démarrage". Cet écran a généralement le titre de votre application et un bouton marqué Jouer ou Début ou avec un symbole équivalent-quelque chose de similaire à ceci:
Cet écran exécute généralement une animation, faisant rebondir le titre ou quelque chose de similaire. Cet exemple particulier d’écran de démarrage comporte une erreur flagrante, mais pour le comprendre, nous devons examiner de plus près la façon dont un enfant interprète votre écran..
La façon dont vous ou moi-même visionnons le contenu de notre appareil de poche (ou de tout matériel électronique) est très différente de la façon dont un enfant le voit. Prenons, par exemple, ces maquettes familières:
En tant qu'utilisateur expérimenté, consultez la description du bouton ou de l'élément de tableau pour trouver le contenu souhaité. Ce n'est pas toujours le cas pour un enfant. Vous peut voir un bouton avec le mot Jouer et savez instinctivement quoi faire, mais un enfant de un an peut-il lire le même bouton et comprendre de la même manière? Probablement pas. Les structures de menu typiques ne fonctionnent tout simplement pas bien lorsqu'elles s'adressent aux très jeunes. Alors que faire?
Regardons quelques structures de menu qui sont mieux ciblées pour les tout-petits:
Ce que nous avons changé dans ces exemples, c’est que l’utilisateur est maintenant visuellement dirigé vers le chemin que nous désirons. Nous supprimons le besoin pour l'enfant de comprendre le rôle de chaque bouton et attirons plutôt son attention sur les objets en fonction de la taille ou de l'emplacement..
En règle générale, toutes choses étant égales par ailleurs, vous pouvez vous attendre à ce que l'enfant soit attiré par le plus gros objet à l'écran. Inversement, si vous avez beaucoup à faire sur votre écran, supprimer le menu ou les boutons en même temps est une bonne approche, il suffit simplement d’appuyer sur une touche de l’écran pour accéder au contenu. Il y a des avantages et des inconvénients pour chaque interface graphique que vous décidez d'employer.
Peu importe comment vous vous en approchez, à chaque fois que vous restituez une scène qui ne correspond pas à votre contenu, vous créez une barrière entre l'enfant et votre jeu..
Jetons un coup d'oeil à deux boutons:
Voici un autre exemple de transmission visuelle d'informations à votre utilisateur. Bien que ces deux boutons signifient la même chose, le bouton de gauche indique mieux à un enfant ce à quoi il peut s’attendre..
Les images signifient plus pour un jeune enfant que les mots. Le texte est un ennemi du menu enfant, utilisez-le avec parcimonie. Cela est vrai pour les boutons d'options et les boutons de navigation. "Retour" signifie moins qu'un graphique en flèche. Il en va de même pour "Replay", "Menu", etc..
Concevez vos éléments de navigation comme vous le feriez pour un marché mondial: réduisez au minimum le texte et utilisez des indices graphiques.
Vos menus doivent sortir de l'écran. Ce site contient des didacticiels géniaux basés sur les couleurs pour vous aider à choisir une palette de couleurs pour votre jeu ou votre application..
En ce qui concerne le menu, veillez à ce que vos boutons ou objets interactifs restent brillants et vos objets d’arrière-plan plus en sourdine. Un effet d’ombrage sur les objets au premier plan aide également à leur donner l’impression de "ressortir" de l’écran, et donc plus susceptible d’attirer l’attention..
Voyez combien plus les boutons apparaissent lorsque les graphiques d'arrière-plan sont flous?
De même, le son est une attraction majeure pour les enfants. Une musique légère et énergique retiendra votre attention. Enregistrez la musique sombre et les riffs de heavy metal pour vos jeux de rôle.
De plus, lorsque vous sélectionnez une musique de fond pour votre application, veillez à trouver une mélodie que les parents seront en mesure de tolérer. Ce sont eux qui auront le dernier mot quant à savoir si votre application a le pouvoir de rester sur l'appareil.
Nous disposons de puissants outils dans notre arsenal, mais nous pouvons faire mieux. Jusqu'à présent, notre menu est encore assez statique et plat. Les enfants utilisent cet appareil comme stimulant visuel et donner du piquant à leur menu les aidera à maintenir leur intérêt..
Ceci est accompli avec quelques astuces, à savoir des animations, des actions et des effets de particules. Vous pouvez avoir le personnage principal souriant et agité dans le coin, ou un train volant au bas de l'écran, ou un nombre quelconque d'événements aléatoires programmés se produisant tous à la fois à côté ou derrière votre menu..
Je mettrais toutefois en garde contre trop de ce "bruit". Tout ce qui ne profite pas réellement à votre menu (c'est-à-dire tout ce qui est juste là pour le spectacle), détournera votre utilisateur de votre interface graphique réelle. Au lieu d’ajouter ce bruit, pourquoi ne pas exécuter quelques actions simples sur votre menu existant pour attirer l’attention de l’utilisateur et donner un peu de fermeture à votre scène par la même occasion? Par exemple, avoir un bouton visuellement en mouvement, ou en croissance puis en réduction dans une séquence, est un excellent moyen d'attirer l'attention sur celui-ci..
Voici une simple comparaison d'un bouton statique à un bouton à impulsions:
L'œil est instinctivement attiré par le bouton en mouvement. J'aime utiliser des actions pour créer cet effet dans mes programmes. Le code pour une telle action est montré ici (le code est écrit en Objective-C, mais est facilement adaptable à d'autres langages):
// Crée le bouton qui ne bouge pas en tant qu'image-objet SKSpriteNode * button1 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button1.position = CGPointMake (self.size.width / 4, self.size.height / 2); [auto addChild: button1]; // Création du bouton de déplacement sous la forme d'une image-objet SKSpriteNode * button2 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button2.position = CGPointMake (self.size.width * .75, self.size.height / 2); [auto addChild: button2]; // Créer les actions de base pour agrandir et réduire l'image SKAction * pulseOut = [SKAction scaleTo: 1.2 duration: 0.5]; SKAction * pulseIn = [Échelle SKActionTo: 1.0 durée: 0.5]; // Crée une séquence d'actions de mise à l'échelle et les répète pour toujours dans une boucle SKAction * sequence = [Séquence SKAction: @ [pulseOut, pulseIn]]; SKAction * repeatSequence = [SKAction repeatActionForever: sequence]; // Exécute cette séquence d'actions sur le bouton en question [button2 runAction: repeatSequence];
L'avantage des actions est qu'elles ne nécessitent aucune ressource graphique supplémentaire. Il n'y a aucun effet sur la taille de votre lot d'applications, et vous n'avez pas besoin d'engager un artiste pour dessiner une séquence d'images pour vous. Cela dit, vous pouvez obtenir des effets similaires avec les séquences d’animation traditionnelles et les fichiers atlas..
Avoir votre bouton bougé est génial, mais si nous pouvions le faire disparaître encore plus de l'écran? C'est là que les effets de particules peuvent jouer à votre avantage. Une particule est simplement une image que nous pouvons utiliser encore et encore des milliers de fois pour créer un effet..
Nous pouvons créer un autre effet intéressant pour attirer l'attention sur nos boutons en ajoutant une seule petite image, un fichier XML de description et trois lignes de code. Les subtilités derrière les effets et les actions de particules dépassent un peu le cadre de ce tutoriel, mais pour compléter, voici le code pour charger le fichier:
// Créer un émetteur d'effet de particules avec un fichier SKEmitterNode * emitter = [NSKeyedUnarchiver unarchiveObjectWithFile: [[NSBundle mainBundle] pathForResource: @ "backHighlight" ofType: @ "sks"]]; // Positionne le noeud d'effet Particle sur le bouton, mais derrière celui-ci emitter.position = CGPointMake (button2.position.x, button2.position.y); emitter.zPosition = -100; // ajoute l'émetteur à la scène du jeu [self addChild: emitter];
Et voici le résultat:
L'image acquiert plus de profondeur de cet effet et attire encore plus l'attention.
Alors, quel était le problème avec ce menu de plus tôt?
Quand je l'ai donné à mon jeune fils à tester, il a continué d'essayer d'exploiter le titre animé. Le bouton Lecture était stagnant et, même s'il était grand et bien visible à l'écran, il était toujours attiré par le titre animé qui rebondissait. Il était frustré et avant que je puisse lui montrer comment accéder à l'écran suivant, il appuya sur le bouton Home tant redouté, cherchant autre chose..
J'avais suivi deux de mes conseils d'en haut, mais j'avais un faux pas crucial: la distraction. J'avais créé par inadvertance une barrière dans mon écran de démarrage.
N'oubliez pas que lorsque vous traitez avec des enfants en bas âge, vous ne pouvez pas vous attendre à avoir la patience de déterminer comment faire fonctionner votre application. Si cela ne leur semble pas logique après deux essais, ils passeront à autre chose. Supprimez les obstacles et simplifiez-le et intuitif de manière à ce que les non-connaisseurs en écriture et sans expérience du produit sachent quoi faire..
Dans cet esprit, voici quelques lignes directrices à retenir:
Le meilleur conseil que je puisse vous offrir est le suivant: le meilleur menu pour une application ou un jeu destiné aux tout-petits est pas de menu du tout.
Si votre utilisateur doit cliquer sur plusieurs boutons pour accéder à votre contenu, vous en avez trop. La seule vraie raison d'avoir un bouton dans votre application est si vous offrez à vos utilisateurs plus d'une activité à choisir. Dans ce cas, attribuez à chaque activité un bouton de même taille et mis en surbrillance, et mettez tous les éléments en équivalence..
Si votre contenu doit tenir sur plusieurs écrans, laissez toujours une indication visuelle à l'utilisateur pour lui indiquer qu'il y a plus de contenu disponible. Dans ces cas-là, j'utilise une fonctionnalité de "furtivité" pour afficher une partie du bouton suivant, comme dans cette vidéo:
Merci de m'avoir lu et j'espère que vous avez trouvé cette discussion intéressante. Si vous avez des commentaires, n'hésitez pas à les laisser ci-dessous. J'aimerais aussi voir les menus que vous créez pour vos propres applications.
J'ai inclus un exemple de fichier de projet avec ce tutoriel, écrit en Objective-C avec xCode 5 pour la plate-forme iOS. Ce projet présente un exemple de comparaison de deux boutons, l'un statique, l'autre comprenant des pseudo-animations basées sur des actions et des effets de particules..
Accentsconagua