Le web mobile et les médias sociaux

1. Expérience Web Mobile –
Pourquoi et comment?
Sébastien Giroux
Chef de la direction technologique
www.axialdev.com
twitter.com/sebastiengiroux
1

2. 2

3. 3

4. 4

5. Pourquoi?
5

6. Je suis local
6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. Je m’ennuie
16

17. 17

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. J’ai une micro-tâche à effectuer
34

35. 35

36. 36

37. Contexte d’utilisation
37

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. 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. Tablette… mobile ou pas ?
40

41. 41

42. Site mobile, réactif, adaptatif
ou application mobile?
42

43. Différence entre site mobile et application
43

44. 44

45. 45

46. Sites mobiles
46

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. Rapidité
• Prioriser le contenu susceptible
d’être utilisé
• Compresser les images et le texte
• Minimiser le nombre de requêtes
au serveur
48

49. Proximité
• Mettre adresse & numéro de
téléphone
• Inclure des cartes et utiliser la
fonction GPS des téléphones
49

50. Design
• Écran beaucoup plus petit
• Pas de zoom
• Utilisation de contrastes entre le
fond et le texte
• Gros boutons centrés
50

51. Accessibilité
• Pas de Flash!
• HTML5 pour animation et/ou
interactivité
• S’adapter aux changements
d’orientation
51

52. Les gestes
52

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. 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. Types de clavier
55

56. Types de clavier
56

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. Sites réactifs et/ou adaptatifs
58

59. 59

60. 60

61. 61

62. 62

63. 63

64. 64

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. 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 d'action
» Donc selon le support on ne voit pas du tout les même
choses
66

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

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. 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