30/11/12   KAPT – Tous Droits Réservés   1
FORMATIONWeb multi-cibles,    multi-supports
POURQUOI CETTE FORMATION ?1.  Réorienter la réflexion Web2.  Sortir des choix techniques3.  Préparer un socle pour du :   ...
QUELQUES DEFINITIONS                                                  le Web      Application                   Site web  ...
QUELQUES DEFINITIONS                  Technologies web           HTML            CSS                      JavaScript     S...
LE WEB AU CENTRE DE TOUT !                                   Le	  Web	          Sites web     et web mobile               ...
L’ORDRE DU JOUR•  Multi-cibles ?      –  Parce que vos visiteurs ne sont pas tous les mêmes,      –  Parce que vos visiteu...
LA PREMIERE APPROCHE EST …•  Quelles sont mes cibles ? Public visé ?•  Quels usages ? Quelles fonctionnalités ?•  Quels su...
A vous !Lister vos cibles, usages et supports
VOTRE CONTEXTE                  Cibles                     Usages             Supports        1        2        3         ...
EXEMPLE DE KAPT :                     Cibles                   Usages                    Supports    1      resp Com/Marke...
PRÉPARATION DU CONTENU                 Information                 & fonctions           Contenu contextualisé et         ...
PRÉPARATION DU CONTENU (2)•  SÉPARATION      –  du contenu informatif      –  Des fonctionnalités (recherche, cartographie...
Les grandes méthodes deconception Web
PRÉPARATION DU CONTENU (3)SUPPORTS :•  SI un seul support : pas de problème !•  SINON : préparer le contenu du support le ...
PRÉPARATION DU CONTENU (4)30/11/12    KAPT – Tous Droits Réservés   16
PRÉPARATION DU CONTENU (5)CIBLES : PARCOURS UTILISATEUR•  Approche ergonomique : permettre à un   visiteur de trouver faci...
CONCEPTION ERGONOMIQUE•  Approche ergonomique : permettre à un   visiteur de trouver facilement son chemin et   donc l’inf...
CONCEPTION ERGONOMIQUE (2)•  Maquette ergonomique :      –  Zoning      –  Wireframe ou Mock’up (wireframesketcher.com)30/...
ZONING
WIREFRAME
DESIGN EMOTIONNEL•  Humaniser•  Rendre unique•  Laisser un bon souvenir30/11/12          KAPT – Tous Droits Réservés   22
HUMANISER           Tenue       vestimentaire                                                       Confiance           IN...
RÉPONSES TECHNOLOGIQUES
AUTANT DE VERSIONS QUE DE CIBLES ?                                                Gestion multilingue,                    ...
AUTANT DE VERSIONS QUE DE SUPPORTS ?OUI & NON, ça dépend des usages, mais … 30/11/12         KAPT – Tous Droits Réservés  ...
AUTANT DE VERSIONS QUE DE SUPPORTS ?                                      La fonctionnalité                               ...
COMMENT ADAPTER UN CONTENU APLUSIEURES TAILLES D’ÉCRAN ?•  Responsive Web Design      –  Une conception qui a prévu l’adap...
MEDIA QUERIES ?•  Mise en page différente pour chaque format30/11/12          KAPT – Tous Droits Réservés   29
Quelques exemplesBeaux sites en Responsive Web Design
COMMENT DÉTERMINER LES CAS ?•  Responsive Web Design :      –  SmartPhones : 320px de largeur minimum pour 2012      –  Ta...
COMMENT PROCÉDER ?•  Responsive Web Design, la méthode :30/11/12          KAPT – Tous Droits Réservés   32
CONCRÈTEMENT ?•  Réalité :      –  Exemple d’un bout de CSS30/11/12                KAPT – Tous Droits Réservés   33
ET ÇA MARCHE ?•  OUI, un utilisateur qui trouve une interface bien   pensée et adaptée à son support ne zappera   pas ou m...
ET ÇA SERT ?•  Quelques statistiques30/11/12          KAPT – Tous Droits Réservés   35
POURQUOI JE LE FERAI ?•  Cette approche est la meilleure !!!•  Ça pose les bonnes questions !30/11/12               KAPT –...
ET APRÈS ?•  Il faut humaniser chaque rendu ! Par un DESIGN   EMOTIONNEL (autre formation)30/11/12          KAPT – Tous Dr...
Des questions ?Plus d’infos : formation@kapt.mobi
Prochain SlideShare
Chargement dans…5
×

Formation web kapt20121018_share

594 vues

Publié le

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, ...

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
594
Sur SlideShare
0
Issues des intégrations
0
Intégrations
88
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation web kapt20121018_share

  1. 1. 30/11/12 KAPT – Tous Droits Réservés 1
  2. 2. FORMATIONWeb multi-cibles, multi-supports
  3. 3. POURQUOI CETTE FORMATION ?1.  Réorienter la réflexion Web2.  Sortir des choix techniques3.  Préparer un socle pour du : –  Design ergonomique et émotionnel –  Contenu contextualisé30/11/12 KAPT – Tous Droits Réservés 3
  4. 4. QUELQUES DEFINITIONS le Web Application Site web Application web Application Site web Application web mobile mobile mobile30/11/12 KAPT – Tous Droits Réservés 4
  5. 5. QUELQUES DEFINITIONS Technologies web HTML CSS JavaScript STRUCTURE ASPECT COMPORTEMENT30/11/12 KAPT – Tous Droits Réservés 5
  6. 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, etc30/11/12 KAPT – Tous Droits Réservés 6
  7. 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. 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. 9. A vous !Lister vos cibles, usages et supports
  10. 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 interactiveOrdre de priorité :jamais plus de 3 ! 30/11/12 KAPT – Tous Droits Réservés 10
  11. 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. 12. PRÉPARATION DU CONTENU Information & fonctions Contenu contextualisé et dynamique30/11/12 KAPT – Tous Droits Réservés 12
  13. 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. 14. Les grandes méthodes deconception Web
  15. 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 FIRSTCIBLES :•  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. 16. PRÉPARATION DU CONTENU (4)30/11/12 KAPT – Tous Droits Réservés 16
  17. 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 Web30/11/12 KAPT – Tous Droits Réservés 17
  18. 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. 19. CONCEPTION ERGONOMIQUE (2)•  Maquette ergonomique : –  Zoning –  Wireframe ou Mock’up (wireframesketcher.com)30/11/12 KAPT – Tous Droits Réservés 19
  20. 20. ZONING
  21. 21. WIREFRAME
  22. 22. DESIGN EMOTIONNEL•  Humaniser•  Rendre unique•  Laisser un bon souvenir30/11/12 KAPT – Tous Droits Réservés 22
  23. 23. HUMANISER Tenue vestimentaire Confiance INTERFACE FIABILITÉ Discours clair et adapté Personnalité CONTENU Charisme DÉTAILS Pédagogue ERGONOMIE30/11/12 KAPT – Tous Droits Réservés 23
  24. 24. RÉPONSES TECHNOLOGIQUES
  25. 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. 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. 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. 28. COMMENT ADAPTER UN CONTENU APLUSIEURES 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 CSS30/11/12 KAPT – Tous Droits Réservés 28
  29. 29. MEDIA QUERIES ?•  Mise en page différente pour chaque format30/11/12 KAPT – Tous Droits Réservés 29
  30. 30. Quelques exemplesBeaux sites en Responsive Web Design
  31. 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. 32. COMMENT PROCÉDER ?•  Responsive Web Design, la méthode :30/11/12 KAPT – Tous Droits Réservés 32
  33. 33. CONCRÈTEMENT ?•  Réalité : –  Exemple d’un bout de CSS30/11/12 KAPT – Tous Droits Réservés 33
  34. 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. 35. ET ÇA SERT ?•  Quelques statistiques30/11/12 KAPT – Tous Droits Réservés 35
  36. 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. 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. 38. Des questions ?Plus d’infos : formation@kapt.mobi

×