Redesign du bouton de connexion

[overflorian]

Pour l'instant, lors de la première visite du site, il n'y a qu'un seul bouton "s'inscrire / se connecter" qui renvoit vers https://www.openstreetmap.org/login

Ça renvoit vers un site externe à pdm.fr, sur une page d'inscription, pas de création de compte.
Je pense à notre persona Mickaël, débutant qui n'a pas encore de compte OSM. Pour lui, ça peut porter à confusion.

Je propose :

1. de spliter les boutons "s'inscrire" et "se connecter" en deux. En renvoyant vers des URLs séparées : https://www.openstreetmap.org/login et https://www.openstreetmap.org/user/new
   C'est le même design que sur osm.org
   

2. De créer une popup lorsque l'on clique sur "s'inscrire" pour expliquer pourquoi on va demander la création d'un compte OSM.
   Un simple message du type "Ce site utilise votre compte OpenStreetMap pour faire des statistiques et créer le podium des meilleurs contributeurs.
   BOUTON "Créer un compte sur OpenStreetMap.org"

Je peux designer un écran avec des flèches explicatives, comme sur cet exemple :

3. De splitter de la même manière le bouton de connexion dans la page :
   

D'ailleurs, j'ai une autre idée complémentaire. Je la détaille ici : #166

PS : le bouton Facebook connect ressemble à ça :

Peut-être que je fait fausse route avec ma proposition et que l'on veut conserver un seul bouton "Continuer avec OpenStreetMap" ??

[overflorian]

Sur mobile, c'est un peu délicat, les 2 boutons ne rentreraient pas en largeur.
2 solutions :

• on ne change rien pour le mobile
• on renvoit vers la popup intermédiaire pour le mobile, avec en bas de popup, 2 boutons "se connecter" / "créer un compte"
  Je penche pour la seconde solution perso.
  Question de priorité : ça fait perdre un clic aux geeks mais facilite la vie aux noobs.

Du coup, la solution "bouton unique comme Facebook" redevient une idée pertinente. Je réfléchis à voix haute...

[PanierAvide]

Si c'est le même fonctionnement sur PC et mobile ça m'arrange 😉 Le principe de popup intermédiaire ne me paraît pas choquant, c'est comme ça dans Mapcontrib et ça fait le taf. Je te laisse réfléchir au wording et éléments visuels ?

[overflorian]

Yes, je peux faire ça. Du coup @PanierAvide tu pencherai plutôt pour le bouton unique ou pour un split ?
Après réflexion perso je préfère un seul bouton "continuer avec OpenStreetMap".

[PanierAvide]

Un bouton unique c'est bien ;-)

…

-- Adrien 25 févr. 2021 15:03:22 Overflorian <[email protected]>:

Yes, je peux faire ça. Du coup @PanierAvide[https://github.com/PanierAvide] tu pencherai plutôt pour le bouton unique ou pour un split ? Après réflexion perso je préfère un seul bouton "continuer avec OpenStreetMap". — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub[#167 (comment)], or unsubscribe[https://github.com/notifications/unsubscribe-auth/AAKJLFRECLR2T4AHB43RNCLTAZKCJANCNFSM4XW3FINQ]. [data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAB9JREFUaIHtwQEBAAAAgiD/r25IQAEAAAAAAAAAAC8GJDAAAY7rwGcAAAAASUVORK5CYII=###24x24:true###][Image de pistage][https://github.com/notifications/beacon/AAKJLFXD7B5ZRHHNHHJNJUDTAZKCJA5CNFSM4XW3FIN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOF3MCMVY.gif]

[overflorian]

Tu dis ça parce que c'est plus facile à développer ! Mais en terme d'UX ça fonctionne bien donc tant mieux.

[overflorian]

OK le bouton unique est en fait un double bouton (ça serait trop facile) si on suit ce que fait Facebook (cf. https://developers.facebook.com/docs/facebook-login/web/login-button?locale=fr_FR) :

Pour le deuxième j'en parle sur une issue séparée : #177

Pour le premier, voici que que j'ai fait :

J'ai repris le logo brut produit par osm-fr mais il n'est pas adapté pour une présentation "logo" en petit. Je n'ai pas trouvé mieux pour l'instant ... je vais chercher car je ne suis pas fan du résultat.

[overflorian]

OK j'ai simplifié, ça ne suffisait pas, donc j'ai encore plus simplifié ...

Banco pour la 5 ?
Le svg est ici openstreepmap-logo-blanc-mini.zip

Je pense qu'il faut mettre le bouton en gris en haut à droite de l'écran mais en bleu #007bff lorsqu'il apparaît dans la partie "statistiques" : c'est alors un CTA important.

[overflorian]

OK pour l'interstitiel : simple, basique :

avec sa variante plus marrante :

Je propose de bien faire les choses en s'inspirant du material design à fond : https://material.io/components/dialogs#specs
En respectant les tailles :

En respectant les couleurs :

Et notamment notre couleur primaire : #007bff

--
Wording :
Ce site a besoin de se connecter
à votre compte OpenStreetMap
pour créer des données et faire
des statistiques.
Promis, on sera sages.

Icônes utilisées :
logos pour écran de connexion.zip

[gendy54]

Fan de la variante marrante.

Modif cosmétique: "Ce site a besoin de se connecter à votre compte OpenStreetMap pour créer les données et faire vos statistiques (de contribution)"
But: bien différencier les stats du projet, des stats via les cookies que tous les sites ramassent sur nous.