Tag Archives: ux

Site mobile : priorité au contenu immédiat.

1 Août

Accaparé par l’animation de notre entreprise, je fais ma veille et entretiens ma curiosité essentiellement dans les transports en commun : métro, bus, RER. Je suis donc un gros utilisateur de contenu mobile. C’est ainsi que je me suis intéressé aux smart tags et par extension aux sites mobiles. La dernière Alert Box de Jakob Nielsen, pape de l’ergonomie, est consacrée aux sites mobiles.

Conclusion : le premier écran d’un site mobile doit être totalement dédié au contenu clef. Focus ! Lire la suite

Design et ergonomie de site : A combien de pixels placer la ligne de flottaison ? 550 !

17 Mai

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

Share

Ergonomie : concentrer ses efforts projet dans les bonnes zones écran

7 Avr

Les deux dernières AlertBox de Jakob Nielsen, la newsletter bimensuelle de ce référent en ergonomie, sont consacrées à la navigation à l’intérieur d’une page.

Le premier article traite de la consultation verticale, il nous indique que 80% du temps de consultation est passé au-dessus de la ligne de flottaison et 20% au-delà (voir ici).

Le second article traite de la consultation horizontale, il nous indique que 2/3 du temps de consultation est passé dans la moitié gauche de l’écran et 1/3 dans la moitié droite (voir ici).

Pour un dosage de l’effort par « quartile » écran

J’adore l’arithmétique. J’aime trouver des règles pour allouer mon temps au mieux. En lisant ces deux posts de Jakob Nielsen, je me dis que dans le placement des éléments et aussi dans notre allocation temps (gestion de projet, DA), il faut réfléchir par « quart » écran.

Le petit schéma ci-après synthétise donc l’importance de chaque zone écran. Par croisement des deux mémos de Jakob Nielsen, je calcule l’attention allouée par un utilisateur à chaque zone écran.

Dans notre boîte à outils projet, ce quatre quarts peut nous servir de référent pour placer les éléments clefs et aussi doser notre énergie, notre encadrement des DA et intervenants sur nos sites.