Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Nicolas Guenin

October 26, 2016
Tweet

More Decks by Nicolas Guenin

Other Decks in Education

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/