L'ergonomie d'un site web
Objectifs et contraintes
Critères et possibilités Drupal
La création web impactée
Domaines impactés
Structure Fonctionnalités Graphismes Contenus
Objectifs et contraintes
Objectifs
Répondre efficacement aux attentes des utilisateurs
Leur fournir un confort de navigation
Prendre en compte de la diversité des profils des visiteurs
Les contraintes utilisateur
Attentes et exigences diverses
Habitudes : les comportements acquis
Capacité d'adaptation Diversité des
équipements : navigateur, résolution écran
Niveau de connaissances variable
Les critères d'ergonomie
Accessibilité
Adaptativité
Adaptabilité
Interactivité
Rapidité
Utilisabilité
Lisibilité
Sobriété
Siteweb
Sobriété
Aspect, méthode / possibilité Drupal
Simplicité
pas plus de trois ou quatre couleurs Peu chargé
Lisibilité
Aspect, méthode / possibilité Drupal
Clarté
aérer le texte : optimisation des CSS du thème
Structuration optimisation des CSS du thème
Organisation utiliser un module Book (core)
Utilisabilité
Aspect, méthode / possibilité Drupal
Facilité de navigation créer une zone de recherche : module Search
(core) Repérage
activer le fil d’Ariane créer un plan du site : module Site map
Liberté de navigation créer un menu multi-niveaux : module Nice menu
ou Superfish
Utilisabilité (suite)
Aspect, méthode / possibilité Drupal
Visibilité de l'adresse
activer les alias d’URL module Path auto
Tangibilité de l'information configurer les éléments du thème
Homogénéité de la structure
Rapidité
Aspect, méthode / possibilité Drupal
Temps de chargement Images optimisées
module ImageAPI Optimize Images non redimensionnées
Interactivité
Aspect, méthode / possibilité Drupal
Liens hypertextes Découpage de l'information
maximum 3 à 5 hauteurs d’écran Facilitation des échanges
activer les commentaires
Adaptabilité
Aspect, méthode / possibilité Drupal
Possibilité de personnalisation Redimensionnement des polices
module Text Resize
Adaptativité
Aspect, méthode / possibilité Drupal
Possibilité d’adaptation automatique en
fonction de l’environnement utilisateur thème de type « fluid layout »
Accessibilité
Aspect, méthode / possibilité Drupal
Standard WCAG 2.0 75 améliorations répertoriées sous Drupal 7 Modules CCK Accessibility et Accessible helper
Universalité de l'accès compatibilité avec les terminaux mobiles :
module Mobile Theme penser aux non-voyants et malvoyants
modules de vocalisation par langues (French Stemmer, Ukrainian Stemmer, ...)
Interopérabilité
Accessibilité (suite)
Aspect, méthode / possibilité Drupal
Transparence des formats Légende Usage sain des feuilles de style Choix des couleurs Contraste adapté
contrastes améliorés sous D7 Taille des polices modifiable
module Text Resize
La création web impactée
Structure
Fonctionnalités
Graphismes
Contenus
Navigatio et repérage Rubriquage
Choix des couleurs
Images Icônes
Parcours visuel etposition des informations
Typographie
Parcours visuel et position des informations
Sens intuitif de la lecture
Informationtextuelle
Je m'intéresse aucontenu texte
Je
re
ch
erc
he
de
l'in
form
ati
on
Le sens intuitif de la lecture conditionne le positionnement des informations
Il résulte de la combinaison de la recherche du lecteur et de son intérêt pour les contenus
Conséquences sur l’agencement
Logo en haut à gauche premier élément perçu lien vers la page d'accueil
En-tête contenant le nom du site un bandeau de
navigation, une bannière
Menu latéral contenant liens contextuels zone de recherche
(optionnel)
Corps de la page contenant l'essentiel de l'information
Pied de pages contenant informations globalement
utiles
Organisation de nombreux thèmes Drupal
Rubriquage
Organiser les différentes informations
1. Faire l'inventaire des contenus
2. Les regrouper par thématique (rubriquage)
3. Déterminer leur découpage en sous-rubriques
Navigation et repérage
Inciter l'utilisateur à suivre un chemin selon des scénarios prédéfinis
Permettre de changer de rubrique ou de quitter le site Mettre en oeuvre des outils de navigation
Outils de navigation
Permettent au visiteur de se repérer
Flèches de navigation
< ^ >
Fil d'Ariane
[Accueil] > Livres > Chimie
Navigation par onglets
Suite de lienshiérarchisée
Permet de distinguer lesrubriques et leurs contenus
Fournit une navigationintuitive à l’utilisateur
Permet de se repérerfacilement dans le site
Permet une navigation horizontale
Plan du site
Permet de visualiserle site en un coup d'oeil
Une tendance forte
Les menus multi-niveaux expriment l’ouverture du site
sur l’extérieur grâce à leur disposition en largeur
sa richesse grâce à la profondeur des sous-menus descendants
Modules pour Drupal :Nice MenusSuperfish…
Choix des couleurs
Ne pas utiliser plus de trois ou quatre couleurs différentes
Préférer une couleur d'arrière-plan claire pour ne pas gêner la lisibilité du site
Définir une couleur prédominante
une ou plusieurs couleurs secondaires Prendre en compte la coloration chaude ou froide des
éléments, qui influence la perception des volumes
Icônes
Etablissent une signalisation visuelle Incitent à des actions et à une navigation instinctifsRespecter le sens conventionnel de certains symboles
Symboles conventionnels
Fonction de recherche
Possibilité de contact par mail
Aide en ligne
Lien vers la page d'accueil
Langue de la page en cours / possibilité de changer de langue
Images
Rendent plus attrayantTrop d'images :
gênent le confort visuel, ralentissent le chargement des pages
Eviter les images / animations ludiques récupérées sur le webdonnent un aspect « amateur » au sitenuisent à la crédibilité
Typographie
Polices à empattement déconseillées : risque de gêne pour la lecture à l’écran
Polices non standard : risque de problèmes d’affichage
Polices sans serif classiques (Arial, Verdana, Helvetica, ...) préférables
Introduction au webdesign
Objectifs
Positionnement :un compromis
Champsd’application et
possibilités Drupal
Objectifs
Structurer les éléments graphiquesTraduire esthétiquement l'identité
visuelle de la sociétéValoriser l'image de l'entrepriseProcurer un sentiment de confiance à
l'utilisateurLui permettre de trouver facilement
l'information
Positionnement : un compromis
webdesignPrésentation
graphique aboutie
Navigationsobre
Permettrede donner une
crédibilité
Permettrede trouverfacilement
l’information
Theming du site
La mise en place d’un thème
Représente le squelette graphique
Permet de simuler la navigation le fonctionnement des
éléments dynamiques Aboutit
à la création de modèles de pages
à l'étape de validation
Définitiond’une chartegraphique
Choix oucréation
d’un thème
Agencementdes pages
Theming
Agencement des pages
Page web
Elémentsinvariables
Elémentsvariables
Menu latéral contextuelCorps de la page
Logo, En-tête avec
oNom du siteoBandeau de navigationoBannière
Zone de recherche (option)Pied de page
Définition d’une charte graphique
Définit l'habillage graphique de la page les tailles, les couleurs l’apparence des
textes images boutons
le positionnement relatif des objets
Choix ou création d’un thème
Nombreux thèmes proposés par Drupal Récupérer un thème adapté depuis un autre
CMS : déconseillé risque de problèmes de compatibilité
Possibilité de créer soi-même son thème Possibilité de décliner son thème
en fonction des rubriques des rôles d’autres situations configurables
avec le module Themekey
créer soi-même son thème
Possibilité de créer son propre thème à partir d’un thème
de base Le thème « zen »
permet de créer facilement son thème personnalisé en CSS
Choix des couleurs
Le cercle
chromatique
Choixharmonieuxdes couleurs
Influencedes couleurs
Symboliquedes couleurs
Choixdes
couleurs
Le cercle chromatique
permet d'appréhender les interactions entre les couleurs
Les couleurs sont catégorises en couleurs primaires,
secondaires et tertiaires
couleurs « chaudes » et « froides »
Choix harmonieux des couleurs
Deux façons principales de choisir des couleurs harmonieuses choisir des nuances d'une même couleur ou des
couleurs dont les tons sont proches mêler des couleurs complémentaires
Des éléments de couleur chaude paraîtront plus grands que ceux de couleur froide
Influence des couleurs
Les couleurs influent sur le comportement des individus : physiquement : appétit, sommeil, température du
corps, ... émotionnellement : sentiment de peur, de sécurité,
de joie, ... psychologiquement : dynamisme, concentration, ...
La composition des couleurs influence la perception des volumes
Symbolique des couleursSymbolique Domaine
Calme, confiance, autorisation, apaisement, sérénité, protection, sérieux, mystique, bonté, eau, espace, paix
Voile, nouvelles technologies, informatique, médecine
Délicatesse, passion, discrétion, modestie, religion. Culture, politique
Charme, intimité, femme, beauté Journal personnel, femmes
Chaleur, force, courage, dynamisme, triomphe, amour, enthousiasme. Luxe, mode, sport, marketing, médias
Tiédeur, confort, gloire, bonheur, richesse, honneur, plaisir, fruit, odeur, tonus, vitalité. Divertissement, sport, voyage
Lumière, gaieté, soleil, vie, pouvoir, dignité, or, richesse, immortalité. Tourisme
Nature, vie végétale, secours, équilibre, foi, apaisement, repos, confiance, tolérance, espoir, orgueil, jeunesse, charité.
Découverte, nature, voyage, éducation
Calme, philosophie, terroir. Environnement
Pureté, innocence, neige, propreté, fraîcheur, richesse. Mode, actualités
Neutralité, respect. Design, associations, organisations à but non lucratif
Sobriété, luxe, nuit. Cinéma, art, photographie et interdit