MINI GUIDE
LES BONNES PRATIQUES WEB
OBJECTIF
À VOULOIR EN DIRE TROP,
ON NE DIT PLUS RIEN.
Définir l’action principale de la page et la mettre en valeur. En déterminant le type d’utilisateur cible, vous serez en mesure de mieux comprendre les actions à privilégier.
Différentes approches sont utilisées pour faire ressortir un élément, comme l’emplacement, la grosseur, la couleur.
ARBORESCENCE
CRÉER DES CHEMINS INTUITIFS.
Définir les éléments de menu qui sont le plus sensé et concis pour votre site, et trouvez de bons mots-clés. Ne limitez pas la conception de votre arborescence à un classement de contenus en niveaux. Vous devez prévoir le parcours utilisateur en mettant de l’avant les objectifs principaux. L’organisation de l’information est l’étape la plus cruciale. Une mauvaise élaboration pourrait décourager l’usager.
L’œil discerne rapidement entre 5 à 7 éléments d’un même coup. C’est pourquoi nous recommandons de respecter ce nombre d’onglets dans votre menu. Il sera plus simple pour l’utilisateur de faire un survol rapide de l’ensemble de l’information disponible sur votre site.
À quelques exceptions, nous vous suggérons de garder votre arborescence au plus simple en évitant le 3e niveau de menu.
Des outils sont disponibles en ligne pour vous aider à cette étape, par exemple www.gloomaps.com
CONTENU
L’ESSENTIEL
Le message est un survol général,
il est au premier plan.
LES DÉTAILS
L’information est complète,
tous les détails du sujet y sont présentés.
Les tableaux sont à éviter si votre contenu vous le permet. Ils rendent la lecture de l’information en version mobile plus complexe.
Les accordéons sont bien pratiques, mais attention. Avoir trop d’accordéons dans une page peut rendre l’information difficile à trouver.
Évitez d’ajouter des tableaux ou d’autres accordéons à l’intérieur d’un accordéon. D’un point de vue responsive, cette pratique cause problème.
Les URL de votre site doivent être simples et représentatifs. Éliminer les déterminants pour être plus concis.
Assurez-vous qu’il n’y ait aucun lien brisé (page 404) dans votre site.
Les hyperliens se doivent d’être interpellant. Évitez d’indiquer Cliquez-ici, utilisez plutôt des mots engageant: Voir plus, Explorer, En savoir plus, ou simplement la description courte de l’élément.
RÉDACTION WEB
LES GENS NE LISENT PLUS, ILS SCROLLENT.
Comme la lecture est 25 fois plus lente sur le web, une majorité d’utilisateurs lisent en diagonale. En structurant et dynamisant votre texte, vous donnez des chances à votre contenu d’être plus efficace.
Ponctuez le texte d’éléments visuels, de citations, de paragraphes et de points de formes. Faites ressortir des mots en gras et ajoutez des titres courts à vos sections.


ADAPTATIF
LES TÉLÉPHONES INTELLIGENTS ONT LA COTE.
Plus de la majorité des utilisateurs prennent leurs téléphones intelligents pour consulter le web. Il est primordial de bâtir nos sites de façon responsive.
Pensez les contenus comme des boîtes qui viendront se mettre l’une sous l’autre en mobile.

IMAGERIE
UNE IDENTITÉ QUI PARLE FORT ET QUI FAIT ÉCHO.
L’imagerie est une partie importante de votre site. Le choix de vos images vient donner une touche particulière qui vous représente et qui vous différencie des autres sites.
Il existe différentes banques d’images libres de droits comme unsplash.com, storyblocks.com, pexels.com. Vous pouvez également éditer vos images gratuitement avec l’outil photopea.com.
Il est préférable de présenter des images sans texte.
Ainsi, on s’assure que:
- les images sont lisibles sur toutes les plateformes;
- l’information est accessible pour tous;
- le référencement est optimal.

ACCESSIBILITÉ WEB
L’INTÉGRATION SOCIALE AU PREMIER PLAN.
L’accessibilité web est nécessaire pour l’inclusion sociale. Notre gabarit universel s’appuie sur les Règles pour l’accessibilité des contenus web 2.0 (W3C). Pour plus d’information, vous trouverez ce symbole en bas de page de l’ensemble des sites de l’UQAM.
Voici un survol des éléments à surveiller lorsque vous ajoutez des éléments à votre site:
- évitez le mouvement automatique, qui peut nuire à la concentration (carrousel ou vidéo);
- respectez les niveaux de titres (H1, H2, H3, etc.)
- ajoutez du texte alternatif à vos images;
- créez des boutons avec du texte clair et concis, et de grande taille;
- rappelez-vous que votre site pourrait être navigué avec le clavier (à coup de TABS);
- évitez l’ouverture d’un nouvel onglet quand l’usager active un hyperlien;
- assurez-vous d’avoir un contraste de couleurs au-dessus de la norme de 4.5.

