Ergonomie et webdesign

1. Ergonomie et webdesign Réflexions autour de l’optimisation de sites web et possibilités Drupal

2. Optimisation de sites web Valoriser son site web Ergonomie Webdesign

3. L'ergonomie d'un site web

4. 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 Objectifs et contraintes

5. Les critères d'ergonomie

6. Sobriété Aspect, méthode / possibilité Drupal • Simplicité • pas plus de trois ou quatre couleurs • Peu chargé

7. 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)

8. 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

9. 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

10. Rapidité Aspect, méthode / possibilité Drupal • Temps de chargement • Images optimisées • module ImageAPI Optimize • Images non redimensionnées

11. 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

12. Adaptabilité Aspect, méthode / possibilité Drupal • Possibilité de personnalisation • Redimensionnement des polices • module Text Resize

13. Adaptativité Aspect, méthode / possibilité Drupal • Possibilité d’adaptation automatique en fonction de l’environnement utilisateur • thème de type « fluid layout »

14. 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é

15. 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

16. La création web impactée Navigatio et repérage Rubriquage Parcours visuel et position des informations Typographie Choix des couleurs Images Icônes

17. Parcours visuel et position des informations Sens intuitif de la lecture

18. 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 Conséquences sur l’agencement Organisation de nombreux thèmes Drupal

19. Rubriquage • Organiser les différentes informations • Faire l'inventaire des contenus • Les regrouper par thématique (rubriquage) • Déterminer leur découpage en sous-rubriques

20. 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

21. 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

22. 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

23. Icônes

24. 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é

25. 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

26. Introduction au webdesign

27. 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

28. Positionnement : un compromis

29. Champs d’application et possibilités Drupal Themingdu site Choix des couleurs

30. 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

31. Agencement des pages

32. 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

33. 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

34. 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

35. Choix des couleurs

36. 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 »

37. 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

38. 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

39. Symbolique des couleurs

40. Crédits photos • commentcamarche.net • growingventuresolutions.com • twikeoshop.com • ujf-grenoble.fr