View
94
Download
1
Category
Preview:
DESCRIPTION
Le web mobile et les médias sociaux
Citation preview
Expérience Web Mobile –Pourquoi et comment?
Sébastien GirouxChef de la direction technologique
www.axialdev.com
twitter.com/sebastiengiroux
1
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 voiture
» Présence latente, usage ponctuel» L’utilisateur se déplace
38
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
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» 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
• Prioriser le contenu susceptible d’être utilisé
• Compresser les images et le texte
• Minimiser le nombre de requêtes au serveur
Rapidité
49
• Mettre adresse & numéro de téléphone
• Inclure des cartes et utiliser la fonction GPS des téléphones
Proximité
50
• Écran beaucoup plus petit
• Pas de zoom
• Utilisation de contrastes entre le fond et le texte
• Gros boutons centrés
Design
51
• Pas de Flash!
• HTML5 pour animation et/ou interactivité
• S’adapter aux changements d’orientation
Accessibilité
52
Les gestes
53
• 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
54
• 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
55
Types de clavier
56
Types de clavier
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
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 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
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
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
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
Des questions ?
Merci de votre attention
Sébastien Giroux Chef de la direction technologique
sebastien@axialdev.comhttp://www.axialdev.com
http://twitter.com/sebastiengiroux
Recommended