Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CN2 • Les tendances du web design et l'expérience utilisateur

104 views

Published on

Pour favoriser l’accessibilité et la lisibilité des informations, le design des sites web est de plus en plus souvent élaboré en s ‘appuyant sur l’expérience utilisateur. Quels sont les codes et les tendances actuels du graphisme numérique ? Quelles sont les principales erreurs à éviter ? Comment mieux prendre en compte les comportements et les attentes des internautes ?
Carrefour numérique animé par Pierre Bergmiller, responsable de la communication numérique de la ville et de l’Eurométropole de Strasbourg

Les Intervenants

Florent Jaouali, ergonome et sociologue des usages
Sylvain Léauthier, consultant web La fabrik à clic

  • Be the first to comment

  • Be the first to like this

CN2 • Les tendances du web design et l'expérience utilisateur

  1. 1. CARREFOUR NUMÉRIQUE 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Les tendances du webdesign et l’expérience utilisateur Sylvain Léauthier – La Fabrik à Click Florent Jaouali – We Love Users Coordonné par Pierre Bergmiller – Ville & Eurométropole de Strasbourg
  2. 2. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Les carrefours numériques • CN 1 : utilisation des stories sur les réseaux sociaux Mercredi 5/12 à 14h30 • CN 2 : les tendances du webdesign et l’expérience utilisateur Mercredi 5/12 à 16h30 • CN 3 : digitale thérapie, les 8 questions qui vous empêchent de dormir Jeudi 6/12 à 9h30 • CN4 : gestion de la relation usager, quels outils numériques et quelles relations avec la DSI Jeudi 6/12 à 15h00
  3. 3. CARREFOUR NUMÉRIQUE 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Les tendances du webdesign et l'expérience utilisateur Rendez-vous en terre inconnue… Sylvain Léauthier - sylvain@lafabrikaclick.com
  4. 4. LA FABRIK A CLICK Stratégie de contenus & digitale Expérience utilisateur humains & robots (SEO) 4
  5. 5. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON PLAN DE L’EXPOSÉ • Initiation à l’archéologie #indianajones • Petit traité d’ethnographie #levistrauss • Essai de prophétie #pacorabanne
  6. 6. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  7. 7. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Généalogie de la page d’accueil Un voyage dans le temps via planète Paris
  8. 8. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  9. 9. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  10. 10. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  11. 11. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  12. 12. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  13. 13. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  14. 14. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  15. 15. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  16. 16. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  17. 17. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  18. 18. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  19. 19. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  20. 20. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  21. 21. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Le web de service
  22. 22. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  23. 23. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  24. 24. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  25. 25. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  26. 26. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Le web de l’histoire
  27. 27. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  28. 28. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  29. 29. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Web de service // web de l’histoire • De l’UX dans les deux • Des contenus dans les deux – Orienté pratique dans le web de service – Orienté storytelling dans le web de l’histoire
  30. 30. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 2 web qui cohabitent…ou pas • Web de service : site web principal • Web de storytelling : – Site web dédié, événementiel – Plateformes externes : medium, instagram • Parfois les 2 cohabitent : – Exemples sur les pages d’accueil
  31. 31. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON On est passé d’un web du discours à un web du service et de l’histoire
  32. 32. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Un changement de paradigme • Pour le communicant : du décorateur à l’architecte / l’ingénieur • Pour l’utilisateur : une exigence de plus en plus forte sur la qualité de l’expérience et du service
  33. 33. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Ut abore iuntis (niv titre 1) Ut abore iuntis (niv titre 2) • Pis de plique re porem aut re non rest, tectur sus et • ate venihilit venihil (texte courant). • Vius atemolupti ut lacespis rendit velesti animin • excerum faciam, doluptaepel tectur sus)
  34. 34. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  35. 35. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Interfaces WIMP (Windows, Icons, Menus and Pointing device)
  36. 36. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Interfaces tactiles
  37. 37. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Interfaces vocales
  38. 38. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Les interfaces vocales ne vont pas remplacer les interfaces WIMP et tactiles ! Elles couvrent un contexte d’usage qui n’était pas jusqu’alors couvert par les autres interfaces (mains occupées, device éloigné) • Interfaces WIMP : Années 80 • Interfaces tactiles : Années 2000 • Interfaces vocales : Années 2010
  39. 39. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Le web des sens • Web qui se regarde (sites vitrines) • Web qui se lit (web de contenu) • Web qui s’écoute (web vocal, podcasts) • Web qui se touche (design d’interactions) • Web qui se sent ?
  40. 40. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON L’influence des outils sur le design • Images & vidéos full screen – Permises par l’augmentation de la résolution des appareils photos et caméras, et l’amélioration des formats de compression et de diffusion (streaming) • Sites standardisés en terme de design – Permis par les CMS, la concentration sur ce marché (dominé par Wordpress), par l’entrée de nouveaux acteurs qui proposent des sites clés en main (Wix, Bubble)
  41. 41. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Content Is King ! Avec la standardisation du design, l’enjeu de l’expérience utilisateur est de plus en plus déterminé par le contenu • « Mettez 70% de votre budget de fonctionnement sur les contenus et seulement 30% sur la maintenance des sites/app » • ROI et efficacité des refontes de site web : – Sortir du « Launch & leave » > amélioration continue
  42. 42. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Les 8 raisons de ne pas faire de l’UX (bonnes ou mauvaises) «
  43. 43. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 1. On a pas le temps « On a passé 100K€ et 1 an et demi dans le projet web, c’est pas pour tout refaire 6 mois après »
  44. 44. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Si j'avais 8 heures pour couper un arbre, je passerais 6 heures à aiguiser la lame. Abraham Lincoln
  45. 45. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Faire de l’UX, c’est aiguiser sa lame ! Choisir les bons outils = avoir les bonnes données : • Analytics • Focus group • Entretiens individuels • Tests utilisateurs • Enquête en ligne • Card Sorting • … • Et l’intuition !!
  46. 46. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Sortir du « launch and leave »… …et rentrer dans une logique d’amélioration continue ! • Monitorer l’UX – Scoring – Évolution tous les 2 ans, après une refonte
  47. 47. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 2. On connaît déjà nos publics « On a même fait des personas »
  48. 48. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON
  49. 49. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 3. Les analytics, ça nous suffit In Google Analytics We Trust
  50. 50. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Pages les + vues Page 1 / 2 /en/ 3 /programmes/ 4 /candidats/admissions/ 5 /programmes/programme-grande-ecole/admissions/ 6 /programmes/masters-science/programme-grande-ecole/admissions/ 7 /decouverte/ 8 /services-etudiants/campus-paris/ 9 /programmes/programme-grande-ecole/programme-master/ 10 /en/programs/ 11 /programmes/masters-science/programme-grande-ecole/programme-master/ 12 /candidats/ 13 /services-etudiants/campus-lyon/ 14 /services-etudiants/calendrier-academique/ 15 /payment 16 /programmes/programme-grande-ecole/programme-bachelor/ Google Analytics : Top 100 des requêtes - barre de recherche (2015 - 2018) Terme de recherche Nombre total de recherches uniques % du total: 100,00 % 1 calendrier 419 0,94% 2 alternance 382 0,86% 3 portes ouvertes 358 0,81% 4 frais de scolarité 339 0,76% 5 admission 303 0,68% 6 associations 300 0,68% 7 association 274 0,62% 8 fees 265 0,60% 9 calendar 249 0,56% Termes de recherche les + fréquents
  51. 51. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Tasks 🇫🇷 1 Connaître les débouchés du programme choisi (poste, domaine, salaire moyen) 2 Connaître les possibilités d'échanges à l'étranger 3 Connaître les conditions d'admission 4 Obtenir des infos sur les frais de scolarité 5 Connaître la position de l’école dans les classements 6 Connaître le nombre et la durée du stage du parcours 7 Trouver des infos sur les procédure de candidature 8 Connaître la date limite d'inscription en ligne / calendrier d'inscription 9 Avoir des infos sur les salaires à la sortie des études 10 Savoir comment est structurée l'année (calendrier académique) 11 Accéder à l'inscription en ligne 12 Savoir quels élements doit constituer mon dossier de candidature 13 Se renseigner sur les labels officiels Top tâches
  52. 52. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 4. On a déjà fait des focus group Oui Monsieur
  53. 53. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Opinion ≠ usage ≠ usabilité Décalage souvent fort entre l’usage déclaré et l’usage constaté • Opinion : qu’est ce que vous pensez du site ? – Morale, biais sociaux • Usage : que venez vous faire sur le site ? • Usabilité : comment les utilisateurs utilisent notre site ?
  54. 54. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Faites de l’ethnographie ! • Test utilisateur • Articuler les bonnes données • Le « comment » est fondamental : – Recrutement et choix du panel – Instructions et animation des sessions
  55. 55. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 5. C’est moi l’expert « J’ai 10 d’expérience dans le digital, Monsieur, ce n’est pas Mme Michu qui va m’apprendre comment le web fonctionne »
  56. 56. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Changement de « mindset » Point fondamental • L’expertise ne se construit plus sur un savoir théorique ou auto-centré, mais sur l’expérience, qui découle elle-même de l’observation • Sortir de la logique organisationnelle / interne : process, langage… – On écoute trop les personnes en interne, pas assez les utilisateurs !
  57. 57. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 6. C’est dur de trouver et mobiliser les utilisateurs « Excusez-moi, vous auriez 10min pour participer à un test utilisateur ? »
  58. 58. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON On n’aime pas demander un service aux gens • Ce n’est pas une démarche facile mais : – C’est de l’humain ! – C’est extrêmement gratifiant et instructif ! • Très structurant en interne : – Production de contenus et évolutions des fonctionnalités – Justifier des choix en interne (et ne plus devoir arbitrer de manière subjective (et donc souvent conflictuelle) des demandes internes – Justifier des orientations à la direction et reporter des données chiffrées et objectivées (renforce la crédibilité des service communication)
  59. 59. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 7. Ca coûte cher « J’ai tout dépensé dans la charte graphique »
  60. 60. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Le ROI est très rapide…et long-terme • Un bouton d’action bien positionné, des choix éditoriaux pertinents > Source d’économies en interne
  61. 61. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON 8. On a peur d’être évalués « On fait quoi si les tests utilisateurs montrent que notre site délivre une mauvaise expérience utilisateur ? »
  62. 62. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Évaluer, c’est progresser • On n’évalue pas les personnes mais un site ou une application • Monitorer la performance des sites, c’est très gratifiant et structurant – Les sites s’améliorent et les équipes progressent en terme de compétences
  63. 63. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON Le communicant de demain sera un : • Ethnographe (observer, comprendre, analyser) • Architecte (structurer) • Conteur (raconter)
  64. 64. Merci ;) Sylvain Léauthier Consultant web @sleauthier 06 80 87 20 04 sylvain@lafabrikaclick.com 64
  65. 65. 30E FORUM DE LA COMMUNICATION PUBLIQUE ET TERRITORIALE 4.5.6 Décembre 2018 LYON échangez sur #CAPCOM18

×