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/

1. First time experience

2. Première expérience.
De la landing page à l’onboarding.

3. Rahman Kalfane
@rahmankalfane
Designers & Co-founders at Pelostudio
@wearepelo
Alexis Porhiel
@porhielalexis

5. Vous n'aurez jamais une seconde chance de faire une
première bonne impression

6. La première impression se fait
sur la landing page

7. Du coup, la première question à se poser :
A quoi ça sert une landing page ?

8. Acquérir
des
utilisateurs

9. Tester votre
proposition
de valeur
Acquérir
des
utilisateurs

10. Obtenir du
feedback
Tester votre
proposition
de valeur
Acquérir
des
utilisateurs

11. Obtenir du
feedback
Tester votre
proposition
de valeur
Exister
sur les
internet
Acquérir
des
utilisateurs

12. Obtenir du
feedback
Tester votre
proposition
de valeur
Exister
sur les
internets
Acquérir
des
utilisateurs
…

13. Une landing page c’est donc un objectif clair, et surtout, mesurable.

14. LA QUESTION A SE POSER :
Comment ma landing page peut servir mon objectif ?

15. segment.io/redshift

16. 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

17. intercom.io

18. 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

19. 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

20. mism-design.com

21. 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

22. mism-design.com
Modularité
Pédagogique
Un récapitulatif des étapes passées
La donnée importante “Surface” est cachée
Onboarding

23. mism-design.com
On comprend quand elle est mutée
Elle montre le produit en action
La video est longue
Video

24. streaksapp.com

25. 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

26. mindie.co

27. mindie.co
La proposition de valeur est trop petite
Pas d’explication sur le produit

28. airbrake.io

29. airbrake.io
Trop de couleurs
Ne montre pas vraiment l’application (section features)
Slideshows, Tabs et autres interactions distrayantes

30. 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/

31. 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

32. 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

33. 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

34. 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

35. 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

36. Les 4 piliers

37. Les 4 piliers

38. Les 4 piliers

39. Comment faire évoluer / tester son design ?

40. Micro-optimisation du design

41. Macro-optimisation du design

42. Merci :)
Rahman Kalfane
@rahmankalfane
Designers & Co-founders at Pelostudio
@wearepelo
Alexis Porhiel
@porhielalexis