Expérience Web Mobile – Pourquoi et comment? Présenté à la conférence Printemps des Réseaux Sociaux de Québec

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

2. 2

3. 3

4. 4

5. 5

6. 6

7. Différence entre site mobile et application
7

8. 8

9. Pourquoi?
9

10. La mobilité
Au Québec (source CEFRIO)
• 30% des adultes possèdent un
téléphone intelligent (40% dans la
tranche 18-44 ans)
• 20% des adultes dans la tranche
18-44 ans prévoient faire l’achat
d’un téléphone intelligent
Aux USA (source Google)
• 50% des adultes possèdent un
téléphone intelligent
10

11. L’influence des téléphones intelligents
Interrogés sur la dernière
fois qu'ils avaient eu recours
à leur téléphone mobile en
magasin,
37 % des participants
ont décidé de ne pas
acheter le produit du tout,
35 % l'ont acheté dans
le magasin,
19 % l'ont acheté en
ligne et
8 % dans un autre
magasin.
11

12. Recherches via mobile
Au Canada
10% de toutes les recherches
Google sont faites à partir
d’un mobile
40 % des recherches locales
sont effectuées sur mobile
60% de ces recherches
mènent à un appel ou une
visite
*Nectarios Economakis (Responsable du développement des agences chez Google)
12

13. En une semaine
81% vont sur Internet
77% utilisent un moteur de recherche
48% regardent des vidéos
63% utilisent les médias sociaux (FB + Twitter)
40 % naviguent en regardant la télé
13

14. Contexte d’utilisation
14

15. Je suis local
15

16. Je m’ennuie
16

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

18. Tablette… mobile ou pas ?
18

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. 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. Comment?
21

22. Site mobile ou application mobile
22

23. Site mobile ou application mobile
23

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. Proximité
• Mettre adresse & numéro de
téléphone
• Inclure des cartes et utiliser la
fonction GPS des téléphones
25

26. Design
• Écran beaucoup plus petit
• Pas de zoom
• Utilisation de contrastes entre le
fond et le texte
26

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

28. Interaction avec les pouces
• Gros boutons centrés
• Ajout de padding aux boutons et
checkboxes
28

29. Les gestes
29

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

33. Types de clavier
33

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. 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. Design Web adaptable à toutes les résolutions
36

37. Comment les gens trouveront-
ils mon site mobile?
37

38. Vous avez déjà une présence mobile
» 10% à 20% des recherches Google sont faites à partir d’un mobile
38

39. Courriels
» 1 courriel sur 5 est ouvert sur un téléphone intelligent
39

40. 40

41. Réseaux sociaux
» 45% des utilisateurs de Twitter y accède avec leur
téléphone intelligent
41

42. Applications
42

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