Transcript Ergonomie_webdesign_Paul-Louis-Raymond

Ergonomie et webdesign
Réflexions autour de l’optimisation
de sites web et possibilités Drupal
Optimisation de sites web
Valoriser son site web
Ergonomie
Webdesign
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
Sobriété
Accessibilité
Adaptativité
Lisibilité
Site
web
Adaptabilité
Utilisabilité
Rapidité
Interactivité
Sobriété
Aspect, méthode / possibilité Drupal

Simplicité


pas plus de trois ou quatre couleurs
Peu chargé
Lisibilité
Aspect, méthode / possibilité Drupal

Clarté


Structuration


aérer le texte : optimisation des CSS du
thème
optimisation des CSS du thème
Organisation

utiliser un module Book (core)
Utilisabilité
Aspect, méthode / possibilité Drupal

Facilité de navigation


Repérage



créer une zone de recherche : module Search
(core)
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



Tangibilité de l'information


activer les alias d’URL
module Path auto
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
Navigatio
Rubriquage et repérage
Contenus
Parcours visuel et
position des informations
Typographie
Choix des couleurs
Images
Icônes
Graphismes
Fonctionnalités
Je recherche de
l'information
Parcours visuel et position des informations
Le sens intuitif de la lecture
conditionne le positionnement
des informations
Je m'intéresse au
contenu texte
Information
textuelle
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
<
^
>
Fournit une navigation
intuitive à l’utilisateur
Fil d'Ariane
Navigation par onglets
Plan du site
Suite de liens
hiérarchisée
Permet de distinguer les
rubriques et leurs contenus
Permet de visualiser
le site en un coup d'oeil
Permet de se repérer
facilement dans le site
Permet une navigation
horizontale
[Accueil] > Livres > Chimie
Une tendance forte

Les menus multiniveaux 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 Menus
Superfish
…
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
Symboles
conventionnels
Etablissent
une
signalisation visuelle
Incitent à des actions et à
une navigation instinctifs
Respecter le sens
conventionnel de certains
symboles
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 attrayant
 Trop d'images :

gênent le confort visuel,
 ralentissent le chargement des pages


Eviter les images / animations ludiques
récupérées sur le web
donnent un aspect « amateur » au site
 nuisent à 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
Champs
d’application et
possibilités Drupal
Objectifs
Structurer les éléments graphiques
 Traduire esthétiquement l'identité
visuelle de la société
 Valoriser l'image de l'entreprise
 Procurer un sentiment de confiance à
l'utilisateur
 Lui permettre de trouver facilement
l'information

Positionnement : un compromis
webdesign
Présentation
graphique
aboutie
Navigation
sobre
Permettre
de donner une
crédibilité
Permettre
de trouver
facilement
l’information
Champs d’application et possibilités Drupal
Theming
du site
Choix des
couleurs
Theming du site
La mise en place d’un
thème
Agencement
des pages


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
Theming
Définition
d’une charte
graphique
Choix ou
création
d’un thème
Agencement des pages
Page web
Eléments
invariables
Logo,
En-tête avec
oNom du site
oBandeau de navigation
oBannière
Zone de recherche (option)
Pied de page
Eléments
variables
Menu latéral contextuel
Corps de la 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
Symbolique
des couleurs
Choix
des
couleurs
Influence
des couleurs
Choix
harmonieux
des 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 couleurs
Symbolique
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
Crédits photos
commentcamarche.net
 growingventuresolutions.com
 twikeoshop.com
 ujf-grenoble.fr
