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

   View Slide

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

   View Slide

3. Ensemble, nous allons voir :
   #Sommaire
   UX : User Experience
   A11Y : Accessibilité Web
   Front-end : Développement de la
   partie visuelle
   

   View Slide

4. Nicolas
   Guenin
   UX & Web designer
   Front end developer
   

   View Slide

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
   

   View Slide

6. And you ?
   

   View Slide

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

   View Slide

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
   

   View Slide

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.
   

   View Slide

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)
    

    View Slide

11. Mais aussi :
    #UX
    Être utilisable
    (Personnes souffrant
    d’un handicap ou d’une
    zone d’utilisation
    inconfortable)
    

    View Slide

12. Et très important :
    #UX
    Être efficace
    (L’utilisateur doit pouvoir
    trouver ce qu’il cherche)
    

    View Slide

13. Et enfin :
    #UX
    Être efficient
    (L’utilisateur doit être
    accompagné à travers
    un parcours optimisé)
    

    View Slide

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 !)
    

    View Slide

15. Loi de fitts
    #UX
    Une cible est d’autant plus rapide à atteindre
    qu’elle est proche et grande.
    

    View Slide

16. L’affordance
    #UX
    C’est la capacité d’un objet à suggérer sa
    propre utilisation.
    

    View Slide

17. Call To Action
    #UX
    

    View Slide

18. Loi de Hick Hyman
    #UX
    Il est plus facile de
    décider parmi un
    nombre d’élément
    réduit.
    

    View Slide

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
    

    View Slide

20. Concevez accessible afin d’éviter l’erreur de vos
    internautes.
    Aidez et évitez les erreurs
    #UX #A11Y
    https://www.tnooz.com/
    

    View Slide

21. L’interface, ça compte !
    #UI
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

28. Et ça s’applique à tout
    #A11Y
    http://www.cc-thieracheducentre.fr/
    

    View Slide

29. Les problèmes d’audition
    #A11Y
    

    View Slide

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

    View Slide

31. Le contraste
    #A11Y
    

    View Slide

32. View Slide

33. View Slide

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

    View Slide

35. L’inclusion
    

    View Slide

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.
    

    View Slide

37. Commencez par penser à tout le
    monde
    #A11Y
    

    View Slide

38. Pensez à ce qui est important avant
    de penser aux bases de données
    #A11Y
    

    View Slide

39. Ne soyez pas trop restrictif
    #A11Y
    

    View Slide

40. Et surtout, pensez que votre produit est
    fait pour être utilisé
    #A11Y
    (Et pas que par vous !)
    

    View Slide

41. Mais dis moi Jammy, et le
    front-end dans tout ça ?
    

    View Slide

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)
    

    View Slide

43. La sémantique ce n’est pas que pour
    Michel Bréal
    #FRONT #CULTUREG
    

    View Slide

44. Il y a des normes et des standards
    #FRONT #BALISAGE
    ● W3C (créé par Tim Berners-Lee)
    ● W3C Validator
    

    View Slide

45. Optimisez pour l’accessibilité
    #FRONT #A11Y
    ● W3CAG & W3C
    Recommendations
    ● RGAA
    ● AccessiWeb
    ● AcceDe Web
    ● alt, title
    ● tabindex
    ● accesskey
    ● attributs aria
    ● etc.
    

    View Slide

46. Optimisez le SEO
    #FRONT #SEO
    ● Microdatas
    ● RDFa
    ● Json-LD
    ● Schema.org
    ● Outil Google
    

    View Slide

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.
    

    View Slide

48. Sécurisez vos contenu
    #FRONT #SECURITÉ
    ● Faille XSS
    ● CSP : Content Security Policy
    ● HTTPS et Let’s Encrypt
    ● etc.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

51. C’est à vous !
    http://www.batman-univers.fr/
    

    View Slide

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
    

    View Slide

53. Des questions ?
    https://www.youtube.com/watch?v=bS5P_LAqiVg
    

    View Slide

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

    View Slide

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/
    

    View Slide