Ma résolution en 2012, un choix qui n'est pas sans conséquence
La question de la résolution cible d'une IHM dans la conception d'un outil digital est fondamentale. Quels sont les éléments à prendre en compte pour choisir la taille d'écran, quelles en sont les conséquences et pour quels résultats ?
Ma résolution en 2012
Avec la multiplication des supports de communication digitale, on ne sait plus quelle résolution devient LA référence dont on doit tenir compte pour concevoir de nouvelles interfaces. L’hégémonie du 1024*768 a reculé. L’arrivée sur le marché des notebooks a brièvement fait pencher la tendance vers des résolutions plus petites, la vogue du 800*600 n'a eu qu'un temps.Les smartphones ont supplantés les notebooks sans pour autant bouleverser les habitudes de développement: ils ont leur développement propre et leurs résolutions spécifiques.
Parallèlement, les tablettes tactiles et autres écrans de plus en plus grands tirent la tendance des résolutions vers le haut quoique à ce jour, les tablettes les plus vendues dans le monde sont toujours les iPad dont la résolution est de 1024*768.
La tendance ?
Nous nous basons sur les données statistiques fournies sur le site http://gs.statcounter.com. Ce site récupère les données des visiteurs de plus de 3 millions de sites dans le monde.Une comparaison des statistiques des cinq continents révèle qu’au niveau mondial aucune tendance homogène ne se dégage. En France, la résolution 1024*768 est sensiblement moins répandue que le 1280*800 depuis quelques années. Une recrudescence en Amérique du nord, s'oppose à la décroissance du 1024*768 constante quoique de plus en plus lente dans les autres parties du monde.
Écrans plus grands donc sites plus grands ?
Pas nécessairement, les utilisateurs d’écrans dont la taille est au moins supérieure au 19 pouces apprécieront le fait de pouvoir voir plusieurs fenêtres à la fois plutôt que d’ouvrir leur navigateur en plein écran. Selon les sites et surtout la nature de l’information et de l’expérience qu’on souhaite offrir aux internautes, les usages seront différents. Il est donc nécessaire de définir précisément les objectifs du site et d’étudier les habitudes de navigation des utilisateurs cible.La diversité des internautes potentiels et de leurs terminaux impose souvent de choisir par défaut une résolution d'écran.
Mais alors, quelle résolution choisir en 2012 ?
80% des résolutions utilisées dans le monde sont supérieures au 1024*768.
L'erreur est d’en conclure qu’une interface optimisée pour du 1280*800 sera optimale pour 80% des utilisateurs. La réalité est différente : une interface en 1280*800 n'offre un affichage optimal que pour 20% des internautes et seulement un affichage correct pour les 60% restants (utilisant des résolutions supérieures au 1280*800). 20% des utilisateurs restent avec un affichage dégradé. Pourquoi exclure 2 utilisateurs sur 10 ?
100% des internautes bénéficient d'un affichage homogène en 1024*768.
Bien sûr, l’investissement dans un projet digital nous force à penser à l’avenir, l’impact de notre outil, site, ou service doit associer succès et pérennité. Mais si la résolution que je choisis n’est pas la bonne ? Comment vont réagir mes clients si le 1024 leur semble ridiculement petit au milieu de leur écran 27 pouces ? Dois-je insister sur une mise en scène graphique et même choisir une résolution plus grande ? Suis-je sur que les 20% qui n’auront pas la meilleure expérience ne sont pas ceux qui aujourd’hui font la réussite de mes services ? Et si, en vrai, ma cible consulte mon site régulièrement depuis différents supports ? Qui utilise son iPad ? Qui travaille systématiquement sur du 1024 et ne profite de son matériel personnel que rarement pour ce type d’activités ?... le doute s’installe, les statistiques indiquent des tendances mais mon projet doit trouver son audience aujourd’hui et la conserver demain.
Et pourquoi pas des sites liquides ?
Un site liquide est un site dont la largeur s'adapte automatiquement à la résolution de l'écran sur lequel il est affiché.
La solution semble évidente, pour qui n’est pas au fait des contraintes techniques qui s’y rattachent. Au delà des connaissances
approfondies en HTML et CSS requises, la conception de chaque élément graphique doit être définie au détail près pour répondre à tous les cas d'affichage : les affichages en 4/3 seront altérés en 16/9… Il faudra de toute façon définir une taille minimale d’écran pour laquelle le site reste lisible. L'investissement humain et financier d’une telle adaptation est conséquent, le coût en vaut-il la chandelle ?
Quels sont les bénéfices d'un site liquide ?
Par conséquent, les yeux et la souris des internautes doivent parcourir de plus grandes distances pour accéder aux informations.
Un exemple d’adaptation des contenus à la largeur de la page, montre les limites ergonomiques et graphiques auxquelles on est confronté :
Par défaut, le site est conçu sur une résolution standard de 1024*768. Le bloc éditorial est figé dans sa largeur tandis que la navigation et les blocs d’informations sur la moitié droite de la page s’adaptent à l’affichage.
En 1440*900, les blocs d’information remontent pour occuper la largeur de la page, plus de défilement vertical, toutes les informations sont visibles, une partie de la page est vide.
En 1900*1200, tous les blocs sont affichés sur une seule ligne. La visibilité des informations reste la même. Le menu de navigation est plus large donc plus long à lire et à utiliser. La zone d’espace vide occupe la majeure partie de la page inutilement, les contenus du site ne sont pas valorisés. Le jugement du site est négatif.
Cette réorganisation peut nuire à l'expérience de l'utilisateur qui consulte régulièrement un site mais sur des ordinateurs avec des résolutions différentes. Les repères visuels définis intuitivement lors d'une connexion seront obsolètes sur une autre taille d'affichage.
Conclusion
En 2012, ma résolution restera en 1024*768. Ainsi je permets à 100% (bon d’accord 99%) des internautes dans le monde de consulter un site optimisé aussi bien graphiquement qu'ergonomiquement et quelle que soit mon terminal, je ne manquerai rien !Optimiser l’affichage pour le 1024*768 ne signifie pas négliger l’affichage pour les résolutions supérieures. La conception graphique prendra en compte les zones non exploitées des écrans plus grands dans sa création. Les visiteurs disposant de résolutions supérieures apprécieront de pouvoir profiter de leurs terminaux pour jouir d'une expérience immersive et personnalisée.
Ce choix est le plus satisfaisant aujourd'hui. Nous ne manquerons évidemment pas de réviser notre jugement en suivant de près l'évolution des tendances et des innovations techniques. Le responsive design par exemple est une approche à considérer bien que son coût de mise en place reste important.
*Sources :
http://www.tablette-tactile.net
http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/
Les résolutions illustrées dans un navigateur :
