Expérience Web Mobile PRSQC

713 vues

Publié le

Expérience Web Mobile – Pourquoi et comment?

Présenté à la conférence Printemps des Réseaux Sociaux de Québec

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Expérience Web Mobile PRSQC

  1. 1. Expérience Web Mobile – Pourquoi et comment? Sébastien GirouxChef de la direction technologique www.ekomobi.com twitter.com/sebastiengiroux 1
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. Différence entre site mobile et application 7
  8. 8. 8
  9. 9. Pourquoi? 9
  10. 10. La mobilitéAu Québec (source CEFRIO)• 30% des adultes possèdent untéléphone intelligent (40% dans latranche 18-44 ans)• 20% des adultes dans la tranche18-44 ans prévoient faire l’achatd’un téléphone intelligentAux USA (source Google)• 50% des adultes possèdent untéléphone intelligent 10
  11. 11. L’influence des téléphones intelligentsInterrogés sur la dernièrefois quils avaient eu recoursà leur téléphone mobile enmagasin,37 % des participantsont décidé de ne pasacheter le produit du tout,35 % lont acheté dansle magasin,19 % lont acheté enligne et8 % dans un autremagasin. 11
  12. 12. Recherches via mobileAu Canada10% de toutes les recherchesGoogle sont faites à partird’un mobile40 % des recherches localessont effectuées sur mobile60% de ces recherchesmènent à un appel ou unevisite *Nectarios Economakis (Responsable du développement des agences chez Google) 12
  13. 13. En une semaine81% vont sur Internet77% utilisent un moteur de recherche48% regardent des vidéos63% utilisent les médias sociaux (FB + Twitter)40 % naviguent en regardant la télé 13
  14. 14. Contexte d’utilisation 14
  15. 15. Je suis local 15
  16. 16. Je m’ennuie 16
  17. 17. J’ai une micro-tâche à effectuer 17
  18. 18. Tablette… mobile ou pas ? 18
  19. 19. Contexte d’utilisation» Heure de la journée » 84% à la maison » 64% durant la journée de travail » 47% dans la voiture» Présence latente, usage ponctuel» L’utilisateur se déplace 19
  20. 20. Expérience différente entre les différents types d’appareils» Considérez la différence entre une TV, un laptop, une tablette ou un téléphone intelligent » Position d’utilisation de l’utilisateur » À 3m de l’écran, debout, couché… » Méthode d’entrée de données » Au touché, souris, manette… » Grosseur moyenne de l’écran » Sur un mur, des genoux, dans la paume d’une main 20
  21. 21. Comment? 21
  22. 22. Site mobile ou application mobile 22
  23. 23. Site mobile ou application mobile 23
  24. 24. Rapidité• Prioriser le contenu susceptible d’être utilisé• Compresser les images et le texte• Minimiser le nombre de requêtes au serveur 24
  25. 25. Proximité• Mettre adresse & numéro de téléphone• Inclure des cartes et utiliser la fonction GPS des téléphones 25
  26. 26. Design• Écran beaucoup plus petit• Pas de zoom• Utilisation de contrastes entre le fond et le texte 26
  27. 27. Accessibilité• Pas de Flash!• HTML5 pour animation et/ou interactivité• S’adapter aux changements d’orientation 27
  28. 28. Interaction avec les pouces• Gros boutons centrés• Ajout de padding aux boutons et checkboxes 28
  29. 29. Les gestes 29
  30. 30. Simplification de la navigation• Pas de rollovers ou de menus déroulants• Mettre en évidence les boutons « retour » et « accueil »• Boîte de recherche sur les sites complexes• Ajout de padding aux boutons et checkboxes 30
  31. 31. Aider à la conversion• Garder les formulaires simples• Réduire le nombre d’étapes requises pour compléter une transaction• Simplifier l’entrée de données en proposant des listes et menus déroulants• Utiliser la fonction « Click-to-Call » pour les numéros de téléphone 31
  32. 32. Types de clavier 32
  33. 33. Types de clavier 33
  34. 34. Redirection• Diriger automatiquement les visiteurs mobiles vers votre site mobile• Offrir l’option de revenir vers la version standard, mais doit être facile de revenir vers la version mobile• iPad != mobile 34
  35. 35. Philosophie « Mobile 1st »» Créer l’expérience web mobile en premier et ensuite l’adapter pour les autres plateformes » Permet de prendre avantage du marché lucratif des mobinautes » Vous force à focuser et prioriser l’information que vous allez montrer à l’internaute » Vous permet de livrer une expérience innovante en utilisant les fonctionnalités natives aux mobiles 35
  36. 36. Design Web adaptable à toutes les résolutions 36
  37. 37. Comment les gens trouveront- ils mon site mobile? 37
  38. 38. Vous avez déjà une présence mobile» 10% à 20% des recherches Google sont faites à partir d’un mobile 38
  39. 39. Courriels» 1 courriel sur 5 est ouvert sur un téléphone intelligent 39
  40. 40. 40
  41. 41. Réseaux sociaux» 45% des utilisateurs de Twitter y accède avec leur téléphone intelligent 41
  42. 42. Applications 42
  43. 43. Codes QR• Toujours diriger vos campagnes marketing utilisant un code QR vers un site mobile• Expliquer aux gens comment utiliser un tel code 43
  44. 44. Communication en champ proche (NFC)» 3 modes de fonctionnement » Émulation de carte » « peer to peer » » Mode lecteur Permet de lire des informations en plaçant son mobile devant une étiquette électronique 44
  45. 45. Conclusion» En pensant à votre expérience Web mobile, vous » Serez prêt pour la croissance exceptionnelle de l’internet mobile » Pourrez prendre avantage des nouvelles opportunités » Allez pouvoir innover d’une façon que vous ne pouviez pas avant 45
  46. 46. Merci de votre attention Des questions ? Sébastien Giroux Chef de la direction technologique sebastien@ekomobi.com http://ekomobi.com http://twitter.com/sebastiengiroux
  47. 47. 47

×