KAPT Learning Breakfast, on October 18th of 2012 at KAPT How to design a WebSite for different visitors on different supports : computer, laptop, tablet, SmartPhone, ...

1. 30/11/12 KAPT – Tous Droits Réservés 1

2. FORMATION
Web multi-cibles,
multi-supports

3. POURQUOI CETTE FORMATION ?
1. Réorienter la réflexion Web
2. Sortir des choix techniques
3. Préparer un socle pour du :
– Design ergonomique et émotionnel
– Contenu contextualisé
30/11/12 KAPT – Tous Droits Réservés 3

4. QUELQUES DEFINITIONS
le Web
Application Site web Application web
Application Site web Application web
mobile mobile mobile
30/11/12 KAPT – Tous Droits Réservés 4

5. QUELQUES DEFINITIONS
Technologies web
HTML CSS JavaScript
STRUCTURE ASPECT COMPORTEMENT
30/11/12 KAPT – Tous Droits Réservés 5

6. LE WEB AU CENTRE DE TOUT !
Le
Web
Sites web
et web mobile Vitrine interactive
Applications web Logiciels de
gestion, ERP,
observatoire
Applications iPhone,
iPad, Android, etc
30/11/12 KAPT – Tous Droits Réservés 6

7. L’ORDRE DU JOUR
• Multi-cibles ?
– Parce que vos visiteurs ne sont pas tous les mêmes,
– Parce que vos visiteurs ne sont pas toujours vos cibles !
– Parce que votre contenu doit être adapté à chaque
catégorie de public ciblé et à chaque usage.
• Multi-supports ?
– Parce que la navigation Web n’est plus le monopole des
ordinateurs !
30/11/12 KAPT – Tous Droits Réservés 7

8. LA PREMIERE APPROCHE EST …
• Quelles sont mes cibles ? Public visé ?
• Quels usages ? Quelles fonctionnalités ?
• Quels supports ? Quels équipements ?
… MARKETING !
30/11/12 KAPT – Tous Droits Réservés 8

9. A vous !
Lister vos cibles, usages et supports

10. VOTRE CONTEXTE
Cibles Usages Supports
1
2
3
Clients,
adhérents, Ordinateurs,
fournisseurs, portable, TV
prescripteur, connectée,
autres. tablette,
A quoi sert le site ? SmartPhones,
vitrine interactive
Ordre de priorité :
jamais plus de 3 !
30/11/12 KAPT – Tous Droits Réservés 10

11. EXEMPLE DE KAPT :
Cibles Usages Supports
1 resp Com/Marketing Démo / réalisations ordinateurs
2 prescripteurs Offre / méthode SmartPhones
3 clients Contact / Blog tablettes
Définir l’importance relative croisée Usages /
Support :
• Usage 1 : Démo / réalisations • Support 1 : Ordinateurs
• Support 1 : Ordinateurs • Usage 1 : Démo
/
réalisa5ons
• Support 2 : SmartPhones
• Usage 2 : Offre
/
méthode
• Usage 2 : Offre / méthode • Support 2 : SmartPhones
• Support 1 : Ordinateurs • Usage 1 : Offre
/
méthode
• Support 2 : SmartPhones
• Usage 2 : Contact
30/11/12 KAPT – Tous Droits Réservés 11

12. PRÉPARATION DU CONTENU
Information
& fonctions
Contenu contextualisé et
dynamique
30/11/12 KAPT – Tous Droits Réservés 12

13. PRÉPARATION DU CONTENU (2)
• SÉPARATION
– du contenu informatif
– Des fonctionnalités (recherche, cartographie, )
• RÉPARTITION
– Sur les supports concernés (compatibilité)
– Sur les publics ciblés (traduction, détails)
• FIXE ou ADMINISTRABLE ?
30/11/12 KAPT – Tous Droits Réservés 13

14. Les grandes méthodes de
conception Web

15. PRÉPARATION DU CONTENU (3)
SUPPORTS :
• SI un seul support : pas de problème !
• SINON : préparer le contenu du support le plus
contraignant d’abord ! MOBILE FIRST
CIBLES :
• SI une seule cible : IMPOSSIBLE !
• SINON : préparer les différents PARCOURS
UTILISATEUR, les traductions, etc.
30/11/12 KAPT – Tous Droits Réservés 15

16. PRÉPARATION DU CONTENU (4)
30/11/12 KAPT – Tous Droits Réservés 16

17. PRÉPARATION DU CONTENU (5)
CIBLES : PARCOURS UTILISATEUR
• Approche ergonomique : permettre à un
visiteur de trouver facilement son chemin et
donc l’information qu’il vient chercher
rapidement.
• Design émotionnel : humaniser la visite de
mon site Web
30/11/12 KAPT – Tous Droits Réservés 17

18. CONCEPTION ERGONOMIQUE
• Approche ergonomique : permettre à un
visiteur de trouver facilement son chemin et
donc l’information qu’il vient chercher
rapidement.
30/11/12 KAPT – Tous Droits Réservés 18

19. CONCEPTION ERGONOMIQUE (2)
• Maquette ergonomique :
– Zoning
– Wireframe ou Mock’up (wireframesketcher.com)
30/11/12 KAPT – Tous Droits Réservés 19

20. ZONING

21. WIREFRAME

22. DESIGN EMOTIONNEL
• Humaniser
• Rendre unique
• Laisser un bon souvenir
30/11/12 KAPT – Tous Droits Réservés 22

23. HUMANISER
Tenue
vestimentaire
Confiance
INTERFACE
FIABILITÉ
Discours clair
et adapté Personnalité
CONTENU Charisme
DÉTAILS
Pédagogue
ERGONOMIE
30/11/12 KAPT – Tous Droits Réservés 23

24. RÉPONSES TECHNOLOGIQUES

25. AUTANT DE VERSIONS QUE DE CIBLES ?
Gestion multilingue,
Détection de la langue
du navigateur
Préparation de zone de
contenu adaptée :
détaillée, ludique, etc.
NON, gestion spécifique et dynamique du contenu.
30/11/12 KAPT – Tous Droits Réservés 25

26. AUTANT DE VERSIONS QUE DE SUPPORTS ?
OUI & NON, ça dépend des usages, mais …
30/11/12 KAPT – Tous Droits Réservés 26

27. AUTANT DE VERSIONS QUE DE SUPPORTS ?
La fonctionnalité
principale disponible
partout, tout le temps !
Le contenu informatif,
les outils avancés, les
actualités, l’agenda.
Le plus : blog, bannière,
illustrations, etc.
30/11/12 KAPT – Tous Droits Réservés 27

28. COMMENT ADAPTER UN CONTENU A
PLUSIEURES TAILLES D’ÉCRAN ?
• Responsive Web Design
– Une conception qui a prévu l’adaptation de
l’interface utilisateur à la taille de l’écran,
– Une approche du support le plus contraignant vers
le plus confortable : MOBILE FIRST,
– Définition des différents cas : détermination d’une
résolution limite pour chaque (ex: largeur de 768px)
– Utilisation des MEDIA QUERIES en CSS
30/11/12 KAPT – Tous Droits Réservés 28

29. MEDIA QUERIES ?
• Mise en page différente pour chaque format
30/11/12 KAPT – Tous Droits Réservés 29

30. Quelques exemples
Beaux sites en Responsive Web Design

31. COMMENT DÉTERMINER LES CAS ?
• Responsive Web Design :
– SmartPhones : 320px de largeur minimum pour 2012
– Tablettes portrait : 768px
– Tablettes paysage : 1024px
– Ordinateur portable : 1280px
– Ordinateur de bureau / TV connectée : > 1280 px
– Tactile
– Souris / Clavier
– Télécommande
–
30/11/12 KAPT – Tous Droits Réservés 31

32. COMMENT PROCÉDER ?
• Responsive Web Design, la méthode :
30/11/12 KAPT – Tous Droits Réservés 32

33. CONCRÈTEMENT ?
• Réalité :
– Exemple d’un bout de CSS
30/11/12 KAPT – Tous Droits Réservés 33

34. ET ÇA MARCHE ?
• OUI, un utilisateur qui trouve une interface bien
pensée et adaptée à son support ne zappera
pas ou moins !
30/11/12 KAPT – Tous Droits Réservés 34

35. ET ÇA SERT ?
• Quelques statistiques
30/11/12 KAPT – Tous Droits Réservés 35

36. POURQUOI JE LE FERAI ?
• Cette approche est la meilleure !!!
• Ça pose les bonnes questions !
30/11/12 KAPT – Tous Droits Réservés 36

37. ET APRÈS ?
• Il faut humaniser chaque rendu ! Par un DESIGN
EMOTIONNEL (autre formation)
30/11/12 KAPT – Tous Droits Réservés 37

38. Des questions ?
Plus d’infos : formation@kapt.mobi