Comment concevoir une experience utilisateur cross canal
•Transferir como PPTX, PDF•
0 gostou•1,082 visualizações
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
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Comment concevoir une experience utilisateur cross canal
Semelhante a Comment concevoir une experience utilisateur cross canal (20)
Mais de Akiani
Mais de Akiani (9)
Comment concevoir une experience utilisateur cross canal
- 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. • 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
- 4. axel.johnston@akiani.fr Le poids du m-commerce Flickr / afagen
- 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. Une croissance exponentielle axel.johnston@akiani.fr / 6
- 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. 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. 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. 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. Le phénomène cross-device axel.johnston@akiani.fr Flickr / alexerde
- 12. axel.johnston@akiani.fr Flickr / streamishmc 98 % utilisent + de 1 device par jour
- 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. 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. 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. 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. Concevoir une expérience utilisateur multi-canal 04/09/2014 axel.johnston@akiani.fr / 17 Flickr / yourdon
- 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. 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
- 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
- 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. 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. 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. Zone de confort : 7/8 mm – Environ 40 px Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 26
- 27. Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 27 04/09/2014
- 28. Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 28 04/09/2014
- 29. Contexte d’utilisation : Spécificité des interactions axel.johnston@akiani.fr / 29 Source : « The new multi-screen world » (Google, Ipsos, and Sterling)
- 31. Contexte d’utilisation : Interruption de tâches axel.johnston@akiani.fr / 31
- 33. Contexte d’utilisation : respect des guidelines axel.johnston@akiani.fr https://dribbble.com/shots/527510-another-app?list=searches&offset=9
- 34. Google : Don’t use bottom tab bars axel.johnston@akiani.fr / 34
- 35. Google : Don’t hardcode links to other apps axel.johnston@akiani.fr / 35
- 36. Google : don’t use labeled back buttons axel.johnston@akiani.fr / 36
- 37. Google : don’t use right-pointing carets on line items axel.johnston@akiani.fr / 37
- 38. Google : don’t use right-pointing carets on line items axel.johnston@akiani.fr / 38
- 39. axel.johnston@akiani.fr Smartwatch / 39 Info coup d’oeil Interactions minimales
- 40. Avant de conclure axel.johnston@akiani.fr / 40
- 41. Avant de conclure axel.johnston@akiani.fr / 41
- 42. Logo google : temps fou pour un élément passant sur X device axel.johnston@akiani.fr / 42
- 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. 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. • 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. • 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. 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
Notas do Editor
- 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$
- 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