Des standards il en existe pour à peu près tout, des tailles de pneus jusqu’à la programmation des sites web. Pourtant aucun standard n’existe en matière de web design. On peut penser que c’est sans doute très bien comme ça, outre le fait que le sujet soit terriblement complexe et forcément soumis à une certaine part de subjectivité il reviendrait en plus à restreindre l’originalité des sites web.
Cependant il existe bien une forme de standard tacite du web design, bien plus basé sur l’habitude et l’utilisation “instinctive” des sites que sur la logique. Par exemple l’utilisateur s’attend toujours en cliquant sur le header (ou une partie du header comme le logo ou le slogan) a revenir à la page d’accueil.
C’est une norme tacite incontournable, ne pas l’intégrer à son site peut causer une incompréhension chez le visiteur, cette dernière peut même le pousser à fermer la page. Il existe plusieurs normes tacites de ce genre. Cet article n’a pas pour but d’en faire une liste exhaustive ni l’ambition de créer un standard du web design mais de poser des bases non limitatives de création d’interfaces web.
De plus je compte sur la participation des lecteurs, vous, pour m’aider a construire ce sujet grâce à vos commentaires. Non seulement parce que je ne pense pas être capable seul de faire le tour d’un sujet aussi complexe, mais aussi parce qu’il me semble indispensable d’avoir plusieurs points de vue pour éviter trop de subjectivité lors de sa construction.
Dernière chose avant de rentrer dans le vif du sujet : Je ne prétends rien en écrivant cet article et surtout pas être au dessus du panier, j’ai moi-même commis plusieurs erreurs dans la création de l’interface de ce blog. J’en suis conscient pour certaines, pas pour d’autres et je compte bien sur l’aspect communautaire de cet article pour faire mieux la prochaine fois.
Premier cas : Les colonnes
La plupart des sites utilisent un affichage sous forme de colonnes, généralement 2, parfois 3 ou 4. Au moins une de ces colonnes est réservée à l’affichage du contenu (texte, images, articles etc.), les autres à la navigation (menus, rubriques etc.).
Dans le cadre de notre mode de lecture occidental (de haut en bas et de gauche à droite) et vu les limitations techniques d’affichage du contenu sur le web (contenu inséré dans des blocs rectangulaires) c’est sans doute le meilleur type d’affichage possible. Néanmoins plusieurs problèmes peuvent découler de l’utilisation des colonnes.
Le texte flottant :
Les colonnes ne servent pas qu’à délimiter des zones, elles servent aussi de cadre à l’œil humain. Par nature les colonnes de navigation sont définies, leur contenu ne varie presque pas, elles font donc une certaine hauteur. C’est exactement l’inverse pour la colonne de contenu qui varie énormément d’une page à l’autre. Sur plusieurs sites, des blogs généralement (parce que ce sont eux qui proposent les plus longs contenus), on retrouve souvent du contenu flottant.
Le contenu flottant apparaît quand le contenu, généralement textuel, de la colonne contenu dépasse largement celui des colonnes de navigation. Dans ce cas si les colonnes utilisent le même fond, le contenu semble flotter dans le vide. Vous avez déjà forcément croisé le cas d’un blog dont le texte est si long qu’après avoir scrollé vous vous retrouvez sur une page blanche n’affichant qu’une petite colonne de texte noir.
Privé de cadre l’œil est perturbé et s’égare plus souvent, reprenant la lecture de lignes déjà lues ou sautant des lignes par mégarde. De plus le contenu flottant perturbe notre perception de ce contenu, il a toujours l’air plus (trop) long, et ne semble pas assez large, comme prisonnier d’une colonne ridiculement trop mince.
Il existe une solution simple pour contourner ce problème, l’utilisation de fonds différents pour les colonnes. En gros, le contenu doit toujours être cadré dans quelque chose qui, quel que soit sa hauteur, permette de le délimiter et de bien le différencier du reste de la page. De plus pour éviter l’impression de rallongement et d’amincissement de la colonne contenu les autres colonnes doivent se poursuivre de façon à toujours délimiter la largeur totale du site.
Le vide :
Le cas inverse existe aussi : lorsque le contenu est largement plus court que les colonnes de navigation cela crée un vide gênant. Si la nature à horreur du vide, l’œil aussi, d’une manière générale tous les vides sont à proscrire, ils donnent l’impression d’un manque, de quelque chose qui n’est pas abouti ou mal pensé.
Il n’y a pas grand-chose à y faire, si votre contenu est court il faudra accepter ce vide, remplir pour remplir avec un contenu inintéressant n’est pas une bonne solution. Néanmoins si cela se reproduit fréquemment sur un site c’est sans doute le signe que les colonnes de navigation doivent être repensées. Elles sont sûrement trop hautes, peut-être que tout ce qu’elles proposent n’est pas utile et si ce n’est pas le cas peut être faut-il rajouter une colonne pour disposer leur contenu sur une plus grande largeur et donc utiliser moins d’espace vertical.
Je m’arrête la pour la première partie de cet article qui, je l’espère, en aura beaucoup d’autres grâce à vos participations. Le sujet est vaste, alors lâchez vous, il y a tant de points à aborder que ceci n’est pour l’instant qu’une petite introduction destinée a vous mettre en appétit pour la suite.
Edition: Je change le titre de cet article qui portais à confusion avec le concept de standard.
A 18:12 Le Lundi 25 février 2008
Il faudrait déjà que tu définisses ce que tu entends par “webdesign”. C’est un terme générique et trop général qui est utilisé un peu partout.
Tu as plutôt l’air de vouloir parler d’ergonomie et de mise en page. En ergonomie, je ne sais pas s’il y a des standards à proprement parler, mais il y a en tout cas de bonnes pratiques (tu en as d’ailleurs cité une, un clic sur le logo d’un site renvoie en général à l’accueil). En ce qui concerne la mise en page, je ne vois pas l’intérêt d’un standard, ça bloquerait d’un certain côté la créativité, non ? On peut par contre distinguer plusieurs courants, qui changent avec le temps…
En ce qui concerne le vide, je trouve au contraire qu’il est important lorsqu’il est bien dosé, notamment pour aérer le contenu, le faire respirer.
A 18:41 Le Lundi 25 février 2008
Je commencerais par le petit exemple de ton introduction, le cas où l’on clique sur le logo. Dernièrement un article de Fred Cavazza explique que des grandes boutiques en ligne ont rajouté spécifiquement un texte ou pictogramme qui dit à l’utilisateur ce qu’il faut faire pour revenir à l’accueil. http://tinyurl.com/yr7yvg Ceci nous permet de dire que tout le monde n’a pas ce standards en tête.
Pour les colonnes, c’est un problème purement informatique. Dans le cas de la presse papier, si il y a une colonne trop grande ou des vides, le rédacteur en chef à vite fait de combler ces manques. Ce que je veux dire ? C’est que les blogs (leur thème généralement) ne sont pas assez intelligent pour combler dynamiquement des vites ou des trop plein afin d’équilibre la page.
Après on peut trouver des compromis pour que article et colonnes en marge soient proportionnés de façon équivalente afin d’éviter de gros écarts.
Cela étant, je pense qu’il y a trop de plugin en vigueur dans les pages et que s’en est presque devenu un standard. Prenons par exemple le plugin des twittes. Pourquoi afficher dans une petite colonnes les N derniers twittes, ce qui va avoir pour effet d’avoir un contenu assez long en hauteur et donc créer une disproportion au niveau de la colonne de l’article. Sur certain site, seul le dernier twitte est affiché, par exemple tout en haut de page et sur une seule ligne, ce qui a pour effet de le rendre très discret (exemple Loïc Le Meur).
Personnellement, je suis de plus en plus favorable au monocolonne, aux big footers ou aux headres/footers avec dépliement/repliement de zones utiles. Car toute la question est là. Pourquoi proposer du contenu qui n’est pas pertinent dans l’immédiat pour le lecteur. Exemple très simple : pourquoi proposer des catégories ou des nuages de tags en marge, alors qu’un système de sous menu ou de zone se dépliant pourrait faire l’affaire.
Le monocolonne a pour effet aussi de résoudre les problématiques de vide ou de trop plein de colonnes.
En somme je pense qu’il y a des standards qui se crée de fait, mais ils sont mal étudiés. Parce qu’il sont implanté sur d’anciennes bases existantes qui n’étaient pas forcément du meilleur goût déjà avant.
A 19:19 Le Lundi 25 février 2008
Ishiro,
J’ai eu beaucoup de mal a trouver un titre cohérent pour cette suite d’articles. Comme je le disais en introduction cet article n’a pas pour but de créer un standard du web design mais plutôt de poser des bases, ou pour mieux le dire de mettre en forme de façon écrite et logique ce que nous savons en terme de web design.
Cependant il s’agit bien de web design, ergonomie et mise en page ne sont que des parties de ce sujet plus vaste. Malheureusement je ne connais pas de terme français englobant l’ensemble des réflexions sous jacentes à la création de l’interface d’un site web.
Concernant le vide, il ne faut pas le confondre avec l’espacement (de blocs, de paragraphes etc.) nécessaire à l’aération d’un contenu.
Rémian, j’ai lu cet article de Fred Cavazza que j’ai trouvé très pertinent, mon but est justement de permettre la mise en forme de ce genre de normes tacites. Mais aussi d’en montrer certaines moins connues et de mettre en avant les raisons qui font que les utilisateurs ont une bonne, ou une mauvaise expérience de leur visites sur les sites.
Je n’ai pas bien compris ce que tu voulais dire dans ton paragraphe concernant les plugins et les twittes ?
Pour ce qui est du monocolonne ça pourrait parfaitement faire l’objet d’un futur article de cette série
A 20:16 Le Lundi 25 février 2008
Ma traduction de webdesign en français donne création web, ce qui englobe tout ce qui touche à la création de site web, du graphisme au développement, en passant par l’ergonomie, la mise en page, etc.
Donc si tu veux un terme général pour une suite d’article, webdesign me parait cohérent. Mais il faudrait que tu choisisses un thème précis à développer pour chaque article, car là ça me donne l’impression que tu passes du coq à l’âne. Mais bien entendu, ça n’engage que moi. C’est toi le chef !
A 20:26 Le Lundi 25 février 2008
Création web implique le développement (css, mais aussi html, php etc.) que je ne comptais pas aborder. Déjà parce que le code c’est pas mon domaine, mais aussi parce que ça rendrais le sujet tellement vaste et tellement complexe que je vois mal comment il serait abordable.
Le mot que je cherche ne me semble pas exister.
A 20:45 Le Lundi 25 février 2008
Quand je parlais des twittes, j’évoque les plugins Twitter ou Pownce notemment.
A 21:17 Le Lundi 25 février 2008
J’ai modifié le titre de l’article afin d’éviter la confusion que pouvais induire le terme “standard”.
Rémian, j’avais bien compris que tu désignais ce type de plugin. C’est plutôt le sens que je n’ai pas compris. Veux tu dire qu’il faudrait que ce genre de plugin soit le plus discret possible ? Si c’est le cas ça ne me semble pas forcément important, si je prends le cas de ce blog par exemple la majorité des articles étant longs, la longueurs des “twittes” ne gênent que rarement la mise en page.
A 3:55 Le Mardi 26 février 2008
Deux petites choses :
1 - Discuter de la place du logo (comme l’a très bien fait Fred C.), ou de l’organisation des colonnes, c’est à mon avis en plein dans le sujet du webdesign. La confusion est souvent de mise quand à la signification du “webdesign” en français, dont je vous livre la définition très juste du wikipedia :
”Le web design désigne la conception de l’interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation d’un site web. Il s’agit d’une phase essentielle dans la conception d’un tel site. La conception d’un design web tient compte des contraintes spécifiques du support Internet en termes d’ergonomie, d’utilisabilité et d’accessibilité.
Le web design réclame donc des compétences variées : en programmation, en ergonomie et en interactivité, ainsi qu’une bonne connaissances des contraintes techniques liées à ce domaine : respect des recommandations W3C, accessibilité, portabilité.”
2 - Sinon pour ceux que ça intéresse, petite histoire des colonnes sur les sites internet : je pense que l’agencement en colonne s’impose avec l’un des premiers gros CMS, phpnuke, que l’on trouvait absolument partout sur les internet il y a quelques années, avant l’avénement des blogs. Il organisait le site en trois colonnes, dont une principale pour les news et le contenu et deux sur les côtés pour les menus et les infos annexes. Cette structure en trois ou deux colonnes a ensuite largement continué à s’imposer au travers des blogs et leurs formats souvent très standardisés.
A 11:45 Le Mardi 26 février 2008
Nicolas le terme que je cherche correspondrait en fait pile poil au premier paragraphe de la définition wikipédia. N’en ayant pas trouvé de meilleur je reste sur celui la.
Par contre je ne suis pas d’accord pour ce qui est de l’historique des colonnes. Si on regarde bien les sites n’ont pas attendu les cMS pour utiliser un affichage par colonnes, on en trouvait déjà du temps des premiers sites avec les frames (mon premier site, fait en 98, se présentait d’ailleurs sous la forme header, colonne gauche de navigation et colonne de contenu). Par contre les colonnes telles qu’on les utilise maintenant sont effectivement les descendantes des CMS.
A 12:32 Le Mardi 26 février 2008
“Par contre les colonnes telles qu’on les utilise maintenant sont effectivement les descendantes des CMS” on est bien d’accord : je parlais bien des colonnes comme on les voit par exemple sur ton blog, avec du menu, des contenus, etc. Et c’est donc bien les phpnuke et compagnie qui ont imposé ce modèle, pour une raison simple : phpnuke et ses petits copains sont les premiers à avoir mis à disposition des webmasters des outils simples de publication de contenu sur les sites.