Expérience Web Mobile – Pourquoi et comment?         Sébastien GirouxChef de la direction technologique       www.axialdev...
2
3
4
Pourquoi?            5
Je suis local                6
7
8
9
10
11
12
13
14
15
Je m’ennuie              16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
J’ai une micro-tâche à effectuer                                   34
35
36
Contexte d’utilisation                         37
Contexte d’utilisation» Heure de la journée   » 84% à la maison   » 64% durant la journée de travail   » 47% dans la voitu...
Expérience différente entre les différents types                   d’appareils» Considérez la différence entre une TV, un ...
Tablette… mobile ou pas ?                            40
41
Site mobile, réactif, adaptatif    ou application mobile?                                  42
Différence entre site mobile et application                                              43
44
45
Sites mobiles                46
Philosophie « Mobile 1st »» Créer l’expérience web mobile en premier et ensuite  l’adapter pour les autres plateformes   »...
Rapidité• Prioriser le contenu susceptible  d’être utilisé• Compresser les images et le texte• Minimiser le nombre de requ...
Proximité• Mettre adresse & numéro de  téléphone• Inclure des cartes et utiliser la  fonction GPS des téléphones          ...
Design• Écran beaucoup plus petit• Pas de zoom• Utilisation de contrastes entre le  fond et le texte• Gros boutons centrés...
Accessibilité• Pas de Flash!• HTML5 pour animation et/ou  interactivité• S’adapter aux changements  d’orientation         ...
Les gestes             52
Simplification de la navigation• Pas de rollovers ou de menus  déroulants• Mettre en évidence les boutons  « retour » et «...
Aider à la conversion• Garder les formulaires simples• Réduire le nombre d’étapes requises  pour compléter une transaction...
Types de clavier                   55
Types de clavier                   56
Redirection• Diriger automatiquement les visiteurs mobiles  vers votre site mobile• Offrir l’option de revenir vers la ver...
Sites réactifs et/ou adaptatifs                                  58
59
60
61
62
63
64
Un site réactif» Peu importe le support (desktop, tablette ou cell):   » le visuel est le même,   » les éléments se placen...
Un site adaptatif» Selon le support (desktop, tablette ou mobile)   »   le visuel est différent   »   le contenu diffère  ...
Quelques trucs pour réussir la   transition vers un site adaptatif» Penser « Mobile First »» Avoir une stratégie de conten...
68
Ratio de pixels» 1.0   » Tous les ordinateurs ordinaires   » Tous les mobiles iOS non-retina   » Galaxy S et Tab» 1.3   » ...
Merci de votre attention       Des questions ?         Sébastien Giroux   Chef de la direction technologique       sebasti...
Prochain SlideShare
Chargement dans…5
×

Printemps Réseaux Sociaux Québec 2013

266 vues

Publié le

Le web mobile et les médias sociaux

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive
  • Association des banquiers canadiens http://www.cba.ca/fr/media-room/50-backgrounders-on-banking-issues/125-technology-and-banking
  • Association des banquiers canadiens http://www.cba.ca/fr/media-room/50-backgrounders-on-banking-issues/125-technology-and-banking
  • Association des banquiers canadiens http://www.cba.ca/fr/media-room/50-backgrounders-on-banking-issues/125-technology-and-banking
  • Association des banquiers canadiens http://www.cba.ca/fr/media-room/50-backgrounders-on-banking-issues/125-technology-and-banking
  • Association des banquiers canadiens http://www.cba.ca/fr/media-room/50-backgrounders-on-banking-issues/125-technology-and-banking
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Marketing-mobile.ca http://marketing-mobile.ca/category/statistiques Canada
  • Printemps Réseaux Sociaux Québec 2013

    1. 1. Expérience Web Mobile – Pourquoi et comment? Sébastien GirouxChef de la direction technologique www.axialdev.com twitter.com/sebastiengiroux 1
    2. 2. 2
    3. 3. 3
    4. 4. 4
    5. 5. Pourquoi? 5
    6. 6. Je suis local 6
    7. 7. 7
    8. 8. 8
    9. 9. 9
    10. 10. 10
    11. 11. 11
    12. 12. 12
    13. 13. 13
    14. 14. 14
    15. 15. 15
    16. 16. Je m’ennuie 16
    17. 17. 17
    18. 18. 18
    19. 19. 19
    20. 20. 20
    21. 21. 21
    22. 22. 22
    23. 23. 23
    24. 24. 24
    25. 25. 25
    26. 26. 26
    27. 27. 27
    28. 28. 28
    29. 29. 29
    30. 30. 30
    31. 31. 31
    32. 32. 32
    33. 33. 33
    34. 34. J’ai une micro-tâche à effectuer 34
    35. 35. 35
    36. 36. 36
    37. 37. Contexte d’utilisation 37
    38. 38. 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 38
    39. 39. 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 39
    40. 40. Tablette… mobile ou pas ? 40
    41. 41. 41
    42. 42. Site mobile, réactif, adaptatif ou application mobile? 42
    43. 43. Différence entre site mobile et application 43
    44. 44. 44
    45. 45. 45
    46. 46. Sites mobiles 46
    47. 47. Philosophie « Mobile 1st »» Créer l’expérience web mobile en premier et ensuite l’adapter pour les autres plateformes » 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 47
    48. 48. Rapidité• Prioriser le contenu susceptible d’être utilisé• Compresser les images et le texte• Minimiser le nombre de requêtes au serveur 48
    49. 49. Proximité• Mettre adresse & numéro de téléphone• Inclure des cartes et utiliser la fonction GPS des téléphones 49
    50. 50. Design• Écran beaucoup plus petit• Pas de zoom• Utilisation de contrastes entre le fond et le texte• Gros boutons centrés 50
    51. 51. Accessibilité• Pas de Flash!• HTML5 pour animation et/ou interactivité• S’adapter aux changements d’orientation 51
    52. 52. Les gestes 52
    53. 53. 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 53
    54. 54. 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 54
    55. 55. Types de clavier 55
    56. 56. Types de clavier 56
    57. 57. 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 57
    58. 58. Sites réactifs et/ou adaptatifs 58
    59. 59. 59
    60. 60. 60
    61. 61. 61
    62. 62. 62
    63. 63. 63
    64. 64. 64
    65. 65. Un site réactif» Peu importe le support (desktop, tablette ou cell): » le visuel est le même, » les éléments se placent les uns sous les autres quand on change de break point » le contenu est le même» Donc peu importe le support on a toujours une continuité 65
    66. 66. Un site adaptatif» Selon le support (desktop, tablette ou mobile) » le visuel est différent » le contenu diffère » les éléments affichés sont différents » sur mobile, on affiche des gros boutons daction» Donc selon le support on ne voit pas du tout les même choses 66
    67. 67. Quelques trucs pour réussir la transition vers un site adaptatif» Penser « Mobile First »» Avoir une stratégie de contenu adaptée » Afficher le contenu selon le contexte d’utilisation de l’utilisateur» Faire plusieurs maquettes fonctionnelles » Différentes maquettes pour mobile, tablettes, PC» Avoir des images optimisées pour chacune des versions» Optimiser et adapter le code selon le contexte d’utilisation » E.g.: Ne pas charger les grosses images sur les mobiles 67
    68. 68. 68
    69. 69. Ratio de pixels» 1.0 » Tous les ordinateurs ordinaires » Tous les mobiles iOS non-retina » Galaxy S et Tab» 1.3 » Google Nexus 7» 1.5 » Google Nexus S » HTC Desire, Desire HD, Velocity, Sensation» 2.0 » iPhone 4, 4s, 5 » Google Nexus 4, 10 » Samsung Galaxy S III & Note II 69
    70. 70. Merci de votre attention Des questions ? Sébastien Giroux Chef de la direction technologique sebastien@axialdev.com http://www.axialdev.com http://twitter.com/sebastiengiroux

    ×