Vers une charte graphique Drupal

3 mars 2011

Dans cet article, je vous propose des maquettes fonctionnelles (ou « wireframes ») illustrant des éléments qu'on retrouve généralement sur un site Drupal typique. Mon objectif est de permettre à un designer graphique d'identifier les éléments à inclure dans la charte graphique d'un projet Web, à partir de laquelle un intégrateur Web pourra créer un « thème » Drupal.

De la même manière que la charte graphique est complémentaire aux maquettes graphiques, les maquettes fonctionnelles amenées ici ne remplaceront jamais les maquettes fonctionnelles particulières à un projet. Elles représentent un site fictif dans l'unique objectif d'inventorier les éléments d'interface Web à ne pas oublier et qui devraient être décrits dans la charte graphique.

Pour les besoins de la cause, je combinerai un maximum d'éléments afin de dégager les points essentiels en cinq planches, soit : une page d'accueil, une liste de résumés, une page de contenu, une page administrative et des résultats de recherche. On pourra se référer à cet article comme à une liste d'épicerie (« checklist ») d'éléments qui seront, tôt ou tard, demandés pendant le processus de conception.

Pourquoi une charte graphique Drupal?

Les pages générées par un gestionnaire de contenus, par opposition à des pages construites manuellement, comportent plusieurs éléments prévisibles. La plupart des éléments que présentés ici reviendront dans chacun de vos sites Drupal.
La présentation par défaut de Drupal ne donne pas un fini professionnel au niveau graphique et doit être systématiquement remplacée.
Peu de designers graphiques connaissent les rouages de Drupal. Souvent, ils maîtrisent mal plusieurs notions de design Web, telles que : extensibilité ou adaptabilité au contenu, contrôle de l'utilisateur sur l'affichage, environnements hétérogènes, accessibilité.

Pour ceux qui s'intéressent à la petite histoire, un besoin plus pressant pour une plus grande attention au design dans la construction de sites Drupal s'est manifesté lors de la conférence Drupalcon DC 2009, dans le cadre d'une grande table ronde pour designers, à l'origine d'un mouvement qui allait plus tard devenir « Design 4 Drupal » [1]. Les idées que j'exprime ici s'inspirent largement des discussions qui ont eu lieu depuis et, notamment, de la charte graphique créé par Nica Lorber de Chapter Three [2].

Sans plus tarder, voici les cinq planches proposées. Pour chacune des planches, nous détaillerons les éléments à ne pas oublier.

Page d'accueil

La page d'accueil est un terrain de jeu favori en design, puisqu'elle commande souvent une réorganisation spatiale radicale par rapport aux autres pages.

La plupart des designs offrent des images de fond dépassant les limites de la grille. Ceci est tout à fait justifié, à condition que ces images puissent se dégrader vers une couleur unie. En effet, il se trouvera toujours un visiteur équipé d'un moniteur capable d'une résolution supérieure à celle de l'image.

Personnellement, je privilégie une grille à la verticale, puisque celles-ci sont plus lisibles et mieux adaptées à la nature variable des pages générées par les gestionnaires de contenus. Une mauvaise habitude que l'on observe chez certains designers est d'essayer de tout faire entrer dans un design de type « carte postale » parce qu'ils tiennent absolument à éviter les barres de défilement. Ce sont souvent de mauvais designs, mal adaptés au médium. Un positionnement judicieux des éléments sur la page est essentiel, mais sur le Web il n'y a pas de raison de se contraindre à des limites provenant du monde de l'imprimé.

Voici les notes associées à l'illustration de la page d'accueil :

L'élément favicon, montré dans la barre d'adresse des fureteurs, ne devrait pas être omis par la charte graphique.
Le formulaire de connexion, en mode « non connecté », est complémentaire à celui qu'on voit sur les pages administratives (mode « connecté »).
Pour le menu, ainsi que pour chaque modèle de lien, la charte graphique doit montrer les états de liens normal, courant et en survol.
Le champ de recherche est repris plus en détail dans la maquette spécifique aux résultats de recherche.
Les fonds se trouvant derrière les titres de blocs se doivent d'être extensibles, surtout à la verticale, puisqu'il est fort probable que certains titres occuperont plus d'une ligne.
Le carrousel, ce bloc d'éléments présentés tour à tour comme des diapositives, est devenu presque incontournable sur les pages d'accueil.
La charte doit fournir des icônes pour les listes à puce et clarifier l'indentation, idéalement sur plusieurs niveaux.

Liste de résumés

Une liste de résumés permet de parcourir rapidement un maximum de contenus. Au niveau graphique, il convient donc d'étudier soigneusement le format résumé, l'un des plus importants dans la navigation.

Voici les notes associées à l'illustration de la liste des résumés :

Outre la nécessité d'accommoder les résumés sans images, plus fréquents qu'on le pense, il est important de trancher entre l'une ou l'autre de ces deux configurations typiques pour les résumés :
- Image flottant à la gauche du titre
- Image sous le titre, imbriquée dans le texte
Dans tous les cas, il est important de déterminer ce qui arrive avec un texte plus long. Peut-il entourer l'image, ou doit-on dégager l'espace sous l'image? Ces quelques subtilités peuvent entraîner des modifications importantes à la structure de l'intégration graphique.
Les éléments qui composent la pagination sont plutôt standards. Il est donc important d'inclure tous les éléments possibles:
- << premier
- < précédent
- > suivant
- >> dernier
- numéro de page
- points de suspension (...) dénotant la présence d'une ou plusieurs pages non montrées
Il est intéressant de remplacer les flèches par des icônes correspondants. De plus, il est important que la charte distingue la page courante (habituellement mise en valeur) et l'effet de survol par la souris.
Le fil d'Ariane (« breadcrumb ») permet une autre forme de navigation. Montrer l'état courant (lorsque le lien correspond à la page courante), l'effet de survol par la souris, ainsi qu'une possible extension du texte sur plus d'une ligne.

Page de contenu

Cette planche est une opportunité intéressante d'illustrer plusieurs éléments de Drupal, tels la taxonomie et les commentaires.

Voici les notes associées à l'illustration de la page de contenu :

L'affichage de la taxonomie doit être pourvu d'un effet de survol par la souris. Puisqu'il faut prévoir la possibilité de lister un grand nombre d'éléments, l'affichage horizontal des termes est généralement privilégié (illustrer plusieurs termes de taxonomie)
La charte ne devrait pas omettre les étiquettes des champs (nom, prénom, etc.) imposés par les contenus structurés.
Cette planche montre des commentaires et un formulaire de commentaire, bien entendu à omettre de la charte graphique si le site n'offre pas ce type de fonction.

Page administrative et formulaire

Qui dit gestionnaire de contenus dit nécessairement section administrative. Il est souvent intéressant d'harmoniser la présentation de l'interface d'administration avec le reste du site. Par ricochet, ceci nous assurera que les éléments de formulaires moins fréquemment utilisés dans la partie publique du site sont couverts par le design graphique. Cette planche est l'occasion de traiter d'une panoplie d'éléments de Drupal sans augmenter le nombre de planches.

Voici les notes associées à l'illustration de la section administrative, qui inclut également un modèle de formulaire :

La planche administrative illustre notamment les éléments liés à la session. Par exemple, au coin supérieur droit de la planche on retrouve le nom de l'utilisateur ainsi qu'un lien lui permettant de se déconnecter.
La charte doit anticiper les onglets par défaut de Drupal (voir, éditer, traduire), ainsi que leurs états (courant et effet de survol). Elle devrait montrer une combinaison de ces éléments et prévoir le cas (rare) où plusieurs rangées d'onglets se superposent.
La charte devrait penser aux messages produits par le système, généralement affichés en haut de page. Il s'agit de distinguer les messages informatifs, les avertissements et les erreurs. Outre l'affichage d'un message, une erreur de saisie dans un formulaire provoquera aussi la mise en évidence du champ erroné; à illustrer dans la charte.
La plupart du temps, la charte doit prévoir des menus verticaux, utiles aux menus administratifs. Il faut montrer au moins deux niveaux hiérarchiques en combinant les éléments suivants et, idéalement, en spécifiant des icônes servant à ouvrir ou fermer les liens :
- Élément parent ouvert
- Élément parent fermé
- Élément sans enfant
- Élément enfant (second niveau hiérarchique)
Tous les sites Drupal contiennent des formulaires pour l'entrée de contenu. On doit anticiper les éléments suivants :
- Étiquette du champ
- Descriptif du champ
- Groupe de champs ouvert
- Groupe de champs fermé
Il faut également illustrer les types de champs les plus fréquents, soit :
- Champ texte
- Zone de texte (plusieurs lignes)
- Liste déroulante
- Boutons radios
- Cases à cocher
- Transfert de fichier (attention, cet élément tend à varier grandement entre les plateformes. Il est donc prudent de ne pas le personnaliser outre mesure, puisqu'il est de toute façon interprété de façon différente par différents navigateurs).
On doit prévoir des boutons extensibles à l'horizontale et à la verticale. Illustrer au moins deux boutons, dont un avec effet de survol.

Résultats de recherche

Traditionnellement assimilée à une simple liste, la page de recherche est heureusement de plus en plus raffinée, surtout lorsque la navigation par facettes entre en jeu. Pour les raisons évoquées dans un précédent article, il est maintenant concevable d'exiger ce type d'outil de recherche.

Voici les notes associées à l'illustration des résultats de recherche :

Plusieurs moteurs de recherche offrent maintenant une fonction « Vouliez-vous dire ...? » suggérant d'autres mots-clés proches de ceux entrés. En intégrant celle-ci au design, il est important de se rappeler que les termes suggérés peuvent parfois être longs et occuper plusieurs lignes.
Prévoir un champ de recherche supplémentaire pour la recherche par mots-clés.
On doit prévoir un bouton (typiquement un « X ») permettant d'annuler l'un des critères de recherche.
Une facette apparaît sous forme de liste, parfois repliable. Il faut prévoir la présence de plusieurs facettes (recherche par année, par thématique, par type de contenu, etc.)
Ne pas oublier la pagination des résultats de recherche.

Voilà qui conclut notre série de diagrammes fonctionnels, à partir desquels il est possible d'extraire un grand nombre d'éléments à incorporer aux maquettes graphiques devant ultimement mener à l'intégration graphique, c'est-à-dire à l'application du design graphique dans le médium Web.

Ce processus se compare-t-il au vôtre? N'hésitez pas à commenter cet article!