Ce sujet sert à suivre les retours concernant le style de connexion / création de compte en plein écran disponible sur meta via : Discourse Design team experimentation topic
7 « J'aime »
Sera préchargé ?
J’adore ça. Les modales de petite taille sont dépassés sur les applications courantes des utilisateurs d’Internet depuis un certain temps.
6 « J'aime »
Ça fait vraiment du bien ! Très bien. 
Quelques retours :
- Bureau – la largeur des boutons sociaux sur les grands écrans est peut-être trop grande et imposante. Cependant, si vous les réduisez, cela pourrait nécessiter plus d’efforts pour harmoniser l’aspect visuel entre les panneaux de gauche/droite.
- Bureau – La couleur de l’icône de fermeture pourrait nécessiter plus de contraste pour l’accessibilité.
Captures d'écran
- Mobile – Très pointilleux
. Il semble que l’interlignage soit peut-être un peu trop élevé
- Mobile – Je ne suis pas sûr de celui-ci. Cela dépend du contraste de l’écran. La couleur de la bordure des boutons sociaux semble à peine visible (la première chose que j’ai remarquée sur mon mobile, mais elle semble correcte sur mon deuxième écran). Je comprends si c’est trop ; ce serait sûrement écrasant. Utiliser
primary-300pourrait peut-être aider un peu.
6 « J'aime »
Merci pour ce retour détaillé !
2 « J'aime »
Pour l’instant, il est installé ici sur meta pendant que nous expérimentons et recueillons des commentaires. Si les choses sont bien accueillies, nous en ferons éventuellement le défaut dans le produit principal.
4 « J'aime »
Je pense qu’il y a beaucoup d’espace blanc en haut. Pourquoi dois-je faire défiler pour faire apparaître le bouton de connexion ? Comme vous pouvez le voir à la fin, tout le texte s’affiche parfaitement à l’écran.
2 « J'aime »
Sur Safari sur iOS, le texte « Bienvenue » est coupé.
Balayer vers le haut ou vers le bas ne résout pas le problème non plus. Notez également que le « x » de la modale est au-dessus de l’emoji.
Je me demande si la meilleure option ici est d’avoir une limite de largeur maximale pour le traitement pleine page de la modale. Au-delà d’une certaine largeur, il n’est probablement pas judicieux d’utiliser toujours tout le viewport.
2 « J'aime »
Vous savez, je pense que cela peut être dû au fait que je m’en tiens à la disposition gauche|droite que nous avions dans la modale lorsque les options de connexion d’authentification étaient présentes.
J’explorerai la possibilité de placer les options de connexion alternatives sous la zone de connexion principale.
2 « J'aime »
J’ai fait quelques ajustements en tenant compte de la plupart de ces commentaires, jetez un œil et dites-moi ce que vous en pensez
@pmusaraj, jetez également un œil, j’ai abandonné la mise en page à 2 colonnes et je suis passé à une seule vue au centre d’un écran complet, similaire à Google et à de nombreuses autres pages de connexion de sites.
3 « J'aime »
C’est une idée intéressante, mais pour être honnête, je ne suis pas entièrement convaincu. Il y a peut-être une mémoire musculaire de ma part, car je me suis habitué à la séparation blanc/bleu (ou noir/bleu pour les thèmes sombres) dans ces écrans, mais pour moi, cela fait aussi partie de l’identité de Discourse. Cela semble être un grand pas de le supprimer.
Laissez-moi poster quelques captures d’écran côte à côte, cela aide à mettre les choses en contexte (ce sont des instances différentes, mais c’est juste pour donner une idée du changement).
De plus, dans la fenêtre modale d’inscription, le CTA « Créez votre compte » est caché derrière un défilement, vous ne le voyez pas immédiatement.
Aussi, autre chose à considérer, dans tous les écrans de connexion plein écran, le logo du site est manquant. Les utilisateurs savent généralement où ils se trouvent, mais le logo est une validation supplémentaire importante que vous entrez effectivement des données sensibles (un e-mail, un mot de passe) sur le bon site. Dans les anciens écrans, il est là, en quelque sorte, grâce au cadre modal.
8 « J'aime »
Voici quelques commentaires !
Ça a l’air bien. Je pense que cela manque un peu d’identité visuelle, cependant. 
. (EDIT : Je ressens exactement la même chose que Penar concernant l’identité)
Mobile
Ça a l’air bien en mode portrait.
Quelques problèmes en mode paysage :
- L’en-tête est coupé. Vous ne pouvez pas faire défiler vers le haut, mais vous pouvez faire défiler vers le bas.
Capture d'écran
Cela se produit aussi en mode portrait.
Le clavier pousse le contenu vers le haut sur la page de connexion. Cela ne se produit pas sur la page d’inscription.
Concernant le mode paysage. La plupart des gens ne l’utiliseront pas, mais cela peut arriver, et ce n’est pas une bonne expérience utilisateur. Je pense que vous pouvez ajuster quelques CSS pour que les blocs flottent autour du message de bienvenue. Pas idéal, mais ça va :
Cependant, le plus attrayant visuellement pour moi est de diviser les identifiants et les boutons sociaux en deux :
- Pas directement lié. Sur mobile, la première saisie est focalisée, et cela ouvre directement le clavier. (Je ne sais pas si c’est le même comportement partout)
Je pense que cela dégrade l’expérience utilisateur pour deux raisons :
- vous ne voyez pas la page entière au début, et ce n’est pas accueillant.
- vous ne voyez pas toutes les options de connexion. (surtout pour les utilisateurs qui utilisent la connexion sociale – vous devez fermer le clavier à chaque fois)
Bureau
Ça a l’air bien dans l’ensemble, avec quelques problèmes.
- Ça a l’air bien sur une taille d’écran moyenne :
- Sur grand écran, je ne suis pas sûr. Ça a l’air bien ; cependant, avoir tous les boutons sociaux sur une seule ligne semble pratique, mais cela semble inhabituel (petit contenu centré, avec en dessous un grand contenu). Ce n’est pas faux, et ça a l’air correct – c’est peut-être une habitude de l’ancien style car votre attention est concentrée sur un endroit centré.
Ce que vous faisiez avant était en fait assez élégant, et comme le suggérait Penar, une largeur maximale suffirait pour que cela ait l’air bien. Je ne serais pas contre voir deux colonnes sur un grand écran, puis cela s’enroule automatiquement en dessous sous une certaine limite.
- Sur le côté réactif – sous une certaine hauteur minimale, vous obtenez une barre de défilement sur le panneau de gauche. Je ne peux pas tester sur un appareil réel si cela se produit aussi. Je pense qu’il serait plus naturel pour l’utilisateur de faire défiler la page plutôt que le composant interne.
Commun
- La barre de défilement du forum est visible lorsque la fenêtre modale de connexion est ouverte, et vous pouvez jouer avec. Cela pourrait amener l’utilisateur à penser qu’il y a quelque chose alors qu’il n’y a rien. Cela peut être déroutant si la barre de défilement de la fenêtre modale apparaît également en même temps.
Exemple
4 « J'aime »
Une autre série de peaufinages et d’ajustements a été ajoutée aujourd’hui
4 « J'aime »
Ancien :
Nouveau :
L’inscription via un compte social semble extrêmement limitée sur un écran étroit maintenant. Je suis d’accord que cela semble visuellement mieux, mais ces actions ne sont plus mises en évidence.
Barre latérale… lors de l’inscription, nous voulons probablement changer le texte en « s’inscrire avec Google ». De plus, il est déroutant que certains soient « se connecter » et d’autres « entrer ».
4 « J'aime »
cela irait également à l’encontre de leurs directives pour les connexions sociales, nous avons eu quelques sites informés de boutons Facebook non conformes par le passé (les exigences de connexion sociale pourraient également expliquer pourquoi certains disent « se connecter » par opposition à « s’inscrire », bien que je ne sois pas sûr à 100 % de cela)
4 « J'aime »
On dirait encore des icônes de partage/suivi dans le pied de page. Pas du tout bien et je suis totalement sûr que la plupart des utilisateurs ne réalisent pas que ce sont en fait des icônes de connexion.
1 « J'aime »
C’est parti.
Mobile
- En mode portrait, ça rend bien !
Améliorations possibles :-
Les boutons sociaux paraissent assez petits sur mon téléphone (Android, FDH+, 2220x1080). Pour comparer, la largeur de mon doigt est d’environ 1,5 cm, et la largeur du bouton est de 0,5 cm sur l’écran de mon téléphone. Cela pourrait être un problème d’accessibilité. J’essaierais de les agrandir un peu (ainsi que l’espacement).
-
Lorsque le clavier est visible, il remonte la modale. Je pense que c’est lié à cette modification récente ici FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – Cependant, je ne pense pas que cela devrait s’appliquer à la modale de connexion plein écran. Un décalage de mise en page n’est pas idéal.
-
En mode paysage, je suppose qu’il n’a pas été touché. Un peu d’attention serait nécessaire dans ce domaine.
-
Desktop
Dans l’ensemble, ça rend bien !
Je serais tout à fait favorable à cette conception. Merci de l’avoir ramenée !
Grand écran
J’ai deux préoccupations à ce sujet :
- Ces deux panneaux sont encore un peu trop éloignés
- Les boutons sociaux sont un peu trop grands.
Concernant le point 2 – Vous pourriez introduire plus de points de rupture
@media screen and (min-width: 1536px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 70%;
}
}
@media screen and (min-width: 1920px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 60%;
}
}
@media screen and (min-width: 2560px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 50%;
}
}
En résolution 2K, cela ressemble à ceci :
Concernant le point 1 – Je ne suis pas sûr. Voici une alternative possible. L’avantage est que la vue de l’utilisateur est toujours centrée tout en conservant l’identité visuelle. La largeur du panneau bleu pourrait être ajustée. Ce n’est pas exactement la même impression, mais c’est très proche.
Note : Avec la largeur des boutons réduite, je suis plutôt satisfait de la conception actuelle. Je partage cette suggestion au cas où vous auriez une inspiration pour cela. J’aime bien.
Quelques CSS que j’ai remarqués :
- Le panneau de gauche a un
padding-topde3rem– cela ne semble pas utile, et cela empêche le panneau d’être centré par rapport au panneau de droite.
.login-left-side {
padding: 0 3rem 0 3rem
}
- Le formulaire d’inscription n’est pas centré verticalement. Il utilise ce CSS. Y a-t-il une raison ?
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
Centré, ça me semble bien.
- Le contraste de couleur du bouton de fermeture pourrait devoir être ajusté pour des raisons d’accessibilité. J’utiliserais plutôt
--primary-very-high.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
C’est tout pour moi !
3 « J'aime »
C’est la raison. Je pense que le dernier recours pour les connexions sociales sur les petits écrans est de simplement afficher le logo, mais je dois vérifier / faire quelques vérifications à ce sujet.
2 « J'aime »
Je ne peux plus le voir autrement maintenant, merci de l’avoir soulevé !
Hmmm…
Il semble que les seuls guides de style que j’ai pu trouver sur le bouton concernaient Facebook et Google.
Facebook veut uniquement que vous ayez un bouton rectangulaire avec « Se connecter avec Facebook ». Ils ne veulent pas non plus que vous ayez de nombreuses options pour vous authentifier avec des services autres que Facebook.
Google accepte d’utiliser uniquement son logo si nécessaire comme bouton de connexion.
J’ai jeté un coup d’œil rapide ici sur meta et ça a l’air cool. Cela ne m’affectera pas vraiment car le forum principal sur lequel je suis est uniquement SSO.
1 « J'aime »