IHM cleanup

[ylastapis]

• [x] Itération @ylastapis et @dbrugne
  • [x] Dépersonaliser la topbar (plus de couleur de fond variable) et revoir l'agencement de liens et blocks
  • [x] Revoir les avatar par défaut des rooms, groupes et users.
  • [x] ménage dans cards.html
  • [x] ménage et renommage de chat-room-cards.less
• [x] supprimer l'image border dorée si on s'en sert pas
• [x] Review cards display with advises of mathieu #771
• [x] Roomcard: hover sur "public" #845

[hageged]

Un peu d'inspiration...

Réalisé par Mathieu

donutme test interface2.pdf donutmeinterface4.pdf

Et moi:

[ylastapis]

[hageged]

c'est mieux

• bande colorée trop épaisse, voire inutile
• le fond sort en gris clair sur mon écran, je sais pas si c'est le cas mais c'est terne. Il faudrait du blanc
• bouton rejoindre trop large. (mettre le R en minuscule?)
• J'essayerais bien de mettre le poster à gauche et par dessus l'avatar en mode Twitter (excepté que notre poster est vertical, mais le même genre de superposition ; et juste une fine bande, pas la même proportion que dans la room). Un peu dans ce genre (voire une bande encore plus fine):
• Je pense que les donuts de groupe doivent s'écrire sur deux lignes pour plus de lisibilité. (avec #group en plus petit que /donut)

[hageged]

@dbrugne @ylastapis

[ylastapis]

[ylastapis]

Y'a un bouton compact, mais bon, a terme ça sera plus dans le responsive je pense

Compact mode :

[hageged]

@ylastapis

• J'imagine que le "voir tous" ouvre le drawer Users --> merci de confirmer --> @hageged oui tout a fait
• Les deux boutons sont trop visibles pour des fonctionnalités subalternes. --> je propose de mettre 554 utilisateurs centré sur sa ligne et sur la ligne du dessous "voir tous" et "compact mode" en simple hyperlien blanc également
• Je pensais pas que tu supprimerais les noms des users dans le mode standard. Je me demande ce que ça donne dans un donut avec 4 personnes.
• tu arrives à placer l'info owner/moderator? C'est essentiel comme info
• Comment on ouvre le menu d'options ? Je ne pense pas que ce soit satisfaisant d'ajouter les options de modération sur le drawer de user profil. C'est apporter une confusion ergonomique entre ce qui est du ressort général (le profil) et ce qui est propre à la room (les actions de modération).
• Comment afficher l'info en ligne web/mobile ? Sur FB c'est clair. Sur Whatsapp ils ne se basent que sur le mobile ("vu à 12h47"). C'est des infos utiles pour un mode standard.

Bref je suis sceptique sur le fait que le mode standard soit si compacte. Rien ne l'impose et on a plein d'infos qui dégagent alors qu'elles seraient utiles. Celui qui ne les veut pas peut passer en mode compacte.

[ylastapis]

[ylastapis]

dans l'exemple ci-dessus, le op est enrourré en vert (comme avant sans l'icone), le muted est entouré en rouge, le owner en jaune.

Je suis d'accord ce n'est pas encore satisfaisant, c'est une piste. Sur gitter, y'a une popin dans laquelle il y a toutes les infos que tu veux, et c'est bien plus propre

[ylastapis]

[dbrugne]

@hageged , @ylastapis : de plus en plus la couleur et le poster sont très peu exploité (et c'est mieux). Doit on quand même garder les deux ?

A ce sujet, il faut savoir que la colonne de droite va être exploiter (un peu comme sur slack ou gitter) pour faire remonter des informations importantes (pins, mentions de moi, documents partagé dans le donut, ... il y a plein de pistes possibles et la colonne de droite est vraiment intéressante pour cela).

Que va t'il advenir du poster quand cette colonne de droite affichera ce type d'info ? Des avatar sur un fond bariolé OK, mais surement pas des éléments textes avec de la mise en forme. On est ni MySpace ni Skyblog.

[hageged]

@ylastapis Désolé de faire mon rabat-joie mais je maintiens qu'on n'a pas de raison pour l'instant que compacter autant un mode standard. On perd de l'info utile pour gagner une place dont on n'a pas besoin. Les choses évolueront peut-être mais à ce stade je pense que c'est dégrader. Si tu veux partir de ce qu'on a actuellement sur DONUT pour réduire les avatars et donc l'interlignage, et ajouter le mode comptact OK. Concernant le marquage visuel des rôles (modérateur...) je trouve que ce qu'on a est kitch, et ce que tu proposes trop ambigü (quand je vois un avatar entouré de vert, je pense hover, je pense sélection, je pense online, mais je ne pense pas modérateur). Il faut qu'on se creuse pour trouver autre chose.

@dbrugne le poster est utile pour le profil externe (aka page d'accueil personnalisée). Le poster est joli et immersif. Je suis pour le garder. Tu as raison de dire que l'usage de cette colonne ne permettra pas toujours de conserver en transparence le poster. On verra le moment venu. Je pense qu'on pourra avoir, selon l'onglet qu'on affiche (utilisateurs, pins,...) un fond translucide ou non. La couleur est secondaire à mon sens, elle apporte à l'immersion pour certains. Je ne suis pas prêt à la démanteler pour l'instant. En revanche on peut, au lieu de proposer la roulette russe avec chaque nouveau user/donut une nouvelle couleur, de mettre toujours la même couleur neutre par défaut. Et celui qui veut assortir la couleur à son poster le peut toujours. Les conséquences seront:

• les cards risquent d'être uniformes
• les avatars aussi. Je vous proposerai bientôt d'autres avatars par défaut donc peut d'impact.

[ylastapis]

[hageged]

@dbrugne @ylastapis Je supprimerais le cerclage blanc des users sans role. Ca allourdit sans raison.

Je renouvelle mon opposition à un mode standard aussi compact pour les raisons exprimées plus haut.

Par ailleurs, je pense que l'usage de la colonne users va énormément évoluer quand:

• on aura lancé en école: on pourra voir combien de users il y a généralement dans les rooms quand ça marche
• on aura le mobile : les users ne seront probablement pas hors-ligne mais "vu il y a x minutes" Donc je pense que cette réflexion devra avoir lieu d'ici deux mois. La faire maintenant est une perte de temps.

[hageged]

Suggestion qui me semble davantage ergonomique:

• Colonne de gauche:
  • Icones des principales fonctionnalités sur la même ligne que la barre de recherche (en effet rien de sert d'avoir une barre qui fait toute la largeur puisqu'elle ouvre une large box de saisie quand on rentre dedans). Tant qu'à avoir une large colonne autant profiter de la largeur. D'autre part, vu le nombre de notifications, avec le système actuel on aurait sans cesse la ligne de notif qui s'afficherait. Ici on gagne une ligne.
  • Lignes de démarcation
  • Notre logo en bas. C'est essentiel de l'afficher.
• Dans l'entête du chat:
  • cartouche "privé" déplacé. Avant ça donnait l'impression que le dropdown d'options était un sélecteur pour passer de "privé" à "public"
  • J'ai retiré le cerclage gris autour de l'avatar. Il alourdit sans raison. Je pense qu'il faut faire de même sur les cards

Petite remarque: j'ai l'impression que les fonticons sont grasses (maison, notif... y compris la flêche de dropdown et les croix de close). Je pense que moins grasses elles seraient plus en phase avec notre nouvelle identité.

[dbrugne]

Le RAF dans l'ordre :

• [x] Faire fonctionner la popin des actions utilisateur dans la liste des utilisateurs de la room (dropdown overflow scroll...)
• [x] drawer des notifications
• [x] mute
• [x] transitions bizarres sur les tooltIps & popins
• [x] Dans l'entête du chat cartouche "privé" déplacé. Avant ça donnait l'impression que le dropdown d'options était un sélecteur pour passer de "privé" à "public" (David)
• [ ] Confirmer que les icônes n'ont pas de gras (David) --> nope elles sont juste en 18px, c'est tout ;)
• [x] Mettre le logo onecolor en bas de la colonne de gauche (David)
• [x] Sortir des éléments du dropdown current user pour mettre les icônes directement à gauche de la search box qui devient élastique (David)
• [ ] Rafraichissement page de groupe

[hageged]

Concernant les room cards, je propose:

• [x] format portrait : actuellement c'est légèrment paysage, les passer en légèrement portrait apporterait de la cohérence (le site est vertical, la composition de la card est verticale avec un empilement d'éléments centrés...) --> @hageged je suis obligé de garder 300px de large pour faire rentrer tout notre texte (car on le garde sur une seule ligne groupe + name...), de fait j'ai passé la hauteur à 310)
• [x] Suppression de la bande de couleur: à cause d'elle on garde l'effet bonbon. De plus elle est confusing parce qu'elle donne l'impression d'un rubricage éditorial alors que c'est que de la déco
• [x] Supprimer le border de l'avatar qui est inesthétique. Le contraste net image/fond blanc est bien plus moderne.
• [x] Afficher la description en pas italique pour plus de lisibilité
• [x] Reprendre le cartouche "public" "privé" tel qu'il est dans les rooms
• [x] De manière optionnelle, si vous trouvez la card trop sobre, ajouter une bandelette du poster pour l'ambiance. --> @hageged j'ai fait un essai avec la bande de couleur de 3px sur la gauche (une image de 10px sur la gauche donne rien). On garde la couleur comme ça ou on met rien.

A gauche avec bandelette, à droite sans.

[ylastapis]

[ylastapis]

sans c'est bien en fait :)

[ylastapis]

je clos cette tache, on en ouvrira une autre pour la suite... fiou