Bonjour,

J'essaye de moderniser le menu principal de mon application. Apres plusieurs essais je suis toujours pas tombé sur quelque chose qui me convienne parfaitement mais je n'arrive pas à voir ce qui me va pas. J'attends vos conseils/retours, Merci !

Ancien menu : 

Voici plusieurs essais :

1	2	3

-
Edité par fifi97 24 avril 2018 à 19:48:42

Salut !

Alors on va regarder ça sous deux angles :

- D'abord l'UX : En soi un menu par tuile peut avoir son intérêt, je l'ai moi même implémenté avec succès sur une app. Cependant en design il faut toujours essayer de simplifier les choses, d'enlever un maximum les éléments "perturbateurs" pour avoir une expérience la plus fluide possible. Si après avoir fait cette réflexion la solution apparaît être ce système, on fonce. Ici par exemple, il faut se demander quelle est la principale raison qui pousse les utilisateurs à aller sur cet écran. Si tu a des metrics ça peut t'aider : 90% des users cliquent sur nouvelle partie ? Il faut clairement le mettre en avant. Concrètement je mettrait le A propos dans la section paramètres, et si j'étais un peu radical je mettrait les paramètres juste en tant qu'icone de manière discrète. Typiquement quelque chose du style : https://imgur.com/a/qnOArkj

- Maintenant l'UI : Bon.. C'est trop vert. Il faut aussi ne pas utiliser cette couleur pour le texte car elle est difficilement lisible (pour t'aider, utilise des outils de vérification de ratio de contraste comme https://webaim.org/resources/contrastchecker/ ) Je n'ai pas vraiment de directions particulières à te donner vu que l'UI a une infinité de possibilités et d'approches. Par contre je t'invite à regarder du côté de Google et sa documentation pour le material design, qui est une très bonne ressource si tu veux quelque chose de calibré et efficace. Pour l'inspiration tu peux aller voir du côté de Uplabs ou dribbble qui en ont à foison. 

-
Edité par Adrig_ 25 avril 2018 à 12:36:00

Salut Adrig_ !

Merci pour ta réponse. Je dirais que 90% des utilisateurs vont dans nouvelle partie et reprendre une partie (les 2 premiers boutons). C'est le menu principal donc les utilisateurs y vont au lancement de l'application et n'y reviennent généralement plus. Je préfère laisser le bouton à propos bien visible car c'est par là qu'on peut me contacter si besoin et je n'ai pas envie de le "cacher". Avec ta proposition quelque chose me gêne c'est sur des écran 7" soit les bouton sont littéralement énorme soit j'ai plein de vide. 

Pour l'UI je penses que tu as pu le remarquer le thème de l'appli c'est vert en couleur primaire et blanc en secondaire. Pour la couleur du texte je suis d'accord mais je n'arrive pas à trouver quelque chose qui colle bien et le noir fait un peu trop banal je trouve mais c'est peut être la meilleur solution. 

C'est toi qui voit pour le bouton a propos, mais sur quasiment tous les cas de figure que j'ai croisé, l'avoir aussi visible est inutile. De toute façon tu peux être sûr que celui qui veut te contacter trouvera un moyen de le faire... Même en mettant de côté cette question, ça ne veut pas dire que hiérarchiser les éléments n'est pas bon ! 

Généralement le blanc est considéré comme base, du fait de la lisibilité. Ensuite tu as ta couleur primaire qui vient faire les accentuations et parfois une couleur secondaire qui vient contraster ta couleur primaire (je te renvoie sur la doc de google pour plus de détails)

J'ai fait un essai rapide pour te montrer :

Il n'y a toujours aucun doute sur quelle est ta couleur primaire mais ici le blanc laisse respirer l'ensemble. J'ai volontairement poussé le curseur à l'opposé mais tu peux choisir une approche moins radicale et plus colorée (cf les sites d'inspirations de mes précédents posts).

Tu peux tester l'écran sur mobile, les boutons restent de bonne taille et s'adaptent bien dans le white space.