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