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.

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
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/