Accéder au contenu principal

Les conventions de conception web

Au fil des années, certains schémas de conception web se sont affirmés au point de devenir des habitudes d'utilisation pour les internautes.

Réutiliser des mécanismes qui sont devenus courants permet de profiter de l'expérience que vos visiteurs ont acquise en surfant sur d'autres sites pour les aider à avoir une navigation plus efficace. L'effet d'expérience adapté au web, en quelque sorte.

Voici quelques exemples de ces conventions de conception web.

Le logo

Positionné en haut à gauche pour une identification rapide, avec un lien hypertexte qui permet un retour sur la page d'accueil depuis n'importe quelle page du site.



Le formulaire de recherche

En haut de page, absolument. Souvent positionné à droite, voir sur un bloc indépendant centré lorsque la recherche est prépondérante.




Profil et panier

Informations de connexion et d'inscription pour les sites communautaires, ou accès direct au panier de commande pour les sites d'e-commerce, sont très souvent placés à droite tout en haut de page.

Au passage, notez au sujet du panier que le fait d'associer le terme de "panier" à une icône représentant un Caddie (marque déposée de la société Caddie SA) est parfaitement entré dans les mœurs.

Amazon

La Redoute

Rue Du Commerce

Les informations sociétés et mentions légales

Les informations sur la marque ou la société, ainsi que les mentions légales (droit de reproduction, collecte de données personnelles) sont généralement en centrées dans le pied de page, le plus bas possible.

Dans le cas de plusieurs liens, une liste horizontale avec un séparateur très simple (tiret -, trait vertical | ), voire sans séparateur est d'usage.


Le fil d'Ariane

En haut de page, souvent placé entre l'entête et le contenu central, le fil d'Ariane est généralement présent dès que la structure du site est une arborescence à 2 niveaux ou plus. Le séparateur utilisé est souvent le crochet >

Allociné

Dailymotion

eBay

Les indicateurs de chargement


Avec Ajax, le chargement dynamique d'informations ou de sections de pages s'est généralisé. Et pour indiquer à l'utilisateur qu'il doit patienter, certaines icônes animées sont devenues des marqueurs usuels :



Commentaires

  1. Article intéressant. Si tous les sites pouvaient respecter ces "normes", ça nous faciliterait la vie :)

    RépondreSupprimer
  2. Interesting ! The reuse mechanism has really been successful over the last few years. I feel this has enhanced the quality of web design service as well.

    RépondreSupprimer

Enregistrer un commentaire

Posts les plus consultés de ce blog

Les outils d'analyse de requêtes HTTP

L'analyse des échanges HTTP entre navigateur et serveur web est un bon moyen de détection des opérations les plus consommatrices en temps, soit celles qui impactent le plus le temps de chargement global d'une page.
Tour d'horizon des outils gratuits existants :
Outils en ligneD'une utilisation simple et rapide, ces outils proposent une vision synthétique des échanges à travers une chronologie précise des opérations, ainsi que le détail des requêtes et réponses HTTP. Toutefois, ils ne proposent généralement pas les mêmes options qu'un navigateur, notamment en terme de gestion de cache.
site-perf.comPingdom tools
L'analyse de ce blog par Pingdom tools
Plugins navigateurs
Ces outils s'intègrent à votre navigateur, ce qui vous permet de simuler exactement les situations de configurations de vos visiteurs.
FirefoxLe compagnon idéal est l'extension livehttpheaders, outil de capture des requêtes et réponses HTTP
Firebug propose également une analyse complète, avec une…

Tester son site sous les versions d'Internet Explorer 6, 7, 8

Si la mort prochaine de la version 6 d'Internet Explorer est annoncé un peu partout ces derniers temps, il n'empêche que l'univers des navigateurs (et particulièrement celui d'IE) avance bien plus lentement que ne naissent les normes et se développent les technologies.

Assurer la compatibilité de ses sites web avec les différentes versions d'Internet Explorer demeure un casse-tête, et chacun sait qu'il est maintenant quasiment impossible de faire coexister plusieurs versions d'IE sur son PC.