Téléchargé parAudrey CHATEL
UX Mobile - Experience Utilisateur Mobile
Le document aborde la construction d'une expérience optimale pour le m-commerce en mettant l'accent sur l'importance de l'expérience utilisateur (UX) adaptée aux mobiles. Il souligne la nécessité d'adopter des méthodes telles que le responsive design et l'utilisation des personas, tout en tenant compte des attentes utilisateurs et des délais de chargement. Enfin, il évoque les défis actuels liés à la fragmentation mobile et s'oriente vers une optimisation continue à travers des tests utilisateurs et des méthodes agiles.
UX Mobile - Experience Utilisateur Mobile
- 1. Comment construire une expérienceoptimale pour le m-commerce? Audrey CHATEL
- 2.
- 3. UX-Mobile.fr 518 Tweets @uxmobilefr 1 Pagefacebook 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 LADEMARCHE UX MOBILE Mythe
- 5. LA DEMARCHE UXMOBILE 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 UXMOBILE 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 deGoogle 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 lapart 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 UXMOBILE Les acteurs disruptifs
- 11. LA DEMARCHE UXMOBILE Les acteurs disruptifs
- 12.
- 13. 71% des utilisateurs attendentle 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 S1P500 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éationProduction Source: Représentation de Damien Newman - Central LA DEMARCHE UX MOBILE La méthode UX
- 17. DECOUVERTE IDEATION CONCEPTION REALISATION LA DEMARCHE UXMOBILE La méthode UX
- 18.
- 19. VOUS VOS UTILISATEURS= DECOUVERTE& OBSERVATIONS Mythe
- 20. Ken Becker Senior UXArchitect and Usability Specialist « L’utilisateur n’est PAS une forme de vie inférieure »
- 21. DECOUVERTE & OBSERVATIONS Atravers les données disponibles en entreprise LES STATISTIQUES / ÉTUDES DE VOTRE ENTREPRISE LES ÉTUDES
- 22. DECOUVERTE & OBSERVATIONS Atravers les données du web LES SITES COLLABORATIFS TIERS LES RÉSEAUX SOCIAUX LES FORUMS SPÉCIALISÉS
- 23. DECOUVERTE & OBSERVATIONS Atravers le Benchmarking PINTEREST APPANNIE BEHANCE
- 24. DECOUVERTE & OBSERVATIONS Autravers des interviews Transcription & AnalyseSélection • Expert • Utilisateurs • Service Client Entretien Semi directif ou libre
- 25. Henri Ford « Sij’avais demandé aux gens ce qu’ils voulaient, ils m’auraient répondu des chevaux plus rapides »
- 26.
- 27. DECOUVERTE & OBSERVATIONS EyeTracking
- 28.
- 29. RECHERCHE D’IDEES Brainstorming C Lacritique 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’objectifest de générer, développer, affiner et choisir des idées
- 31. RECHERCHE D’IDEES Value propositionCanvas 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éationde 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.
- 35. RECHERCHE D’IDEES Le contenuMobile 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éationdes parcours clients Imager pour mieux structurer Les ambitions - Les activités - Les anxiétés
- 37. RECHERCHE D’IDEES Les ParcoursClients Identifier les points de contact engagés avec votre marque et en déceler les faiblesses
- 38. RECHERCHE D’IDEES Les ParcoursClients Imaginer les parcours clients futurs
- 39.
- 40. CONCEPTION Comprendre le device Pourcomprendre un iPhone, un Android ou un Windows Phone, vous devez l’avoir en main, et l’expérimenter personnellement.
- 41.
- 42. CONCEPTION Les interactions gestuelles Considérerl'ergonomie, les gestes, les transitions et les modèles d'interaction enfin, spécifiquement mobile.
- 43. CONCEPTION L’interface iOS Les 3grands principes de conception iOS qui s’oriente vers le flat design Déférence – Clarté - Profondeur
- 44. CONCEPTION L’interface Android Lollipop Pasde transparence, couleurs vives, animations et relief Unification des interfaces cross-platform
- 45. CONCEPTION La conception mobile L’universModern UI est reconnaissable par la typographie, la mouvement, la mise en page de type grille et la simplicité.
- 46. CONCEPTION L’adaptivité En combinant lescapacités du smartphone nous comprenons le contexte d’utilisation et ainsi prévoir ce que qu’il souhaite à un moment donné. .
- 47.
- 48. REALISATION Le prototype papier Unefaçon ludique de prototyper à petit budget et de manière rapide
- 49. CONCEPTION Les wireframes Ils sontles représentations visuelles de l’interface mobile
- 50. CONCEPTION Les maquettes graphiques Réaliserdes maquettes graphiques c’est avant tout apporter une identité visuelle au wireframe.
- 51.
- 52. « Testing oneuser 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 - RECRUTERDES UTILISATEURS 2 - ÉTABLIR UN GUIDE DE TEST 3 - CONDUIRE LES TESTS 3 - ANALYSER LES RÉSULTATS CONCEPTION Les tests utilisateurs
- 54.
- 55. REALISATION La fragmentation mobile L’universmobile est de plus en plus fragmenté
- 56. REALISATION Le Responsive Design LeResponsive 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 VSApplication 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’optimisationconstante à travers un processus de développement itératif et incrémental.
- 59. EVALUATION Evaluer l’expérience utilisateur LeHEART Framework vous aide à mesurer la qualité de l’expérience utilisateur.
- 60. CONCLUSION S’adapter à l’environnementMobile First Expérience utilisateur mobile nécessitera d’adapter le SI, les outils, les hommes…
- 61. RETROUVONS NOUS SURIED’EN SAVOIR PLUS ?
Notes de l'éditeur
- #6 Pour comprendre le principe de l’expérience utilisateur, il faut également comprendre ce que l’on entend par expérience. Stéphane Vial, dans son ouvrage Court traité du design, le définit ainsi : « C’est un design qui se vit, qui s’éprouve, s’expérimente. L’utilisateur en ressent immédiatement l’effet parce que son expérience s’en trouve instantanément transformée, améliorée, augmentée. » Quant à Sylvie Daumal, dans son ouvrage, Design d’expérience utilisateur, la définit ainsi : « C’est la perception et le ressenti d’un individu qui utilise un système dans le contexte d’une interaction humaine-machine » Dans ces deux définitions on comprend que l’expérience est un processus psychologique, qu’elle est propre à chaque individu et forcément subjective. Nous n’éprouvons pas le même ressenti face aux évènements, aux émotions. Ce qui peut sembler aisé pour l’un peut être extrêmement complexe pour d’autres. Ainsi le contenu (textuel ou visuel), le design de l’interface, la manipulation du système (au doigt, à la voix, à l’espace) ne sont évidemment pas compris, ressentis ni maitrisé de la même façon. L’expérience n’est pas figée dans le temps, elle se transforme.
- #7 Pour comprendre le principe de l’expérience utilisateur, il faut également comprendre ce que l’on entend par expérience. Stéphane Vial, dans son ouvrage Court traité du design, le définit ainsi : « C’est un design qui se vit, qui s’éprouve, s’expérimente. L’utilisateur en ressent immédiatement l’effet parce que son expérience s’en trouve instantanément transformée, améliorée, augmentée. » Quant à Sylvie Daumal, dans son ouvrage, Design d’expérience utilisateur, la définit ainsi : « C’est la perception et le ressenti d’un individu qui utilise un système dans le contexte d’une interaction humaine-machine » Dans ces deux définitions on comprend que l’expérience est un processus psychologique, qu’elle est propre à chaque individu et forcément subjective. Nous n’éprouvons pas le même ressenti face aux évènements, aux émotions. Ce qui peut sembler aisé pour l’un peut être extrêmement complexe pour d’autres. Ainsi le contenu (textuel ou visuel), le design de l’interface, la manipulation du système (au doigt, à la voix, à l’espace) ne sont évidemment pas compris, ressentis ni maitrisé de la même façon. L’expérience n’est pas figée dans le temps, elle se transforme.
- #8 Comme le disait Eric Schmidt, le président de Google, sur Bloomberg TV début 2014 « Mobile has won » « Ask a Billionaire : Eric Schmidt’s 2014 Predictions »
- #10 En cette début d’année 2015, le m-commerce représente un tiers des transactions en ligne et Criteo prévoit 40% d’ici la fin de l’année. Comparé aux autres les prévisions pour la France sont de 28% assez éloigné de notre homologue anglais qui devrait représenter 45%. Pour la France c’est l’iPad qui booste les transactions avec 9% des transactions e-commerce et 3% de taux de conversion. Une exception française puisque la plupart des transactions des pays étrangers se font sur smartphone.
- #12 En 2007, alors que se tient une conférence majeure à San Francisco et que tous les hôtels sont surbookés, les fondateurs d’Airbnb ont l’idée de mettre à disposition 3 lits dans leur salon. De là, ils créent un site internet où sont répertoriés quelques appartements de particuliers, photos à l’appui. Alors que le concept stagne pendant 2 ans, ils réalisent que les photos sont la cause principale de leur échec. Une fois ce «détail» gommé, c’est le début du succès. plus de 300 000 logements dans 34 000 villes et 192 pays Fin 2008, en voyage à Paris pour la conférence du Web (LeWeb), Garrett Camp et Travis Kalanick débattent jusqu’à des heures tardives des problèmes de taxi à San Francisco (et dans le monde entier certainement). De là est née l’application Uber, le service de «limousines noires» (voitures de standing) pouvant être commandées à l’aide de son smartphone et dont la géolocalisation permet au chauffeur de venir vous chercher à l’endroit exact où vous vous trouvez. 45 pays disposent du service Uber 50,000 conducteurs embauchés chaque mois 2 Uber double son chiffre d'affaires tous les six mois
- #17 JOCE Gagner en certitude > une modification est moins couteuse en début de projet Ne pas avoir peur de se remettre en question en phase de recherche et de création Représentation actuelle d’un projet linéaire
- #19 Prise de connaissance de l’environnement, du projet, du métier, des acteurs du projet, de la concurrence… Comprendre l’historique et les objectifs de l’entreprise Comprendre les attentes, les souhaits des clients et utilisateurs
- #27 il existe toujours un décalage entre ce que les utilisateurs déclarent et ce qu’ils font vraiment. C’est d’autant plus avéré avec le mobile qui est par essence utilisé dans un contexte en mobilité.
- #29 Générer un maximum d’idées et de concepts sur la base des axes définis dans la phase précédente. Sortir du cadre. Dessiner / tangibiliser les idées
- #30 C comme censure : aucune idée ne doit être censurée ou auto-censurée. Les critiques sont interdites entre les participants. A la formulation "votre idée n'est pas réalisable", l'animateur doit substituer la question "comment faire pour la réaliser ?". Q comme quantité : il s'agit de produire beaucoup d'idées. Une véritable ruée vers l'or. Il faut creuser, piocher pour découvrir des pépites. F comme fantaisie : l'originalité et la singularité sont recherchées. La fantaisie se manifeste plus facilement dans un groupe où l'ambiance rime avec jeux, plaisir, humour, complicité. D comme démultiplier : la dynamique créative se fait surtout par association d'idées en rebondissant sur les idées des autres.
- #31 . Chaque participant reçoit un modèle de six formes simples, appelé le « six-up », dans lequel il doit dessiner six versions de l’interface dans un temps limité (dix à quinze minutes)
- #32 Une proposition de valeur est l'endroit où l’offre produit de votre entreprise recoupe avec les désirs de votre client. Il est l'ajustement magique entre ce que vous faites et pourquoi les gens achètent. Votre proposition de valeur est le point de crise entre la stratégie de l'entreprise et la stratégie de marque.
- #33 Les personas est une technique très répandue pour présenter les résultats des recherches utilisateurs, l’objectif est de créer des personnages fictifs qui représentent de façon crédible un groupe d’utilisateurs. Le concept a été inventé par Angus Jenkinson au début des années 90, dans son Beyond Segmentation lui même déjà introduit les concepts de "moment of truth" et "touchpoints" dans la gestion de la relation client. Puis, c’est Alan Cooper qu’i l’a rendu populaire grâce à son livre The Inmates are Running the Asylum. http://www.centreforintegratedmarketing.com/gfx/documents/beyond_segmentation.pdf
- #37 Le parcours client regroupe les différents processus et interactions entre un client et une entreprise, depuis le moment où un besoin apparaît, jusqu’à l’achat et l’utilisation du produit/service.
- #44 Déférence, l’interface n’entre jamais en compétition avec l’utilisateur, elle permet aux utilisateurs de comprendre, d’interagir avec le contenu Clarté, le texte est lisible dans toutes les tailles, les icônes sont précises et claires, l’habillage est subtile et approprié, enfin l’accent sera mis sur la fonctionnalité Profondeur, les couches visuelles et les mouvements réalistes participeront au plaisir (de l’expérience utilisateur) et à la compréhension des utilisateurs
- #45 Des couleurs vives pour maximiser le contraste et limiter la pollution visuelle Des unités d’information sous forme de cartes (ou “widgets”) Des ombres portées générées en temps réel, pour donner de la profondeur Des animations et transitions très poussées pour donner plus de sens à chacune des actions
- #47 Comprendre le comportement de l’utilisateur et connecter cela avec des API permet de comprendre et de nous adapter à ses besoins. La plupart du temps, utiliser une source de données n’est pas suffisant; il faut combiner les technologies (connectivité réseau, le comportement de l’utilisateur et les données des capteurs). C’est la seule façon de comprendre le contexte
- #58 Dans cet environnement complexe de développement il est parfois difficile de faire un choix sur les coûts de développement à utiliser. Les choses se feront à travers la détermination de quelques facteurs fondamentaux et la façon dont l’expérience utilisateur sera affectée. Dans le cas où les facteurs tels que la disponibilité de l’application sans connexion Internet, ou les notifications et les ressources du terminal sont importantes et vous permettrons de vous diriger vers les applications natives comme étant le choix le plus approprié.
- #59 Une enquête de 2014 du « Standish Group » fait le constat suivant : « 41 % des projets informatiques sont arrêtés en cours de route, 55 % sont fortement challengés; seuls 4 % des projets peuvent être considérés comme des succès. ». Les méthodes agiles partent du principe que spécifier et planifier dans les détails l’intégralité d’un produit avant de le développer est contre productif. Cela revient à planifier dans les détails un trajet « Paris – Narbonne » en voiture par les petites routes. Spécifiant chaque villes et villages traversés, l’heure de passage associée, chaque rue empruntée dans les agglomérations, les litres d’essence consommés, les kilomètres parcourus, etc. Les imprévus ne manqueront pas d’arriver : embouteillages, déviations, travaux, sens de circulation inversés, voire la panne. Rendant votre planification et vos spécifications très vite obsolètes. Combien de temps aurez vous passé à planifier cet itinéraire, comment réagirez vous face à vos frustrations de ne pas pouvoir appliquer votre plan à la lettre ?
- #60 Hapiness : Mesure des attitudes des utilisateurs, souvent recueillies par enquête. Par exemple : la satisfaction, la perception d’utilisation, le net promoter score Engagement : Mesure le niveau d’implication des utilisateurs. Par exemple : Nombre de visites par utilisateur et par semaine, nombre de connexion par utilisateur et par jour, nombre de partage sur les réseaux sociaux. Adoption : Mesure le gain de nouveaux utilisateurs d'un produit ou d'une fonctionnalité. Par exemple : les mises à jour de la dernière version, les nouveaux comptes créés, les achats effectués par les nouveaux utilisateurs. Rétention : Le taux calculant le nombre de visiteurs récurrents. Par exemple : le nombre d'utilisateurs actifs restants au fil du temps, le taux de renouvellement, les achats répétés. Task Success : Mesure l’efficience, l'efficacité et le taux d'erreur. Par exemple : le succès du résultat de recherche, le temps de télécharger une photo, la création avec succès d'un profil complet.
- #61 Mais imaginer des solutions mobiles est finalement facile, mais parfois difficile à réaliser. Car les entreprises, ses processus et ses systèmes d’information n’ont pas été conçus pour le mobile. Les technologies employées sont trop rigide, leurs processus trop linéaire, et l’organisation trop cloisonnée. L’attente des clients dans en mobilité perturbe massivement ces façons bien intentionnés mais figées de faire des affaires.