Prenez du recul sur le web

Prenez du recul sur le web

(Présenté le 26/10/2016 devant les élèves de la Wild Code School à Bordeaux)

Cours - Atelier devant les élèves de la Wild Code School.

L'objectif, leur faire découvrir les problématiques du web sur trois thématiques ( UX / A11Y / Front end development ), et leur permettre de prendre du recul par rapport aux outils et technos qu'ils utilisent.

PS: le Slide noir et le formulaire de contact vide au milieu du cours avait pour but de leur présenté les lecteurs d'écran.

5b9e8248db0345aae8aa1619286d2bb0?s=128

Nicolas Guenin

October 26, 2016
Tweet

Transcript

  1. #

  2. Pour que le web soit bien, il s’agit de bien

    le concevoir
  3. Ensemble, nous allons voir : #Sommaire UX : User Experience

    A11Y : Accessibilité Web Front-end : Développement de la partie visuelle
  4. Nicolas Guenin UX & Web designer Front end developer

  5. HTML CSS SASS A11Y Expérience Utilisateur Interface Utilisateur BODYBOARD CONFÉRENCES

    Ateliers VÉLO V Sauts en parachute Javascript jQuery QUALITÉ Performance SEO PHP GUITARE FRIENDS GEEK MANGAS Jeux Vidéos ANGLAIS Tests utilisateur VEILLE TECHNO FORMATIONS Chasse à la licorne HARDROCK Jardinage Cuisine 3 UI
  6. And you ?

  7. User Experience http://www.tresor-de-momes.fr/

  8. Expérience et Interface Utilisateur #UX #UI UX : “Science” visant

    à rendre un système facile d’utilisation, compréhensible, ergonomique et logique. UI : Ensemble des mécanismes, matériels ou logiciels, permettant à un utilisateur d'interagir avec un système. http://flight-system.over-blog.com/article-7298910.html
  9. La réflexion du parcours utilisateur se déroule : #UX En

    amont de l’utilisation. Durant l’utilisation du produit. En aval avec le suivi du client.
  10. Lors du démarrage d’un projet client, celui-ci doit : #UX

    Avoir une utilité (Il doit répondre à un besoin et des objectifs)
  11. Mais aussi : #UX Être utilisable (Personnes souffrant d’un handicap

    ou d’une zone d’utilisation inconfortable)
  12. Et très important : #UX Être efficace (L’utilisateur doit pouvoir

    trouver ce qu’il cherche)
  13. Et enfin : #UX Être efficient (L’utilisateur doit être accompagné

    à travers un parcours optimisé)
  14. Oups, j’oubliais : #UX Il doit apporter de la SATISFACTION

    (Si vous êtes là, c’est parce que vous aimez le web, alors communiquez le aux autres !)
  15. Loi de fitts #UX Une cible est d’autant plus rapide

    à atteindre qu’elle est proche et grande.
  16. L’affordance #UX C’est la capacité d’un objet à suggérer sa

    propre utilisation.
  17. Call To Action #UX

  18. Loi de Hick Hyman #UX Il est plus facile de

    décider parmi un nombre d’élément réduit.
  19. Informer vos utilisateurs #UX * Guidez vos utilisateurs, ce qui

    est évident pour vous ne l’est pas pour tout le monde. https://colonialhoops.blogspot.fr
  20. Concevez accessible afin d’éviter l’erreur de vos internautes. Aidez et

    évitez les erreurs #UX #A11Y https://www.tnooz.com/
  21. L’interface, ça compte ! #UI

  22. Less is more ! #UI http://www.fujisport.fr/

  23. Ne soyez pas intrusif #A11Y http://www.20minutes.fr/

  24. Cap ou pas Captcha ? #UX #A11Y https://www.reddit.com/ https://jonjagger.blogspot.fr/

  25. A11Y - Accessibility http://edusaacademy.colorado.edu/

  26. Super, mais l’A11Y c kwa ? #A11Y Prévoir l’utilisation d’un

    produit pour les handica… NON ! L’ A11Y ne se limite pas qu’au personnes souffrant d’un handicap, il s’agit de rendre un produit utilisable par tout le monde.
  27. Vous devez comprendre que... #A11Y Tout le monde, vous y

    compris, pouvez vous retrouver dans une situation d’utilisation inconfortable. (Smartphone, tablette, zone bruyante, reflets du soleil, etc.)
  28. Et ça s’applique à tout #A11Y http://www.cc-thieracheducentre.fr/

  29. Les problèmes d’audition #A11Y

  30. Le daltonisme #A11Y https://uxplanet.org/

  31. Le contraste #A11Y

  32. None
  33. None
  34. Tout est une question de focus ! #A11Y #Newsflux

  35. L’inclusion

  36. Pensez d’abord à vos internautes #A11Y #BURGER Avoir un site

    fun c’est bien, mais si certains ne peuvent pas l’utiliser c’est quand même moins bien.
  37. Commencez par penser à tout le monde #A11Y

  38. Pensez à ce qui est important avant de penser aux

    bases de données #A11Y
  39. Ne soyez pas trop restrictif #A11Y

  40. Et surtout, pensez que votre produit est fait pour être

    utilisé #A11Y (Et pas que par vous !)
  41. Mais dis moi Jammy, et le front-end dans tout ça

    ?
  42. Choisissez bien vos technos #FRONT • Cms ou pas ?

    • Le problème des thèmes préconçus • Framework ? • L’utilité des langages (ex: Javascript)
  43. La sémantique ce n’est pas que pour Michel Bréal #FRONT

    #CULTUREG
  44. Il y a des normes et des standards #FRONT #BALISAGE

    • W3C (créé par Tim Berners-Lee) • W3C Validator
  45. Optimisez pour l’accessibilité #FRONT #A11Y • W3CAG & W3C Recommendations

    • RGAA • AccessiWeb • AcceDe Web • alt, title • tabindex • accesskey • attributs aria • etc.
  46. Optimisez le SEO #FRONT #SEO • Microdatas • RDFa •

    Json-LD • Schema.org • Outil Google
  47. Optimisez la performance #FRONT #PERF • Compression d’image • Optimisation

    du code • Éviter les plugins • Mobile First / Content First • Typographie / Local Storage • Script bloquant • etc.
  48. Sécurisez vos contenu #FRONT #SECURITÉ • Faille XSS • CSP

    : Content Security Policy • HTTPS et Let’s Encrypt • etc.
  49. Pensez à la maintenabilité #FRONT #MAINTENABILITÉ • Structure • Organisation

    des fichiers (atomique, daisy, etc.) • Commentaires • Supprimer les !important en css • Limiter l’imbrication à 3 niveaux • etc.
  50. Et selon la cible, prenez en compte la rétrocompatibilité #FRONT

    #RÉTROCOMPATIBILITÉ • Les technos (Flexbox, transformations, svg, etc.) sur IE • Les navigateurs utilisés à l’étranger (Chine, etc.) • L’ordre de lecture des sites à l’étranger
  51. C’est à vous ! http://www.batman-univers.fr/

  52. TP : Répondre au besoin du client • Interface d’administration

    me permettant de poster des vidéos moi-même • Système pour que les gens puissent mettre des commentaires • Il doit y avoir mes liens twitter, facebook • Je veux pouvoir regrouper mes vidéos dans des catégories • Je dois pouvoir mettre une vidéo en avant Osteo-Congress Organisateur de congrès d’ostéopathie Budget pour mon site : 15 000 euros Délai : 7 mois
  53. Des questions ? https://www.youtube.com/watch?v=bS5P_LAqiVg

  54. Merci https://www.youtube.com/watch?v=bS5P_LAqiVg

  55. Un peu de veille techno #VEILLE #TWITTER #FLUX RSS @WalterStephanie

    @amelieboucher @SaraSoueidan @iamvdo @Sylduch @L_Demontiers @goetter @nicolas_guenin https://www.w3.org/ https://css-tricks.com/ http://tympanus.net/codrops/ https://blog.stephaniewalter.fr/ http://newflux.fr/ http://www.uxmatters.com/ https://blog.prototypr.io/