Please enable JavaScript.
Coggle requires JavaScript to display documents.
PROSIT 22 Ergonomie et bonnes pratiques WEB (Ergonomie (Regles d'…
PROSIT 22
Ergonomie et bonnes pratiques WEB
Ergonomie
Utilité
Capacité d'un objet a remplire l'activité pour laquelle il est déstiné
Utilisabilité/Usabilité
La facilité d'emploi de l'objet : Ce qui définit la plus part du temps l'ergonomie d'un site web
La mise en sécurité de l'utilisateur et de ses données
http://ergonomie-web.studiovitamine.com/
Les utilisateur sont de moins en moins tolérents au problèmes d'ergonomie et quitte,t rapidement le site si ils n'en comprennent pas la manère de fonctionner
Il faut penser en utilisateur et non en concepteur en réfléchissants aux différentes fonctionnalités du site
L'utilisateur doit réussire a faire cu qu'il a besoin de faire rapidement et sans érreur
Regles d'ergonomie
Elles doivent être appliqués mais ne représentent pas un dogme a suivre aveuglément
Matériel
Les utilisateurs possèdent des systèmes d'affichages tres différents
L'utilisateur n'aime pas télécharge des plugins et autres téchnologies non standards pour afficher une page web
Il faut concevoir l'application web dans l'optique d'un ecran standard 1920x1080
Sobriété
Un site simple et peu chargé pour mettre en avant l'information
Un site tout de fois animé pour attirer l'utilisateur
Lisibilité
Une information est plus difficile a lire sur ecran que sur papier
Il faut hiérarchiser l'information
Les infos doivent etres claires et bien organisés
3 clics
La regle de 3 clics stipule que toute information sur le site doit etre accessible en 3 clics seulement
Rapidité
Le temps d'affichage des pages doit etre le moins long possible
Réduire l'utilisation d'images
Utiliser des technologies permettant de charger le contenu en fonction de la connexion utilisateur
Interactivité
L'utilisation de liens permet de donner plusieurs choix a l'utilisateur en fonction de ses attentes
L'internaute doit pouvoir contacter une personne du site par le biais d'un formulaire de contact ou d'une adresse email
Accessibilité
La capacité de lecture a tout les internautes
Légendes d'images (malvoyant)
Interopérabilité avec d'autres produits existants (lecteur d'ecran, flux rss)
Choix des couleurs (daltonisme)
Disponibilité
Un site doit etre le plus disponible possible pour ne pas afficher un message d'érreur frustrant pour l'utilisateur
Un site non disponible peut être retiré des listes des moteurs de recherche entrainant un déréférencement
La disponibilité est l'un des principes les plus importants de l'ergonomie
Questions a se poser pour étudier l'ergonomie
Quel sont les enjeux
Quel est le public visé
Quel sont ses habitudes
Son age (facilité d'adaptation)
L'équipement visé ou a prendre en compte
Leur niveau de compétence
Les objectifs du site
Pourquoi faire ce site
https://www.wikiwand.com/fr/Utilisabilit%C3%A9_du_Web
Charte graphique
Document relatant des toutes les regles regissant l'identité visuelle d'une entreprise
Elle donne des regles graphiques
Sur les couleurs
La typographie
Les formes
Les photos
Le ton des textes
Et bien d'autres choses
le logo
La charte graphique doit etre réspectée pour tout les supports de communication permettant de définir directement d'ou viens le support
Elle permet une cohérence et un homogénéitée des styles graphiques
Exemple de charte graphique monoprix
https://fr.slideshare.net/conseilsmarketing/monoprix-dossier-de-presse-20-mars-2013-bf?ref=http://www.conseilsmarketing.com/promotion-des-ventes/charte-graphique-ca-sert-encore-en-2015
Créer un charte graphique
Définir les valeurs de l'entreprise avec 1 valeur principale et 1 valeur seondaire représentant les qualités de l'entreprise
La mission de l'entreprise définit en 1 phrase
Les produits de l'entreprise permettant de définir le champ d'action de l'entreprise
décrir les clients et leur relation a l'entreprise
http://www.conseilsmarketing.com/promotion-des-ventes/charte-graphique-ca-sert-encore-en-2015
https://www.anthedesign.fr/creation-de-sites-internet/charte-graphique/
Responsive
Media queries
Nouvelle propriété CSS3
Deja vu dans le prosit précédent
Bootstrap
Framework CSS développé par Twitter
Permet de créer un layout sur la base d'une grille
Tout les éléments sont contenus dans un container définis par 2 classes
.container : permettant de créer un container a largeur fixe se réduisant pour devenir résponsive
.container-fluid : prenant tout le largeur de l'écran de base puis se réduisant
La classe .row permet de créer des ensembles d'éléments sur une même ligne
Les classes .col permettent de donner une taille aux éléments
Les classes .col sont suivi d'un numéro permettant de donner la largeur de la colonne entre 1 et 12
Les classes .col permettent aussi de donner une largeur d'élément différent selon le type de device
.col : pour les devices mobiles
.col-sm : pour le petits devices
.col-md : pour les tablettes
.col-lg pour les devices desktops
.col-xl : pour les devices larges
Les classes .col sont
Obligatoirement
comprises dans des classes .row
Chaque ligne contiens 12 colonnes
Plein d'autres fonctionnalités servent d'outils pour éviter de réinventer la roue
Les formulaires
.form-control : permet de former un input comme élément de formulaire
.form-group : permet de grouper les éléments d'un formulaire (label,input,erreurs)
https://v4-alpha.getbootstrap.com/components/forms/
Les boutons
.btn : permet de donner un style de bouton bootstrap
.btn-primary : le bouton principal
.btn-danger : un bouton rouge
.btn-sm : bouton petit
https://v4-alpha.getbootstrap.com/components/buttons/
Et plein d'autres components
https://v4-alpha.getbootstrap.com/components
Testeur de pages mobile
https://search.google.com/search-console/mobile-friendly
Site mobile friendly = un site facilement acessible sur mobile
Dans beaucoup de pays, le nombre de téléphone dépasse le nombre d'ordinateurs
https://developers.google.com/webmasters/mobile-sites/
Avoir un site mobile est éssentiel
Devoir pincer pour agrandire un site est une experiance frustrante pour l'utilisateur qui peut abandonner le site non adapté
Le passage a un site mobile implique
De réorganiser l'affichage des données sans les altèrer
Simplifier les taches pour les réduire a l'éssentiel
Réduire le temps d'affichage des pages
Un site responsive ne doit pas etre un site parallèle destiné aux mobiles mais bien une adaptation utilisant CSS de l'affichage pour une utilisation agréable sur mobile
Outils de développement
La majorité des navigateurs modernes implémentsent des outils de développement web visant a faciliter le débogage, ils sont accessible avec la touche
F12
sur n'importe quel page
Console
Affiche les informations (log) de la page WEB
Permet d'éxécuter du code a la volée dan la page en javascript
Performance
Donne un aperçu de la réctivité général du site
Pour évaluer les performances, on enregistre un profil comprenant l'ensemble des opération que l'utilisateur peut etre amené a éfféctuer
Le moniteur affiche le profil sous forme d'un graphique affichanta diverses informations
Le framrate de la page
Un framerate de 30 fps est recommandé
Un framerate constant est recommandé
Un framrate de 60 fps représente le sain graal des performances
Le temps de calcul des différents éléments de la page
En violet le calcul du layout et des styles de la page
En vert l'affichage de la page a l'utilisateur
En orange les calculs javascripts
L'outil dispose de plusieurs sous-outils
La chronologie donnant les actions éfféctués par le navigateur
L'arbre d'appel donnant les fonctions javascripts appelés
La graphique JS montre la pile d'appels javascript
La vue allocation affiche les allocations mémoires du code
https://developer.mozilla.org/fr/docs/Outils
Réseau
Le moniteur réseau affiche toutes les requètes éfféctués par fle navigateur aux serveur
Il est requis de recharger la page pour enregistrer toutes les requètes
Les requètes AJAX sont aussi affichés
On y retrouve des informations sur le temps qu'a mis une requète a aboutir et les différents headers envoyés ainsi que les codes d'érreur
Affiche aussi les perfromances réseau des éléments de la page par catégorie perettant de voir quels éléments peuvent retarder l'affichage de la page
Inspecteur
Permet d'examiner et d'editer le code HTML en temps reel
Permet de visualiser les transformations
Permet d'examiner et d'editer le CSS en temps reel
Permet d'examiner les éléments de la page écoutés en javascript
Examiner la grille CSS :
Analyser les dimentions des différentes boites
Et bien d'autres outils
Mentions légales
Tout site professionnel doit afficher des informations sur son site internet qu'il soit de vente en ligne ou non
Forme juridique de la société
Adresse postale de siege social
Capital social
Courrier éléctronique / numéro de téléphone
Nom de l'autorité permettant l'exercice
Coordonnées de l'hebergeur du site
Conditions générales de vente
Numéro de déclaration CNIL
Gestion des cookies
Avertir de l'utilisation des cookies
Permettre a l'utilisateur de refuser les cookies
Informer de la finalité des cookies
La durée du consentement est de 13 mois maximum
D'autres cas particuliers
https://www.service-public.fr/professionnels-entreprises/vosdroits/F31228
Bonnes pratiques
Utiliser les validateur HTML et CSS du W3C permettant de detecter les erreur non-standards dans les pages HTML et les documlents CSS
https://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Bonnes pratiques CSS
https://www.grafikart.fr/tutoriels/html-css/css-organiser-smacss-500
Le CSS est un langage tres simple menant a diverses utilisations et a un code important et désorganisé
Utiliser le moins de profondeur possible
Créer un classe pour chaque élément de la page
Préfixer les classes en fonction de leur utilisation pour éviter les confits
Si un élément est utilisé a plusieurs endroits du design on peut utiliser un classe générique
Détacher le HTML du CSS en utilisant des classes
PARTOUT
Système OOCSS
Éviter les répétitions de regles CSS
On crée des classes génériques permettant de définir globalement les regles d'un élément
On ajout des classes spécifiques pour spécialiser les utilisétion des classes génériques
ATTENTION
a ne pas trop décomposer sou peinde d'avoir des classes a une seule regles et donc bien trop modulable pour etre agréable
Méthode SMACSS
Scalable and Modular Architecture for CSS
Division du style en plusieurs catégories
Catégorie de base
Stylisant les éléments HTML de base comme h1, p, strong, em, a ...
Catégorie de layout
L'ensemble des éléments relatif a l'organisation du site
l'affichage du site comme le .l-header, .l-footer, .l-sidebar, .l-nav ...
Les classes de layout sont toutes préfixés par "l-" permettant de la repèrer
Ces classes représentent plus la taille et l'organisation des blocs que le style a proprement parler, on y retrouve les marges, les dimentions et l'organisation (flexboxes)
Catégorie modules
Permettant de styliser dirèctement les éléments en grandes classes comme .btn, .widget, .title, .form, ...
Ies modules comprennent aussi les styles alternatifs permettant de spécialiser les classes suivant l'OOCSS
Catégorie d'états
Axé javascript
Classes relatives a l'affichage ou a la modification d'un élément avec le javascript
On y retrouve des classes pour rendre actif, pour cacher, pour afficher comme .is-active, .is-hidden, ...
Toutes les classes d'état sont préfixés par "is-"
Catégorie de theme
Permet de donner plusieurs versions d'un même module ou élément
Plus rare car moins utilisé dans un même site
On y retrouve des classes comme .dark ou .light si l'on donne deux versions d'un même module
Ces catégories sont organisés dans le CSS dans l'ordre
https://smacss.com/
Utiliser un préprocésseur
Permet une meilleur organisation du code
Demande une compilation en CSS avant d'être utilisable
Les différents préprocésseurs
SASS
LESS
Compass
Stylus
BEM
Séparer la classe générale des classes pécialisés par un double tiret ou un double underscore
http://cssguidelin.es/
Ne
JAMAIS
utiliser d'ID en CSS
L'ID représente des éléments uniques
L'ID est réservé aux selections javascript
Les classes on toutes les mêmes priorités contrairement aux ID plus prioritaires
Tester sur de multiples navigateurs
https://github.com/mdn/crossbrowser-testing-lab/wiki