Embed Size (px)
DESCRIPTION
Expérience Web Mobile – Pourquoi et comment? Présenté à la conférence Printemps des Réseaux Sociaux de Québec
Citation preview
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
http://ekomobi.com
http://twitter.com/sebastiengiroux
47
