$30 off During Our Annual Pro Sale. View Details »

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

    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