Projet

Général

Profil

Development #12482

Refonte de la page de login

Ajouté par Mikaël Ates il y a presque 8 ans. Mis à jour il y a presque 7 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
07 juillet 2016
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:

Description

Les objectifs sont:
  • d'avoir les blocs en côte à côte en écran large, l'un en dessus de l'autre en mobile.
  • de rapprocher la page de connexion de 3M vers celle de publik tout en se rapprochant des mockups fournis par 3M.
  • avec plusieurs blocs en page de connexion le lien pour la création de compte ne devrait pas figurer dans le bloc password mais en dehors du bloc.
  • sur la page de connexion, le titre du bloc mot de passe a été renommé de Connexion vers Identifiants car les autres blocs servent aussi à la connexion.
  • sur la page d'enregistrement, le titre du bloc email a été renommé de Enregistrement vers Courriel car les autres blocs servent aussi à l'enregistrement.
  • ajouts de titres au pages.
Il s'agit d'une base pour discussion :
  • Le style en css n'est pas intégré aux feuilles de style
  • le logo 3m en footer n'est pas appliqué
  • les a2-block pourrait être fixés en hauteur ou comme proposé avec vertical-align: middle;
  • problème rencontré : le block header ajouté dans le theme de base 3M du theme publik n'est pas remplacé par le bloc header dans les pages du theme 3M alors que cela fonctionne pour le footer.

Autres tests sur la dev avec déploiement avec un seul bloc. Pour Tournai le rendu est correct. Ce n'est pas le cas pour Orléans.

3 patchs:
  • publik-base-theme
  • montpellier-theme
  • authentic2

Fichiers

3m-480x800-creation.png (39,6 ko) 3m-480x800-creation.png Mikaël Ates, 07 juillet 2016 17:09
3m-480x800-connexion.png (47,3 ko) 3m-480x800-connexion.png Mikaël Ates, 07 juillet 2016 17:09
3mt.png (8,62 ko) 3mt.png Mikaël Ates, 07 juillet 2016 17:09
3m-wide-connexion.png (65,2 ko) 3m-wide-connexion.png Mikaël Ates, 07 juillet 2016 17:09
3m-wide-creation.png (55,9 ko) 3m-wide-creation.png Mikaël Ates, 07 juillet 2016 17:09
meaux-480x800-connexion.png (41,7 ko) meaux-480x800-connexion.png Mikaël Ates, 07 juillet 2016 17:09
meaux-480x800-creation.png (38,8 ko) meaux-480x800-creation.png Mikaël Ates, 07 juillet 2016 17:09
meaux-wide-connexion.png (54,1 ko) meaux-wide-connexion.png Mikaël Ates, 07 juillet 2016 17:09
meaux-wide-creation.png (51,7 ko) meaux-wide-creation.png Mikaël Ates, 07 juillet 2016 17:09
mockup-3m-connexion.png (59,4 ko) mockup-3m-connexion.png Mikaël Ates, 07 juillet 2016 17:09
nancy-480x800-connexion.png (36,3 ko) nancy-480x800-connexion.png Mikaël Ates, 07 juillet 2016 17:16
mockup-3m-connexion-mobile.png (53,9 ko) mockup-3m-connexion-mobile.png Mikaël Ates, 07 juillet 2016 17:16
nancy-480x800-creation.png (36,1 ko) nancy-480x800-creation.png Mikaël Ates, 07 juillet 2016 17:16
nancy-wide-connexion.png (71,6 ko) nancy-wide-connexion.png Mikaël Ates, 07 juillet 2016 17:16
nancy-wide-creation.png (72,5 ko) nancy-wide-creation.png Mikaël Ates, 07 juillet 2016 17:16
publik-demo-480x800-connexion.png (44,3 ko) publik-demo-480x800-connexion.png Mikaël Ates, 07 juillet 2016 17:16
publik-demo-480x800-creation.png (40,7 ko) publik-demo-480x800-creation.png Mikaël Ates, 07 juillet 2016 17:16
publik-demo-wide-creation.png (118 ko) publik-demo-wide-creation.png Mikaël Ates, 07 juillet 2016 17:16
publik-demo-wide-connexion.png (121 ko) publik-demo-wide-connexion.png Mikaël Ates, 07 juillet 2016 17:16
0001-Add-registration-url-to-login-page-context.patch (886 octets) 0001-Add-registration-url-to-login-page-context.patch Mikaël Ates, 07 juillet 2016 17:17
0001-Redesign-login-and-registration-pages.patch (6,61 ko) 0001-Redesign-login-and-registration-pages.patch Mikaël Ates, 07 juillet 2016 17:17
0001-Redesign-login-and-registration-pages.patch (7,21 ko) 0001-Redesign-login-and-registration-pages.patch Mikaël Ates, 07 juillet 2016 17:30
publik-demo-480x800-connexion-monobloc.png (30,5 ko) publik-demo-480x800-connexion-monobloc.png Mikaël Ates, 07 juillet 2016 18:24
publik-demo-480x800-creation-monobloc.png (27 ko) publik-demo-480x800-creation-monobloc.png Mikaël Ates, 07 juillet 2016 18:24
publik-demo-wide-connexion-monobloc.png (107 ko) publik-demo-wide-connexion-monobloc.png Mikaël Ates, 07 juillet 2016 18:24
publik-demo-wide-creation-monobloc.png (105 ko) publik-demo-wide-creation-monobloc.png Mikaël Ates, 07 juillet 2016 18:24
publik-demo-wide-connexion-2.png (121 ko) publik-demo-wide-connexion-2.png Mikaël Ates, 08 juillet 2016 09:50
publik-demo-wide-connexion-4.png (119 ko) publik-demo-wide-connexion-4.png Mikaël Ates, 08 juillet 2016 22:45
publik-demo-wide-connexion-3.png (118 ko) publik-demo-wide-connexion-3.png Mikaël Ates, 08 juillet 2016 22:45
Capture du 2016-07-09 08-03-01.png (37,2 ko) Capture du 2016-07-09 08-03-01.png Frédéric Péters, 09 juillet 2016 08:04
Capture du 2016-07-09 07-51-40.png (27,6 ko) Capture du 2016-07-09 07-51-40.png Frédéric Péters, 09 juillet 2016 08:04
0001-style-display-authentication-methods-next-to-each-ot.patch (944 octets) 0001-style-display-authentication-methods-next-to-each-ot.patch Frédéric Péters, 25 août 2016 10:25
0002-templates-skip-titles-in-login-page-if-there-are-mul.patch (916 octets) 0002-templates-skip-titles-in-login-page-if-there-are-mul.patch Frédéric Péters, 25 août 2016 10:25

Demandes liées

Lié à Authentic 2 - Development #12934: refactor registration view to be more like the login viewNouveau25 août 2016

Actions

Révisions associées

Révision 92835434 (diff)
Ajouté par Frédéric Péters il y a plus de 7 ans

style: display authentication methods next to each other on login page (#12482)

Révision 47e41bd0 (diff)
Ajouté par Frédéric Péters il y a plus de 7 ans

templates: skip titles in login page if there are multiple auth methods (#12482)

Historique

#3

Mis à jour par Mikaël Ates il y a presque 8 ans

  • Description mis à jour (diff)
#4

Mis à jour par Mikaël Ates il y a presque 8 ans

  • Description mis à jour (diff)
#5

Mis à jour par Mikaël Ates il y a presque 8 ans

  • Fichier 0001-Redesign-login-and-registration-pages.patch supprimé
#7

Mis à jour par Frédéric Péters il y a presque 8 ans

Et quel est le rendu quand il n'y a qu'un seul bloc ? (pas besoin de passer partout, juste publik-demo-wide-{creation,connexion}.png)

de rapprocher la page de connexion de 3M vers celle de publik tout en se rapprochant des mockups fournis par 3M.

L'idée (de mon côté en tout cas) est de pouvoir supprimer des templates côté 3M (et ça ne me semble pas trop réalisé par ces patchs).

#9

Mis à jour par Frédéric Péters il y a presque 8 ans

Je pense un point important mais qui peut s'arranger facilement, c'est le titre du bloc "par défaut", appeler ça "Identifiants" (pour la connexion) ou "Courriels" (pour l'inscription), ce n'est vraiment pas compréhensible. Afficher "Connexion" (resp. "Enregistrement") comme maintenant, ça irait mieux.

L'autre point, peut-être à mettre en lien, c'est le vocabulaire, "Compte usager" / "Création de votre compte usager", tout le monde n'utilise pas ça. Certains voudront afficher "Bienvenue sur l'e-Guichet", d'autres voudront "Mon Alfortville", etc. Et si plutôt que ça on mettait à cet endroit là "Connexion" (resp. "Enregistrement") ?

(rien à voir mais important, beaucoup ne lisent pas les tickets redmine, ça vaut sans doute la peine de pointer cette question).

#11

Mis à jour par Frédéric Péters il y a presque 8 ans

(réponse avait été apportée en modifiant mon commentaire, je reposte ici)

Je pense un point important mais qui peut s'arranger facilement, c'est le titre du bloc "par défaut", appeler ça "Identifiants" (pour la connexion) ou "Courriels" (pour l'inscription), ce n'est vraiment pas compréhensible. Afficher "Connexion" (resp. "Enregistrement") comme maintenant, ça irait mieux.

S'il n'y a qu'un seul bloc, celui du login/le mot de passe, les termes actuels conviennent. Si par contre il y a plusieurs blocs servant à la connexion et à l'enregistrement, avoir un seul bloc qui s'appelle "connexion", resp. "enregistrement", ne me semble pas cohérent puisque les autres blocs le permettent également, et je pense que ça n'aide pas les utilisateurs à facilement comprendre que par exemple avec le bouton FC, dans le premier cas il permet de se connecter, dans l'autre cas de s'enregistrer.

L'autre point, peut-être à mettre en lien, c'est le vocabulaire, "Compte usager" / "Création de votre compte usager", tout le monde n'utilise pas ça. Certains voudront afficher "Bienvenue sur l'e-Guichet", d'autres voudront "Mon Alfortville", etc.
Et si plutôt que ça on mettait à cet endroit là "Connexion" (resp. "Enregistrement") ?

Je pensais que la volonté était de pousser l'usage du terme compte usager, donc je pensais souhaitable d'utiliser ce terme ici. Le terme choisi pourrait aussi être une variable partagée dans un déploiement publik, comme ce pourrait aussi être le cas du nom de l'entité (Ville de ..., ), qui serait utilisé ici et là.

Mais oui Connexion et Enregistrement en titre, relativement au premier point me paraissent intéressant, cela facilite l'acceptation commune et le paramétrage, donc maintenant peut-être simplement trouver un terme plus adapté que "Identifiants" pour le bloc par défaut. Et aussi pas de différence entre mono et multi-blocs.

Nouvelle capture en pj pour la page de Connexion avec en titre Connexion et en titre de bloc un essai avec 'Mot de passe'.

#12

Mis à jour par Frédéric Péters il y a presque 8 ans

J'y pense là, ce design avec le titre poussé hors du bloc, ça marche nettement moins bien avec les thèmes utilisant une image en fond, comme Fondettes mais surtout Vincennes et Fontenay-sous-Bois.

#13

Mis à jour par Frédéric Péters il y a presque 8 ans

Je pense un point important mais qui peut s'arranger facilement, c'est le titre du bloc "par défaut", appeler ça "Identifiants" (pour la connexion) ou "Courriels" (pour l'inscription), ce n'est vraiment pas compréhensible. Afficher "Connexion" (resp. "Enregistrement") comme maintenant, ça irait mieux.

S'il n'y a qu'un seul bloc, celui du login/le mot de passe, les termes actuels conviennent. Si par contre il y a plusieurs blocs servant à la connexion et à l'enregistrement, avoir un seul bloc qui s'appelle "connexion", resp. "enregistrement", ne me semble pas cohérent puisque les autres blocs le permettent également, et je pense que ça n'aide pas les utilisateurs à facilement comprendre que par exemple avec le bouton FC, dans le premier cas il permet de se connecter, dans l'autre cas de s'enregistrer.

Je comprends très bien la logique mais ça n'en reste pas moins, il me semble, pas terrible pour l'usager. À regarder le rendu Nancy, par exemple, je trouverais beaucoup plus clair d'écrire "Connexion" dans le titre et de virer le le titre "FranceConnect" (qui offre déjà un gros bouton à la fonction claire).

Pour info, à Liège, les titres sont gardés mais s'appellent "Connexion avec identifiant" et "Connexion avec carte d'identité".

L'autre point, peut-être à mettre en lien, c'est le vocabulaire, "Compte usager" / "Création de votre compte usager", tout le monde n'utilise pas ça. Certains voudront afficher "Bienvenue sur l'e-Guichet", d'autres voudront "Mon Alfortville", etc.
Et si plutôt que ça on mettait à cet endroit là "Connexion" (resp. "Enregistrement") ?

Je pensais que la volonté était de pousser l'usage du terme compte usager, donc je pensais souhaitable d'utiliser ce terme ici. Le terme choisi pourrait aussi être une variable partagée dans un déploiement publik, comme ce pourrait aussi être le cas du nom de l'entité (Ville de ..., ), qui serait utilisé ici et là.

C'est déjà le cas (variable "global_title") mais ça reste plutôt compliqué de devoir prévoir des tournures de phrase qui marchent aussi bien avec "Compte usager" que "Mon Alfortville" ou "e-Guichet de la ville de Liège".

Mais oui Connexion et Enregistrement en titre, relativement au premier point me paraissent intéressant, cela facilite l'acceptation commune et le paramétrage, donc maintenant peut-être simplement trouver un terme plus adapté que "Identifiants" pour le bloc par défaut. Et aussi pas de différence entre mono et multi-blocs.

Noté juste au-dessus, sortir le texte des blocs va poser des problèmes.

#14

Mis à jour par Mikaël Ates il y a presque 8 ans

Voici deux captures sans le titre hors bloc et avec le titre de bloc Connexion ou Connexion avec ...

Pour essayer un autre rendu, la hauteur des blocs est la même.

Les templates de thème 3M ont été proposées car il est souhaité faire varier le thème sur les pages de création/enregistrement des autres pages en ne faisant pas figurer le header et en modifiant le footer. Il y a aussi pour 3M un titre sur la page (hors bloc) et un lien vers l'aide sous les blocs. Hors à ce stade je ne sais pas comment faire cela sans page de template dans le thème montpellier.

#15

Mis à jour par Frédéric Péters il y a presque 8 ans

Le "Pas de compte / Enregistrez-vous" reste en-dehors des blocs, ce qui n'ira pas sur les thèmes avec image de fond. Mais plus important, pour revenir sur cette partie, je suis de toute façon de moins en moins sûr de la pertinence de la séparer. Si je veux me connecter via FranceConnect, je vais de toute façon cliquer sur le bouton FranceConnect sur la page connexion, plutôt que penser que j'ai peut-être besoin de m'enregistrer quand même.

#16

Mis à jour par Frédéric Péters il y a presque 8 ans

Bien sûr on n'a pas les ressources pour étudier ça correctement mais à continuer à y réfléchir je ne pense pas que poser une question (pas de compte?) et demander un choix dès le début (mot de passe ou franceconnect?) soit le plus engageant pour l'usager. Je pense qu'on ne doit pas diriger les réflexions sur cette page sur base de l'organisation technique actuelle.

#17

Mis à jour par Mikaël Ates il y a presque 8 ans

La barre de séparation me fait penser à un 'ou' entre la gauche et la droite et il n'est pas clair pour moi que le bouton FC serve à se connecter, mais plutôt à s'enregistrer, ou à défaut qu'il sert au deux.

Or si je n'ai pas de compte usager lié à FC, après un SSO FC je reviens sur la page de connexion avec la mire de login pour lier et avec un bouton FC 'transformé' pour créer. Et pour la création de compte via FC, je trouve l'autre scenario préférable, c'est à dire inviter l'utilisateur à cliquer sur se créer un compte et sur la page de création à cliquer sur le bouton FC.

Donc sur la page de connexion je trouverais préférable de conduire l'utilisateur à voir le bouton FC comme connexion et non comme enregistrement.

S'il y a plusieurs frontends de connexion, comme par exemple une carte + fc + saml, tu les verrais venir l'un en dessus de l'autre sur la partie droite ?

Sur un plan 'esthétique' ta proposition me plaît beaucoup.

#18

Mis à jour par Frédéric Péters il y a presque 8 ans

La barre de séparation me fait penser à un 'ou' entre la gauche et la droite et il n'est pas clair pour moi que le bouton FC serve à se connecter, mais plutôt à s'enregistrer, ou à défaut qu'il sert au deux.

On pourrait imaginer inverser les éléments de droite :le titre "Vous utilisez FranceConnect ?" puis le titre "Vous n'avez pas de compte ?".

Or si je n'ai pas de compte usager lié à FC, après un SSO FC je reviens sur la page de connexion avec la mire de login pour lier et avec un bouton FC 'transformé' pour créer. Et pour la création de compte via FC, je trouve l'autre scenario préférable, c'est à dire inviter l'utilisateur à cliquer sur se créer un compte et sur la page de création à cliquer sur le bouton FC.

C'est bien ici que la technique ne doit pas mener le débat; après un SSO FranceConnect il me semble qu'on arrive sur trois situations : soit le compte est déjà lié, à ce moment on continue sans interruption, soit il n'est pas lié, on doit alors afficher une page offrant les deux situations : soit lier avec un compte local existant, soit créer un compte local (si les deux modes sont possibles).

Donc sur la page de connexion je trouverais préférable de conduire l'utilisateur à voir le bouton FC comme connexion et non comme enregistrement.

Même sans changer l'ordre (mon premier élément de réponse), ol est quand même de toute façon écrit "S'identifier avec FranceConnect".

S'il y a plusieurs frontends de connexion, comme par exemple une carte + fc + saml, tu les verrais venir l'un en dessus de l'autre sur la partie droite ?

Pas nécessairement. Les différentes situations doivent être mesurées au vu des parcours qu'on veut mettre en avant (et pour moi on ne veut pas commencer en mettant l'usager devant un choix à faire, qui plus est dans un domaine où il ne voit pas trop de quoi il ressort). C'est une page importante pour l'adoption par l'usager, il me semble qu'on peut en avoir plusieurs variantes, faites main.

#19

Mis à jour par Mikaël Ates il y a presque 8 ans

Il faut ajouter à la discussion l'utilité du bouton annuler sur le formulaire de connexion.

#20

Mis à jour par Mikaël Ates il y a plus de 7 ans

  • Assigné à mis à Frédéric Péters
Après discussion à l'EO day les deux points suivants répondent à la demande :
  • Affichage des blocs côte à côte
  • Non affichage des titres des blocs.
    Cela pour la page de connexion et la page de création de compte.
#21

Mis à jour par Frédéric Péters il y a plus de 7 ans

Patchs pour la page de connexion; je n'ai pas encore en local de quoi regarder la page d'enregistrement.

#22

Mis à jour par Frédéric Péters il y a plus de 7 ans

  • Lié à Development #12934: refactor registration view to be more like the login view ajouté
#23

Mis à jour par Frédéric Péters il y a plus de 7 ans

Et pour la page d'enregistrement, plutôt que des trucs moches dans le thème, je préférerais que sa construction se rapproche de la construction de la page de connexion; j'ai créé #12934 pour cela.

#24

Mis à jour par Mikaël Ates il y a plus de 7 ans

Ok pour la page de connexion maintenant et dans un second temps la page d'enregistrement lorsque les modifications seront faites dans authentic.

Ok pour les patchs.

Peut-être ajouter un message d'explication dans le bloc FranceConnect :
"FranceConnect est la solution proposée par l’État pour simplifier votre connexion aux services en ligne. Elle peut être utilisée pour vous connecter à votre compte usager."

#25

Mis à jour par Frédéric Péters il y a plus de 7 ans

  • Statut changé de En cours à Résolu (à déployer)
commit 47e41bd0eb3647da00e6979c8673569e76500c1d
Author: Frédéric Péters <fpeters@entrouvert.com>
Date:   Thu Aug 25 10:24:16 2016 +0200

    templates: skip titles in login page if there are multiple auth methods (#12482)

commit 928354340803b17d23120afddbe79572b3059fe4
Author: Frédéric Péters <fpeters@entrouvert.com>
Date:   Thu Aug 25 10:23:37 2016 +0200

    style: display authentication methods next to each other on login page (#12482)
#26

Mis à jour par Frédéric Péters il y a presque 7 ans

  • Statut changé de Résolu (à déployer) à Fermé

Formats disponibles : Atom PDF