[Suggestion] UI du clavier sur la page d'accueil

[Arthurin]

Lorsque je suis arrivé pour la première fois sur le site, j'ai eu du mal à comprendre comment s'activent les différents layers sur Ergol et ce n'est qu'après une lecture complète du site que j'ai eu accès à l'explication de l'activation avec la touche morte et avec AltGr.

Aujourd'hui encore, je trouve que l'information pourrait être affichée de manière plus claire, surtout sur le widget qui affiche un clavier en ergol et qui est vraiment le contenu le plus important/regardé de votre page d'accueil.
Voici quelques points sur les choix d'UI qui peuvent aider à représenter le fonctionnement du clavier ; bien sûr, une lecture approfondie du site est importante et une explication textuelle sera toujours plus complète qu'un choix de couleur.

Merci de garder en tête qu'il y a des choses sur lesquelles je peux me tromper et d'autres que j'ai peut-être mal saisies ; mon objectif est de s'interroger et de voir si ce serait pertinent de revoir un ou plusieurs aspects pour gagner en clarté. Je pense que les visiteurs.euses qui ne sont pas familières avec d'autres dispositions, représentent la majorité des consultations du site et une cible à privilégier.

1. Le choix des couleurs de fond en contradiction avec les caractères des layers "secondaires" qui sont colorés.
   Malheureusement, la couleur rouge est utilisée pour la touche morte, et la couleur bleue pour le layer Symboles. À mon avis, ça serait intéressant soit de :

• a) Faire uniquement un dégradé de gris
• b) Changer les couleurs bleu-bleu foncé-rouge pour d'autres couleurs

2. L'avantage de retirer complètement ces couleurs de fond (solution 1.a) c'est qu'on pourrait faire une correspondance de couleur pour communiquer uniquement sur le lien avec les layers secondaires : les caractères des layers secondaires sont affichés en couleur verte/bleu/rouge, et bien la touche utilisée pour activer ces layers aurait alors une couleur de fond verte/bleu/rouge.
   Dans le cas de la solution 2.b on pourrait dans ce cas appliquer une bordure plus épaisse et de couleur verte/bleu/rouge.

3. Quand on arrive sur la page d'accueil cela nous affiche par défault le layer "typo" ce qui fait que la première fois qu'on découvre le clavier sur les touches on voit les accents affichés en bas à droite.
   Sur un clavier traditionel c'est la position sur la touche utilisée pour faire comprendre qu'il s'agit du layer Alt Gr.
   Peut-être envisager de garder cette cohérence ?

• a) Lorsqu'on clique sur Typo+Symboles le layer Typo est déplacé en haut à droite donc ça aurait du sens qu'il soit tout le temps en haut à droite.
• b) Au lieu d'avoir des boutons pour afficher "typo", "typo+symboles" et "symboles" il pourrait y avoir tout d'abord le layer avec les lettres de bases, puis un layer avec uniquement les caractères typos, etc. Le bouton "typo + symboles" m'a l'air d'être une tentative d'avoir une vue condensée avec un maximum d'information mais au détriment de certains caractères de chacune de ces deux couches. Je pense qu'elle pourrait être retirée du widget pour simplifier la logique un bouton = un layer. C'est éventuellement une image qui pourrait se trouver ailleurs sur le site, une sortie de récapitulatif / condensé si qqn veut se faire un pense bête.

J'ai voulu faire un exemple visuel avec Paint et j'ai très vite regretté le résultat, tous les caractères ne sont pas reconnus donc il y a aussi des erreurs mais j'espère que ça aidera à visualiser (j'ai affiché sur chaque touche : en bas lorsqu'on appuie sur la touche morte et en haut touche morte + Shift)

Je suis aussi sur Discord pour discuter, et si mon texte est imbuvable je peux essayer de faire quelques images un peu plus claires pour montrer ce que je propose comme changements ;)

A bientôt,

[fabi1cazenave]

C’est un débat qui a eu lieu plusieurs fois, et pour lequel on n’a jamais trouvé de solution satisfaisante.

1. choix des couleurs :
   • le rouge indique une touche morte, et on a besoin de distinguer la touche morte des caractères qu’elle produit
   • a) les dégradés de gris manqueraient clairement de lisibilité, à moins que je n’aie pas compris l’idée
   • b) pas compris
2. pas compris
3. on a aussi des caractères en 1dk+Shift :

Au lieu d'avoir des boutons pour afficher "typo", "typo+symboles" et "symboles" il pourrait y avoir tout d'abord le layer avec les lettres de bases, puis un layer avec uniquement les caractères typos, etc.

Si je comprends bien, l’idée serait de ne plus proposer de vue d’ensemble, et à la place, de faire trois affichages reprenant ce qu’on fait déjà avec le boutont « Tester » ?

Le bouton "typo + symboles" m'a l'air d'être une tentative d'avoir une vue condensée avec un maximum d'information mais au détriment de certains caractères de chacune de ces deux couches.

Oui. C’est une vue appréciée pour l’apprentissage.

On pourrait effectivement la supprimer si elle gêne. Mais de ce que je comprends de ce que tu dis en 3) (la partie avant les alinéas), c’est la vue la plus proche de ce que tu proposes ?

[fabi1cazenave]

je peux essayer de faire quelques images un peu plus claires pour montrer ce que je propose comme changements ;)

Je m’incline devant le boulot que représente l’écriture de ce ticket mais j’avoue ne pas savoir quoi en faire, parce que ça n’est :

• ni un rapport de bug (= je fais telle suite d’actions, je m’attends à ci, j’obtiens ça)
• ni une suggestion claire — sauf pour la proposition de suppression de l’affichage mixte Typo + Symboles, qui aurait pu être un ticket séparé.

Donc oui, il faudrait proposer quelque chose d’actionnable.

• Dire que l’UI n’est pas claire : oui on sait, mais on a beaucoup bossé sur le sujet et c’est ce qu’on a trouvé de mieux pour l’instant.
• Si tu as une idée de ce que tu veux proposer, une image serait très bien, aussi bien pour ici que pour Discord.

[fabi1cazenave]

Au cas où : j’ai proposé un modification sur la PR #382. Si jamais elle va dans le sens de la résolution de ce ticket, merci d’aller commenter sur la PR.