Vincent et Asma mettent en avant 4 enjeux pour la performance digitale, dans un monde où l’usage mobile est majoritaire : - La performance technique : Penser les interfaces pour qu’elles soient aussi fluides à utiliser que simples à comprendre - Le contenu : Une production de contenu qui doit elles aussi devenir mobile first - L’ergonomie : Une ergonomie à géométrie variable - Le parcours client : Des services repensés dans leurs ensemble Le mobile est devenu du “connect everything”. ---------------------- Conférence donnée au YOODx #VEM9 le 14 février 2018 Evènement organisé par YOODA.com

1. Mobile First

2. Vincent Pillet
Fondateur & associé
Asma Moumni
Responsable UX & Service Design

3. +
DES EXPÉRIENCES
TRANSVERSALES POUR LES MARQUES
Imaginer
UN NOUVEAU MONDE
CONNECTÉ & ULTRA COMMUNIQUANT
Concevoir
Deux agences complémentaires

4. 1
MUTATIONS DIGITALES
MISE EN PERSPECTIVE

5. L’iPhone aujourd’hui est plus puissant
que la fusée Apollo 13 en 1970
VS

6. 25 SECONDES
VS
En 5 ans la vitesse d’échange d’un titre boursier
a été multiplié par plus de 210 000x
2
2008
MOIS
2013

7. Source https://www.planetoscope.com
38
VS
Chaque seconde dans le monde
smartphones
vendus
4 bébés
naissent

8. Source : HootSuite & We Are Social 2017
d’un accès à l’internet mobile2/3
de l’humanité dispose aujourd’hui

9. 1O
MILLIARDS
de vidéos sont vues
chaque jour sur Snapchat
Source https://www.planetoscope.com

10. 650
MILLIONS
de téléchargements
de Pokemon GO

11. Source : HootSuite & We Are Social 2017
15 %
30 %
45 %
60 %
2009 2010 2011 2012 2013 2014 2015 2016 2017
50,3 %
43,6 %
35,1 %
27,1 %
16,2 %
10,7 %
6,1 %
2,9 %
0,7 %
En 2017
L’audience d’internet mobile est
passée devant celle d’internet fixe

12. RAPIDE PUISSANT MOBILE
+ + +
Le mobile a
CONNECTÉ L’HUMANITÉ

13. 2
MUTATIONS MOBILES
USAGES & COMPORTEMENTS

14. Des interactions plus courtes, mais nombreuses
Des comportements en pleine mutation
par jour, c’est le nombre
d’interaction d’un être humain
normal avec son smartphones
Source :Google 2015.
150x
des français consultent
leur portable
au milieu de la nuit
Source : Deloitte
41%

15. Un trait d’union entre le monde physique et le monde digital
Source : Google 2015
82%
Des usages en pleine mutation
des clients en magasin utilisent leurs mobile
pour les aider dans leur choix final

16. Des parcours de plus en plus fragmentés
Des usages en pleine mutation
55%
des transactions impliquent au
moins deux appareils ou plus
Source : Criteo

17. Une place du mobile de plus en plus primordiale
Des usages en pleine mutation
Source : comScore

18. Le mobile, une place de plus en plus significative dans les parcours clients
69%
Sur liligo.com, les
recherches sur mobile ont
été multipliées par 2,5 entre
2013 et 2014.
Source : Liligo
x2,5
Des usages en pleine mutation
des voyageurs débutent leur
processus de recherche en
ligne sur un appareil mobile.
Source : Online Marketing Strategies in Travel,
Juin 2015.

19. 3
MOBILE FIRST
ENJEUX & IMPACTS

20. MOBILE FIRST
Notion apparue en 2011 dans le livre « mobile first » de Luke
Wroblewski, constatant la prise d’importance exponentielle du
mobile, il préconise de changer d’approche et de concevoir
ses interfaces digitales en commençant par le mobile
LES DIFFÉRENTS NIVEAUX DE MATURITÉ D’INTÉGRATION DU MOBILE
Non integré
Le mobile est considéré comme la
déclinaison d’autres interfaces aucune
stratégie particulière le concernant
Mobile first
Le mobile est considéré comme
une interface clé et conçu en
priorité
Mobile centric
Le mobile est considéré comme
un point de contact central et
les services sont pensés autour
de lui

21. Les différentes options
SITE MOBILE SITE RESPONSIVE APPLICATION NATIVE

22. Les différentes options
SITE MOBILE SITE RESPONSIVE APPLICATION NATIVE
Fonctionne dans le
navigateur
Optimisé pour le mobile
Coût moins élevé qu’une
application native
Deux sites à maintenir
Deux URL différentes
(m.site.com + site.com)
Moins bonnes performances
qu’une application native
Fonctionne dans le
navigateur
Une URL unique
Un seul site à maintenir
Coût plus élevé qu’un site
mobile
Moins bonnes performances
qu’une application native
Un site qui s’adapte à tous les
terminaux
Coût moins élevé qu’une
application native
Peut fonctionner offline
Meilleure expérience, mais
acquisition plus difficile
Coût plus élevé qu’un site
Une application par OS (iOS,
Android, Microsoft)
Meilleures performances
Peut utiliser des
fonctionnalités natives du
smartphone (GPS, push, etc)
MAJ plus complexe (nouveau
téléchargement de l’application)

23. PERFORMANCE
Concevoir pour la
performance
technique et d’usage
Les 4 enjeux du mobile first
CONTENU
ERGONOMIE
Designer des
interfaces
polymorphes
PARCOURS
Intégrer l’omnicanalité
et la multimodalité
dans la réflexion
Penser des
contenus qui vivront
dans différents
fronts

24. PERFORMANCE
ENJEU #1
Penser les interfaces pour qu’elles soient aussi fluides à utiliser
que simples à comprendre

25. PERFORMANCE
enjeu #1

26. PERFORMANCE
enjeu #1

27. PERFORMANCE
enjeu #1

28. L’attente de simplicité et
d’efficacité est plus forte
que jamais, tirée par les
usages mobiles.
L’utilisateur attend une
performance d’usage.
PERFORMANCE
enjeu #1

29. PERFORMANCE
enjeu #1
Designer pour la performance c’est être
capable d’aller chercher la plus infime
friction.
Même si elle n’impact pas vos chiffres,
même si elle ne vous semble pas
révolutionnaire, ce sont ces « Little big
things » qui rendront votre expérience
réellement sans couture.
Presque magique, mémorable.

30. PERFORMANCE
enjeu #1
3 secondes
C’est le temps de
chargement jugé acceptable
par les utilisateurs
0 à 2 sec. C’est le temps au delà
duquel vous perdrez
1 utilisateur sur 2
4,3 sec.
C’est la moyenne
actuelle de chargement
d’un site
x2
En multipliant le
temps de
chargement par 2
x2
On multiplie par 2
Le taux de
conversion
VS
Performance technique : les habitudes de
micro-consommation ont rendus les
utilisateurs plus exigeants en terme de
vitesse. En même temps, disparités de
matériel et de réseaux ont rendus le
challenge plus fort

31. PERFORMANCE
enjeu #1
Premier levier permettant d’optimiser la rapidité : AMP
pour « Accelerated Mobile Pages ».
Framework de développement proposé par Google afin
d’optimiser les temps de chargements mobiles
L’internaute qui sélectionne un
contenu AMP n’est en fait pas
redirigé vers le site à l’origine du
contenu : la lecture se fait
directement sur le domaine de
Google !
HTML AMP TRÈS LIGHT PRIORISATION LECTURE AU SEIN DU
DOMAINE GOOGLEAvec des pages AMP, lorsqu’un
contenu est consulté depuis les
résultats de Google, c’est sa
version AMP qui est
systématiquement appelée à la
place de la page HTML classique.
Il s’agit en fait de pages
HTML très légères,
auxquelles s’ajoutent le
système de cache CDN
et une réduction du
Javascript.
L’image principale et le texte
sont chargés en premier, au
lieu de la publicité et des
scripts en temps normal.

32. PERFORMANCE
enjeu #1
Second levier, les systèmes d’informations, qui doivent
s’adapter pour servir ces nouveaux devices et être mieux
exploités pour réduire la perception de latence
Concevoir les systèmes d’information pour
qu’ils soient moins gourmands en données,
plus rapides et adaptés aux parcours
utilisateurs
RATIONALISER LES APPELS
APPELS ASYNCHRONES
Permettre de charger les informations en
plusieurs temps pour qu’au delà de la
rapidité réelle, la rapidité perçue soit
meilleure

33. PERFORMANCE
enjeu #1
Enfin le poids des médias, encore souvent hérités de
productions dédiées à d’autres interfaces, sont encore
souvent inadaptés au mobile. La chaine de production
de contenu doit elle aussi passer au mobile first

34. CONTENU
ENJEU #3
Des chaines de production qui doivent elles aussi devenir
mobile first

35. CONTENU
enjeu #3
Site

36. CONTENU
enjeu #3
Site

37. CONTENU
enjeu #3
Site Site mobile

38. CONTENU
enjeu #3
Site Site mobile Application

39. ERGONOMIE
ENJEU #3
Une ergonomie à géométrie variable

40. ERGONOMIE
enjeu #3
Source : Luke W. Google conversion 2017

41. ERGONOMIE
enjeu #3
Source : Experience utilisateur mobile - Amelie Boucher
Les interfaces doivent désormais prendre
en compte les nouvelles contraintes
qu’impliquent le mobile

42. Une interface qui doit donner
d’avantage d’indices pour
aider à l’utiliser, à savoir où il
en est, où il va, et ce qu’il se
passe
DE HIERARCHIE FACILITATION D’AFFORDANCE DE GUIDE
Des contenus qui doivent être
d’autant plus priorisés
Une lecture qui doit
d’avantage être guidée
Faciliter l’interaction
pour un usage dont
les modalités sont
plus contraintes
Des actions qui doivent
s’adapter à des interactions
qui sont par nature
différentes. Tactile VS clavier
et souris
ERGONOMIE
enjeu #3
+ + + +

43. ERGONOMIE
enjeu #3
FACILITATION

44. VS
ERGONOMIE
enjeu #3
Site mobile Application mobile
FACILITATION

45. ERGONOMIE
enjeu #3
Le focus est porté sur les raccourcis de
complétion au lieu de l’action primaire :
« rechercher ».
Celle ci presque invisible, graphiquement
atténuée, noyée entre les raccourcis de
complétion et l’auto-completion
AFFORDANCE

46. ERGONOMIE
enjeu #3
L’ordre des contenus se
réorganise pour donner le
focus à l’essentiel
Le formulaire se réduit pour
être plus séquencé et
adapté à un usage mobile
HIERARCHIE

47. ERGONOMIE
enjeu #3
GUIDE
lab.hakim.seApplication Mc Donald Site mobile Royal Air Maroc

48. PARCOURS
ENJEU #4
Des services repensés dans leurs ensemble

49. PARCOURS
enjeu #4
30%
Du trafic UK d’Asos est
mobile, ce chiffre passe à
70% pour le monde
80%
Des ventes desktop
font suite à une
consultation mobile
70%
Des commandes d’Asos
UK se font sur mobile.
58% au global
Le mobile a redessiné les parcours, il les a rendu
moins linéaires, plus fragmentés et cross-canal
L’exemple d’ASOS
Source : Luke W. Google conversion 2017 & Global commerce review Criteo

50. PARCOURS
enjeu #4
Cette mutation de parcours a ouvert la porte à de nouvelles opportunités pour les
marques. C’était la pièce manquant vers l’accompagnement sans rupture
Etapes du cycle de vie d’un voyageurs
RECHERCHE RESERVATION DEPART VOYAGE RETOUR

51. PARCOURS
enjeu #4
Nouveaux possibles Nouvelles attentes
Géolocalisation Personnalisation
& contextualisation
Nouvelles opportunités de
services dans des temps clients
jusqu’alors inaccessibles
Un service 24/7
Nouvelles données
exploitables
Un service en temps réel
Des parcours réellement
sans couture

52. PARCOURS
enjeu #4
l’exemple du voyage

53. PARCOURS
enjeu #4
CONTEXTUALISER

54. PARCOURS
enjeu #4
PERSONNALISER

55. PARCOURS
enjeu #4
RELIER LES MONDES PHYSIQUES ET DIGITAUX

56. PARCOURS
enjeu #4
RELIER LES MONDES PHYSIQUES ET DIGITAUX

57. PARCOURS
enjeu #4
FACILITER

58. PARCOURS
enjeu #4
ACCOMPAGNER

59. PARCOURS
enjeu #4
RELIER LES MONDES PHYSIQUES ET DIGITAUX

60. PARCOURS
enjeu #4
Ce qui se transforme dans nos parcours aujourd’hui,
ce n’est pas seulement la présence plus forte et multiple du mobile….

61. PARCOURS
enjeu #4
C’est surtout le rôle central de celui ci, concentrateur de la majorité de nos
interactions, relais de certains points de contacts, pont avec d’autres.

62. Uber sur TimeOut… Uber sur CityMapper… TripAdvisor sur Accorhotels
Les parcours
enjeu #4
Demain les parcours devront dont se rationaliser,
les frontières s’estomper

63. Les parcours
enjeu #4
Source : Ralph Ammer - https://blog.prototypr.io/make-me-think-90b46aa50513
Notre rôle sera, designer et ingénieurs, de gérer cette nouvelle complexité
pour qu’elle ne soit pas subie par l’utilisateur

64. PERSPECTIVES
ET DEMAIN, MOBILE CENTRIC ?
4

65. Le mobile est au coeur du
CONNECT EVERYTHING
CONCENTRATEUR
Il est l’interface du monde
connecté (IOT)
CAPTEUR
Il donne accès aux nouvelles
réalités : virtuelles
et augmentées
INTELLIGENT
il porte le déploiement massif
des IA grâce à sa puissance et
ses chipsets dédiées

66. Au travers d’HomeKit entend
agréger l’IOT et annonce avoir
plus de 50 marques compatibles
CONCENTRATEUR
Connect everything

67. Un form-factor qui évolue peu mais des nouveaux capteurs qui viennent
changer la donne. Bienvenue dans l’ère des réalités Mixtes
NOUVELLES REALITÉS
Connect everything

68. Une intelligence artificielle qui rend le smartphone
vraiment intelligent. Il devient l’assistant de nos vies
INTELLIGENCE
Connect everything

69. Joël De Rosnay
Avec la 5G, la promesse du tout
connecté devient une réalité. L’impact
sur notre environnement sera majeure.
Voiture autonome, IOT, nouveaux
contenus les domaines d’applications
sont multiples
RÉSEAU
Connect everything

70. Le mobile est au coeur de
LA TRANSFORMATION DES
ORGANISATIONS
MIEUX PRODUIRE
Il impose des méthodes plus
agiles qui s’adaptent plus
facilement aux changements
CASSER LES SILOS
Il force les organisations à
passer à plus de transversalité
et de pluridisciplinarité
S’ADAPTER
Uberisation, la destruction
créatrice domine l’époque et
génère le besoin d’adaptation

71. Le mobile impose le temps réel aux
organisations. C’est une nouvelle façon de faire
qui s’impose. Il faut faire vite et mieux que les
autres. Etre Agile. Il faut tester et prendre des
risques. L’utilisateur reprend le pouvoir
MIEUX PRODUIRE
Les organisations

72. Des organisations sans frontières. Le mobile a fait
converger les mondes physiques et digitaux. Il ne s’agit
plus d’opposer les mondes mais de les fédérer. Les
équipes sont pluridisciplinaires, les frontières
disparaissent
CASSER LES SILOS
Les organisations

73. Pour éviter d’être disruptée, l’entreprise doit s’adapter.
Bouger plus vite, développer l’intelligence collective,
devenir elle aussi responsive
S’ADAPTER
Les organisations

74. Le mobile est au coeur de
TRANSFORMATIONS
HUMAINES
Pour la nouvelle génération le smartphone est en fait une prothèse
symbiotique, une extension de leurs sens, de leurs membres et des fonctions
de leurs corps. Il impose des méthodes plus agiles qui s’adaptent plus
facilement aux changements
Joël De Rosnay

75. Nomophobie
No mobile phobia
Le mobile génère de nouveaux
comportements. De nouvelles
addictions apparaissent. Il prend le
pas sur nos vies
MAITRISER
Human centric

76. Respecter la vie privée
Le mobile est le premier contributeur
de data de nos vides digitales. Les
enjeux de « privacy » sont au coeur des
stratégies. Privacy By design, RGPD, les
réglementations se mettent en place
DECONNECTER
Human centric

77. Le mobile porte
LA RÉVOLUTION DIGITALE
Mobile first ne veut pas dire mobile à tout prix. Comme toute
révolution il faut la comprendre et savoir en tirer ce qu’il y a de
meilleur

78. RÉACTUALISER LES 4 VALEURS CARDINALES DE PLATON
TEMPÉRANCE
La technologie sous
le joug de l’homme
et non l’inverse
COURAGE
Le courage de
vaincre la peur et
plonger dans le
monde des NBIC
JUSTICE
Mettre les NBIC au
service de tous en
évitant leurs travers
PRÉCAUTION
Anticiper pour être
capable d’affronter
les dangers
potentiels

79. Mobile First + Human Centric

80. Fondateur & associé
v.pillet@useradgents.com
Vincent Pillet
Responsable UX & Service Design
a.moumni@useradgents.com
Asma Moumni 8 rue de la Rochefoucauld - 75009 Paris
01 77 75 65 90
www.useradgents.com
Merci !

81. LES CONFERENCES
#1 - Le parcours client du voyageur, tendances & opportunités
Romain Mouchet (Directeur Département Tourisme & Transport – Google France)
#2 - Mobile First ?
Vincent Pillet (Directeur Associé - UserADgents) & Asma Moumni (Responsable UX – UserADgents)
#3 - Les Progressives Web Apps
Virginie Clève (Experte en Stratégie Numérique – Largow)
#4 - Recherche vocale et expérience utilisateur
Olivier Andrieu (Consultant SEO – Abondance)
#5 - La recommandation personnalisée, nouveau levier de croissance ?
François Ziserman (CEO – Target2Sell)
#6 - Chatbots, révolution ou arnaque ?
Thomas Gouritin (Consultant en Communication Digitale – Tomg Conseils)
#7 - Comment la Blockchain pourrait redéfinir l'industrie du voyage ?
Une journée organisée par