Une AlertBox de Jakob Nielsen a récemment réenfoncé le clou : 80% du temps de consultation est passé au-dessus de la ligne de flottaison. Nous devons demander à nos interlocuteurs (DA, développeurs) de parfaitement zoner cet espace. Les éléments clefs de ma page web doivent donc être idéalement disposés dans cette zone. Surtout, ils ne doivent pas être « découpés » par la ligne de flottaison ou alors nous devons en avoir conscience. Placer cette fameuse ligne trop haut ou trop bas c’est potentiellement perturber la navigation de mes utilisateurs et altérer ma performance. Alors, où situer la ligne de flottaison ?
Un passage par Google. Quelques requêtes. Quelques clics. Je ne trouve pas de réponse convaincante. Je me la suis donc construite en 4 questions. Je la partage.
Pour moi, il faut placer la ligne de flottaison à 550 pixels.
Quelle définition écran retenir ?
Suivant les publics, la définition écran varie. Après un rapide détour par CNet et ZDNet, je retiens les fixes comme référence avec une hauteur écran à 768 pixels.
Quel navigateur prendre comme référence ? Combien de barres outils retenir comme base ?
Le tableau ci-dessus compare la hauteur de chaque composant affiché par les deux principaux navigateurs (dans leur dernière version).
Entre Internet Explorer et Firefox, je constate peu de différences. Je retiens celle qui consomme le plus de pixels et domine encore le marché : Internet Explorer.
La question suivante est donc celle du nombre de barres outils affichées. Un petit coup d’œil à quelques machines d’amis me fait constater la présence quasi-systématique d’une barre outil en plus de celle d’origine. Parfois même une seconde barre outils additionnelle est présente, ce phénomène est surtout observable sur les populations peu technophiles. Les barres outils s’ajoutent au fil de leurs installations de logiciels (antivirus, Open Office, PDF Creator…). Au total, l’affichage consomme donc 156 pixels, souvent 178.
Quid de la barre des tâches Windows ?
En environnement Windows, la dernière question est celle de la barre des tâches. Elle consomme 40 pixels en hauteur (Windows Seven).
Là aussi, moins les populations sont technophiles plus la barre de tâches semble présente. On a donc 196 à 218 pixels qui sont consommés.
768 pixels, moins une interface navigateur et une barre de tâches = 572 pixels. Le compte est bon !
La zone disponible pour l’affichage au-dessus de la ligne de flottaison est donc de 550 pixels lorsque l’on sécurise au maximum (intégration de 2 barres outils « personnelles » et de la barre de tâches Windows). Il me semble que l’on ne doit pas designer à moins de 572 pixels de hauteurs et idéalement placer la ligne de flottaison à 550 pixels .
Et le Mac ?
Au moment de rédiger ce billet, je n’ai pas eu accès à des Mac, dernière version d’OS et précédente avec Safari. Il sera intéressant de faire le même exercice dans cet environnement ou de valider à minima que la hauteur écran de référence est la même, ce que je ne sais pas.
A consulter également : Ergonomie : concentrer ses efforts projet dans les bonnes zones écran
Coubray.com 
Merci pour ce calcul, je me posais la question.
C’est tout bête mais terriblement pratique. Je suis sous IE et ne pense pas aux autres, je vois que y a pas trop de différence donc ça doit aller sur mes sites.
Merci pour ce décompte, Antoine.
Question additionnelle : quelle présence de la barre d’état en bas des navigateurs ? Est-elle affichée par défaut sur IE et donc fortement répandue chez les utilisateurs peu technophiles ?
Sur le même sujet, Google publie les stats d’affichage de ses pages (statistiquement intéressantes donc, vue l’audience) via l’outil http://browsersize.googlelabs.com/.
@Philippe Jaquet : La barre d’état est affichée par défaut à l’installation d’Internet Explorer. Je pense qu’il faut donc la décompter dans le calcul du nombre de pixels disponible pour designer les écrans.
Après passage sur l’outil Browsersize de Google, on retrouve à quelques pixels près les 550 annoncés comme référence.