Expérience Web Mobile PRSQC

Expérience Web Mobile –Pourquoi et comment?

Sébastien GirouxChef de la direction technologique

www.ekomobi.com

twitter.com/sebastiengiroux

1

2

3

4

5

6

Différence entre site mobile et application

7

8

Pourquoi?

9

10

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

La mobilité

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.

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)

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é

Contexte d’utilisation

14

Je suis local

15

Je m’ennuie

16

J’ai une micro-tâche à effectuer

17

Tablette… mobile ou pas ?

18

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

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

Comment?

21

22

Site mobile ou application mobile

23

Site mobile ou application mobile

24

• Prioriser le contenu susceptible d’être utilisé

• Compresser les images et le texte

• Minimiser le nombre de requêtes au serveur

Rapidité

25

• Mettre adresse & numéro de téléphone

• Inclure des cartes et utiliser la fonction GPS des téléphones

Proximité

26

• Écran beaucoup plus petit

• Pas de zoom

• Utilisation de contrastes entre le fond et le texte

Design

27

• Pas de Flash!

• HTML5 pour animation et/ou interactivité

• S’adapter aux changements d’orientation

Accessibilité

28

• Gros boutons centrés

• Ajout de padding aux boutons et checkboxes

Interaction avec les pouces

29

Les gestes

30

• 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

Simplification de la navigation

31

• 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

Aider à la conversion

32

Types de clavier

33

Types de clavier

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

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

Design Web adaptable à toutes les résolutions

36

Comment les gens trouveront-ils mon site mobile?

37

Vous avez déjà une présence mobile

» 10% à 20% des recherches Google sont faites à partir d’un mobile

38

Courriels

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

39

40

Réseaux sociaux

» 45% des utilisateurs de Twitter y accède avec leur téléphone intelligent

41

Applications

42

43

• Toujours diriger vos campagnes marketing utilisant un code QR vers un site mobile

• Expliquer aux gens comment utiliser un tel code

Codes QR

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

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

Des questions ?

Merci de votre attention

Sébastien Giroux Chef de la direction technologique

sebastien@ekomobi.com

http://ekomobi.com

http://twitter.com/sebastiengiroux

47