Ergonomie et webdesign

Réflexions autour de l’optimisation de sites web et possibilités Drupal

Optimisation de sites web

Ergonomie Webdesign

Valoriser son site web

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

Champs d’application et possibilités Drupal

Themingdu site

Choix des couleurs

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

Crédits photos

commentcamarche.netgrowingventuresolutions.com twikeoshop.com ujf-grenoble.fr