AI & l'interface utilisateur du Routeur F1ATB

[Sgb31]

Bonjour la communauté,
je partage sur ce post, mes travaux de ces deux derniers jours sur la problématique suivante :

Peut-on faire évoluer l’interface utilisateur (UI) du routeur f1atb en sollicitant les AI du moment ?

Pour cela j’ai sollicité ChatGPT (en mode licence pro), Claude ( licence gratuite) et Gemini(licence gratuite).

L’idée étant d’envoyer le zip d’une version complète le V17_07 et de donner comme prompt initial les consignes suivants :
« Voilà le zip de la version v17_07 du  projet esp32 d'un routeur solaire. Peut-tu améliorer le rendu visuel de l’interface utilisateur par l'usage d'un thème coloriel moderne , cohérent et homogène sur toute les pages concernées (texte, champs, bouton, fond d’écran, ..) ? Ce thème doit être responsive, adapté aux smartphones. Seul le code lié à la présentation peut être modifié. Merci de me proposer un .zip utilisable directement. »

Mes conclusions ( voir pièces jointes qui illustrent mes propos) :

ChatGPT s’en sort plutôt pas mal dans sa première version mais son rendu reste assez classique sans proposition intermédiaire de palettes colorielles ou choix d’options. Il propose par contre d’avancer par itération pour affiner le rendu . j’ai poussé jusqu’à une V9 plus évoluée. ChatGPT traite globalement tout le site de manière identique sans oublier grand-chose.

Gemini : OUT ! Il s’arrête rapidement car l’envoi d’un zip avec plus de 10 fichier lui pose clairement problème et bloque directement…

Claude : Démarche différente bien plus orientée dev et code informatique . Claude propose des maquettes bien travaillées pour le choix coloriel. Par contre lors de l’implémentation, il oublie certaines parties ou pages qu’il ne code pas de manière strictement identique, c’est vite énervant. Cela semble lié au code qui parfois peut être complexe et différent suite les pages et CSS/ JS …. A force d’itérations (au moins une bonne dizaine voire +), on obtiens un rendu prometteur tout de même mais attention qu’il ne casse pas ce qu’il a fait dans la version précédente.

Au final, vous trouverez des recopies d’écrans exemple des rendus obtenus, plus ou moins aboutis . Attention aux consignes a envoyer ( prompts). Les Ai se noient parfois lorsque les consignes sont trop nombreuses ou trop détaillées. Claude comprends mieux le langage et le jargon développeur / designer je trouve… avec des drôles de surprises quand même aussi parfois ? !

 Bon, cela peut donner des idées d’évolutions coté UI (ou pas !), merci de vos retours ou expérience sur ce sujet intéressant.  

Attention : lors de mes essais, je n’ai pas contrôlé précisément l’impact sur le code et la préservation de sa robustesse. Il ne s’agit que de maquettes/ réflexions qui n’enlèvent en rien ce formidable routeur et tout le travail d’André que je salue au passage !

[Nutta]

J'ai utilisé ton avant-dernière image et demandé à une IA de la retoucher, pour voir - ça ne sert strictement à rien, je sais, mais voici quand-même le résultat :

   

[Sgb31]

Effectivement nutta, ca a déjà plus de gueule, je trouve ;-)
j'ai pas voulu itérer sans arrêt , le process est assez chronophage ...

[grostoto]

Salut
plus facilement, je pense qu'on pourrait mettre l'affichages des graphiques en options.

[Jacques13]

A mon avis, le coté moins violent des couleurs donne à certains tableaux une meilleure lecture. J'aime particulièrement la première image action qui est bien plus sobre que l'actuelle.
Une chose est très remarquable dans tous les tableaux, aucun n'utilise la fonte "time new roman" mais une fonte plus lisible comme "Arial" qui d'ailleurs est souvent utilisée dans les bases de données
Le rouge utilisé pour la puissance Pw et Max dans le premier tableau est trop "puissant", il attire l'attention sans véritable raison, chaque chiffre a son intérêt propre suivant le contexte de lecture sans véritable hiérarchie.

[F1ATB]

A mon avis, le coté moins violent des couleurs donne à certains tableaux une meilleure lecture. J'aime particulièrement la première image action qui est bien plus sobre que l'actuelle.
Une chose est très remarquable dans tous les tableaux, aucun n'utilise la fonte "time new roman" mais une fonte plus lisible comme "Arial" qui d'ailleurs est souvent utilisée dans les bases de données
Le rouge utilisé pour la puissance Pw et Max dans le premier tableau est trop "puissant", il attire l'attention sans véritable raison, chaque chiffre a son intérêt propre suivant le contexte de lecture sans véritable hiérarchie.

N'oubliez pas que vous pouvez changer les couleurs sur le routeur et afficher ou non les graphes.

Il y a une chose certaine, c'est qu'on aura jamais l'unanimité sur le GUI. C'est un sujet sans fin.

André

[Sgb31]

C'est vrai André , sujet complexe avec de nombreux avis, j'en était conscient lors de mon test et partage mais cela mérite de poser le sujet car globalement une modernisation de l'interface peut être souhaitable.
Au dela des couleurs dispo, ya des règles d'UI (thèmes coloriels, charte graphique, Flat Design, type de police baton plutôt que variables , usage ou non de pistogrammes de material design ...) qui normalement devrait ravir le plus grand nombre. En général , dans les applis de nos jours on propose des thèmes ou palettes coloriels qui imposent une série bien listée de couleurs qui vont ensemble et en interdit volontairement d'autres afin de respecter certaines règles d'UI.

Comme indiqué et je le redis, je ne parle pas de couleurs mais de thème coloriel, de charte graphique, c'est un domaine qui ne s'improvise pas et c'est dans ce sens que j'ai posé les prompts aux IA concernés.

Les IA sollicitées permettent de gagner sur ce sujet un temps fou qu'il serait trop couteux de reprendre point par point si d'aventure ce coup de peinture devait être fait.

[michy]

Il y a une chose certaine, c'est qu'on aura jamais l'unanimité sur le GUI. C'est un sujet sans fin.

Bonjour,

  c'est open-source, celui qui veut faire à façon, fait son code, sans l'imposer aux autres ...

[Sgb31]

Ca n'a rien à voir avec Open source Michy,
ya des tas d'exemples open sources comme Home Assistant, OpenOffice, freeOffice par exemple qui proposent des thèmes jour, nuit ou divers.
On s'amuse pas forcément à coder des styles coloriels comme cela non plus.

Je dis juste que mettre en place des thèmes coloriels, disposer d'une interface UI plus aboutie en terme de police, rendu, couleurs ... au goût du jour ne couterait pas grand chose accompagné par une IA par exemple.

J'ouvre juste une réflexion, j'ai voulu tester de mon coté, voilà tout

Après le job d'une IA, est ce toujours aussi maintenable ?? Ca c'est une autre question aussi !

---

A mon avis, le coté moins violent des couleurs donne à certains tableaux une meilleure lecture. J'aime particulièrement la première image action qui est bien plus sobre que l'actuelle.
Une chose est très remarquable dans tous les tableaux, aucun n'utilise la fonte "time new roman" mais une fonte plus lisible comme "Arial" qui d'ailleurs est souvent utilisée dans les bases de données
Le rouge utilisé pour la puissance Pw et Max dans le premier tableau est trop "puissant", il attire l'attention sans véritable raison, chaque chiffre a son intérêt propre suivant le contexte de lecture sans véritable hiérarchie.

Jacques , 
Mon souhait n'est pas de rentrer dans le débat, cette couleur est mieux trop criarde , moins bien ....   car cela effectivement rejoint la réflexion d'André ...

L'idée était de voir la faisabilité de reconsidérer l'ensemble de l'interface en terme de style, police , palette colorielle et ajout de quelques attributs  et de mesurer rapidement quelques rendus tout à fait discutables , je l'avoue.  au passage, d'accord avec toi pour ce qui est de la police Times new roman...