search

vdct / ProjetDuMois

GNU Affero General Public License v3.0
21 stars 11 forks source link

Redesign du bouton de connexion #167

Open overflorian opened 3 years ago

overflorian commented 3 years ago

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 image

  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 : image

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

D'ailleurs, j'ai une autre idée complémentaire. Je la détaille ici : https://github.com/vdct/ProjetDuMois/issues/166

PS : le bouton Facebook connect ressemble à ça : image Peut-être que je fait fausse route avec ma proposition et que l'on veut conserver un seul bouton "Continuer avec OpenStreetMap" ??

overflorian commented 3 years ago

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

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

PanierAvide commented 3 years ago

Si c'est le même fonctionnement sur PC et mobile ça m'arrange :wink: 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 commented 3 years ago

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 commented 3 years ago

Un bouton unique c'est bien ;-)

-- Adrien

25 févr. 2021 15:03:22 Overflorian notifications@github.com:

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[https://github.com/vdct/ProjetDuMois/issues/167#issuecomment-785917527], 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 commented 3 years ago

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

overflorian commented 3 years ago

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 : https://github.com/vdct/ProjetDuMois/issues/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 commented 3 years ago

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 commented 3 years ago

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 : image

En respectant les couleurs : image 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 commented 3 years ago

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.