Benjamin a écrit :
EDIT2: Merde, j'avais pas vu le "pas de pavé"... :x ou oublié ou peu importe. Désolé...!

Bonsoir !

Je vais faire un pavé aussi. J'ai coché "je n'aime pas", mais c'est le premier jet d'une bonne (ou même, plutôt: excellente) idée.

Petite note d'intro: il serait idéal d'avoir un .psd ou .xcf pour peut-être montrer selon nous ce qu'il y a à changer ? pour ceux qui savent utiliser les logiciels dans ce genre. Moi ça m'aiderait à fond, je suis pas très doué pour m'expliquer sans images.

Bon, pour ma part, je ne suis pas un professionnel, mais ça fait plusieurs (longues) années que je fais du graphisme. Dernièrement sur DC, j'étais justement sur une toute nouvelle interface - je posterai un screen plus tard, d'ailleurs, dans un edit. Pas pour me vanter, mais je me dis que ça pourrais peut-être inspirer ? Bref !

Tout ça pour en venir aux remarques que j'ai à faire: y a pas mal d'erreurs assez "communes". D'ailleurs, je tiens à dire que toutes les remarques que j'ai lu sur le topic sont selon moi toutes à prendre en compte (et j'ai tout lu le topic). Je vais éviter d'être redondant, je vais juste parler des points que j'ai à développer:

- La "marge". Sur le bloc gauche, ça n'est pas du tout la même pour tous les blocs d'objets. Il faut que ce soit la même pour tous les blocs si vous comptez garder des "blocs" (ici, c'est plutôt le "padding" du bloc gauche).


Il y a aussi la marge entre l'inventaire et l'équipement qui n'est pas le même qu'avec les autres blocs.

Ainsi que la marge entre le haut du bloc gauche et le premier "bloc" (silhouette) et le bas du bloc gauche et le dernier "bloc" (inventaire / travail).

- Les couleurs... hé oui. Personnellement, quand je fais un design, je procède comme ça: une à deux couleurs maximum et quelques rares nuances de ces dernières + du blanc à noir, avec toutes les nuances de gris. Et là, ben, y a vraiment vraiment trop de couleur: vert, bleu, orange, rouge,... et les bleus ne sont pas accordés (cyan et bleu, c'pas vraiment la même couleur).

L'idée de passer la santé dans le rouge - orange et la silhouette dans ces mêmes tons, c'est une bonne idée (préférez le rouge, le orange moué). Mais sur un fond bleu, je ne sais pas. Donc, alternative: quand la santé descend, l'interface entière se colore d'elle-même plus de rouge. Jusqu'à arriver dans la catégorie "alerte" (inférieur à X% de la vie) où l'interface est toute rouge, voire, si possible, grésillante (quelques gif à faire du coup) avec le mot "alerte" qui apparaît / disparaît régulièrement.

Idée: quand on est K.O., l'interface est "noire", peu visible (on ne peut rien faire de toutes manières, sauf parler), en redémarrage (un voile "noir" sur la carte avec écrit: "redémarrage en cours" qui apparaît / disparaît ? ça nous empêche de cliquer sur la carte - et donc de voir les noms, passer la souris sur les pions, récupérer des objets dans les meubles et caetera, mais c'est logique: on est K.O., on voit pas trop ce qui nous entoure, on peut pas bouger et caetera. Et le chat, seul survivant, grésille un peu, tout ça).

Entre chaque état, il est nécessaire d'instaurer une transition douce, ou alors de la marquer par l'affichage d'un titre "alerte" pour la partie rouge.

Mais l'interface selon moi ne doit pas être de plein de couleurs différentes. Le bleu d'interface de base (cyan sur un écran bleu foncé) est pas mal du tout.

- L'immersion. Il y a une volonté d'immerger le joueur dans un univers. Ca, c'est vraiment cool: comme je le disais souvent, DC peut être cyberpunk tous les jours, mais pour ça il suffit d'un peu d'ambiance audio et d'une refonte de l'interface.

Donc, y a un premier pas vers cette immersion du joueur et c'est vraiment bien. Mais à mon goût, c'est pour le moment trop sporadique - il faut que tous les éléments soient intégrés à l'interface de la tablette. Pour le moment, seule la silhouette, la forme et la santé correspondent à cela. Il y a quelques petits "gadgets", mais ça n'est pas nécessairement utile ("système de support opérationnel - activé" par exemple). C'est bien, ça force à l'immersion mais attention: ce n'est pas nécessaire, vous avez déjà tous les éléments en mains pour faire quelque chose d'immersif en n'utilisant QUE ce que vous devez mettre sur cette interface.

En haut du bloc gauche: faites un bloc de "connexion" de l'utilisateur. L'avatar s'affiche, à côté vous avez un: "Bienvenue, {USERNAME} !" et des informations sur le compte de l'utilisateur de la tablette (interface): ID du personnage, d'autres choses peut-être ? Tout ce qui est relatif à l'identité du personnage, un truc bien bien cyberpunk / dystopique / montrer qu'on est qu'un clone parmi les autres.

Aussi, attention: il faut que le pseudo entre entièrement sur l'interface. Ici, j'ai l'impression qu'il n'y aura pas la place pour un pseudo qui utilise le nombre maximal de caractères ("Kanuligasinosphtepot" utilise tous les caractères si ça peut aider).

Et tous les éléments devraient être intégrés comme ces derniers. Y a de l'idée avec la silhouette (qui est en effet trop grosse), la santé et la forme. La forme cela dit, ça pourrait aussi être une barre de batteries quelque part en haut ?

Un conseil, si vous bloquez sur un élément: demandez aux joueurs comment ils le traduisent en RP. Ils sont super inventifs quand il s'agit d'expliquer du GP en RP. Exemple: pour les compétences, perso, en jeu, quand on me demande mes compétences, je joue que mon pion allume son deck et démarre un logiciel appelé "U.B.A." qui retranscrit selon des calculs complexes ses compétences physiques en chiffres et catégories (ce qui je trouve est d'ailleurs très "cyberpunk" à mes yeux - c'est dystopique à souhait là aussi). Ca peut être une piste pour l'intégrer à la tablette !

Tout ce qui existe sur l'interface doit être intégré et immersif, ce qui n'est pour le moment pas le cas de la majorité des "blocs".

Enfin, voilà, en bref: tous les éléments peuvent être traduits et devenir un élément de la tablette. Vous n'avez pas besoin de rajouter des "gadgets" qui sont parfois un peu "cheap" à mes yeux (comme le truc autour de "Activé", qui d'ailleurs renvoie sur "système activé", c'est super répétitif et ça n'a pas forcément de sens - "système de support opérationnel - activé" ?).

de nouveau pas pour me vanter, mais j'avais essayé de faire un truc comme ça sur mon interface - QUE JE POSTERAI §§§ - si ça peut vous donner des idées !

- Les abréviations. Il y en a beaucoup trop, on ne sait pas à quoi elles correspondent, ça donne l'impression de quelque chose qui n'a pas été terminé ou alors fait par "flemme". Un peu comme un type qui écrit qu'en abréviations pcq ça va bcp + vite. Vous voyez ?

"Com 2.0" entre dans cette catégorie aussi ! Mais il y a aussi "hydra." et j'avouerai que "satiété" ça parle beaucoup moins facilement que "faim" qui est facile à comprendre. Même si je crois avoir compris pourquoi ça a été remplacé (si on a 100% faim, on a super faim... alors que non: 100% = on a pas faim, sur DC - donc il est plus correct de parler de satiété).

D'ailleurs je vous joins un article super sympa sur comment "designer" des mots. C'est en anglais par contre. Ca vous aiderait peut-être à ce niveau là

- Les logos de communication. Je parle de ceux-ci:


Y en a beaucoup trop partout. Sans aucune raison particulière, de plus. J'ai même fini par trouver ça drôle tant y en avait partout. On a l'impression que c'est posé là "pour remplir" ou "faire genre c'est de la technologie"

- Les blocs. Ca, j'en ai déjà parlé, mais ça donne l'impression que ça n'est pas du tout intégré à l'interface. Je pense qu'il serait mieux de les supprimer.

- La tablette un peu "cheap". Rien de très grave, ici, mais sur la toute gauche et toute droite y a des petites diodes bleues. Sans lumière, ça donne un effet un peu plastique et cheap. Faudrait rajouter une "lumière".

Idéal: rajouter un effet de lumière (pluie qui passe, "fumée", impression que la lumière est dans une atmosphère quoi).

- La police d'écriture. Tout d'abord, la police n'entre pas du tout dans ce que j'imagine être une police d'écriture futuriste (ou plutôt qui aurait sa place sur une tablette): il y a des empattements très marqués, à pratiquement toutes les lettres.

Ensuite, la police d'écriture est utilisée partout et pour un peu "tout et n'importe quoi". Comme pour les couleurs, il faut en utiliser une principale, qui peut être "forte" (= très particulière, disons... Lobster par exemple), utilisée pour les titres, puis une seconde pour tous les "blocs de textes" (chat, paragraphes,...), qui ne sont pas des titres (disons Arial pour faire simple). Et les deux doivent aller ensemble.

Là, la police d'écriture utilisée pour "Système de support opérationnel" est utilisée pour autant ce qui est censé être mis en avant que ce qui doit moins l'être. Exemple: le pseudonyme du personnage et son titre. Ou "Logements" et "vous n'avez pas de logement". De plus, les titres ne sont pas plus grands que les "blocs de texte".

En général, j'ai trouvé la police d'écriture semblait bien petite. Surtout sur le système de géolocalisation, mais l'action en cours par exemple, je trouve ça petit aussi.

- Le déséquilibre entre les blocs de gauche et droite. Ca, j'aurais pas trop à développer, tout le monde l'a fait avant moi... la remarque de Cryx (je crois) me semble pertinente: y a un gâchis d'espace au-dessus du chat. J'aurais tendance même, dans ce cas, à ne laisser que le chat à droite, et tout le reste à gauche.

Sauf que ça prendrait beaucoup de place.

Mais il ne faut pas oublier qu'il est possible et important, surtout, de faire une interface avec laquelle le joueur peut vraiment interagir: cliquer, ce genre de choses. Est-ce qu'il a tous les jours besoin d'avoir l'onglet "logement" ouvert ? L'onglet "travail" ? Ou voir ses compétences ? Ou ses contacts ? Pas forcément.

Ca serait peut-être un petit retour en arrière, mais procéder par onglets avec un style un peu minimaliste - avec des icônes, plutôt que des abréviations (par rapport à avant) - qui ne font pas de mal à l'immersion comme je l'ai dit plutôt, qui sont donc bien intégrées, ben... selon moi, ça peut le faire, et en plus faire gagner de la place

- Le bloc noir autour de la carte. Là par contre, à mes yeux, ça va pas du tout du tout ! Déjà, on le voit côté chat: le bloc fait même pas le tour de la carte !


Ensuite et surtout: il est pas du tout intégré à l'interface, donc n'a pas la même taille, ça fait pas joli du tout. Ca me sort, personnellement, de mon immersion: j'ai l'impression que d'un coup on s'adresse au joueur et on ne fait même plus l'effort de mettre des gadgets pour que j'y crois (mis à part le "connecté" qui, je trouve, n'a pas grand chose à faire ici - il irait plutôt sur le bloc de "connexion" et d'identité dont je parlais plus tôt).

Parfois il dépasse même sur des effets en-dessous des autres images...? Sur le screen que je vais passer ci-dessous, on dirait qu'il y a un dégradé bizarre qui s'arrête net. D'ailleurs, le dégradé rend pas bien, s'il existe vraiment. Il n'est pas nécessaire je pense ?


- Le bloc noir du chat. J'ai globalement les mêmes remarques que pour le bloc noir dont je parlais ci-dessus. Pas intégré, qui dépasse, et caetera. Là par contre y a des gadgets, mais... La version actuelle me semble mieux, personnellement. Et le "parler normalement" est trop petit, aussi. Et, au lieu de mettre une phrase ou une abréviation, peut-être mettre une icône là aussi ? Avec un speaker qui affiche une barre sur trois (avec une couleur grise ou noire) pour murmure, deux barres pour normal (cyan), trois barres pour cri (rouge).


Aussi, le bleu est différent de tous les autres. Et faut faire attention à la marge autour, qui n'est pas la même pour tous les éléments. La version actuelle de la textbox est mieux que celle-ci à mes yeux.

- Question: le chat débutant a disparu ?

- Question: le site s'adaptera aux tailles d'écran ?

Pour finir, si on peut avoir un .psd ou .xcf de la maquette, je veux bien montrer un exemple de comment j'imagine toutes ces remarques prises en compte (et tout refaire mon post qu'avec des images, ça éviterait l'effet pavé ).

Je rappelle aussi que y a plein d'autres remarques à faire, mais qui ont été faite avant, que j'ai pas noté à nouveau ici. Le bloc "cassé" vert, sans raison, la barre d'XP, les icônes qui ne sont pas toutes du même style (Font Awesome pourrait peut-être vous aider ?), l'action actuelle trop bien cachée, et caetera, sont toutes des remarques pertinentes.

Y a juste l'argument que j'ai vu sur le fond derrière, comme quoi il était pas top - je pense que c'est une question de goût, moi j'aime beaucoup. Peut-être juste trop de "marques" sur le fond, j'aurais préféré voir la pluie mise en avant plutôt que les marques.

PAVEY CESAR !

EDIT: Je rajoute juste à nouveau: c'est une très bonne idée, l'interface. Je dis pas qu'elle est "vraiment trop nulle", je dis juste que y a plein de trucs (selon moi) à corriger. Mais y a vraiment une bonne idée derrière.