cours_integ_web_Cohérence_des_pages_web_23_24.pdf

COHÉRENCE DES PAGES
WEB
• INTRODUCTION GÉNÉRALE
• DÉCOUPAGE ET INTÉGRATION
DES PAGES WEB
• COHÉRENCE DES PAGESWEB
• DISPARITÉ LOGICIELLE /
MATÉRIELLE
• INTÉGRATION GRAPHIQUE
• PUBLICATION DU SITEWEB
40

INTRODUCTION
 La mise en page du site internet représente le cadre et la structure de base du site
web.
 doit être suffisamment cohérente, car elle donne un aperçu général du site
 Elle détermine en particulier l’emplacement du contenu, de la barre de navigation, des
images et d’autres éléments importants sur le site web.
 Si ces éléments communs se trouvent au même endroit sur chaque page, les visiteurs du site web
se concentreront davantage sur son contenu.
 Lorsque les sites web et les applications respectent les normes, les utilisateurs savent
à quoi s’attendre  l’apprentissage est accru et la confusion est réduite.
41

COHÉRENCE
 La cohérence est l’un des plus importants facteurs sur lesquels repose une mise en
page de site web efficace.
 La cohérence peut aller de la bonne utilisation des onglets au bon choix des polices de
caractères.
 La cohérence est la quatrième des dix heuristiques de Jakob Nielsen.
 essentielle pour créer des applications qui ont du sens pour les utilisateurs.
 Les sites web et les applications qu’on utilise reposent tous sur des conventions bien
établies.
 Pour être faciles à apprendre et à utiliser, les systèmes doivent adhérer à la fois à la
cohérence interne et externe.
 utiliser les mêmes modèles partout dans le système ;
 suivre les conventions spécifiques au web, à la plateforme et au domaine. 42

COHÉRENCE INTERNE
 La cohérence interne concerne la cohérence au sein d’un produit ou d’une famille de
produits, soit au sein d’une seule application, soit dans une famille ou une suite
d’applications.
 Une famille de produits désigne plusieurs produits, vendus individuellement ou en
groupe, fabriqués par la même entreprise sous la même marque. La plupart des suites
d’applications listeront les composants de menu dans le même ordre ou utiliseront des
icônes cohérentes pour les mêmes fonctions dans toutes les applications et des
dispositions familières pour les boîtes de dialogue et les modales.
 La cohérence interne au sein d’un produit ou d’une application peut souvent être
observée dans les couleurs et les mises en page utilisées.
43

COHÉRENCE INTERNE
LE DESIGN SYSTEM
 La création d’un design system pour une application ou famille d’applications peut
aider les équipes à maintenir la cohérence entre les produits et services.
 Les utilisateurs trouveront les systèmes familiers et faciles à apprendre,
 Les équipes qui construisent le logiciel bénéficieront également d’une redondance réduite
dans leur travail et d’une source unique de vérité pour savoir comment et quand utiliser
les composants.
44

COHÉRENCE INTERNE
LE DESIGN SYSTEM
 Version ancienne deGoogle des icônes Mail,
Calendar et Drive avaient un style visuel
cohérent,
 Dans la version actuelle utilisation des
mêmes couleurs dans plusieurs applications.
 Lorsqu’elles sont affichées à une petite taille,
comme c’est généralement le cas sur les
appareils mobiles, les similitudes entre ces
icônes les rendront difficiles à différencier.
45
 Suivre les bonnes pratiques d’utilisation des icônes pour tester les icônes de l’application avant le
lancement.

COHÉRENCE EXTERNE
 La cohérence externe fait référence aux conventions établies dans une industrie ou
sur le web en général, au-delà d’une application ou d’une famille d’applications.
 La loi de Jakob stipule que les gens passent la plupart de leur temps sur des sites
autres que le vôtre
 les utilisateurs apportent leurs attentes d’autres sites lorsqu’ils visitent votre site.
 Les contextes et les types d’utilisateurs varient sur chaque site
 possibilité d’adaptation et d’ajustement, mais la majorité des interactions doivent être
conformes à ce que les gens attendent.
 Lors du design d’une application, il faut se concentrer sur l’aide aux utilisateurs pour
atteindre leurs objectifs aussi efficacement que possible plutôt que sur la création
d’une interface non conventionnelle que les gens devront comprendre. 46

COHÉRENCE EXTERNE
 Exemple : une norme dans le design de la navigation est le lien vers la page d’accueil.
Il permet de revenir facilement à la page d’accueil du site, quel que soit l’endroit où
se trouve actuellement un utilisateur sur le site.
 Il existe des directives pour afficher un produit, enregistrer un article pour plus tard
et ajouter un article au panier, etc.
 Ces directives transcendent les types d’utilisateurs, fournissant des normes qui
peuvent être appliquées à n’importe quel site de commerce électronique.
47

COUCHES DE COHÉRENCE
49
Visuel
Disposition
des pages et
des boutons
Données
saisies par
l’utilisateur
Contenu

VISUEL
50
 Les symboles, l’iconographie et les images utilisés doivent être cohérents
sur l’ensemble du site.
 Les images doivent recevoir toutes un traitement visuel similaire (ex: la couleur et
le poids de la bordure doivent être cohérents sur toutes les images de la page du
produit).
 Lors du choix des symboles ou des icônes pour représenter des actions,
il faut sélectionner des icônes qui correspondent étroitement à la façon
dont d’autres sites représentent le même concept. (ex: respecter la
loupe standard pour la recherche, afin que les utilisateurs la
reconnaissent facilement.)

DISPOSITION DES PAGES ET DES BOUTONS
51
 Possibilité d’avoir plusieurs types de pages différents sur un site
 certains composants resteront cohérents d’une page à l’autre.
 Chercher les similitudes et aux différences entre les pages :
 Ex: différence entre une page de produit et d’une page de mise à jour de
commande.
 définir les styles et des éléments à réutiliser, tels que les en-têtes, les boutons
d’appel à l’action et la navigation.
 Décider où ces éléments vivront et les rendre cohérents sur toutes les pages, le
cas échéant.

DISPOSITION DES PAGES ET DES BOUTONS
52
 S’assurer de la cohérence dans le placement des champs et des boutons
de formulaire, en particulier pour les formulaires ou les assistants
multipages.
 Choisir de mettre l’appel à l’action à gauche et le bouton Annuler à droite, ou vice
versa.
 Choisir les désignations des champs selon les besoins
 S’assurer que chaque formulaire sur le site est conçu de la même
manière.

DONNÉES SAISIES PAR L’UTILISATEUR
53
 Utilisation des normes de l’industrie dans la définition des formats des
informations à saisir par les utilisateurs : dates, numéros de téléphone ou
des lieux, …
 Exemple : la plupart des sites utilisent un sélecteur de date de calendrier
lorsqu’ils demandent aux utilisateurs de saisir des dates. Si les utilisateurs
viennent sur un site et se voient présenter un champ libre, ils devront
passer plus de temps à réfléchir au format qu’ils doivent utiliser lors de
la saisie de la date.
 Pour toutes les instances de collecte de données du site, il faut aider les
utilisateurs à saisir les données en concevant des champs de formulaire qui
éliminent le besoin de deviner comment l’entrée doit être formatée.

CONTENU
54
 Lorsque les utilisateurs interagissent avec le contenu de vos différents
canaux, ils doivent s’attendre à une expérience claire et familière.
 Effectuer une comparaison entre le contenu qui est présenté aux
utilisateurs sur le site et ce que les utilisateurs voient dans les supports
marketing.
 Si le site web utilise un ton de voix décontracté et que les supports
marketing transmettent un message très formel, les utilisateurs peuvent
être confus lorsqu’ils interagissent avec les deux.
 Les équipes internes doivent collaborer sur la stratégie de contenu
afin de déterminer celle qui convient le mieux aux utilisateurs du site.

AVANTAGES DE LA COHÉRENCE
 Permet de répondre aux attentes des utilisateurs
 Lorsque les utilisateurs rencontrent un produit ou service, ils apportent avec eux
leurs propres attentes issues d’expériences antérieures. Lorsque ces attentes sont
satisfaites, la confiance est établie et ils se sentiront maîtres de l’interface.
 Garantie de faibles courbes d’apprentissages
 Les utilisateurs doivent pouvoir transférer leurs connaissances en utilisant d’autres
sites web et applications
 réduire la courbe d’apprentissage des utilisateurs lorsqu’ils interagissent avec
un nouveau site web.
 Ne pas réinventer la roue lorsqu’il s’agit de concevoir des composants communs
tels que les notifications, les modales, les menus déroulants, etc.
55

COMMENT CONCEVOIR UN SITEWEB ?
 La cohérence et les normes sont reconnues comme un principe de conception de
base et doivent s'appliquer à tous les contenus et interactions au sein de votre
produit.
 Bien que la cohérence contribue à améliorer l'expérience utilisateur en éliminant la
formation inutile et la confusion des utilisateurs, il est important de se rappeler qu’on
doit l'utiliser en cas de besoin  ne doit pas limiter l'innovation de conception là où
cela a du sens.
 Concevoir un site Web en suivant les normes et conventions et en étant cohérent
permet de faciliter des décisions de conception relativement triviales  gagner du
temps et libérer l’esprit pour que pouvoir encore améliorer la conception et la
convivialité pour les utilisateurs..
56

RÈGLES D'ERGONOMIE
 Objectif du site
 Présentation des informations
 Rédaction du contenu
 Illustration du contenu du site par des
exemples
 Liens
 Navigation
 Recherche
 Images et animations
 Conception graphique
 Barre de titre
57
Pour analyser en profondeur l'ergonomie d'un site, il est possible de faire
des audits d'accessibilité et des test utilisateurs, mais il existe des principes
de bases :

RÈGLES D'ERGONOMIE
OBJECTIF DU SITE
 Afficher le nom et le logo de l'entreprise en gros et bien en vue.
 Ajouter une signature / slogan qui résume explicitement l'activité du site.
 Mettre en valeur les fonctions principales pour que la page d'accueil remplisse
pleinement son rôle de point d'orientation.
58

RÈGLES D'ERGONOMIE
PRÉSENTATION DES INFORMATIONS
 Inclure dans la page d'accueil un lien Contactez-nous qui pointe sur une page
contenant toutes les coordonnées de l'entreprise.
 Si le site contient des informations sur les clients, ajouter sur la page d'accueil un lien
Clause de confidentialité.
59

RÈGLES D'ERGONOMIE
RÉDACTION DU CONTENU
 Privilégier un vocabulaire centré sur les clients (pas de termes internes, trop
techniques ou jargon commercial).
 Eviter les redondances, même pour souligner leur importance.
 Veiller à la cohérence de la casse (majuscules/minuscules).
 Eviter les listes à puces contenant un seul élément.
 Décrire les actions à accomplir de façon claire (de préférence à l'impératif)
 Développer la première occurrence de chaque abréviation et de chaque sigle.
 Eviter les points d'exclamation !
 Ne pas abuser des majuscules.
60

RÈGLES D'ERGONOMIE
ILLUSTRATION DU CONTENU DU SITE PAR DES EXEMPLES
 Afficher une vignette : ne pas se contenter de décrire
 Pour chaque exemple : proposer un lien direct vers l'article et non une page
générique de catégorie.
 Placer un lien vers la catégorie à côté de l'exemple.
61

RÈGLES D'ERGONOMIE
LIENS
 Différencier les liens et les rendre facilement identifiables.
 Ne pas utiliser de terme générique, comme "cliquez ici".
 Attribuer une couleur différente aux liens visités et non-visités.
62

RÈGLES D'ERGONOMIE
NAVIGATION
 Installer la zone de navigation principale en un point stratégique, de préférence juste
à côté du contenu principal de la page.
 Regrouper les contrôles de navigation similaires.
 Si le site propose une fonction de panier, insérer sur la page d'accueil un lien vers
cette fonction.
 Utiliser des icônes de navigation seulement si elles sont claires.
 Donner aux internautes un accès direct aux fonctions principales du site (technique
du "zéro clic").
 Ne pas proposer d'outils qui se contentent de dupliquer des fonctions du navigateur
(ajout aux favoris, en page de démarrage,...).
63

RÈGLES D'ERGONOMIE
RECHERCHE
 Proposer sur la page d'accueil une zone de saisie des critères de recherche (d'une
taille suffisante et placée en haut de page).
 La recherche peut également être située visuellement en dessous du menu, à
condition de rester sur le premier écran. Mais dans un tel cas, il faut veiller à rajouter
un point d'accès en début de page.
64

RÈGLES D'ERGONOMIE
IMAGES ET ANIMATIONS
 Se servir des images avant tout pour mettre en valeur le contenu plutôt que pour
décorer simplement la page.
 Ajouter une légende aux images et aux photos si le contexte ne suffit pas à les
rendre explicites.
 Ajuster les images à la taille d'affichage.
 Eviter les éléments graphiques en filigrane.
 Ne pas utiliser d'animations en page d'accueil : déconseillées parce qu'elles
n'apportent pas d'information et détournent l'utilisateur du contenu véritable.
 Pas d'animation pour les éléments essentiels (logo, titre, signature): c'est souvent
assimilé à de la pub.
65

RÈGLES D'ERGONOMIE
CONCEPTION GRAPHIQUE
 Utiliser avec modération les différentes polices de caractère et autres
enrichissements typographiques.
 Au delà de 3 polices de caractère, la lecture peut s'en trouver perturbée.
 Rendre le texte lisible (contraste suffisant avec le fond de page) et taille raisonnable.
Il convient de systématiquement indiquer la couleur du texte ET la couleur de fond.
 Eviter le défilement horizontal tant que possible.
 En basse résolution : les éléments les plus importants doivent être visibles d'entrée.
66

RÈGLES D'ERGONOMIE
BARRE DE TITRE
 Commencer le titre de la page par le terme le plus informatif (nom de l'entreprise).
 Ne pas mettre le nom de domaine, sauf s'il fait partie du nom de l'entreprise.
 Inclure un bref descriptif du site.
 Limiter le nombre de mots à 7 ou 8 au total.
67

cours_integ_web_Cohérence_des_pages_web_23_24.pdf

Recommandé

Recommandé

Contenu connexe

Similaire à cours_integ_web_Cohérence_des_pages_web_23_24.pdf

Similaire à cours_integ_web_Cohérence_des_pages_web_23_24.pdf (20)

cours_integ_web_Cohérence_des_pages_web_23_24.pdf