CONCEVOIR UNE EXPÉRIENCE UTILISATEURS MULTICANAUX 
POURQUOI ET COMMENT ? 
axel.johnston@akiani.fr 
Axel JOHNSTON 
Designer...
• Sur 6,8 Milliards d’habitants, combien ont accès à un 
axel.johnston@akiani.fr 
téléphone mobile ? 
• Sur 6,8 Milliards ...
Pour commencer 
axel.johnston@akiani.fr / 3
axel.johnston@akiani.fr 
Le poids du m-commerce 
Flickr / afagen
401 429 
axel.johnston@akiani.fr / 5 
131 
442 
11 
124 
1200 
1000 
800 
600 
400 
200 
0 
2010 2013 
Tablette 
Mobile 
P...
Une croissance exponentielle 
axel.johnston@akiani.fr / 6
Des essais chez Amazon ont montré 
qu’une augmentation du temps de chargement de 
100 ms leur faisait perdre 1% du volume ...
24% 
Développement de la part mobile 
2010 2011 
axel.johnston@akiani.fr / 8 
6% 
14% 
Proportion des achats depuis un mob...
axel.johnston@akiani.fr / 9 
-4.30% 
48.80% 
Sites web Applications 
Fréquentation des sites web et applications – Dec 13 ...
On compte en moyenne 
41 
téléchargements d’appli par smartphone 
http://www.websiteoptimization.com/speed/tweak/psycholog...
Le phénomène cross-device 
axel.johnston@akiani.fr 
Flickr / alexerde
axel.johnston@akiani.fr 
Flickr / streamishmc 
98 % utilisent 
+ de 1 device par jour
90 % des tâches sont commencées sur un 
écran puis terminées sur un autre 
Une expérience multi device … 
axel.johnston@ak...
66% utilisent 2 
appareils ou plus 
en même temps 
axel.johnston@akiani.fr 
…. multi-tâche … 
/ 14 
81% 
lorsque c’est 
de...
5,4x 
Mono device Cross device Mono device Cross device 
… avec un impact sur l’engagement utilisateur 
axel.johnston@akia...
Chez Ebay les visiteurs multi-devices 
achètent 2x plus que les autres utilisateurs 
http://www.websiteoptimization.com/sp...
Concevoir une expérience utilisateur multi-canal 
04/09/2014 axel.johnston@akiani.fr / 17 
Flickr / yourdon
Concevoir une expérience utilisateur multi-canal 
axel.johnston@akiani.fr 
• Complémentarité 
– Comment ne pas faire doubl...
Concevoir une expérience utilisateur multi-canal 
axel.johnston@akiani.fr 
• Complémentarité 
– Comment ne pas faire doubl...
Complémentarité 
axel.johnston@akiani.fr / 20
Concevoir une expérience utilisateur multi-canal 
axel.johnston@akiani.fr 
• Complémentarité 
– Comment ne pas faire doubl...
Continuité 
axel.johnston@akiani.fr / 22
Concevoir une expérience utilisateur multi-canal 
axel.johnston@akiani.fr 
• Complémentarité 
– Comment ne pas faire doubl...
Desktop Tablette Smartphone Smartwatch 
Géolocalisation - + +++ +++ 
Accéléromètre ++ +++ +++ 
Gyroscope ++ +++ +++ 
Carte...
axel.johnston@akiani.fr 
• Complémentarité 
– Comment ne pas faire doublon et apporter une nouvelle expérience 
encore plu...
Zone de confort : 
7/8 mm 
– Environ 40 px 
Contexte d’utilisation : Spécificité des 
interactions 
axel.johnston@akiani.f...
Contexte d’utilisation : Spécificité des 
interactions 
axel.johnston@akiani.fr / 27 
04/09/2014
Contexte d’utilisation : Spécificité des 
interactions 
axel.johnston@akiani.fr / 28 
04/09/2014
Contexte d’utilisation : Spécificité des 
interactions 
axel.johnston@akiani.fr / 29 
Source : « The new multi-screen 
wor...
axel.johnston@akiani.fr / 30
Contexte d’utilisation : Interruption de tâches 
axel.johnston@akiani.fr / 31
axel.johnston@akiani.fr 
https://dribbble.com/shots/527510-another-app?list=searches&offset=9
Contexte d’utilisation : respect des guidelines 
axel.johnston@akiani.fr 
https://dribbble.com/shots/527510-another-app?li...
Google : Don’t use bottom tab bars 
axel.johnston@akiani.fr 
/ 34
Google : Don’t hardcode links to other apps 
axel.johnston@akiani.fr 
/ 35
Google : don’t use labeled back buttons 
axel.johnston@akiani.fr 
/ 36
Google : don’t use right-pointing carets on line items 
axel.johnston@akiani.fr 
/ 37
Google : don’t use right-pointing carets on line items 
axel.johnston@akiani.fr 
/ 38
axel.johnston@akiani.fr 
Smartwatch 
/ 39 
Info coup d’oeil Interactions 
minimales
Avant de conclure 
axel.johnston@akiani.fr / 40
Avant de conclure 
axel.johnston@akiani.fr / 41
Logo google : temps fou pour un élément passant sur X device 
axel.johnston@akiani.fr / 42
axel.johnston@akiani.fr / 43 
1.4 
19 
20 
18 
16 
14 
12 
10 
8 
6 
4 
2 
0 
2013 2018 
Avant de conclure
Prévision d’évolution de marché pour les objets connectés 
de 2013 à 2018 (Milliards de dollars US) 
axel.johnston@akiani....
• Pensez complémentarité, continuité, fonctionnalités et contexte 
• Remettez vous en question et n’oubliez pas que vos ut...
• Si vous faites un site internet, prévoyez le « tablet friendly » 
Pour conclure 
axel.johnston@akiani.fr / 46 
– Pas de ...
axel.johnston@akiani.fr 
MERCI DE VOTRE ATTENTION 
DES QUESTIONS ? 
Axel JOHNSTON 
Designer d’expérience utilisateur 
Cofo...
Prochain SlideShare
Chargement dans…5
×

Comment concevoir une experience utilisateur cross canal

896 vues

Publié le

Plus de 90% des tâches sont commencées sur un support (smartphone, tablette, desktop) puis terminées sur un autre. Concevoir une expérience utilisateur ne doit plus être mono-device. La démultiplication des produits nous impose à raisonner multi support

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
896
Sur SlideShare
0
Issues des intégrations
0
Intégrations
158
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Ce qu’il faut savoir ce que depuis l’année dernière nous passons plus de temps sur nos appareils mobiles plutôt que sur nos ordinateurs.

    Mobile 340%
    Tablette 1100%
  • 74,45 Milliards

    740 Millions d$
  • Google
  • La complémentarité, les jeux vidéo l’ont bien assimilé. La majorité des blockbuster du monde du jeux vidéo s’y sont tous mis, l’application « compagnon ». On a vu au début de la présentation que 81% des utilisateurs utilisent leurs appareils mobiles en même temps que la télévision, il était donc indispensable pour les éditeurs de proposer une nouvelle experience sur ces appareils. On a vu apparaître en premier lieu, la carte du monde dans le quel le joueur évolue. Après tout c’était assez simple, elle existant en tant que fascicule dans la boite avant. Mais ils sont aller encore plus loin en proposant des fonctionnalités supplémentaires (chat avec les autres joueurs, commerce, …). L’interface n’est plus seulement là pour dupliquer l’affichage mais pour se rendre complémentaire et améliorer l’expérience du joueur.
  • La continuité : on l’a bien vu avec le phénomène du cross device et la démultiplication des objets connectés, vos utilisateurs n’utilisent pas seulement un appareil mais une multitude. Il faut que vous pensiez à votre service comme un media que vos utilisateurs utiliserons à différents moments de la journée sur differents devices. Alors ca ne veut pas dire que nous n’utilisons l’ipad que sur notre canapé le soir en rentrant, mais que votre service doit être à même de répondre à ces sollicitations multiples.

    Nous parlions de jeux vidéo juste avant, justement ils ont encore bien compris l’importance de ce second piller. Ces applications compagnons peuvent continuer à vivre même si la console est éteinte, permettant au joueur de continuer à jouer à son jeu préféré sur le trajet du travail (même si ce ne sont que des fonctionnalités secondaires).
  • Lorsqu’on parle d’intéractions, la premiere chose qui vient à l’esprit est bien entendu les moyens d’interactions : souris pour l’ordinateur, tactile pour les autres.
    En parlant de tactile, la zone de confort pour qu’un doigt puisse pointer la zone souhaitée doit être de 7 à 8 mm. Ce qui correspond entre 39 et 44 pixels. Du coup lorsque vous designez pour des applications mobiles, n’oubliez pas de prévoir des zones d’interactions de 40px minimum.
    Vous pouvez également appliquer cette règle à vos interfaces web, ce qui vous permet de vous assurer une bonne réaction lorsqu’elle est consultée via un navigateur web d’une tablette.
  • Parler du tablet friendly
  • Adapter les interactions c’est également réfléchir à leur contexte d’utilisation. Plus le device est mobile, plus l’interaction doit être rapide. Le schéma ici vous montre la moyenne de temps que nous passons sur notre objets connectés. Vous devez garder en tête votre utilisateur évolue dans un contexte bien précis en fonction de son appareil. Vous imaginez bien que c’est assez rare d’utiliser son smartphone bien appuyé sur une table sans bouger (sauf si vous êtes en cours…) : vous l’utilisez plutôt pendant que vous marchez, avec une main, tout en faisant attention à ne pas vous faire ecraser sur la route ou attraper votre tram. Vos interactions doivent être rapides et bien adaptées au contexte.


    Vérifier chiffres
  • Selon vous, qu’est-ce qui ne convient pas dans cette interface ?
  • Selon vous, qu’est-ce qui ne convient pas dans cette interface ?



    Alors, un autre élément très important lorsque nous concevons une interface cross canal, ce sont les guidelines des constructeurs. Ces guidelines n’ont pas que pour objectif de faire plaisir au constructeur (D’ailleurs petite anecdote, vous serez obligez de respecter à la lettre ces guidelines lorsque vous travaillerez sur des interfaces à très grosse visibilité sur le store. En effet pour des interfaces très populaires, les constructeurs vous imposent de même si c’est une obligation que ces derniers inscrivent pour être par exemple mis en avant sur le store).
  • Alors avant de conclure, j’imagine que vous connaissez tous ces deux boutons. Il faut savoir que Facebook a passé plus de 280 heures de travail pour arriver à la version de droite, c’est à dire plus de 35 jours.
    Et si ils ont passé autant de temps que ca, c’est parce qu’ils avaient besoin de s’assurer que ce composant s’affiche bien dans tous les cas, tous les devices. Il faut savoir que un des composants graphique le plus vu au monde.
    Alors gardez en tête qu’un composant même anodin, peut se retrouver sur de très nombreuses résolutions pour énormément de cas d’affichage.


    22 Milliards de fois / jours sur plus de 8 millions de site web
  • Vous voyez la différence ?
    Non ? Et bien figurez vous que google a travaillé son logo pour que l’affichage soit plus net sur les interfaces mobiles : le changement ? 1 pixel de décallage pour le G et pour le L
  • Comment concevoir une experience utilisateur cross canal

    1. 1. CONCEVOIR UNE EXPÉRIENCE UTILISATEURS MULTICANAUX POURQUOI ET COMMENT ? axel.johnston@akiani.fr Axel JOHNSTON Designer d’expérience utilisateur Cofondateur d’Akiani axel.johnston@akiani.fr www.akiani.fr
    2. 2. • Sur 6,8 Milliards d’habitants, combien ont accès à un axel.johnston@akiani.fr téléphone mobile ? • Sur 6,8 Milliards d’habitants, combien ont accès à des toilettes saines ? • Sur 100 transactions commerciales, combien ont commencé sur un appareil pour terminer sur un autre ? • En moyenne, de combien d’objets connectés disposons-nous ? • Dans 6 ans, de combien d’objets connectés disposerons-nous ? • Dans combien de temps existera-t-il plus de tablettes que de PC ? Pour commencer / 2 6 milliards 4,5 Milliards 90 3 6 maintenant
    3. 3. Pour commencer axel.johnston@akiani.fr / 3
    4. 4. axel.johnston@akiani.fr Le poids du m-commerce Flickr / afagen
    5. 5. 401 429 axel.johnston@akiani.fr / 5 131 442 11 124 1200 1000 800 600 400 200 0 2010 2013 Tablette Mobile PC Temps passé (US) par plateforme digitale (Milliards de minutes) comScore Media Metrix Multi-Platform, US, Decembre 2013
    6. 6. Une croissance exponentielle axel.johnston@akiani.fr / 6
    7. 7. Des essais chez Amazon ont montré qu’une augmentation du temps de chargement de 100 ms leur faisait perdre 1% du volume de vente http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 04/09/2014 axel.johnston@akiani.fr / 7
    8. 8. 24% Développement de la part mobile 2010 2011 axel.johnston@akiani.fr / 8 6% 14% Proportion des achats depuis un mobile lors du « Black Friday » américain 40% 2012 2013
    9. 9. axel.johnston@akiani.fr / 9 -4.30% 48.80% Sites web Applications Fréquentation des sites web et applications – Dec 13 vs Dec 12 Etude réalisée du 1er janvier 2012 au 31 Décembre 2013 sur un périmètre de 2 933 sites web et 263 applications auditées par AT Internet
    10. 10. On compte en moyenne 41 téléchargements d’appli par smartphone http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 04/09/2014 axel.johnston@akiani.fr / 10
    11. 11. Le phénomène cross-device axel.johnston@akiani.fr Flickr / alexerde
    12. 12. axel.johnston@akiani.fr Flickr / streamishmc 98 % utilisent + de 1 device par jour
    13. 13. 90 % des tâches sont commencées sur un écran puis terminées sur un autre Une expérience multi device … axel.johnston@akiani.fr / 13
    14. 14. 66% utilisent 2 appareils ou plus en même temps axel.johnston@akiani.fr …. multi-tâche … / 14 81% lorsque c’est devant une télévision
    15. 15. 5,4x Mono device Cross device Mono device Cross device … avec un impact sur l’engagement utilisateur axel.johnston@akiani.fr / 15 1x 3,4x 1x Taux d’engagement moyen Taux de conversion moyen
    16. 16. Chez Ebay les visiteurs multi-devices achètent 2x plus que les autres utilisateurs http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 04/09/2014 axel.johnston@akiani.fr / 16
    17. 17. Concevoir une expérience utilisateur multi-canal 04/09/2014 axel.johnston@akiani.fr / 17 Flickr / yourdon
    18. 18. Concevoir une expérience utilisateur multi-canal axel.johnston@akiani.fr • Complémentarité – Comment ne pas faire doublon et apporter une nouvelle expérience encore plus innovante pour mes utilisateurs ? • Continuité – Comment créer une expérience « sans couture » ? • Fonctionnalités – Quelles sont les fonctionnalités propres au device qui pourraient apporter une valeur ajoutée ? • Le contexte d’utilisation – Quel est le contexte d’utilisation ? • Spécificité des interactions • Lieux, interruption de tâches et multi-tâches • Respect des usages de la plateforme (Guidelines) / 18
    19. 19. Concevoir une expérience utilisateur multi-canal axel.johnston@akiani.fr • Complémentarité – Comment ne pas faire doublon et apporter une nouvelle expérience encore plus innovante pour mes utilisateurs ? • Continuité – Comment créer une expérience « sans couture » ? • Fonctionnalités – Quelles sont les fonctionnalités propres au device qui pourraient apporter une valeur ajoutée ? • Le contexte d’utilisation – Quel est le contexte d’utilisation ? • Spécificité des interactions • Lieux, interruption de tâches et multi-tâches • Respect des usages de la plateforme (Guidelines) / 19
    20. 20. Complémentarité axel.johnston@akiani.fr / 20
    21. 21. Concevoir une expérience utilisateur multi-canal axel.johnston@akiani.fr • Complémentarité – Comment ne pas faire doublon et apporter une nouvelle expérience encore plus innovante pour mes utilisateurs ? • Continuité – Comment créer une expérience « sans couture » ? • Fonctionnalités – Quelles sont les fonctionnalités propres au device qui pourraient apporter une valeur ajoutée ? • Le contexte d’utilisation – Quel est le contexte d’utilisation ? • Spécificité des interactions • Lieux, interruption de tâches et multi-tâches • Respect des usages de la plateforme (Guidelines) / 21
    22. 22. Continuité axel.johnston@akiani.fr / 22
    23. 23. Concevoir une expérience utilisateur multi-canal axel.johnston@akiani.fr • Complémentarité – Comment ne pas faire doublon et apporter une nouvelle expérience encore plus innovante pour mes utilisateurs ? • Continuité – Comment créer une expérience « sans couture » ? • Fonctionnalités – Quelles sont les fonctionnalités propres au device qui pourraient apporter une valeur ajoutée ? • Le contexte d’utilisation – Quel est le contexte d’utilisation ? • Spécificité des interactions • Lieux, interruption de tâches et multi-tâches • Respect des usages de la plateforme (Guidelines) / 23
    24. 24. Desktop Tablette Smartphone Smartwatch Géolocalisation - + +++ +++ Accéléromètre ++ +++ +++ Gyroscope ++ +++ +++ Carte graphique +++ ++ + --- Surface +++ ++ + - d’affichage Interaction Souris / clavier Tactile Tactile / voix Tactile / voix axel.johnston@akiani.fr Fonctionnalités / 24
    25. 25. axel.johnston@akiani.fr • Complémentarité – Comment ne pas faire doublon et apporter une nouvelle expérience encore plus innovante pour mes utilisateurs ? • Continuité – Comment créer une expérience « sans couture » ? • Fonctionnalités – Quelles sont les fonctionnalités propres au device qui pourraient apporter une valeur ajoutée ? • Le contexte d’utilisation – Quel est le contexte d’utilisation ? • Spécificité des interactions • Lieux, interruption de tâches et multi-tâches • Respect des usages de la plateforme (Guidelines) Contexte d’utilisation / 25
    26. 26. Zone de confort : 7/8 mm – Environ 40 px Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 26
    27. 27. Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 27 04/09/2014
    28. 28. Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 28 04/09/2014
    29. 29. Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 29 Source : « The new multi-screen world » (Google, Ipsos, and Sterling)
    30. 30. axel.johnston@akiani.fr / 30
    31. 31. Contexte d’utilisation : Interruption de tâches axel.johnston@akiani.fr / 31
    32. 32. axel.johnston@akiani.fr https://dribbble.com/shots/527510-another-app?list=searches&offset=9
    33. 33. Contexte d’utilisation : respect des guidelines axel.johnston@akiani.fr https://dribbble.com/shots/527510-another-app?list=searches&offset=9
    34. 34. Google : Don’t use bottom tab bars axel.johnston@akiani.fr / 34
    35. 35. Google : Don’t hardcode links to other apps axel.johnston@akiani.fr / 35
    36. 36. Google : don’t use labeled back buttons axel.johnston@akiani.fr / 36
    37. 37. Google : don’t use right-pointing carets on line items axel.johnston@akiani.fr / 37
    38. 38. Google : don’t use right-pointing carets on line items axel.johnston@akiani.fr / 38
    39. 39. axel.johnston@akiani.fr Smartwatch / 39 Info coup d’oeil Interactions minimales
    40. 40. Avant de conclure axel.johnston@akiani.fr / 40
    41. 41. Avant de conclure axel.johnston@akiani.fr / 41
    42. 42. Logo google : temps fou pour un élément passant sur X device axel.johnston@akiani.fr / 42
    43. 43. axel.johnston@akiani.fr / 43 1.4 19 20 18 16 14 12 10 8 6 4 2 0 2013 2018 Avant de conclure
    44. 44. Prévision d’évolution de marché pour les objets connectés de 2013 à 2018 (Milliards de dollars US) axel.johnston@akiani.fr / 44 1.4 19 20 18 16 14 12 10 8 6 4 2 0 2013 2018 Avant de conclure
    45. 45. • Pensez complémentarité, continuité, fonctionnalités et contexte • Remettez vous en question et n’oubliez pas que vos utilisateurs utilisent votre service sur tous leurs objets connectés Pour conclure • Pensez déclinaisons sur multiples supports axel.johnston@akiani.fr / 45 • Respectez les usages • Respectez les guidelines constructeurs • Définissez vos cas d’utilisation par device
    46. 46. • Si vous faites un site internet, prévoyez le « tablet friendly » Pour conclure axel.johnston@akiani.fr / 46 – Pas de survol – 40px • Ayez un coup d’avance, n’hésitez pas à investir des nouveaux devices – L’intertie en entreprise est longue et vous ne savez pas quel sera le paysage digital dans 1 ans • Faites du mobile first ou smartwatch first • Designez à taille réelle – Faire des sketch d’interface sur papier ou imprimez les à échelle réelle pour vous rendre compte • TESTEZ !! – (gorilla test, tests utilisateurs, …)
    47. 47. axel.johnston@akiani.fr MERCI DE VOTRE ATTENTION DES QUESTIONS ? Axel JOHNSTON Designer d’expérience utilisateur Cofondateur d’Akiani axel.johnston@akiani.fr www.akiani.fr

    ×