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…

La compression HTTP pour accélérer vos sites

Avec les récents changements et déclarations de Google autour de la prise en compte de la performance des sites comme un éventuel futur critère de pertinence des sites, les problématiques d'optimisation vont (re)devenir d'actualité.

Un des moyens très rapide pour optimiser sensiblement les performances de son site web consiste à compresser le flux de données qui transite entre votre serveur et le navigateur Internet de vos visiteurs.