Web design, les principes essentiels

La construction d'un site et l'organisation des pages en elles-mêmes peuvent largement contribuer au succès d'un site Web, autant et quelque fois plus que le contenu. Le design doit être fondé sur des principes de base simples, quoique plus exigeants pour un site du Web 2.0 doté d'une interface élaborée.

La première étape dans la conception d'un site passe par la définition de l'utilisateur auquel il s'adresse, tandis que la dernière consistera à laisser le site entre les mains d'un néophyte et à l'observer. Ses erreurs et difficultés à atteindre ce qu'il cherche sont le meilleur test du design.
Entre ces deux étapes, un bon site Web est construit en prenant en compte quelques règles incontournables.

La transposition Web

C'est ce que l'on appelle aussi le principe de métaphore et cela consiste à recréer un objet concret et familier dans l'apparence de l'interface.
On peut imaginer par exemple qu'un site sur l'immobilier se présente graphiquement comme un immeuble, avec des portes pour accéder aux différentes sections du site. Mais la métaphore est souvent plus abstraite.

La grammaire de l'interface

Il y a dans une interface une grammaire dans le sens ou les éléments ont un sujet et un verbe, à savoir un objet et une action, action par l'objet ou sur celui-ci. D'autres éléments grammaticaux mêmes sont possibles.
Ainsi on peut définir l'interface d'un grand site dès le départ en terme de grammaire, avec un objet et ses actions, avec l'enchaînement des actions, et par là même optimiser l'interface par une meilleure vision des relations entres objets.

L'exposition

Les possibilités du site doivent apparaître facilement et entièrement au visiteur. Tous les visiteurs n'ont pas les mêmes faclités et certains préféreront par exemple les icônes, d'autre les textes. Mais quel que soit le mode visuel choisi, l'accès au contenu doit être simple, complet et rapide.

La cohérence

Un site est cohérent lorsque il fonctionne de la même façon dans toutes ses parties. Par exemple si on fait apparaître des bulles explicatives sur une page, on doit faire de même sur toutes les autres pages.

La visibilité

Quand on entre dans une partie du site qui nécessite un comportement particulier, cela s'accompagne aussi d'un changement dans l'apparence. Et inversement, si l'apparence change, cela doit être parceque quelque chose change dans l'utilisation de la page.

Capter l'attention

Certains éléments sont plus importants et doivent être mis en relief, tandis que les autres seront placés en retrait.
Le meilleur moyen d'attirer l'attention, c'est une image ou un objet animé. Associer une animation à un service dès lors que celui-ci est activé par l'action de l'utilisateur ou pour diriger sa navigation, est une bonne chose.
Les animations sont réalisées avec un éditeur de fichiers au format GIF ou en Flash.

La simplicité et la sécurité

On dit d'un site qu'il est sûr si l'on peut éviter qu'une fausse manoeuvre ne conduise à quelque chose de définitif, ne serait-ce qu'à obliger à remplir à nouveau un long formulaire! Cela va de pair avec la simplicité dans l'accès aux fonctions du site.
Les documents mentionnés en référence en bas de page fournissent des exemples de designs simples et clairs ou au contraire confus et ambigus.

Les aides à l'utilisateur

Le visiteur d'un site a besoin d'aide parceque chaque site peut avoir son fonctionnement propre et parcequ'on aborde rarement celui-ci par la page d'accueil mais souvent grâce à un moteur de recherche qui amène sur une page interne.

Il faut que l'utilisateur:
- Sache où il est.
- Sache ce que le site lui propose d'essentiel, dans chaque page.
- Comment parvenir aux services qui peuvent l'intéresser.
- Et comment les utiliser.
Au-delà des menus de navigation et tooltips, on peut incorporer un "bon génie" qui aidera à utiliser le site et qui est présent sur chaque page.

Règle du contexte unique

Un bon moyen de simplifier l'utilisation d'une interface, c'est de limiter une page à un contexte, un service unique. Par exemple si l'on doit remplir un formulaire, toute la page doit être dédiée à cette seule opération. Si l'on doit choisir entre deux options, seules ces deux options doivent apparaître à l'utilisateur.
Cela ne signifie pas que l'on ne doive par regrouper plusieurs formulaires sur une page, cependant ils doivent être clairement distincts de sorte que l'on puisse remplir l'un sans considérer les autres.
Placer un formulaire dans une lightbox est un moyen d'améliorer à la fois l'ergonomie et l'esthétique du site.

Les raccourcis

Comme sur un traitement de texte où l'on peut passer des commandes à partir d'un menu tandis qu'une fois habitué au logiciel, on peut le faire plus rapidemment avec des touches de raccourci, l'interface du site peut proposer des accès plus courts pour les utilisateurs usuels.

Le coté esthétique

L'esthétique d'un site contribue à sa crédibilité autant qu'à sa popularité. Les visiteurs supposent naturellement qu'un site au design soigné aura un contenu tout aussi étudié, et au contraire, un site mal conçu fait craindre un contenu douteux.
Une liste de règles pour améliorer l'apparence d'un site...

  1. Eviter les couleurs aggressives: fond jaune ou rouge par exemple.
  2. De même les titres en lettres géantes.
  3. L'affichage doit être rapide sinon immédiat.
  4. Pas de table pour organiser la page, utiliser les feuilles de style et si possible un template, une page prédéfinie où l'on incorpore automatiquement le texte. Le plus simple est d'utiliser un CMS.
  5. Incorporer des images ou des graphes.
  6. Si l'on utilise un framework Ajax ou HTML 5 , ne pas utiliser d'effets spéciaux à outrance.

Le choix des couleurs

On peut utiliser les couleurs pour transmettre de l'énergie avec des contrastes et la couleur rouge ou au contraire pour calmer avec des teintes similaires et des couleurs froides.

On se rapportera à cette étude sur la palette des couleurs: Basic color schemes.

L'organisation des pages

Une page Web ne s'écrit pas comme une page imprimée, parcequ'on ne lit pas sur le Web comme dans un fauteuil. L'article Comment on lit sur le Web explique en détail comment on présente un texte et comment on obtient un résultat très supérieur en terme d'intérêt et de mémorisation.

Conclusion

La conception d'un site doit être réfléchie, autant quand à l'intérêt et l'originalité du contenu, que quand au design. S'il fait le plus grand cas des utilisateurs, cela contribuera pour beaucoup a succès et à la popularité du site.

Références (anglais): User-Interface Design. Visual communication.