Amélioration des graphiques

Finalement ça irai bien je trouve aussi. Du coup ça donne

  • Pour la version mobile :

1 « J'aime »

Autre version avec en desktop un + qui suit le scroll (sinon je propose de le laisser en plus petit en haut :
choice number columns and dashboard short

Et la version mobile avec du texte pour dissocier les 2 + d’ajout box/colonne :
choice number columns and dashboard mobile

Tout est push.

Pour le coup @pierre-gilles je te confirme que tu peux reviews les 3 PR :

2 « J'aime »

Tu vas trop vite j’ai même pas encore eu le temps de tester ton image de vendredi…

1 « J'aime »

Pour moi ce design du bouton + est le bon, mais le haut du bouton devrait être aligné avec le haut des box d’après moi

1 « J'aime »

Je suis d’accord @guim31, j’avais juste un soucis avec les essais visuels lorsque la 1ère colonne ou la colonne ont déjà des boxes, on se demande un peu ce que c’est sur la droite… non ? ^^ :

Une proposition ? Sinon on peu laisser comme ça ^^ (avec l’alignement sur la box :wink:)

Ou comme sur le design de @pierre-gilles avec juste un ‹ + › en milieu de page mais si j’ai 3 graphique il est déjà loin et il faut le chercher ^^ :
image

J’ai pas de proposition là comme ça mais pas fan du grand bouton

Le bouton en haut qui suit le scroll pourquoi pas, mais du coup il fait un peu « hors contexte » je trouve qu’on ne comprend pas bien que c’est pour ajouter une colonne

J’y réfléchis !

1 « J'aime »

Je suis d’accord ^^ Autant sur mobile c’est clair :


Et juste un bouton en haut à gauche au dessus des colonne ?

J’aime bien ce qu’ils font chez Trello par exemple :

Oui c’est vrai mais ca veut dire garder les 3 colonnes pleines quand il y a 2 colonnes, du coup on perd la place gagnée pour l’edition de la box (qui du coup devenait agreable là pour certains cas de figure)

Bon après ca m’arrange c’est plus simple ^^

EDIT : En recherchant je me dit … il ne doit pas y avoir beaucoup de cas de figure ou on retrouve notre cas de figure precis.
Par exemple sur ‹ Projects › dans github, on retrouve le + sur lequel on partait, et il est clair pour tout le monde je pense. La différence (je ne sais pas si c’est la même sur Trello ?) c’est qu’on ne descend dans la page, mais chaque colonne a une scrollbar (ce que je trouve pas mal au passage, ça permet de garder les en tête en visu ^^)
image

Est-ce que juste le fait de mettre une description au passage souris pourrais suffire @pierre-gilles ?
image

Si je reprend le designe de github par exemple :

Je trouve que le plus intuitif et clair c’est la version de Trello, on voit qu’il y a une colonne à remplir, y’a pas plus simple. Mais c’est vrai que ça utilise un espace pour rien.

Y’aurait-il la possibilité d’un juste milieu : tu crées cette colonne vide, mais elle n’est pas aussi large que les autres ?

1 « J'aime »

Ok ^^ Je trouve dommage dans le temps de « gâcher » cette place (car on va vite apprendre …) et je ne pense pas que l’information soit primordiale en tout temps mise à part pour comprendre au départ (d’où la description au survol souris), voici une nouvelle proposition façon Trello qui pourra être déplacée au niveau des box au besoin (avec ‹ sticky › ou pas - suivi du scroll de la page) :

  • Si 2 colonnes présentes :


ou

  • Si 1 colonne présente :


ou

Version GIF :
add columns design Trello

1 « J'aime »

Meilleur version en mon sens.

1 « J'aime »

Disons que c est deja le cas avec cette version :

Le problème c’est le français… et peut-être l’allemand (je n’ai pas vérifié ^^) « Add column » c’est court, on peut faire une petite colonne. Mais considérant qu’il faut la place pour toute les langues « Ajouter ‹ une › colonne » devient long et tant qu’à faire, autant prendre la version avec la 3eme colonne car on est pas tres loin et en effet ca evite les mouvements visuels qui pour le coup ont peu d’interet dans ce cas pour le peu de place gagner (divisé entre les 2 colonnes).

Disons que c est vraiment le côté 2 colonnes qui est embetant car à 1 colonne finalement on gagne de la place quand meme ^^

Je suis également plus pour cette proposition @Tlse-vins en ajoutant la petite description au passage souris, pour moi c’est le plus interessant point de vue place.

Je suis vraiment pas hyper fan des propositions pour l’instant désolé :smiley:

Je trouve que les alignements ne sont pas bon, et du coup on ne comprend pas ce que fait le bouton « + » à cet endroit.

Pareil, le bouton « suppression » est mal aligné, et trop gros. Je pense pas que ça ait besoin d’être un bouton avec un contour.

Dans ce genre de situation, je pense qu’il faut vraiment aller prendre des inspirations sur d’autres interfaces qui fonctionnent bien et qui ont été travaillées par des meilleurs designers que nous :slight_smile:

Par exemple, chez Github Project c’est pas mal :

Un bouton « + » bien aligné, et pour le bouton suppression, mettre juste une petite icône propre en haut à droite de la colonne (comme ils font avec les 3 petits points, mais en remplaçant par une icône subtil de croix).

Rien n’empêche de revoir l’interface des colonnes et de mieux encadrer les colonnes comme c’est fait sur Github project :slight_smile:

Qu’en penses-tu ?

Ah là je suis totalement d’accord !! Si on passe par là ok, car justement je te parlais de github project plus haut mais les titres des cards sont dans les card du coup, la proposition etait la meme mais avec notre interface (bouton aligné au titre de la colonne).
Pour le reste il faut tout de meme prendre en compte le fait que notre besoin n’est pas le meme que dans des Todo list :

  • nos noms de colonnes ne sont pas modifiable et n’ont pas besoin de l’être, ils sont clairement définis.
  • on a un nombre de colonne limité donc ce bouton n’a plus de raison d’etre une fois au max
  • besoin de la poubelle a proximité parce que c’est clairement la feature qui veut ca.

Mais je suis chaud pour la proposition de modification de l’interface. Donc si on part sur :

  • une card encadrée par colonne,
  • un scroll jusqu’aux cards des colonnes qu’on limite a la hauteur de fenetre
  • puis un scroll dans chaque colonne,
  • si 2 colonne affichées un + a droite pour ajouter une colonne aligne sur le titre des cards colonne (mais pour le coup se sera le meme design qu’actuellement) ?

Si ce n’est pas ce que tu as en tete, fais moi un mock ou on s’appel, comme tu veux ^^

Apres sincerement, ça :

Et ce que je t’ai mis juste au dessus c’est exactement la meme chose. La seule chose qui differe c’est que notre design encadre pas la card avec la colonne …
Apres on peut rajouter les 3 petits point pour supprimer la colonne et coller le nom de colonne sur la gauche et le bouton d’ajout de box au meme endroit, mais ca n’a plus rien a voir avec le + d’ajout de colonne.

1 « J'aime »

Je pensais pas forcément à faire des changements aussi extrême, sachant que si on veut faire comme fait Github, ça reste un design assez custom difficilement faisable avec les éléments présents dans le thème (les cards dans les cards c’est pas beau du tout).

Je pensais plus à essayer d’affiner le design que tu as fais avec des changements subtils.

Là ce qui me choque n’est pas le fonctionnement (oui, ça marche très bien!), mais le rendu visuel qui n’est pas fou :slight_smile:

→ Le bouton « + » pas aligné, c’est pas beau
→ La corbeille qui est un bouton et qui n’est pas alignée, ça fait énorme

Après j’ai pas la réponse à ce qu’il faut faire, le design c’est des itérations c’est en faisant qu’on trouve :slight_smile:

1 « J'aime »

Je comprend

En fait j’ai repris github pour le coup ^^ j’ai aligné le haut de la box, mais en effet, sans la box autour de « Colonne x » ça peut choquer ^^

Là pour le coup, ce sont les goûts et les couleurs (mais j’avoue ne pas être designer du tout même dans la maison ^^). Car ça ne me choquait pas la taille et le bouton de la poubelle. D’accord pour l’alignement de la corbeille avec les mots !

Pour le coup, je te laisse me dire ce que tu veux exactement, quitte à ce que je push et que tu reprennes parce qu’il n’y a que toi qui aura la réponse !

1 « J'aime »

Salut @pierre-gilles,
En attendant une décision sur le design des colonnes, pourrais-tu me review la PR sur les courbes binaires d’abord,
Ainsi que celle sur l’agrandissement en grand écran : Add expand charts dashboard by Terdious · Pull Request #2096 · GladysAssistant/Gladys · GitHub

J’ai du temps ce soir et ce week-end, j’aurais aimé pouvoir travailler sur l’ajout de plusieurs autres PR sur ces fonctionnalités qui n’ont pas le besoin absolu des colonnes. Qui sera un découpage des grosses PR précédentes que j’avais faite et que je viens de fermer ([WIP] - Add view charts + view charts fullscreen on dashboard by Terdious · Pull Request #2092 · GladysAssistant/Gladys · GitHub et [WIP] Add charts-history feature by Terdious · Pull Request #2091 · GladysAssistant/Gladys · GitHub):

  • Une PR pour la sélection de date à date
  • une PR pour l’export csv / xlsx

@Terdious Merci pour les PRs !

J’essaie de faire ça tout de suite (j’ai 25 min devant moi), ça va être très short ^^ Si c’est pas là, j’aurais peut-être un petit créneau après midi

Sinon, mon prochain jour Gladys est lundi et là c’est sur que je peux te les review ! :slight_smile:

1 « J'aime »

Quelques autres tests (que de la proposition chatGPT ^^) Attention je ne dis pas que j’aime bien ^^ Mais sait-on jamais que cela donne des idées ^^







2 « J'aime »