Concevoir un site internet

Concevoir un site

Un site ? oui, mais pour quoi faire ? J’apprends à définir mes besoins, à classer et à hiérarchiser mon information et je regarde des sites pour trouver une solution qui correspondent à mon projet.

A. Un site pour quoi faire ? Définir mes besoins.

Grâce à Spip, l’on peut exiger d’un site qu’il remplisse plusieurs fonctions :

1. Informer :
- Des manifestations organisées par l’association ou par celles qui poursuivent des objets sociaux analogues : agenda ;
- Informer sur les activités de l’association, son objet social et ses projets de développement. Le champ des ressources couvert sur la toile est aussi divers que la société qu’il reflète : artistes, humanitaires, chercheurs, journalistes, commerçants, syndicats, partis politiques, sites religieux, institutionnels… 
- Créer des listes de diffusion pour les adhérents (je les préviens de l’organisation d’une manifestation ou leur indique les nouveautés du site, par exemple) ;

2. Gérer, co-gérer à distance
- Co-gérer collectivement le site en assurant sa mise à jour ;
- Mettre un journal en ligne et permettre à différents rédacteurs d’intervenir à distance (périodicité, volume, nombre de rédacteurs à prendre en considération). Cette co-gestion est facile à organiser sur Spip grâce à l’utilisation de d’espace privé non accessible à l’internaute lambda et de comptes privés (login) auxquels sont affectés des droits par l’administrateur (la personne décisionnaire en ce domaine).
- Faire participer les adhérents à la gestion de l’association à distance (Mettre à disposition des formulaires accessibles à distance.)  Ouvrir des forums internes (= privés).

3. Animer :
- Animer des campagnes de pétitions ;
- Ouvrir des forums externes pour tous les internautes ;

4. Mettre des archives en ligne (y compris pour mes besoins propres).

B. Ergonomie et accessibilité :

« Ce qui se conçoit bien s’énonce clairement

Et les mots pour le dire arrivent aisément.  »

Boileau

1. Une architecture claire : bâtir un plan

Il faut impérativement et préalablement à toute tentative de construction :
- Analyser le contenu informatif du futur site (après avoir défini les besoins et le public ciblé)
- Synthétiser ce contenu. Il faut classer cette information en rubriques et sous-rubriques comme on le fait pour établir un plan quel qu’en soit l’usage. Pour que la navigation soit facile, il faut
- Ordonner, c’est-à-dire hiérarchiser clairement le contenu. Il faut dessiner la structure du site. Chaque section (la rubrique) doit découler logiquement de la précédente.

Il faut écrire ce plan sur un papier comme nous le faisons pour organiser un document lorsque nous rédigeons. Prenons des exemples d’arborescences de sites sous Spip. C’est simple puisque le squelette de base propose déjà un plan en ligne.

2. Une navigation fluide :

L’on constate immédiatement que ce plan est aisément lisible sans aucune mise en forme particulière. Chaque rubrique s’insère (s’écoule) logiquement dans le flux général du discours énoncé. Cette notion de flux, sur laquelle nous reviendrons ultérieurement, est fondamentale quant à l’écriture du code de la page et à une bonne lisibilité du texte et accessibilité par tous et toutes.

C’est à partir de ce plan que seront élaborés les liens de navigation du site. Il importe donc que l’expression soit concise et pertinente, établie selon une hiérarchie cohérente, simple et efficace, afin que le lecteur ou la lectrice puisse trouver rapidement (idéalement en trois clics au maximum) l’information dont il a besoin. Evitez absolument de situer une information importante au « sixième sous-sol » et respectez de préférence « la règle des trois clics  », faute de quoi vous risquez de dissuader votre visiteur de s’attarder plus longtemps sur votre site. Il convient aussi, bien évidemment, d’éviter toute information redondante dispersée entre plusieurs sections.

Par ailleurs, la plupart des auteurs conseillent vivement de ne pas surcharger les pages d’information : par exemple, ne mettez jamais plus de cinquante liens sur une page même si celle-ci est très bien organisée. Ne la « bourrez » pas non plus d’images et de dessins qui, certes, enrichissent ou égayent un contenu mais qui, employés inconsidérément, surchargent aussi les pages qui, de ce fait, s’affichent plus lentement et paraissent plus confuses.

En revanche, pensez à proposer toujours un plan du site, accessible sur toutes les pages et n’hésitez pas à rappeler au lecteur, sur chaque page, à quel niveau de la hiérarchie du site il se situe.

La prise en compte de l’ensemble de ces facteurs s’appelle l’ergonomie du site.

Exemples decentrales nucléaires (hiérarchies extrêmement complexes compte-tenu de l’étendue des sujets abordés sur ces sites institutionnels) :

- Sénat  Extrêmement bien conçu compte tenu de la diversité des rubriques proposées. Quatre remarques :

L’onglet de la sous-rubrique « Rapports et documents de travail » (dans la rubrique « Travaux parlementaires ») propose des recherches thématiques par mot-clefs. Le mot-clef retenu n’est pas neutre et traduit aussi une posture mentale à l’égard du sujet. Il faudra donc chercher les violences conjugales dans la famille par exemple.

Un tel site propose aussi bien évidemment des moteurs de recherche qui reposent sur de véritables formulaires. En effet, ce site s’adresse aussi à des administratifs, des juristes ou des attachés parlementaires qui cherchent des textes très précis avec des références très précises. Mais le citoyen peut aussi accéder à cette documentation d’une façon moins technique en utilisant les onglets et les boutons.

Un nombre d’images limité, pas trop grandes et adaptées au contenu. Dans l’ensemble, des pages aérées. Il est évident que l’on vise ici d’abord et avant toute chose la fonctionnalité.

Complexe et compliqué, ce n’est pas la même chose. Exemple de site jeune sans grand contenu et présentant à mon avis, une arborescence inadaptée : (trop compliqué parce que construction de type institutionnel alors que le contenu est thématique). L’on peut donc faire aussi petit et compliqué, hélas !

- Assemblée nationale  Mêmes difficultés théoriques que pour le précédent mais beaucoup moins bonne ergonomie que pour le site du Sénat. Trop dense et difficulté de choisir son chemin.

- Yad Vashem : Mêmes difficultés théoriques et navigation par onglets (rubriques et sous-rubriques) et par blocs clairement et esthétiquement disposés sur l’ensemble de la page. Page courte et design très sobre en rapport avec l’austérité du sujet traité. Illustrations en petit format et très soignées. Donne accès, de façon aléatoire, à des galeries de photos parfois accompagnées de fonds sonores évocateurs. Mais le temps d’affichage augmente alors notablement. Procédé très vivant permettant même de présenter des registres d’archives.

- ABD Gaston Defferre : Caractéristiques : annonce des manifestations et met à disposition du lectorat une énorme base de données facile à utiliser ainsi que des archives en ligne.

C. Charte graphique, organisation graphique et choix d’un graphisme :

Maintenant que nous avons défini nos besoins, ciblé notre public, analysé et synthétisé notre contenu et bâti un plan avec des liens possibles, nous voici donc confrontés à la question de l’organisation de la page accessible au visiteur. Sa bonne réalisation participe pleinement à l’ergonomie du site. Que faire donc ?

Je me munis d’un cahier, d’un crayon dit de bois, d’une gomme et je dessine ce que je veux en disposant des blocs de textes et d’images ici et là.

1. Organisation de la page : Les techniques de la toile évoluent et s’améliorent mais les modes graphiques existent aussi.

Il est nécessaire, - une fois le plan du site adopté -, de dessiner à la main plusieurs croquis d’organisation visuelle des pages du site sur un papier avec un crayon dit de bois. Il faut aussi se munir d’une gomme. Je dessine ce que je souhaite obtenir en disposant des blocs de textes et d’images ici et là sur ma feuille de papier. Comment veux-je organiser les informations à l’intérieur de mes pages en sachant qu’il me faudra soigner particulièrement ma page d’accueil qui est comme la couverture d’un livre, la vitrine du site.

Mettrai-je des bandeaux (en haut, en bas ? en haut et en bas ?). Combien de colonnes utiliserai-je ? (une, deux, trois). De quelle documentation utilisable, je dispose (écrite, graphique, volume, ancienneté ?) Comment vais-je la placer à l’intérieur des zones que je viens de définir, de façon à ce que l’information reste claire et soit donc facilement accessible ?

Parvenu à ce point du développement interviennent de nouveau des réflexions relatives à l’accessibilité et au codage des pages. Contrairement à ce que pensent de nombreux internautes, des personnes présentant un handicap visuel partiel ou total peuvent utiliser couramment la toile grâce aux nouvelles technologies : traducteurs de braille, synthèses vocales, loupes grossissantes. D’autre part, cette population de mal voyants est en augmentation constante du fait du vieillissement de la population. A partir de l’âge de 45 ans, se développe très souvent la presbytie qui, même corrigée par le port de lunettes adaptées, rend la lecture des textes en petits caractères fatigante. Cette question concerne donc une « très grande minorité » de la population.

En conséquence l’internaute doit absolument avoir la possibilité d’agrandir les caractères jusqu’à la taille qui lui paraît confortable (idéalement jusqu’à 200 %) sans que l’aspect du site devienne désordonné (chevauchement des textes) et inutilisable. La seconde conséquence concerne la façon de coder les pages. La plupart des auteurs recommandent aujourd’hui l’utilisation du XHTML et du CSS. Surtout, l’on proscrira absolument l’utilisation de balises propriétaires dont la fonction n’est reconnue que par un navigateur et pas les autres puisque l’objectif à atteindre est l’accessibilité et le confort pour tous et toutes.

2. Charte graphique : Cette clarté dans l’exposition de l’énoncé doit s’accompagner d’une forme élégante et relativement dépouillée.

Par ailleurs, un site web fournit souvent d’abord de l’écrit à l’écran. Or, l’écrit est soumis à des règles typographiques draconiennes dont il est très imprudent de s’affranchir. La moindre présentation de magazines au graphisme soigné et d’apparence « naturelle » répond en fait à des règles de typographie draconiennes. Type de police, hauteur du corps, couleur, graisse, interlignage et justification ou ferrages ne s’emploient jamais au hasard. A cela s’ajoutent quelques règles spécifiques pour la toile : on préfèrera les polices dites sans sérif, plus agréables à lire à l’écran. C’est pourquoi il est indispensable de mettre au point une charte graphique spécifiant toutes les règles graphiques à mettre en oeuvre. On s’emploiera aussi à ne pas afficher à l’écran des lignes trop courtes ou trop longues car nous sommes habitués à lire des lignes d’une longueur de 10 ou 11 mots : le colonage peut apporter des solutions adaptées. Sachez aussi que les infographistes professionnels jouent sur les différentes justifications possibles des textes pour dynamiser leur mise en page.

Le découpage de la page en compartiments horizontaux ou verticaux, les éléments de séparation visuelle, les puces appartiennent à la charte graphique. Evidemment, si je suis peintre, musicien, dessinateur de bandes dessinées ou que je tiens un magasin ou un atelier de céramique, mes besoins seront tout-à-faits différents puisque je devrai de présenter mes oeuvres, mes produits, mes articles… Mais, j’aurais quand même une charte graphique.

3. Je cherche des idées.

- Je cherche, au moyen d’un moteur de recherche, des sites qui traitent eux aussi des questions qui m’intéressent et je les visite. Je note ce qui me plaît et me déplaît tant dans l’organisation de la page (ergonomie) que dans la forme (les images, le texte, les vidéos, le son).
- Je cherche une documentation - classique ou numérique - et je l’étudie sérieusement. L’on trouve un rayon bien fourni d’ouvrages généraux à la bibliothèque de l’Alcazar. Je peux emprunter et c’est gratuit, je n’hésite pas, je bosse ! Je cherche sur Internet et je trouve des cours complets. Je n’hésite pas davantage. Je lis à l’écran ou j’imprime le texte mais je bosse ! Je dessine, j’essaye, je réfléchis !
- Je travaille un maximum et je montre mes travaux à un copain développeur ou webmaster. A la maison, je procède à différents exercices proposés par les manuels que j’ai emprunté à la bibliothèque. J’essaye de faire fonctionner du code que je trouve sur d’autres sites.

Exemples de sites petits ou grands, associatifs appliqués à des domaines multiples. Moi, mon truc c’est :
- l’image : exemple
- la musique : exemple
- le cinéma : exemple
- le dessin : exemple
- le design sur la toile : exemple
- la politique : exemple
- le bar associatif : exemple
- la salle de spectacle : exemple
- le magasin de fringues : exemple
- le bio : exemple
- la recherche de solutions alternatives : exemple
- etc, etc…

[([(Et, pour finir, quelques exemples choisis en ce qui concerne la charte graphique et l’ergonomie des sites :

1. La question des animations en tous genres

Exemples d’animations graphiques de type « flash »  :
- Exemples de scénario adapté au contenu Remarque : les dessins des fresques ou des céramiques servent de fond à la page (Excellente trouvaille).
- Mariage forcé : cela convient mais c’est long. Mais, possibilité de couper et même d’accéder à la page d’accueil sans l’introduction flash en utilisant le système des marques pages.

Exemples d’animations sonores et graphiques :

- Exemple d’animation sonore gratuite Il paraît que "c’est mode, jeune" et que ça pulse ! En boucle par dessus le marché la petite ritournelle métallique et sans aucune possibilité d’agir sur le son. Et, bien sûr, cerise sur le gâteau, ça n’apporte absolument rien à la connaissance de l’association.

-  Exemple d’animations graphique et sonore adaptées au contenu mais selon moi, très vite ennuyeuses. Heureusement, la webmastere a paré le coup en prévoyant une sortie de secours très utile : « passer l’intro ». Ouf !

- Exemple de site très sonorisé en direction d’un public très ciblé constitué de mélomanes amateurs du répertoire arabo-andalous le plus traditionnel.

- Exemple de présentation graphique et sonore « sosottes » Et sur la page « Evènements, » la musique s’écoule à flots de mes hauts parleurs. La qualité du son ou le genre musical n’est pas en cause mais je me trouve peut-être en public et cela peut être gênant. Heureusement, là aussi, la webmastere a paré le coup en installant un bouton de réglage de volume immédiatement accessible. Ouf ! Le client a peut être été insistant…

Exemples de présentations très dynamiques : Cela tourne un peu dans tous les sens : exemple Cliquer sur la carte et regarder le comportement de la page.

Mais procédé du témoignage « sonore » intéressant : Remarque importante : vous réglez votre volume sonore par vos propres moyens.

Cela tourne dans tous les sens et c’est affreusement ringard :

2. La question du « design » (mise en page)

Je ne sais pas dessiner ; je n’ai malheureusement jamais bénéficié d’aucune formation en infographie et je ne dispose pas d’un budget suffisant pour m’adjoindre les services d’une graphiste. Mon fonds de commerce, c’est du sérieux (= mon contenu est essentiellement constitué de textes) et je choisis donc d’être minimaliste.
- Exemple  (je travaille sur des idées d’ordre, de clarté, de flux…) ;
- Exemple (c’est moche, mais je dispose pour ainsi dire d’un lectorat captif qui vient chercher une information précise pour continuer à travailler dessus).
- Exemple (je me débrouille comme je peux en trafiquant des images sur Gimp). De plus, si j’utilise le même squelette de mise en page et les mêmes astuces pour le graphismes, tous mes sites ont plus ou moins la même apparence (de l’intérêt de s’intéresser au langage et aux boucles de Spip).

3. Des inconvénients majeurs de la page d’accueil fixe et des astuces pour y remédier :
- Inconvénients : exemple
- Ou l’on tente d’y remédier maladroitement : exemple et (créations de rubrique « dépêches », installation d’un énorme bouton présentant les nouveautés, brèves.
- Des moyens d’y remédier : exemple (solution possible : ma rubrique d’actualités vient renouveler ma page d’accueil).


P.-S.

Bibliographie :

- Maudet (Michel Marie), - Quatravaux (Annne-Laure) et Quatraavaux (Dominique). – SPIP 1.9. Créer son site avec des outils libres. – Editions Eyrolles, mars 2007, 19 euros. (BMVR)
- Capuani (Gwenaaëla). – SPIP 1.9 : créez un site Web collaboratif. – Nantes, 2006, 219 p. , 19 euro, (BMVR).
- Quatravaux (Anne-Laure), Quatravaux (Dominique), Buriel (Sandrine). - Réussir un site Web d’association avec des outils libres ! – Nouvelle édition, paris, Eyrolles, Août 2007, 29 euro, (BMVR).
- Boucher (Emilie). – Ergonomie du web. – Eyrollez, novembre 2007, 32 euro.
- Barroca (Cristina). – Graphisme et ergonomie des sites web. – Dunod, 2003.
- Lupton (Ellen). – Comprendre la typographie. – Eyrolles, juin 2007, 28 euro, (BMVR).

Annick , le 29/10/2010 (dernière modif : 1er/12/2010)