First time experience
Première expérience.
De la landing page à l’onboarding.
Rahman Kalfane
@rahmankalfane
Designers & Co-founders at Pelostudio
@wearepelo
Alexis Porhiel
@porhielalexis
Vous n'aurez jamais une seconde chance de faire une
première bonne impression
La première impression se fait
sur la landing page
Du coup, la première question à se poser :
A quoi ça sert une landing page ?
Acquérir
des
utilisateurs
Tester votre
proposition
de valeur
Acquérir
des
utilisateurs
Obtenir du
feedback
Tester votre
proposition
de valeur
Acquérir
des
utilisateurs
Obtenir du
feedback
Tester votre
proposition
de valeur
Exister
sur les
internet
Acquérir
des
utilisateurs
Obtenir du
feedback
Tester votre
proposition
de valeur
Exister
sur les
internets
Acquérir
des
utilisateurs
…
Une landing page c’est donc un objectif clair, et surtout, mesurable.
LA QUESTION A SE POSER :
Comment ma landing page peut servir mon objectif ?
segment.io/redshift
segment.io/redshift
Storytelling, on nous amène à comprendre chaque feature
Les commentaires des utilisateurs sont mis en ...
intercom.io
intercom.io
La proposition de valeur est claire
Un hero image qui illustre cette VP : l'illustration appuie la VP
UI : l'u...
intercom.io
Overview des différentes options
Les informations demandées sont justifiées au bon moment
Les boutons "Next" no...
mism-design.com
mism-design.com
La proposition de valeur est claire
Pricing est direct
On comprend bien comment marche le produit
Le numér...
mism-design.com
Modularité
Pédagogique
Un récapitulatif des étapes passées
La donnée importante “Surface” est cachée
Onboa...
mism-design.com
On comprend quand elle est mutée
Elle montre le produit en action
La video est longue
Video
streaksapp.com
streaksapp.com
On va droit au but
On ne bloque pas l’utilisateur (Android)
Le orange sur l’ensemble de la page fatigue
Pas...
mindie.co
mindie.co
La proposition de valeur est trop petite
Pas d’explication sur le produit
airbrake.io
airbrake.io
Trop de couleurs
Ne montre pas vraiment l’application (section features)
Slideshows, Tabs et autres interactio...
Découper les tâches en unités simples à comprendre
Eliminer les choix superflus
Eviter les blocages et les frustrations à l...
Porter attention à la hiérarchie de l’information
Donner de l’espace aux éléments graphiques
Composition
http://alistapart...
Faire attention à la justification des textes
Optimiser les lettres pour la lisibilité
Eviter les lignes de plus de 80 cara...
Créer une palette simple autour d’une couleur dominante
Utiliser les valeurs de gris pour ajouter de la profondeur aux tex...
Jouer sur des intéracteurs simples
Rester dans des animations réactives et courtes
Ne jamais casser les intéractions nativ...
S’assurer que les modalités d’interactions sont toujours visibles
Ne pas punir les erreurs des utilisateurs
Formulaires
ht...
Les 4 piliers
Les 4 piliers
Les 4 piliers
Comment faire évoluer / tester son design ?
Micro-optimisation du design
Macro-optimisation du design
Merci :)
Rahman Kalfane
@rahmankalfane
Designers & Co-founders at Pelostudio
@wearepelo
Alexis Porhiel
@porhielalexis
De la landing page à l'onboarding - Rahmane Kalfane & Alexis Porhiel, Co-Founder de PeloStudio
Prochain SlideShare
Chargement dans…5
×

De la landing page à l'onboarding - Rahmane Kalfane & Alexis Porhiel, Co-Founder de PeloStudio

1 252 vues

Publié le

La landing page est la première experience de ton utilisateur lorsqu'il arrive sur ton site. Rahmane Kalfane & Alexis Porhiel, Co-Founder de PeloStudio te donnent dans cette vidéo toutes les techniques à adopter pour construire une landing sans friction!

La vidéo : https://www.youtube.com/watch?v=MMVwb7x0sTM

At TheFamily, we believe that anyone can become a great entrepreneur. Find more info here: http://www.thefamily.co/

By Rahmane Kalfane & Alexis Porhiel, Co-Founder de PeloStudio - http://www.pelostud.io/

  • Soyez le premier à commenter

De la landing page à l'onboarding - Rahmane Kalfane & Alexis Porhiel, Co-Founder de PeloStudio

  1. 1. First time experience
  2. 2. Première expérience. De la landing page à l’onboarding.
  3. 3. Rahman Kalfane @rahmankalfane Designers & Co-founders at Pelostudio @wearepelo Alexis Porhiel @porhielalexis
  4. 4. Vous n'aurez jamais une seconde chance de faire une première bonne impression
  5. 5. La première impression se fait sur la landing page
  6. 6. Du coup, la première question à se poser : A quoi ça sert une landing page ?
  7. 7. Acquérir des utilisateurs
  8. 8. Tester votre proposition de valeur Acquérir des utilisateurs
  9. 9. Obtenir du feedback Tester votre proposition de valeur Acquérir des utilisateurs
  10. 10. Obtenir du feedback Tester votre proposition de valeur Exister sur les internet Acquérir des utilisateurs
  11. 11. Obtenir du feedback Tester votre proposition de valeur Exister sur les internets Acquérir des utilisateurs …
  12. 12. Une landing page c’est donc un objectif clair, et surtout, mesurable.
  13. 13. LA QUESTION A SE POSER : Comment ma landing page peut servir mon objectif ?
  14. 14. segment.io/redshift
  15. 15. segment.io/redshift Storytelling, on nous amène à comprendre chaque feature Les commentaires des utilisateurs sont mis en valeur Mise en contexte du produit Le bouton “Learn more” est plus gros que “Get Started” (objectif de la landing page) Les textes gris sur noir sont durs à lire Les animations sur les logos de clients sont distrayante
  16. 16. intercom.io
  17. 17. intercom.io La proposition de valeur est claire Un hero image qui illustre cette VP : l'illustration appuie la VP UI : l'usage des couleurs est bien utilisé pour séparer les offres “Featured customer” : l’image du client rend le témoignage plus authentique Rappel de l'objectif à la fin du scroll (get started) Sur la partie features, les interacteurs ne sont pas clair, Landing Page
  18. 18. intercom.io Overview des différentes options Les informations demandées sont justifiées au bon moment Les boutons "Next" nous donnent un aperçu de la suite Il n'y a pas de valeurs par défaut pour juste aller tester l’application Les labels des champs de textes se perdent pendant l’utilisation Une fois arrivé sur l’application, le guide est caché Onboarding
  19. 19. mism-design.com
  20. 20. mism-design.com La proposition de valeur est claire Pricing est direct On comprend bien comment marche le produit Le numéro de téléphone n’est pas lisible L'image n'illustre pas le propos Voir les réalisations est flottant Pas de CTA à la fin du scroll Landing Page
  21. 21. mism-design.com Modularité Pédagogique Un récapitulatif des étapes passées La donnée importante “Surface” est cachée Onboarding
  22. 22. mism-design.com On comprend quand elle est mutée Elle montre le produit en action La video est longue Video
  23. 23. streaksapp.com
  24. 24. streaksapp.com On va droit au but On ne bloque pas l’utilisateur (Android) Le orange sur l’ensemble de la page fatigue Pas de hiérarchie dans les contenus secondaires
  25. 25. mindie.co
  26. 26. mindie.co La proposition de valeur est trop petite Pas d’explication sur le produit
  27. 27. airbrake.io
  28. 28. airbrake.io Trop de couleurs Ne montre pas vraiment l’application (section features) Slideshows, Tabs et autres interactions distrayantes
  29. 29. Découper les tâches en unités simples à comprendre Eliminer les choix superflus Eviter les blocages et les frustrations à l’utilisateur Fournir des valeurs par défaut ou des démonstrations Cheminements http://mappingexperiences.com/
  30. 30. Porter attention à la hiérarchie de l’information Donner de l’espace aux éléments graphiques Composition http://alistapart.com/article/content-out-layout http://www.hugeinc.com/ideas/perspective/everybody-scrolls
  31. 31. Faire attention à la justification des textes Optimiser les lettres pour la lisibilité Eviter les lignes de plus de 80 caractères Typographie http://practicaltypography.com/typography-in-ten-minutes.html http://alistapart.com/article/whitespace
  32. 32. Créer une palette simple autour d’une couleur dominante Utiliser les valeurs de gris pour ajouter de la profondeur aux textes Couleur https://color.adobe.com http://www.colormatters.com
  33. 33. Jouer sur des intéracteurs simples Rester dans des animations réactives et courtes Ne jamais casser les intéractions natives ou habituelles Interactions http://tympanus.net/codrops/category/playground http://sixux.com
  34. 34. S’assurer que les modalités d’interactions sont toujours visibles Ne pas punir les erreurs des utilisateurs Formulaires http://www.typeform.com http://www.smashingmagazine.com/web-form-design-showcases-and-solutions
  35. 35. Les 4 piliers
  36. 36. Les 4 piliers
  37. 37. Les 4 piliers
  38. 38. Comment faire évoluer / tester son design ?
  39. 39. Micro-optimisation du design
  40. 40. Macro-optimisation du design
  41. 41. Merci :) Rahman Kalfane @rahmankalfane Designers & Co-founders at Pelostudio @wearepelo Alexis Porhiel @porhielalexis

×