SlideShare ist ein Scribd-Unternehmen logo
1 von 26
Usabilité m-commerce Journée internationale de l’usabilité 12/11/2009
Sommaire Présentation Backelite Contexte Internet mobile : le décollage enfin Contexte Internet mobile : un univers technologique fragmenté L'usabilité : une nécessité dans un univers contraint Etat de l'art Les bonnes pratiques (do's & don'ts) Etude de cas 2 Usabilité & m-commerce
Présentation Backelite
Backelite en quelques mots Créée en 2006, Backelite est une société de conseil et de développement de services multimédia mobiles : Conseil en marketing, ergonomie et technologies mobile Intégrateur de solutions mobiles à forte valeur ajoutée  Backelite est leader en France dans le développement d’applications iPhone pour les marques (15 réalisations – 4 M de téléchargements) Une équipe de 40 personnes pour accompagner nos clients 4 Usabilité & m-commerce
Le contexte Internet mobile
Contexte Internet mobile : enfin le décollage ! 6 Usabilité & m-commerce Un marché en pleine (ré)volution Nouvelles technos ….  nouveaux acteurs …     nouveaux contenus Quelques chiffres… Audience sur les sites hébergés par Backelite X 3 en 18 mois Téléchargements sur l’AppStore 2mds en 16 mois UtilisateursFacebook mobile 65 millions Ratio visitesmobiles / web  Jusque 15% des connexions
Contexte Internet mobile : un univers hyper fragmenté  7 Usabilité & m-commerce
L’usabilité au service d’un environnement contraint Tailles d'écrans et résolutions très variables (1 à 3) Modèles tactile ou non, avec ou sans clavier Navigation portrait et/ou paysage Débits très variables (entre le métro et chez soi avec son wifi : de 30 kbit/s à plusieurs Mbit/s) Fonctionnalités avancées variables (GPS, TV etc.) Performance des navigateurs variables Technologies embarquées propres à chaque OS 8 Usabilité & m-commerce
Ergonomie mobile: la quadrature du cercle ? 9 Usabilité & m-commerce
Parc mobile du minitel à l’ordinateur dernier cri 10 Usabilité & m-commerce
Le paradoxe de l’usabilité pour l’Internet mobile 11 Usabilité & m-commerce
Le paradoxe de l’usabilité pour l’Internet mobile (suite) 12 Usabilité & m-commerce
Usabilité et mobilité : quelques questions clés avant de démarrer un projet Qui cible-t-on ? Le service doit-il marcher sur tous les mobiles ? Quel est le parc mobile de mes clients? Quel intérêt pour l'utilisateur d'accéder en mobilité ? Quels  services sont pragmatiques en mobilité? Quel lien entre le site web et la version mobile ? Mes équipes ont-elles une connaissance de l'internet mobile Une approche "image", "efficacité"; premium ou low cost ? Quel est le mobile du patron de la société ? 13 Usabilité & m-commerce
Bonnes pratique / application au m-commerce  Ne pas negliger l'existant  conserver les mêmes codes graphiques, naming… Personnalisation naturelle du service l'application mobile doit coller aux usages de son utilisateur, mise en avant des historiques, propositions de cross selling. Utiliser les outils adequats  Les demandes dans un parcours de m-commerce sont variées (adresse, numéro de téléphone, mail, taille……) pour une meilleure usabilité utiliser les outils adéquat ( geoloc, différents claviers….) Gérer les temps de chargement et les cas d'erreurs Quantifier graphiquement les temps de chargements Indiquer clairement les erreurs et ce qui est attendu Baliser la navigation Afficher clairement l’étape (fil d’ariane, retours) Respecter les bonnes pratiques "classiques" : taille police, transition etc. 14 Usabilité & m-commerce
15 Usabilité & m-commerce Basic Advanced Touch - Utilisation des capacités techniques de chaque mobile, notamment du JS (limitation écrans/ temps chargement) - Poids des pages 10 à 30 ko DO’s
TEXTE DON't 16 Usabilité & m-commerce DO's Texte 13 pxinterligne 18px Texte 10 pxinterligne 12px
TEXTE 17 Usabilité & m-commerce Gestion de la taille du texte
Gestion des effets 18 Usabilité & m-commerce Gestion des effets
UN BESOIN = UN CLAVIER Les différents claviers de l'iPhone 19 Usabilité & m-commerce
20 Usabilité & m-commerce Accompagnement de l’utilisateur
Etude de cas
Use case 1 : vsc mobile L'existant 22 Usabilité & m-commerce
Reprise des codes, personnalisation et services pragmatiques 23 Usabilité & m-commerce
Navigation simplifiée 24 Usabilité & m-commerce
25 Usabilité & m-commerce
Merci 26 Usabilité & m-commerce

Weitere ähnliche Inhalte

Andere mochten auch

Graphinfl 121126142407-phpapp02
Graphinfl 121126142407-phpapp02Graphinfl 121126142407-phpapp02
Graphinfl 121126142407-phpapp02
abdelghani ....
 
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALECONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
Olga Bobrovnikova
 
A antartida
A antartidaA antartida
A antartida
JNR
 

Andere mochten auch (20)

Graphinfl 121126142407-phpapp02
Graphinfl 121126142407-phpapp02Graphinfl 121126142407-phpapp02
Graphinfl 121126142407-phpapp02
 
Cartilla Parte 2
Cartilla Parte 2Cartilla Parte 2
Cartilla Parte 2
 
La Veille De Né Kid Du 28.01.09 : les marques et la musique
La Veille De Né Kid Du 28.01.09 : les marques et la musiqueLa Veille De Né Kid Du 28.01.09 : les marques et la musique
La Veille De Né Kid Du 28.01.09 : les marques et la musique
 
Nostalgie
NostalgieNostalgie
Nostalgie
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
 
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALECONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
 
Programme Mémoriales 2016
Programme Mémoriales 2016Programme Mémoriales 2016
Programme Mémoriales 2016
 
Asistencia Tecnica
Asistencia TecnicaAsistencia Tecnica
Asistencia Tecnica
 
La veille de né kid du 20.10.2010 : le mondial de l'automobile
La veille de né kid du 20.10.2010 : le mondial de l'automobileLa veille de né kid du 20.10.2010 : le mondial de l'automobile
La veille de né kid du 20.10.2010 : le mondial de l'automobile
 
extWPS - WPS para gvSIG
extWPS - WPS para gvSIGextWPS - WPS para gvSIG
extWPS - WPS para gvSIG
 
Poires
PoiresPoires
Poires
 
CCI France - Grande consultation des entrepreneurs - Vague 1 - Par OpinionWay...
CCI France - Grande consultation des entrepreneurs - Vague 1 - Par OpinionWay...CCI France - Grande consultation des entrepreneurs - Vague 1 - Par OpinionWay...
CCI France - Grande consultation des entrepreneurs - Vague 1 - Par OpinionWay...
 
Enigmes
EnigmesEnigmes
Enigmes
 
A antartida
A antartidaA antartida
A antartida
 
Drontal plus
Drontal plusDrontal plus
Drontal plus
 
Etude de cas e-réputation - Groupe 3
Etude de cas e-réputation - Groupe 3Etude de cas e-réputation - Groupe 3
Etude de cas e-réputation - Groupe 3
 
Les Community manager ou les référenceurs
Les Community manager ou les référenceurs Les Community manager ou les référenceurs
Les Community manager ou les référenceurs
 
Exposición de Módulo electrifácil
Exposición de Módulo electrifácilExposición de Módulo electrifácil
Exposición de Módulo electrifácil
 
Ip1559
Ip1559Ip1559
Ip1559
 
Petit Déjeuner Cabinet CAA sur "la RSE : comment mobiliser les managers ?"
Petit Déjeuner Cabinet CAA sur "la RSE : comment mobiliser les managers ?"Petit Déjeuner Cabinet CAA sur "la RSE : comment mobiliser les managers ?"
Petit Déjeuner Cabinet CAA sur "la RSE : comment mobiliser les managers ?"
 

Ähnlich wie WUD 2009 Paris : Utilisabilité et m-commerce

La mobilité : Cas d'usage
La mobilité : Cas d'usageLa mobilité : Cas d'usage
La mobilité : Cas d'usage
Vincent Perrin
 
Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobile
Bastien Serafin
 
webconférence sept 2012- mobile et communication digitale
webconférence sept 2012- mobile et communication digitalewebconférence sept 2012- mobile et communication digitale
webconférence sept 2012- mobile et communication digitale
LACT
 
Presentation M Commerce Slideshare
Presentation M Commerce SlidesharePresentation M Commerce Slideshare
Presentation M Commerce Slideshare
SimaWay Simaway
 

Ähnlich wie WUD 2009 Paris : Utilisabilité et m-commerce (20)

Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
Conférence Web Mobile - CCI Avignon
Conférence Web Mobile - CCI AvignonConférence Web Mobile - CCI Avignon
Conférence Web Mobile - CCI Avignon
 
Be api - Web Mobile
Be api - Web MobileBe api - Web Mobile
Be api - Web Mobile
 
La mobilité : Cas d'usage
La mobilité : Cas d'usageLa mobilité : Cas d'usage
La mobilité : Cas d'usage
 
Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobile
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
webconférence sept 2012- mobile et communication digitale
webconférence sept 2012- mobile et communication digitalewebconférence sept 2012- mobile et communication digitale
webconférence sept 2012- mobile et communication digitale
 
Marketing mobile
Marketing mobileMarketing mobile
Marketing mobile
 
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoL’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
 
2011 03 17 Soyez présents sur le mobile de vos clients by competitic
2011 03 17 Soyez présents sur le mobile de vos clients by competitic2011 03 17 Soyez présents sur le mobile de vos clients by competitic
2011 03 17 Soyez présents sur le mobile de vos clients by competitic
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettes
 
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clients
 
Presentation User ADgents
Presentation User ADgentsPresentation User ADgents
Presentation User ADgents
 
Conference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ KreactiveConference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ Kreactive
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
 
Presentation M Commerce Slideshare
Presentation M Commerce SlidesharePresentation M Commerce Slideshare
Presentation M Commerce Slideshare
 

Mehr von Frederic CAVAZZA

Mehr von Frederic CAVAZZA (20)

Panorama des médias sociaux 2020
Panorama des médias sociaux 2020Panorama des médias sociaux 2020
Panorama des médias sociaux 2020
 
Enjeux et pratiques du marketing automation
Enjeux et pratiques du marketing automationEnjeux et pratiques du marketing automation
Enjeux et pratiques du marketing automation
 
Causes et enjeux du populisme numérique
Causes et enjeux du populisme numériqueCauses et enjeux du populisme numérique
Causes et enjeux du populisme numérique
 
N'ayez pas peur de l'IA, mais de votre retard en data
N'ayez pas peur de l'IA, mais de votre retard en dataN'ayez pas peur de l'IA, mais de votre retard en data
N'ayez pas peur de l'IA, mais de votre retard en data
 
Outils et pratiques du data marketeur
Outils et pratiques du data marketeurOutils et pratiques du data marketeur
Outils et pratiques du data marketeur
 
Panorama de l'intelligence artificielle en France
Panorama de l'intelligence artificielle en FrancePanorama de l'intelligence artificielle en France
Panorama de l'intelligence artificielle en France
 
Intelligence artificielle et quatrième révolution industrielle
Intelligence artificielle et quatrième révolution industrielleIntelligence artificielle et quatrième révolution industrielle
Intelligence artificielle et quatrième révolution industrielle
 
Comment l'intelligence artificielle change nos société
Comment l'intelligence artificielle change nos sociétéComment l'intelligence artificielle change nos société
Comment l'intelligence artificielle change nos société
 
Transformation numérique et 4e révolution industrielle
Transformation numérique et 4e révolution industrielleTransformation numérique et 4e révolution industrielle
Transformation numérique et 4e révolution industrielle
 
Connectin lorient-retrospective-2018
Connectin lorient-retrospective-2018Connectin lorient-retrospective-2018
Connectin lorient-retrospective-2018
 
Tendances e-commerce 2018
Tendances e-commerce 2018Tendances e-commerce 2018
Tendances e-commerce 2018
 
Panorama des médias sociaux 2017
Panorama des médias sociaux 2017Panorama des médias sociaux 2017
Panorama des médias sociaux 2017
 
L'impact du numérique sur les 10 dernières années
L'impact du numérique sur les 10 dernières annéesL'impact du numérique sur les 10 dernières années
L'impact du numérique sur les 10 dernières années
 
Intelligence artificielle : l'avénement du marketing augmenté
Intelligence artificielle : l'avénement du marketing augmentéIntelligence artificielle : l'avénement du marketing augmenté
Intelligence artificielle : l'avénement du marketing augmenté
 
Stratégies d’influence sociale et digitale
Stratégies d’influence sociale et digitaleStratégies d’influence sociale et digitale
Stratégies d’influence sociale et digitale
 
Intelligence artificielle, l'avènement du marketing augmenté
Intelligence artificielle, l'avènement du marketing augmentéIntelligence artificielle, l'avènement du marketing augmenté
Intelligence artificielle, l'avènement du marketing augmenté
 
Progressive Web App, la clé de votre écosystème mobile
Progressive Web App, la clé de votre écosystème mobileProgressive Web App, la clé de votre écosystème mobile
Progressive Web App, la clé de votre écosystème mobile
 
L'impact des smartphones sur le parcours client
L'impact des smartphones sur le parcours clientL'impact des smartphones sur le parcours client
L'impact des smartphones sur le parcours client
 
Retrospective numérique 2016 - Tendances 2017
Retrospective numérique 2016 - Tendances 2017Retrospective numérique 2016 - Tendances 2017
Retrospective numérique 2016 - Tendances 2017
 
Génèse et panorama des chatbot
Génèse et panorama des chatbotGénèse et panorama des chatbot
Génèse et panorama des chatbot
 

WUD 2009 Paris : Utilisabilité et m-commerce

  • 1. Usabilité m-commerce Journée internationale de l’usabilité 12/11/2009
  • 2. Sommaire Présentation Backelite Contexte Internet mobile : le décollage enfin Contexte Internet mobile : un univers technologique fragmenté L'usabilité : une nécessité dans un univers contraint Etat de l'art Les bonnes pratiques (do's & don'ts) Etude de cas 2 Usabilité & m-commerce
  • 4. Backelite en quelques mots Créée en 2006, Backelite est une société de conseil et de développement de services multimédia mobiles : Conseil en marketing, ergonomie et technologies mobile Intégrateur de solutions mobiles à forte valeur ajoutée Backelite est leader en France dans le développement d’applications iPhone pour les marques (15 réalisations – 4 M de téléchargements) Une équipe de 40 personnes pour accompagner nos clients 4 Usabilité & m-commerce
  • 6. Contexte Internet mobile : enfin le décollage ! 6 Usabilité & m-commerce Un marché en pleine (ré)volution Nouvelles technos …. nouveaux acteurs … nouveaux contenus Quelques chiffres… Audience sur les sites hébergés par Backelite X 3 en 18 mois Téléchargements sur l’AppStore 2mds en 16 mois UtilisateursFacebook mobile 65 millions Ratio visitesmobiles / web Jusque 15% des connexions
  • 7. Contexte Internet mobile : un univers hyper fragmenté 7 Usabilité & m-commerce
  • 8. L’usabilité au service d’un environnement contraint Tailles d'écrans et résolutions très variables (1 à 3) Modèles tactile ou non, avec ou sans clavier Navigation portrait et/ou paysage Débits très variables (entre le métro et chez soi avec son wifi : de 30 kbit/s à plusieurs Mbit/s) Fonctionnalités avancées variables (GPS, TV etc.) Performance des navigateurs variables Technologies embarquées propres à chaque OS 8 Usabilité & m-commerce
  • 9. Ergonomie mobile: la quadrature du cercle ? 9 Usabilité & m-commerce
  • 10. Parc mobile du minitel à l’ordinateur dernier cri 10 Usabilité & m-commerce
  • 11. Le paradoxe de l’usabilité pour l’Internet mobile 11 Usabilité & m-commerce
  • 12. Le paradoxe de l’usabilité pour l’Internet mobile (suite) 12 Usabilité & m-commerce
  • 13. Usabilité et mobilité : quelques questions clés avant de démarrer un projet Qui cible-t-on ? Le service doit-il marcher sur tous les mobiles ? Quel est le parc mobile de mes clients? Quel intérêt pour l'utilisateur d'accéder en mobilité ? Quels services sont pragmatiques en mobilité? Quel lien entre le site web et la version mobile ? Mes équipes ont-elles une connaissance de l'internet mobile Une approche "image", "efficacité"; premium ou low cost ? Quel est le mobile du patron de la société ? 13 Usabilité & m-commerce
  • 14. Bonnes pratique / application au m-commerce Ne pas negliger l'existant conserver les mêmes codes graphiques, naming… Personnalisation naturelle du service l'application mobile doit coller aux usages de son utilisateur, mise en avant des historiques, propositions de cross selling. Utiliser les outils adequats Les demandes dans un parcours de m-commerce sont variées (adresse, numéro de téléphone, mail, taille……) pour une meilleure usabilité utiliser les outils adéquat ( geoloc, différents claviers….) Gérer les temps de chargement et les cas d'erreurs Quantifier graphiquement les temps de chargements Indiquer clairement les erreurs et ce qui est attendu Baliser la navigation Afficher clairement l’étape (fil d’ariane, retours) Respecter les bonnes pratiques "classiques" : taille police, transition etc. 14 Usabilité & m-commerce
  • 15. 15 Usabilité & m-commerce Basic Advanced Touch - Utilisation des capacités techniques de chaque mobile, notamment du JS (limitation écrans/ temps chargement) - Poids des pages 10 à 30 ko DO’s
  • 16. TEXTE DON't 16 Usabilité & m-commerce DO's Texte 13 pxinterligne 18px Texte 10 pxinterligne 12px
  • 17. TEXTE 17 Usabilité & m-commerce Gestion de la taille du texte
  • 18. Gestion des effets 18 Usabilité & m-commerce Gestion des effets
  • 19. UN BESOIN = UN CLAVIER Les différents claviers de l'iPhone 19 Usabilité & m-commerce
  • 20. 20 Usabilité & m-commerce Accompagnement de l’utilisateur
  • 22. Use case 1 : vsc mobile L'existant 22 Usabilité & m-commerce
  • 23. Reprise des codes, personnalisation et services pragmatiques 23 Usabilité & m-commerce
  • 24. Navigation simplifiée 24 Usabilité & m-commerce
  • 25. 25 Usabilité & m-commerce
  • 26. Merci 26 Usabilité & m-commerce

Hinweis der Redaktion

  1. HTML 5 le futur du web mobile pourquoi?
  2. Les effets doivent faciliter la perception dans l’avancée d’un parcours client.Respecter le sens de navigationNe pas utiliser d’effet ostentatoire à mauvais escientUtilisation des effets pour l’ajout au panier
  3. Lors d’un parcours client le mobinaute doit remplir de nombreuses informations.Proposer le meilleur outils pour faciliter la saisie d’infos.Ici les différents claviers de l’iPhoneAutres exemples les différentes roulettes ou la geolocalisation pour une adresse.
  4. Reprise de la charte graphique et des noms utilisés sur le site webPersonnalisation du servicePragmatisme des services proposés (première version avec promo + mis en avant)
  5. AutocomplessionCarte de France cliquable avec les 15 gares les plus demandéesProposition d’un calendrier (zone tactile adaptée)
  6. Les actions pour avancer sont mise en avantPaiement faciliter. Mais on ne conserve pas les données bancairesConfirmation immediate par mail