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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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...
- Eviter les couleurs aggressives: fond jaune ou rouge par exemple.
- De même les titres en lettres géantes.
- L'affichage doit être rapide sinon immédiat.
- 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.
- Incorporer des images ou des graphes.
- 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.
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.
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.