Webdesign et accessibilité
La première chose que vos visiteurs vont voir en arrivant sur votre site, c'est son esthétique et son organisation générale. Si leur première impression est négative, vous risquez de perdre des lecteurs.
Eye-tracking : tenir compte du chemin suivi par le regard
Sur un moteur de recherche, les internautes s'attardent sur les premiers résultats (zone rouge/orangée). La ligne rouge en bas d'image délimite la partie visible à l'écran sans utiliser l'ascenseur.
Il est primordial de se placer dans les 5 premiers résultats des moteurs de recherche.
Eye Tracking – Cas de Google et d'un site commercial
En revanche, sur un site de vente, les visiteurs cherchent en priorité le menu (à gauche ou dans la bannière en haut) puis le contenu, et accessoirement le logo en haut à gauche.
L'image de droite permet de se rendre compte que les internautes ignorent tout simplement la publicité (lorsqu'elle est trop voyante) car ils savent « instinctivement » que cette zone de l'écran ne va pas leur apporter l'information qu'ils recherchent.
Harmoniser les couleurs
Essayez de travailler avec un nombre de couleurs assez restreint, ou tout du moins, de faire en sorte que les mêmes couleurs mettent en évidence les mêmes éléments sur les pages de votre site : liens de menus, votre logo, titres et sous-titres...
Plus votre site sera épuré (sans être simplet), plus les internautes auront l'impression que l'information est simple à trouver sur votre site.
Pour en savoir plus sur les couleurs qui se marient bien entre-elles, vous pouvez consulter les sites suivants :
-
et bien d'autres...
Se limiter à 1000 pixels de large
Tout d'abord, vous devez savoir qu'il existe des sites de largeur fixe et des sites extensibles : dans ce dernier cas, plus l'écran est large, plus les colonnes du site s'étirent de manière à occuper toute la largeur de l'écran. Toutefois, la taille du texte reste la même, ce qui conduit parfois à avoir un texte qui s'étend sur une ou 2 lignes démesurément longue, et donc pénible à lire.
C'est la raison pour laquelle je vous recommande de travailler avec des sites de largeur fixe, plus faciles à gérer graphiquement. Le site apparaîtra chez les internautes tel que vous l'avez développé, à peu de chose près.
Pourquoi 1000 px de large ?
Au début des années 2000, les écrans étaient minuscules et les sites devaient faire moins de 800 px de large pour s'afficher sans encombre. Aujourd'hui, les écrans 15'' ont une résolution de 1024px en largeur, auquel il faut soustraire quelques pixels occupés par les barres de défilement et diverses bordures.
1000px (voire même 980px par précaution) correspond donc à la largeur « utile » des écrans 15'', très courants sur les ordinateurs portables vendus ces dernières années.
Lorsque les écrans 17'' seront majoritaires, les concepteurs de sites internet pourront se permettre de travailler sur 1250px de large, et ainsi de suite...
Minimiser l'utilisation des ascenseurs et barres de défilement
Un peu dans le même ordre d'idée, afin de faciliter la navigation des internautes sur votre site, il est recommandé de ne pas faire des pages trop longues. Un site internet ne doit pas être présenté comme une dissertation, mais plutôt se focaliser sur des thèmes précis. Étant donné que beaucoup de personnes n'aiment pas lire sur un écran d'ordinateur, il est plus sage de faire des pages courtes et bien structurées.
Dans la mesure du possible, essayez de vous limiter à 2 fois la hauteur d'écran, en plaçant un maximum d'informations en haut de page, dans la partie accessible sans que l'internaute n'ait à utiliser l'ascenseur ou la molette de la souris.
Éviter les effets visuels agressifs (clignotement, défilement...)
Ou bien permettre l'arrêt de ces animations.
Tester dans plusieurs navigateurs
Le plus courants sont Internet Explorer 6, IE7, Firefox, Google Chrome, Safari, Opera...
Je vous conseille de tester sur Firefox et IE 6/7/8
IE8 vient juste de sortir. Il se comporte quasiment comme Firefox.
Ne pas utiliser de frames
Cette ancienne technique, qui consistait à découper la page en cadres (un peu comme les « calques » des logiciels photos), nuit énormément au référencement car la page change de contenu sans changer d'adresse.
Cela signifie que, à une même adresse, les moteurs de recherche ne voient pas le même contenu à chacun de leur passage.
Limiter la taille des pages (200 Ko max)
Cette « limite » est surtout valable si vos internautes sont en bas débit ou avec un débit ADSL faible.
L'idéal est que la page apparaisse en moins de 3 secondes.
En revanche, s'il s'agit d'un site de photographie ou d'un site qui nécessite des images ou des animations en haute définition, la limite de poids peut être repoussée car les internautes savent délibérément que le temps de chargement plus long s'explique par la qualité du contenu.
Autoriser la mise en cache
Sauf si vous administrez un site d'actualités dont le contenu est en perpétuelle évolution, ne bloquez jamais la mise en cache dans le navigateur de l'internaute.
La mise en cache améliore significativement le temps de chargement des pages car les éléments graphiques communs à plusieurs pages n'ont pas besoin d'être téléchargés à chaque fois ; ils sont en mémoire sur l'ordinateur de l'internaute.
Éviter la mise en page avec des tableaux
Ce type de mise en page peut provoquer des lenteurs à l'affichage.
Les navigateurs doivent en effet charger l'intégralité du tableau avant de commencer à l'afficher.
Pourquoi se soucier de l'ergonomie et de l'accessibilité ?Optimisation de la structure du siteWebdesign et accessibilitéAccessibilité du contenuMultimédia et fichiers en téléchargementGestion des formulairesEntretenir un lien avec les internautesInformer et rassurer les internautesCas du commerce en ligneRespecter les différences et les choix des internautes
Pour plus d'informations, vous pouvez nous contacter par mail.
Tutos et cours en ligne
