Nouvelle tête pour les messages

Coucou,

Vous l’avez peut-être vu sur le sujet « Les petits pixels », peut-être pas. Suite à des tentatives de motet-a, j’ai fait une maquette pour revoir l’aspect des messages.

Disclaimer: c’est un POC fait un soir, j’ai pas eu le temps de trop y retoucher depuis, je vais peut-être pas avoir le temps d’y toucher cette semaine.¹

Il y a plusieurs points à voir :

• le menu. Le fonctionnement avec un bouton en évidence (« Modifier » quand c’est son propre message, « Citer » sinon) a l’air d’être un bon compromis au vue des points sur ce message (après la première séparation horizontale)
• le style du menu, qui est perçu comme un peu lourd par certains. J’ai fait un test sans les bordures, certains ont l’air d’apprécier, mais faudrait régler quelques marges.
• la tête des casquettes. C’est peut-être trop en avant pour une casquette « standard » (genre je suis qu’un « Allumeur de lampadaire » basique, focalisez pas trop la dessus dans mon message), mais faut que ça reste visible pour les messages de modérations. Y’a plusieurs tentatives de styles de casquettes à voir ici.
• du coup faut voir si on veut deux styles de casquettes, messages de modération ou pas. Si oui, quels styles
• qu’est-ce qu’on fait du bouton « Cette réponse m’a aidé ». On m’a proposé un bouton « Réponse Utile » dans le dropdown
• pas encore fait le design mobile. À voir absolument.
• le « modifié » est beaucoup moins visible qu’avant, c’est gênant ? Surtout, il est plus en fin de message (ce qui peut avoir son importance sur les longs messages)
• pareil pour le permalien. Actuellement c’est sur la date, mais c’est relativement évident que la date est cliquable. La peut-être un peu moins. Un item « Permalien » dans le menu ? Et peut-être mettre le message en surbrillance quand il est ciblé par un permalien.
• manque plein de designs, genre message masqué, message de la page précédente, message « sélectionné » (le « cette réponse m’a aidé »), … Après, on peut laisser "comme maintenant", et revenir dessus plus tard.

J’ai pas la force de plus développer ce soir², mais il fallait faire un topic séparé assez rapidement pour reprendre la discussion correctement

Quand je suis sur mobile, j’aime bien que le bouton "montrer" soit ici "…", soit encore visible pour masquer le menu. Souvent quand on clique autre part ça ne fonctionne pas ou on prend le risque d’appuyer sur un élément qui va nous faire quitter la page.

Pour l’affichage mobile, on reste sans avatar ? On garde les votes sous le pseudo ?

Personnellement le menu à coté je trouve ça sympa pour rassembler par exemple les options que l’on utilise presque jamais. Bonne idée.

Passer aussi le label "auteur du sujet" sur la même ligne que l’auteur, je trouve pas pas mal aussi.

Par contre je tique un peu sur l’emplacement de la casquette (sur la même ligne que le reste) et sur la forme de la casquette (bord arrondi qui tranche un peu avec le design de manière général).

Je n’ai peut-être pas tout suivi, mais j’aimai bien l’idée qui avait émergée dans ce topic avec des casquettes qui "chapeautent" le message. J’ai cru comprendre qu’il y a une raison technique qui fait que ce n’est pas possible, mais en bidouillant un peu le css j’arrive à quelque chose qui me semble plutôt acceptable.

Notez aussi que de mon point de vue il faudrait deux catégories de casquettes, les casquettes du staff et les autres. La différence visuelle devrait se faire au niveau de la couleur de la casquette et ça permet de repérer rapidement dans un sujet un peu chaud les messages d’avertissement de l’équipe.

la tête des casquettes. C’est peut-être trop en avant pour une casquette « standard » (genre je suis qu’un « Allumeur de lampadaire » basique, focalisez pas trop la dessus dans mon message), mais faut que ça reste visible pour les messages de modérations. Y’a plusieurs tentatives de styles de casquettes à voir ici.

My 2 zestes: Quand on poste avec une casquette, c’est qu’on veut que la casquette rajoute du sens au message (staff, porteur de projet…). Du coup elle doit être visible. Perso je trouve que la version bleu s’intègre nickel à la charte graphique du site et est suffisamment "impactant" pour se voir sur un message (ca romps le fil de lecture) sans pour autant altérer l’ensemble.

Il ne faut pas oublier que les casquettes ne seront pas la norme, on n’en verra pas sur tout les messages sans arrêt, du coup elle devrait se détacher naturellement.

J’aime bien l’idée de la couleur, dans ma vision les casquettes devaient en plus d’avoir un badge, un fond différent comme les réponses ayant aidées l’auteur comme l’a proposé gcodeur.

(Le badge a côté de auteur du sujet ça fait un peu moche, à voir s’il y a un meilleur rendu).

et sur la forme de la casquette (bord arrondi qui tranche un peu avec le design de manière général).

Oui, +1. Des bords carrés iraient mieux.

Je n’ai peut-être pas tout suivi, mais j’aimai bien l’idée qui avait émergée dans ce topic avec des casquettes qui "chapeautent" le message. J’ai cru comprendre qu’il y a une raison technique qui fait que ce n’est pas possible, mais en bidouillant un peu le css j’arrive à quelque chose qui me semble plutôt acceptable.

Je suis plutôt contre, d’abord parce que je trouve ça un peu moins joli que de les mettre dans le message, mais aussi pour une raison technique :

Je pense que ces casquettes seront rares, nettement plus rares les badges “STAFF” actuels. Je ne pense pas que ce soit la peine de faire quelque chose de trop compliqué à implémenter — le CSS actuel des messages est vraiment trop complexe. Faire dépasser quelque chose d’un message, de première vue c’est simple (position: absolute; et hop) mais ça pose toujours d’autres problèmes comme au niveau de l’ombre du message, ou au niveau des marges entre les messages (il faut mettre plus d’espace pour ce qui dépasse). On pourrait peut-être faire une implémentation plus rusée sans position: absolute;, mais pas sûr que ce soit plus simple.

J’aime bien l’idée de la couleur, dans ma vision les casquettes devaient en plus d’avoir un badge, un fond différent comme les réponses ayant aidées l’auteur comme l’a proposé gcodeur.

Je suis aussi plutôt contre, trop de couleur tue la couleur.

C’est ça que j’ai du mal à comprendre. Sur mon bidouillage css j’ai juste réutilisé le bloc html utilisé aujourd’hui pour "Auteur de sujet". Je ne sais pas a quel point cette partie du code n’est pas élégante, mais ça me donne plutôt l’impression que c’est techniquement faisable.

Avec le screen sur le post de Sandhose, on dirait que la casquette est juste une simple métadonnée du message comme une autre (date, auteur, etc.) alors que de mon point de vue elle apporte quelque chose au message. Ceci dit, c’est certainement quelque chose de subjectif et je conçois que tout le monde ne voit pas ça de la même façon.

Pourquoi pas, on peut y aller juste avec du bleu alors.

C’est ça que j’ai du mal à comprendre. Sur mon bidouillage css j’ai juste réutilisé le bloc html utilisé aujourd’hui pour "Auteur de sujet". Je ne sais pas a quel point cette partie du code n’est pas élégante, mais ça me donne plutôt l’impression que c’est techniquement faisable.

Ah mais réutiliser le bloc HTML, c’est très bien et c’est la bonne chose à faire. Et c’est tout à fait techniquement faisable.

Le problème, c’est vraiment le CSS et la maintenance à long terme. L’implémentation est vraiment grosse, avec 684 lignes contenant 9 position: absolute; et 7 !important. Je pense que ça ne serait pas du luxe de simplifier ça

Ah ouais … bon bah faites au mieux.

Eh bé, ça fait plaisir tout ça.¹

Je trouve la proposition de firm1 intéressante visuellement et conceptuellement². En plus des problèmes techniques qui ont été mis en avant par motet-a (d’ailleurs, sur mon document Sketch, c’est vraiment galère de le faire proprement rapidement. Comme quoi.), je trouve la casquette sur la ligne des « métadonnées » mieux intégrée dans le message. Comme l’a dit Eskimon, ça contraste suffisamment avec le reste pour être vu, sans pour autant faire tâche. Le fait de le mettre au dessus nous fera probablement rajouter des marges entre les messages, et les messages ne seront plus carrés.

Pour la couleur du message, je suis assez d’accord avec motet-a. Pour le moment on a 4 « couleurs » de messages possibles:

• message normal
• « Cette réponse m’a aidé »
• message de la page précédente
• message « atténué » quand le menu est ouvert (si vous l’aviez pas encore remarqué )

Le vert clair passe bien comme couleur de fond, pareil pour le gris et blanc. Trouver quelque chose d’autre qui passe bien pour la lecture, soit pas trop en décalage avec le reste de la palette du site, et qui se démarque bien des autres fonds, c’est CHÔ.

Les bords carrés des casquettes donnerait ça.

Perso, je préfère les angles ronds (c’est un peu moins lourd, je trouve), mais je suis pas contre des rectangles.

Assez d’accord sur le fait de garder qu’une couleur, finalement. En vrai j’ai surtout énoncé ça pour exposer tous les potentiels points à voir. Et le bleu a l’air d’être plutôt bien accepté.

C’est peut-être pas explicite sur mes maquettes, mais la casquette grise sur le message avec le menu ouvert, c’est tout le message qui passe en nuances de gris. Ça a l’air de plaire, vu que j’ai pas encore eu de critique la dessus.

Si je m’endors pas sur mon clavier ce soir, je vais tenter de faire la maquette mobile. J’aimerais bien tenter d’intégrer les avatars sur mobile, je vais voir.

Je vais voir aussi comment ça va se passer pour le dropdown, si on ajoute un bouton retour pour le fermer, tout ça. Peut-être voir pour utiliser l’API d’historique pour fermer le dropdown quand on fait "back" (sur Android surtout) puisque c’est souvent ce que font les applis natives. Je crois.

EDIT: et ce soir, je serai sur IRC (#zds-dev @ freenode) si vous voulez discuter avec moi des maquettes en live pendant que je fais les maquettes mobiles. Les premiers jets sont toujours envoyés la-bas, avant d’avoir une version propre ici

<hs> @Sandhose Tiens le retour de ta première note de bas de page est cassé et renvoie à ton premier message. </hs>

Le problème a été rapporté ici.

C’est beau

N’oubliez pas de tester avec le format de date long type Mercredi 06 septembre 2017 à 20h25

+1 pour les bords carrés

+1 pour les bordures sur les boutons à droite

Je préfère la position proposée par Sandhose à celle de firm1, je trouve que ça s’intègre mieux, que ça ne casse pas les marges, là où le "Auteur du sujet" actuel est discret et gris, la proposition de firm1 est très impactante, voire trop en fait.

Attention à ce que le bouton fasse minimum 44px x 44px sur mobile, accessibilité, tout ça tout ça

Faut aussi regarder ce que ça donne sur un message de une ligne, y a des chances que ça parte par dessus le message d’en dessous (faut notamment vérifier ça à l’inté en fait, pas avoir de problème de superposition dans le mauvais sens).

Des bisous et bon courage !

Je ne pense pas que « Cette réponse m’a aidé » puisse être remplacé par « Réponse utile ». « Ce message est utile » existe déjà, c’est le bouton +1.

Qu’apporte « Cette réponse m’a aidé » par rapport au +1 ? La mise en valeur du message, par laquelle l’auteur du sujet reconnaît la pertinence de la réponse.

Je pense que c’est à ça qu’il faut réfléchir pour trouver un nouveau nom, peut-être quelque chose comme « Valoriser ».

"Cette réponse m’a aidé" est uniquement disponible pour le PO. Dans un contexte de forums d’entraides où des gens viennent notamment depuis des moteurs de recherche sur des questions qu’ils se posent eux aussi, je trouve que "Réponse utile" a plein de sens.

Le +1 reste à disposition des lecteurs connectés, bien sûr.

(J’insiste pas énormément, je trouve "Réponse utile" mieux que "Cette réponse m’a aidé" mais je me battrai pas pour changer ça !)

Ce sujet est sans activité depuis plus de 90 jours. Êtes-vous certain de vouloir y contribuer ?

Yup.

J’aimerais reprendre ça ; du moins le je le considère. La discussion était intéressante mais rien n’a changé depuis. Est-ce que vous considérez que la proposition est toujours bonne ?

Rassembler toutes les options dans un menu, notamment, permettrait d’alléger notablement l’interface des messages. Notamment pour l’équipe qui a encore plus de boutons partout.

Ce serait aussi l’occasion de nettoyer le CSS des messages, comme sus-mentionné…

Si tu travailles sur le CSS des messages, est-ce que tu penses jeter un œil sur cette PR laissée au milieu du gué ?

Bien vu ! Ça ne me semble pas trop compliqué, il suffit de travailler sur :focus en soit. La solution que tu y proposais il y a quelques mois semble faire l’unanimité des votants, donc je pourrais partir vers cet esprit, mais si quelqu’un est en désaccord, qu’iel n’hésite pas à le dire .

Pour info, je parle de cette version :