1.
Comment construire une
expérience optimale pour le
m-commerce?
Audrey CHATEL

2.
DEMARCHE
UX MOBILE

3.
UX-Mobile.fr
518 Tweets
@uxmobilefr
1 Page facebook
26 Livres 158 Apps
telechargées
7
interviews
réalisées
1 scoopit!
+ de 150 articles
7
LA DEMARCHE UX MOBILE
Méthodologie
22 articles
16 boards Pinterest

4.
UX = UI
Expérience
Utilisateur
Interface
Utilisateur
LA DEMARCHE UX MOBILE
Mythe

5.
LA DEMARCHE UX MOBILE
Définition de l’expérience utilisateur
L’expérience utilisateur est un processus psychologique, elle est
propre à chaque individu et forcément subjective et dépend
également du contexte

6.
LA DEMARCHE UX MOBILE
Les éléments de l’UX
L’UX est constitué d’un vaste ensemble d’éléments et de
connaissances (contenu, visuel, typographie, fonctionnalités,
l’architecture de l’information, temps de réponse…)

7.
Eric Schmidt
PDG de Google de 2001 à 2011
«Mobile has won »

8.
« En 2020, le m-commerce devrait peser autant que l’e-
commerce sur terminaux fixes au niveau mondial. Entre 25% et
30% des clients d’Amazon n’achètent d’ores et déjà que sur
mobile » Source Mobile Marketing Association France – 2015
LA DEMARCHE UX MOBILE
L’explosion du Mobile

9.
Alors que la part du mobile dans l’e-commerce atteindra 40% à la
fin de cette année, la France ne devrait pas dépasser 28%,
estime Criteo
LA DEMARCHE UX MOBILE
L’explosion du Mobile
des sites du CAC
40 ne sont pas
mobile friendly
1/3

10.
LA DEMARCHE UX MOBILE
Les acteurs disruptifs

11.
LA DEMARCHE UX MOBILE
Les acteurs disruptifs

12.
Source :
http://blogs.adobe.com/digitaleurope/fr/personalisation-
fr/infographie-tendances-digitales/

13.
71% des utilisateurs
attendent le même
temps de chargement
d'un site Web mobile
et un site internet 74% attendent moins
de 5 secondes pour le
chargement d’une
page (60% attendent
moins de 3 secondes!)
30% ne reviennent pas
sur le site après une
expérience utilisateur
décevante
LA DEMARCHE UX MOBILE
Attentes des utilisateurs

14.
77.7%
51.5%
-2.5%
Customer Experience Leaders
S1P 500 Index
Customer Experience Laggards
LA DEMARCHE UX MOBILE
Impact de l’expérience utilisateur
Source: Watermark Consulting 2014
Les entreprises ayant
une bonne expérience
utilisateur surperforme
comparé aux autres
selon l’Index Forrester
Customer Experience
CXi
Cumul de 7 années de rendement
d’actions

15.
Conception
VALIDATION
DU BOSS
PANIQUE
• SPECIFICATIONS
• DEVELOPPEMEN
T
• RECETTE
• LANCEMENT
J’AIME
PAS
J’AIME
LA DEMARCHE UX MOBILE
La méthode classique

16.
Incertitude Certitude
Recherche Création/idéation Production
Source: Représentation de Damien Newman - Central
LA DEMARCHE UX MOBILE
La méthode UX

17.
DECOUVERTE
IDEATION
CONCEPTION
REALISATION
LA DEMARCHE UX MOBILE
La méthode UX

18.
DECOUVERTE

19.
VOUS VOS UTILISATEURS=
DECOUVERTE & OBSERVATIONS
Mythe

20.
Ken Becker
Senior UX Architect and Usability Specialist
« L’utilisateur n’est PAS une forme
de vie inférieure »

21.
DECOUVERTE & OBSERVATIONS
A travers les données disponibles en entreprise
LES STATISTIQUES / ÉTUDES DE
VOTRE ENTREPRISE
LES ÉTUDES

22.
DECOUVERTE & OBSERVATIONS
A travers les données du web
LES SITES COLLABORATIFS
TIERS
LES RÉSEAUX SOCIAUX
LES FORUMS SPÉCIALISÉS

23.
DECOUVERTE & OBSERVATIONS
A travers le Benchmarking
PINTEREST
APPANNIE
BEHANCE

24.
DECOUVERTE & OBSERVATIONS
Au travers des interviews
Transcription &
AnalyseSélection
• Expert
• Utilisateurs
• Service
Client
Entretien
Semi directif ou libre

25.
Henri Ford
« Si j’avais demandé aux gens
ce qu’ils voulaient, ils m’auraient
répondu des chevaux plus
rapides »

26.
DECOUVERTE & OBSERVATIONS
Shadowing

27.
DECOUVERTE & OBSERVATIONS
Eye Tracking

28.
IDEATION

29.
RECHERCHE D’IDEES
Brainstorming
C La critique est abolie
Q La quantité est privilégiée
F Les idées farfelues
D Démultiplier les idées

30.
RECHERCHE D’IDEES
Le Six-to-One
L’objectif est de générer, développer, affiner et choisir des
idées

31.
RECHERCHE D’IDEES
Value proposition Canvas
Trouver les propositions de valeurs grâce à la
compréhension des désirs et des points de crises de vos
clients

32.
RECHERCHE D’IDEES
Les Personas
Création de personnages fictifs qui représentent de façon
crédible un groupe d’utilisateurs. Pour définir les besoins
et les aspirations de vos utilisateurs

33.
 Zone Profil
 Éléments de la personnalité
 Expertise:
 A Faire / A ne pas Faire
 Référents & Influences
 Appareils et plates-formes
 Produit / service utilisées en
relation avec le domaine
 Traits de personnalités
 Citations clés
 Expérience
 Objectifs
 Marque-relation
 Type d'utilisateur
RECHERCHE D’IDEES
Les Personas

34.
RECHERCHE D’IDEES
Représentation des Personas

35.
RECHERCHE D’IDEES
Le contenu Mobile
Karen MC Grane
Architecte de l’information, auteur Stratégie de Contenu
Mobile
« Vous avez un site web ? Alors vous
devez migrer votre contenu sur les
appareils mobiles. Point barre »

36.
RECHERCHE D’IDEES
La création des parcours clients
Imager pour mieux structurer
Les ambitions - Les activités - Les anxiétés

37.
RECHERCHE D’IDEES
Les Parcours Clients
Identifier les points de contact engagés avec votre marque
et en déceler les faiblesses

38.
RECHERCHE D’IDEES
Les Parcours Clients
Imaginer les parcours clients futurs

39.
CONCEPTION

40.
CONCEPTION
Comprendre le device
Pour comprendre un iPhone, un Android ou un Windows
Phone, vous devez l’avoir en main, et l’expérimenter
personnellement.

41.
CONCEPTION
Comprendre le device
Exemple Paypal

42.
CONCEPTION
Les interactions gestuelles
Considérer l'ergonomie, les gestes, les transitions et les
modèles d'interaction enfin, spécifiquement mobile.

43.
CONCEPTION
L’interface iOS
Les 3 grands principes de conception iOS qui s’oriente
vers le flat design Déférence – Clarté - Profondeur

44.
CONCEPTION
L’interface Android Lollipop
Pas de transparence, couleurs vives, animations et relief
Unification des interfaces cross-platform

45.
CONCEPTION
La conception mobile
L’univers Modern UI est reconnaissable par la typographie,
la mouvement, la mise en page de type grille et la
simplicité.

46.
CONCEPTION
L’adaptivité
En combinant les capacités du smartphone nous
comprenons le contexte d’utilisation et ainsi prévoir ce que
qu’il souhaite à un moment donné.
.

47.
CONCEPTION
La conception mobile

48.
REALISATION
Le prototype papier
Une façon ludique de prototyper à petit budget et de
manière rapide

49.
CONCEPTION
Les wireframes
Ils sont les représentations visuelles de l’interface mobile

50.
CONCEPTION
Les maquettes graphiques
Réaliser des maquettes graphiques c’est avant tout
apporter une identité visuelle au wireframe.

51.
CONCEPTION
Les différents logiciels

52.
« Testing one user early in the project is better than testing 50 near the end » -Steve Krug-
des problèmes d’UX peuvent
être résolus en testant le service
sur 5 utilisateurs
85%
CONCEPTION
Les tests utilisateurs

53.
1 - RECRUTER DES
UTILISATEURS
2 - ÉTABLIR UN GUIDE DE TEST
3 - CONDUIRE LES TESTS
3 - ANALYSER LES RÉSULTATS
CONCEPTION
Les tests utilisateurs

54.
REALISATION

55.
REALISATION
La fragmentation mobile
L’univers mobile est de plus en plus fragmenté

56.
REALISATION
Le Responsive Design
Le Responsive Design est aujourd'hui une solution
incontournable si l'on veut conserver sa présence sur
internet et ce, quel que soit le support de navigation
emprunté.

57.
REALISATION
Application native VS Application Web / Hybride
VS
Vos choix de développement impacteront l’expérience
utilisateur si vous avez le budget adéquat préférez le
développement natif

58.
REALISATION
La méthode Agile
L’optimisation constante à travers un processus de
développement itératif et incrémental.

59.
EVALUATION
Evaluer l’expérience utilisateur
Le HEART Framework vous aide à mesurer la qualité de
l’expérience utilisateur.

60.
CONCLUSION
S’adapter à l’environnement Mobile First
Expérience utilisateur mobile nécessitera d’adapter le SI,
les outils, les hommes…

61.
RETROUVONS NOUS SURIE D’EN SAVOIR PLUS ?