Mise à l'échelle en fonction de l'écran

Conception de Windows 8

Vision en coulisses de l'équipe d'ingénierie Windows

Mise à l'échelle en fonction de l'écran

  • Comments 4

Dans l'univers des écrans, les innovations sont extrêmement nombreuses, qu'elles portent sur la densité de pixels, sur le rapport hauteur-largeur ou sur des technologies plus fondamentales. Windows 8 a été conçu pour accompagner le développement et l'amélioration de l'écosystème d'écrans. Notre objectif est d'assurer une compatibilité avec le plus de technologies d'affichage possible, pour permettre aux fabricants de PC de concevoir de nouveaux PC et vous permettre quant à vous d'utiliser des écrans externes adaptés à vos besoins. Pour ce faire, nous avons conçu l'architecture WinRT de sorte qu'elle fournisse une plateforme capable de prendre en charge cette diversité d'écrans. Relativement complexe, ce billet examine en détail tous les aspects de la prise en charge des nombreuses combinaisons de dimensions physiques, de densités de pixels et de résolutions dont profitent les écrans du marché. Ce sujet ne se résume pas à la simple compatibilité avec des écrans toujours plus grands, de 27" ou plus, comme le montre ce billet rédigé par David Washington, chef de projet senior au sein de notre équipe Expérience utilisateur.
--Steven


La compatibilité avec de nombreux formats d'appareils est l'un des grands avantages de la plateforme Windows et c'est ainsi que plus d'un milliard de PC dans le monde fonctionnent actuellement sous Windows. Dans Windows 8, nous avons voulu exploiter cet avantage en proposant une expérience utilisateur optimale, quel que soit le format de l'appareil ou la taille de l'écran. Les PC Windows 8 seront proposés dans différents formats et différentes tailles : tablettes dotées de petits écrans, grands écrans pour ordinateurs de bureaux, configurations multi-écrans, ordinateurs portables, etc. Ces formats diffèrent aussi de par leur densité de pixels, très différente selon qu'il s'agit d'une tablette standard ou d'une tablette haute définition récente. Tout au long des phases de conception, nous avons cherché à respecter les objectifs suivants :

  1. Proposer au client un large éventail de formats tout en offrant une expérience utilisateur recherchée, homogène et prévisible.
  2. Permettre aux développeurs de créer facilement des applications esthétiquement réussies sur tous les formats de l'écosystème Windows.

Avec Windows, vous choisissez le PC et l'écran correspondant à vos besoins, à vos préférences et à vos habitudes. Par exemple, un étudiant sera peut-être plus attiré par un ordinateur portable tactile équipé d'un grand écran, afin de pouvoir rédiger des dissertations, mais aussi regarder des vidéos ou jouer à des jeux tactiles. Les familles opteront plutôt pour un ordinateur de bureau tout-en-un doté d'un écran tactile de très grande taille, pour voir et classer toutes les photos de la famille. Un comptable qui passe beaucoup de temps dans les transports choisira peut-être une petite tablette qui se glisse facilement dans un sac, pour naviguer sur le Web ou lire des romans sur le chemin du travail. Un architecte ou un trader préférera quant à lui utiliser trois écrans, dont un tactile, alliant modes portrait et paysage.

Windows 8 sera disponible sur tous ces types de PC, pour tous ces usages. Lorsque les utilisateurs passeront d'une taille d'écran à l'autre au cours de leur journée, ils profiteront d'une expérience utilisateur homogène et familière. Cette multiplicité de configurations matérielles est propre à Windows et selon nous, elle jouera un rôle essentiel dans l'évolution de Windows.

Dans Windows 8, les applications constituent le cœur même de l'expérience utilisateur. Aussi, il est indispensable de mettre en place une plateforme de développement permettant aux développeurs de créer de superbes interfaces utilisateur capables de s'adapter à tous les écrans. Pour cette raison, Windows 8 a été conçu dès le départ comme une plateforme axée autour d'applications fonctionnant sur un large éventail d'écrans.  

Écrans d'ordinateurs de bureau traditionnel, PC convertible et tablette PC

Une diversité d'appareils

Du point de vue des écrans, les différents appareils qui exécuteront Windows 8 peuvent être classés de différentes manières.

  • Taille d'écran : les PC seront proposés dans différentes tailles d'écran, des petits écrans des tablettes aux grands écrans des ordinateurs de bureau en passant par les écrans des ordinateurs portables et ceux des tout-en-un. Ces écrans différeront également de par leur forme ou leurs proportions hauteur-largeur.
  • Résolution d'écran : les écrans seront capables d'afficher de plus en plus de pixels et auront donc une résolution plus élevée. En général, plus l'écran est grand, plus la résolution est élevée, mais cela n'est pas toujours le cas.
  • Densité de pixels : les écrans auront également des densités de pixels différentes (nombre de pixels par pouce). La densité de pixels augmente avec la résolution d'écran, à taille d'écran constante.

La taille d'écran, la résolution et la densité de pixels ont fait l'objet d'une attention toute particulière lors de la conception de Windows 8, pour répondre aux besoins des utilisateurs et des développeurs. En matière d'écrans, il faut bien définir les variables et dimensions à prendre en compte. Par exemple, un écran de 13 pouces peut fonctionner à de nombreuses résolutions (c'est-à- dire avec différentes densités de pixels) et avoir des proportions hauteur-largeur différentes.

Ce schéma illustre la diversité des rapports largeur-hauteur courants (écran large) et des tailles d'écran avec lesquelles Windows 8 peut fonctionner. Windows sera compatible avec toutes les tailles d'écran, à partir du moment où le pilote graphique et la configuration matérielle lui fournissent les informations adéquates. Par ailleurs, certains écrans pourront s'adapter à des proportions hauteur-largeur différentes, par recadrage et/ou étirement. Une précision : même si les tablettes et les ordinateurs portables sont regroupés dans la même catégorie sur le schéma ci- dessous, n'oubliez pas qu'il s'agit de catégories aux contours de plus en plus flous.

10,1" 2 560 x 1 440, 11,6" 2 560 x 1 440, 10,1" 1 920 x 1 080, 11,6" 1 920 x 1 080, 10,1" 1 366 x 768, 11,6" 1 366 x 768, 14" 1 920 x 1 080, 14" 

1 366 x 768, 12" 1 280 x 800, 15,6" 1 920 x 1 080, 17" 1 920 x 1 080, 23" 1 920 x 1 080, 27" 2 560 x 1 440.

    

Résolution minimale

Dans les commentaires de ce blog, quelques internautes ont précisément posé la question de la résolution minimale. Par exemple, dans la version en anglais du billet Concevoir l'écran Démarrer d'octobre 2011, @wolf a laissé le commentaire suivant :

« Il serait plus judicieux d'obliger tous les développeurs à concevoir des applications Metro compatibles avec une taille d'écran minimale de 800 x 600 pixels. En limitant les applications à 1 024 x 768 pixels, vous laissez de côté tous les utilisateurs de miniportables et vous limitez l'intérêt de la boutique d'applications Windows. »

Nous avons choisi une résolution d'écran minimale de 1 024 x 768 pixels pour faciliter le travail des développeurs : ils peuvent ainsi créer plus facilement de formidables applications fonctionnant sur tous les écrans actuels et futurs. En imposant une résolution minimale, nous proposons un point de départ aux développeurs, qui peuvent l'utiliser comme base de travail pour vérifier que les éléments de navigation, les contrôles et les contenus sont correctement affichables à l'écran. En travaillant sur les différents modes de conception d'applications, nous avons découvert que plus la résolution minimale est élevée, plus l'application est riche et personnalisable. Nous voulions permettre aux développeurs d'adapter et d'affiner leurs interfaces pour utiliser chaque pixel disponible à une résolution de 1 024 x 768 pixels, sans devoir faire des compromis en termes de disposition pour s'adapter à des résolutions inférieures.

Application Finance ancrée à côté de l'application Weather

Windows 8 impose une résolution minimale, afin d'autoriser les développeurs à créer des dispositions enrichies exploitant au mieux la résolution de 1024 x 768 pixels

Pourquoi avoir choisi une résolution minimale de 1 024 x 768 pixels ?

Trois raisons nous ont poussés à choisir la résolution de 1 024 x 768 pixels comme résolution minimale pour les applications de style Metro.

  • Cette résolution est suffisamment élevée pour accepter les dispositions riches et esthétiquement réussies que les utilisateurs d'applications de style Metro espèrent. Les résolutions plus basses, 800 x 600 pixels, par exemple, nécessitent des dispositions plus simples et basiques affichant moins de contenu.
  • En général, les sites Web sont conçus pour une résolution minimale (voire unique) de 1 024 x 768 pixels et les développeurs Web sont habitués à cette résolution.   
  • En étudiant de plus près les données concernant les appareils actuellement sur le marché, nous avons pu constater que seulement 1,2 % des utilisateurs actifs de Windows 7 disposent d'écrans dont la résolution est inférieure à 1 024 x 768 pixels. Lorsque nous avons entrepris de concevoir une nouvelle plateforme compatible avec les appareils d'aujourd'hui et ceux de demain (qui offriront sans nul doute des résolutions encore plus élevées), nous avons décidé de l'optimiser pour la majorité des écrans actuels (98,8 % d'entre eux), sans accepter le moindre compromis sur le plan de l'expérience utilisateur, ni compliquer le travail des développeurs en les obligeant à prendre en charge des écrans plus anciens. En outre, la production des nouveaux PC équipés d'écrans de 1 024 x 600 pixels ou de 1 280 x 720 pixels a significativement baissé et à notre connaissance, plus aucun PC courant ou presque n'est fabriqué avec cette résolution. Nous savons que des machines bien spécifiques sont conçues pour fonctionner à des résolutions plus faibles, mais elles exploitent également des applications de bureau spécialisées. Beaucoup d'utilisateurs exécutent des machines virtuelles et celles-ci peuvent prendre en charge une résolution de 1 024 x 768 pixels, même si beaucoup d'entre elles utilisent par défaut une résolution inférieure.

Histogramme montrant toutes les applications Windows 8 compatibles avec chacune des résolutions suivantes : 

1 366 x 768, 1 280 x 800, 1 600 x 900, 1 920 x 1 080, 1 280 x 1 024, 1 440 x 900, 1 680 x 1 050, 1 024 x 768, 1 360 x 768, 1 920 x 1 200 et 1 280 x 768. Les applications exclusivement disponibles 

sur le Bureau sont compatibles avec les résolutions de 1 024 x 600 pixels et 1 280 x 720 pixels (qui ne représentent chacune qu'environ 1 % des écrans utilisés)

Un monde sans minimums

Certains utilisateurs nous ont demandé pourquoi nous imposons une résolution minimale au lieu de proposer simplement une recommandation plus ou moins élastique. En imposant une résolution minimale, nous simplifions le travail des développeurs, car ils n'ont plus besoin de prendre en compte ces résolutions peu élevées, ils peuvent simplement les ignorer. Si une application n'a pas été conçue pour accepter les résolutions peu élevées, certaines dispositions peuvent être tronquées, décalées ou découpées de façon imprévisible. Les développeurs ne pourraient donc pas créer à coup sûr des applications à la disposition soignée quel que soit l'appareil exécutant Windows 8. Si nous avions simplement suggéré une résolution minimale sans l'imposer, certains développeurs auraient conçu et testé leurs applications pour ces faibles résolutions, mais d'autres ne l'auraient pas fait. Nous aurions donc vu apparaître un écosystème fragmenté dans lequel les développeurs auraient ciblé des appareils spécifiques et non pas la plateforme en tant que telle. En outre, certains développeurs auraient ciblé le plus petit dénominateur commun et sélectionné la résolution la moins élevée possible, au détriment de l'expérience utilisateur et de la qualité des applications.

Jeu 5inarow, présentant 

une barre rouge sur 1/5e de l'écran dans la partie inférieure, illustrant la partie tronquée du jeu à une résolution de 1 024 x 600 pixels.

La disposition de ce jeu serait tronquée en partie inférieure s'il était affiché sur un écran de 1 024 x 600 pixels

Résolution minimale et ancrage d'applications

La plus petite résolution prenant en charge toutes les fonctionnalités de Windows 8, y compris le fonctionnement multitâche avec ancrage d'applications, est de 1 366 x 768 pixels. Nous avons choisi cette résolution, car elle offre suffisamment de pixels horizontaux pour afficher les 320 pixels de largeur d'une application ancrée, à côté d'une application principale de 1 024 pixels de large. Les caractéristiques techniques de la tablette Samsung ont été dévoilées au cours de la conférence //build/ : elle possède un écran de 11,6 pouces dont la résolution est de 1 366 x 768 pixels (gamme Samsung Series 7 actuellement sur le marché). Ces caractéristiques techniques correspondent à la résolution d'écran minimale permettant de prendre en charge toutes les fonctionnalités de Windows 8 sur une taille physique utile.L'application ancrée a 

une largeur de 320 pixels et l'application principale occupe 1024 pixels de largeur par 768 pixels de hauteur

        

La vue ancrée possède toujours une largeur fixe de 320 pixels, ce qui permet aux développeurs de créer et d'affiner une vue spécialement conçue pour cette taille. La largeur de 320 pixels est une taille courante, avec laquelle les développeurs sont habitués à travailler dans le cadre du développement d'applications pour téléphones.

Certains utilisateurs se demandent pourquoi nous n'autorisons pas un redimensionnement arbitraire de la vue ancrée, pour proposer différentes configurations d'affichage multitâche. La prise en charge de tailles arbitraires pour une disposition si petite risquerait d'accroître significativement la complexité liée au développement d'une application et alourdirait la charge de travail du développeur.

Même si la largeur d'une application ancrée est fixe, l'espace vertical augmente pour s'adapter à l'écran, de sorte que les utilisateurs disposant de grands écrans n'aient pas à faire défiler verticalement les contenus. La session //build/ 8 traits of great Metro style apps (Les huit caractéristiques des applications de style Metro idéales) montre de formidables exemples de dispositions ancrées. Nous aborderons plus en détail les thèmes de l'ancrage d'applications et du multitâche dans un prochain billet.

Voici quelques exemples où l'application ancrée se trouve à gauche et l'application principale à droite.

Trois applications sont 

présentées avec une fenêtre principale à côté d'une fenêtre d'application ancrée

En matière de résolution, y a-t-il une limite maximale ?

Vous vous demandez peut-être pourquoi nous n'imposons pas de résolution maximale. Plus la résolution est élevée, plus il y a de place à l'écran. Aussi, la disposition n'est jamais réellement tronquée ou altérée sur les écrans à haute résolution. Ainsi, rien ne vous empêche d'exécuter des applications de style Metro sur un écran 30 pouces à une résolution de 2560 x 1600 pixels ! Cependant, bien que les applications ne soient pas altérées lorsqu'elles disposent de plus de place, les développeurs doivent prendre en compte ces écrans à haute résolution pour exploiter au mieux l'espace sans mettre à mal l'esthétique de leurs applications.

Le cas des grands écrans

Sur les grands écrans tels que ceux des ordinateurs de bureau, les utilisateurs souhaitent généralement afficher plus de contenu : plus la taille d'écran augmente, plus le nombre de pixels disponible augmente lui aussi. Les schémas ci-dessous montrent dans quelle mesure l'augmentation de la taille de l'écran et de la résolution permettent d'afficher plus d'objets de même taille. Le petit écran ci-dessous peut afficher environ 40 carrés orange. Sur l'écran plus grand, il est possible d'afficher 84 carrés de même taille.

Comparaison 

entre un écran de 11,6 pouces affichant 1 366 x 768 pixels et un écran de 17 pouces affichant 1 920 x 1080 pixels, qui peut afficher bien plus de carrés

  Les grands écrans disposent en général d'une quantité de pixels bien plus importante et peuvent ainsi afficher plus de contenus 

Cependant, le fait qu'il soit possible d'afficher plus de contenu à l'écran ne signifie pas pour autant que toutes les applications exploiteront réellement l'espace disponible. Si une application a été conçue pour utiliser des dimensions fixes ou pour un format d'appareil bien précis, les grands écrans risquent d'afficher de vastes zones vides, comme dans l'exemple ci- dessous. En termes d'expérience utilisateur, ce fonctionnement est difficilement acceptable et certains d'entre vous l'ont justement fait remarquer.

Quelle que soit la résolution de votre grand écran, la plupart des sites Web actuels ne sont pas particulièrement adaptés à ces écrans et laissent beaucoup de place vide. D'ailleurs, sur ces grands écrans, la plupart des utilisateurs préfèrent zoomer sur le texte en utilisant la touche CTRL et la roulette de la souris ou les raccourcis clavier CTRL +, CTRL - et CTRL 0. Il en va de même sur le Web mobile lorsque des sites sont trop grands pour être affichés sur un écran d'appareil mobile. De plus en plus de développeurs Web adaptent leur contenu à différents formats d'appareils, en fonction du format de l'appareil et de l'usage des applications.

Application d'actualités 

affichée dans l'angle supérieur gauche de l'écran, avec un espace vide en bas à droite.

Si les développeurs ne prenaient pas compte différentes tailles d'écran, des zones vides seraient présentes à côté de nombreuses applications en cas d'utilisation d'un grand écran

La plateforme Windows 8 permet aux développeurs de créer plus facilement des applications capables de s'adapter à différentes tailles d'écran, en fournissant des techniques et des contrôles de disposition intégrés. Dans Windows 8, les applications occupent l'intégralité de l'espace disponible en affichant plus de contenus lorsque cela est possible. Ainsi, un développeur peut créer une seule application et la concevoir de telle sorte qu'elle affiche plus de contenus en fonction de l'écran utilisé, de la tablette aux grands écrans des ordinateurs de bureau en passant par ceux des ordinateurs portables. Par exemple, sur les grands écrans, cette application d'actualités affiche plus d'articles. Il convient de noter que la plateforme et les outils sous-jacents ont été développés pour prendre en charge la programmation asynchrone, qui permet aussi de « remplir » les grands écrans et de les rendre aussi rapides et fluides que les petits écrans : il faut en effet veiller à ne pas bloquer l'utilisateur pendant la récupération et le rendu de gros volumes de contenu.

L'application d'actualités affiche 10 articles sur un écran de 11,6 pouces (1 366 x 768 pixels), 15 articles sur un écran de 13 pouces (1 400 x 1 050 pixels) et 21 articles sur un écran de 

20 pouces (1 920 x 1 080 pixels)

Concevoir des applications pour de grands écrans

Windows 8 a été conçu pour fonctionner de façon prévisible et homogène, quelles que soient la taille et la forme de l'écran, des tablettes aux ordinateurs portables en passant par les écrans des ordinateurs de bureau. Lorsqu'un utilisateur change de taille d'écran, le système et les applications doivent utiliser au mieux l'espace disponible, pour proposer l'expérience utilisateur la plus immersive possible.

Exemple d'application affichée sur trois tailles d'écran différentes

Grâce aux dispositions adaptatives, comme cet exemple d'application créée pour la version Developer Preview
présentée lors de la conférence //build/, les utilisateurs voient plus de contenus sur les grands écrans

Pour aider les développeurs à adapter leurs applications à la diversité des écrans, Windows 8 prend notamment en charge les dispositions adaptatives standardisées au sein de la plateforme d'applications. Par le passé, il était très difficile de concevoir une disposition esthétiquement réussie quelle que soit la taille de l'écran. Au lieu d'inventer un nouveau jeu propriétaire de contrôles de disposition, Windows 8 offre une prise en charge intégrée des techniques courantes de disposition adaptative issues du langage XAML. Windows 8 prend aussi en charge les fonctionnalités CSS3 ratifiées par le W3C, qui ont été spécialement conçues pour faciliter le travail des développeurs Web.

En HTML, les dispositions CSS3 grid, flexible box et multi-column aident les développeurs à exploiter plus efficacement l'espace d'affichage sur un large éventail d'appareils et de résolutions.

La disposition CSS3 grid permet aux développeurs de spécifier les lignes et les colonnes de leur disposition. Elle se rapproche d'un tableau HTML, mais elle offre bien plus de possibilités de contrôle et de flexibilité. Une disposition grid est également idéale pour définir une disposition adaptative de niveau supérieur, similaire à celles affichées dans l'interface utilisateur de Windows 8 (écran d'accueil, sélecteur de fichiers, etc.). Vous définissez ainsi les lignes et les colonnes, puis vous placez votre contenu dans les cellules de la grille créée. Vous pouvez facilement définir les cellules qui doivent s'adapter et être redistribuées à l'écran.

Grille de quatre cases, contenant des 

paires de numéros : 1,1; 1,2; 1,2; 2,2

La disposition CSS3 flexible box permet au développeur de répartir les marges et les espaces vides de façon équilibrée et prévisible. Elle est idéale pour mettre en place des composants individuels et des collections, par exemple des barres d'outils et des collections d'images.

Enfin, la disposition CSS3 multi-column permet de présenter du contenu dans plusieurs colonnes sur la page, à la manière d'un journal ou d'un magazine. Tous les modèles fournis avec Visual Studio 11 utilisent ces constructions de disposition et exploitent le contrôle ListView et d'autres contrôles afin de prendre en charge différentes tailles d'écrans par défaut. Les développeurs peuvent utiliser les mêmes techniques de disposition standardisées et les mêmes contrôles pour adapter la disposition à différentes orientations et aux vues ancrées. Toutes les constructions de disposition disponibles en HTML sont également accessibles aux développeurs XAML.

Certaines applications, en particulier les jeux et les interfaces de rendu inspirées des jeux n'ont pas pour objectif d'exploiter plus de place lorsque la résolution augmente. Pour ces applications, nous proposons un moyen de mettre facilement à l'échelle une application conçue pour une résolution de 1 366 x 768 pixels, de sorte qu'elle s'adapte à n'importe quel écran. Si les proportions hauteur-largeur ne correspondent pas au contenu, le système fournit également des zones vides pouvant être personnalisées par le biais de thèmes. Si cette solution n'est pas idéale pour toutes les interfaces utilisateur, car elle risque d'afficher certains éléments en très grande taille sur les écrans des ordinateurs de bureau, elle fonctionne correctement avec de nombreux jeux et de nombreuses interfaces utilisateur inspirées des jeux, composées principalement de graphismes bitmap. Cette solution permet également aux applications de conserver leur aspect immersif sur de nombreux écrans, sans alourdir réellement la charge de travail du développeur.

        

Le jeu s'affiche en plus gros sur un grand écran

Grâce aux dispositions fixes comme celle de ce jeu 5inarow, l'utilisateur profite d'une interface de jeu plus grande sur les grands écrans

Il est pour nous indispensable de permettre aux développeurs d'applications de choisir la technique de disposition (adaptative ou mise à l'échelle) qui leur convient le mieux, en fonction de leur contenu et de leurs habitudes de travail. Si toutes les applications étaient adaptatives, il serait difficile de créer des interfaces utilisateurs au rendu inspiré des jeux capables de remplir un écran 23 pouces de résolution 1 920 x 1 080 pixels sans afficher d'immenses marges vides. D'un autre côté, si toutes les applications étaient mises à l'échelle, les utilisateurs ne pourraient pas afficher plus de courriers électroniques, par exemple, sur leur écran 23 pouces de résolution 1 920 x 1 080 pixels. Selon nous, notre solution offre un juste équilibre et fournit aux développeurs suffisamment de choix et d'outils pour leur permettre d'optimiser leurs applications pour différents écrans, en fonction des scénarios qu'ils considèrent comme les plus importants.

Vous vous demandez peut-être pourquoi nous ne laissons pas tout simplement les applications se redimensionner automatiquement, sans chercher à contrôler cette mise à l'échelle. Cette question est tout à fait légitime de par l'historique des fenêtres redimensionnables de Windows. En fait, la première version de Windows prenait en charge les fenêtres en mosaïques. Ce n'est qu'à partir de Windows 2.0 que les chevauchements de fenêtres ont été rendus possibles. Pour toutes les raisons évoquées ci-dessus, mais aussi pour proposer des expériences utilisateur fiables quelle que soit la résolution, nous avons axé notre travail autour des dispositions plein écran sur mesure pour les applications de style Metro.

Cette démarche peut sembler quelque peu contre-intuitive, étant donné notre expérience quotidienne avec Windows. Cependant, si l'on examine les applications du marché et les écrans toujours plus grands dont nous disposons, il devient évident que les développeurs n'optimisent plus leurs applications pour l'ensemble des écrans disponibles. Même si la plupart des logiciels indiquent une résolution minimale, en pratique nous constatons de nombreuses erreurs (interface tronquée, éléments mal positionnés, mauvais rendu en cas de redimensionnement ou d'agrandissement, etc.). En outre, certaines ressources (icônes et éléments d'interface) ne sont pas correctement mises à l'échelle en fonction de la densité de pixels. Comme vous pouvez le constater sur cette série de captures d'écran, la conception graphique du Ruban d'Office 2007 a fait l'objet d'une attention particulière pour permettre la mise à l'échelle.

Quatre tailles différentes pour le bloc « Organiser » : grand écran, écran moyen, petit écran, menu déroulant, menu déroulant développé

Image issue du billet Scaling up, scaling down sur le blog de Jensen Harris : « An Office User Interface »

Malheureusement, la plupart des applications n'exploitent pas les contrôles déjà disponibles (Ruban Windows, par exemple) pour se mettre à l'échelle. Par conséquent, les utilisateurs doivent tâtonner pour définir la taille d'une fenêtre. De leur côté, les développeurs doivent gérer les nombreux bogues et autres incohérences dans les résolutions qu'ils n'ont pas testées, et pour cause : ils ne peuvent pas se préparer à toutes les résolutions, toutes les proportions hauteur-largeur et toutes les densités de pixels. À mesure que les développeurs créent leurs propres dispositions, contrôles et métaphores d'interface, ils formulent également des hypothèses quant à la résolution d'écran et à la densité de pixels requises pour leur code, mais ils n'exigent pas pour autant des configurations spécifiques (encore aujourd'hui, les feuilles de propriétés Windows sont tronquées en deçà de 600 pixels, comme certains utilisateurs l'ont constaté sur d'anciens mini-ordinateurs ou des machines virtuelles).

En général, si la plupart des lecteurs de ce blog savent gérer et organiser des tailles de fenêtres arbitraires, les données dont nous disposons démontrent deux choses. En premier lieu, sur les ordinateurs portables (plus de 75 % des PC achetés par les consommateurs), la plupart des applications sont en permanence affichées en mode agrandi, ce qui n'est pas étonnant eu égard à l'espace d'affichage disponible et aux choix de conception de la plupart des interfaces et des sites Web. En outre, sur les grands écrans, la plupart des fenêtres sont affichées en utilisant un certain nombre de dimensions approximatives, principalement parce qu'en grande majorité, les programmes ne prennent pas en charge une mise à l'échelle infinie.

Nous allons assister prochainement à l'apparition de nouvelles approches en matière d'interface utilisateur et de nouveaux dispositifs d'organisation des commandes. Par rapport aux versions précédentes, Windows 8 possède une bibliothèque de contrôles très riche et des outils et langages bien plus flexibles permettant de coder des dispositions d'interface. Bien évidemment, le Bureau Windows est toujours là et a même été amélioré. Vous pouvez continuer à travailler en profitant des fonctionnalités auxquelles vous êtes habitué dans vos applications actuelles.

Des densités de pixels différentes

La notion de densité de pixels est relativement nouvelle pour bon nombre d'entre nous, mais elle est étroitement liée à la taille et à la résolution des écrans. Pour simplifier, la densité de pixels correspond à la quantité de pixels disponibles dans une zone physique. Cette quantité est généralement exprimée en points par pouce (PPP). Plus la densité de pixels augmente, plus la taille physique des pixels fixes diminue. Certains d'entre vous ont remarqué que le texte peut être très petit sur les ordinateurs portables à très haute résolution. Pour atténuer ce problème, de nombreux utilisateurs sont habitués aux paramètres de taille de police et d'agrandissement du texte sur les ordinateurs de bureau. Pour les applications WinRT, Windows 8 met la barre encore plus haut.

Un écran de 135 PPP affiche quatre 

lignes de gros carrés

Un écran de 190 PPP affiche 

six lignes de carrés plus petits

Sur les écrans offrant une densité de pixels plus élevée, sans mise à l'échelle, les tailles physiques sont plus petites.

La plupart d'entre nous sont habitués à des densités de pixels relativement faibles sur les écrans d'ordinateurs portables ou d'ordinateurs de bureau. Par exemple, un ordinateur portable courant équipé d'un écran de 13 pouces de résolution 1 280 x 800 pixels dispose de 116 PPP. L'écosystème est en évolution permanente et des écrans de plus en plus sophistiqués sont mis sur le marché. Les avancées en matière de densité de pixels sont impressionnantes. De nombreuses tablettes PC fonctionnant sous Windows 8 auront des densités de pixels d'au moins 135 PPP, bien plus que ce à quoi nous sommes habitués. Bien évidemment, des tablettes HD ont été présentées récemment. Elles offrent une résolution Full HD de 1 920 x 1 080 pixels sur un écran de 11,6 pouces, avec une densité de pixels de 190 PPP. Il existe également des tablettes quad-XGA affichant 2 560 x 1 440 pixels sur ce même écran de 11,6 pouces, soit une densité de 253 PPP. La densité de pixels peut encore augmenter sur les écrans plus carrés et plus petits tels que celui du nouvel iPad. Plus la densité de pixels augmente, plus la taille physique des objets affichés diminue. Si Windows n'avait pas été conçu pour s'adapter à différentes densités de pixels, les objets affichés à l'écran seraient trop petits pour permettre une interaction tactile aisée ou la lecture sur ces tablettes.

Doigt survolant un bouton 

à une résolution de 1 366 x 768 pixels, puis à une résolution de 1 920 x 1 080 pixels. À haute résolution, la cible tactile est trop petite pour permettre au doigt de viser juste.

Sans mise à l'échelle, les objets sont trop petits pour permettre une interaction tactile aisée sur un écran à haute densité de pixels, comme celui de la tablette haute définition de droite.

Si vous optez pour un de ces écrans à haute densité de pixels, nous souhaitons vous permettre d'une esthétique et d'une simplicité d'utilisation optimales, pour les applications, le texte et les images. Dès les premières phases de conception, nous avons étudié des solutions permettant une mise à l'échelle en fonction de la densité de pixels, qui permettrait de conserver la taille d'un objet au millimètre près. Cependant, nous avons vite réalisé que la plupart des applications utilisent des images bitmap qui risqueraient d'être floues après une mise à l'échelle. Ainsi, Windows 8 utilise des pourcentages de mise à l'échelle prévisibles, assurant ainsi une esthétique remarquable des applications sur ces appareils. Voici les pourcentages de mise à l'échelle utilisés dans Windows 8 :

  • 100 % lorsqu'aucune mise à l'échelle n'est appliquée
  • 140 % pour les tablettes HD
  • 180 % pour les tablettes quad-XGA

Gros plan sur le texte affiché par 

l'écran à haute densité, montrant que le texte est plus net que sur l'écran à basse densité, alors que la taille des cibles tactiles reste constante.

Grâce à la mise à l'échelle dans Windows 8, les tailles physiques sont conservées sur les appareils à haute densité de pixels, et le texte et le contenu affichés à l'écran sont plus nets.

Les pourcentages sont optimisés pour les appareils réellement disponibles dans l'écosystème. Si les valeurs de 140 % et de 180 % peuvent de prime abord sembler étranges, elles répondent à une certaine logique dès lors que l'on examine le matériel.

Par exemple, une mise à l'échelle de 140 % est optimisée pour les tablettes HD offrant une résolution de 1 920 x 1 080 pixels, qui disposent de 140 % de pixels en plus qu'un écran de base de 1 366 x 768 pixels. Ces facteurs de mise à l'échelle optimisés garantissent une disposition homogène entre la tablette de base et la tablette HD, car la résolution effective est la même sur les deux appareils. Chaque pourcentage de mise à l'échelle a été choisi pour permettre à une disposition conçue pour les tablettes de 1 366 x 768 pixels (soit 100 %) d'afficher le contenu à la même taille et avec la même disposition que les tablettes HD à 140 % ou les tablettes quad-XGA à 180 %.

Un graphique montre que les trois points de référence idéaux sont 1 366 x 768 pixels, 

1 920 x 1 080 pixels et 2 560 x 1 440 pixels

Les pourcentages de mise à l'échelle dans Windows ont été conçus pour conserver les mêmes cibles tactiles et
les dispositions, tout en étant optimisés pour les tablettes qui seront commercialisées prochainement.

L'écran du nouvel iPad suscite un certain intérêt. Pour cet écran, Apple a choisi un facteur de mise à l'échelle de 200 %. Le nouvel écran offre une densité de pixels deux fois plus élevée (264 PPP contre 132)* sur un écran de même taille. Comme iOS et les développeurs doivent simplement assurer une compatibilité avec les résolutions prédéfinies, il leur suffit de concevoir leurs applications en prenant en compte cet unique facteur de mise à l'échelle. Dans le cas de l'iPad 2, par rapport au nouvel iPad, le facteur de mise à l'échelle de 200 % signifie que ce que vous voyez à l'écran à une résolution de 1 024 x 768 pixels correspond exactement à ce que vous voyez sur le nouvel écran à plus haute résolution, à la seule différence que tout est plus net, car la quantité de pixels utilisée est plus élevée (comme sur l'image de l'application ci-dessus). Par ailleurs, sur les écrans à plus haute densité tels que celui du nouvel iPad, les développeurs de jeux et d'autres applications où les performances sont cruciales peuvent définir le juste équilibre entre l'affichage de zones vides et l'exécution à moindre résolution, pour améliorer l'expérience utilisateur (nombre d'images par seconde, par exemple).

Pour l'utilisateur, la mise à l'échelle est invisible et Windows la met en œuvre automatiquement en fonction des dimensions de l'écran, sans l'intervention de l'utilisateur, de l'administrateur informatique ou du fournisseur OEM. Les développeurs doivent simplement s'assurer que les images sont affichées correctement quel que soit le pourcentage de mise à l'échelle. Ceux-ci étant prévisibles, les développeurs fournissant des images pour chaque pourcentage peuvent éviter très facilement les problèmes de flou ou la présence d'artefacts liés à l'étirement des images.

La densité de pixels présente une autre variable où les paradigmes existants liés aux barres d'outils et aux menus sont de plus en plus fastidieux à utiliser. Les « hacks » consistant à utiliser des polices plus grandes ou à tromper le système pour l'obliger à utiliser une densité de pixels différente ne sont qu'un pis-aller. Comme tous les utilisateurs d'écrans à haute densité vous le diront, les applications et les paradigmes d'interface existants ne fonctionnent tout simplement pas et deviennent inutilisables. C'est notamment le cas lorsque le bouton d'une barre d'outils devient minuscule et que la taille des menus et du texte devient trop petite pour permettre la lecture et la navigation. Bien évidemment, les préférences personnelles jouent un rôle important et les possibilités de réglage du système peuvent aider. Toutefois, elles n'offrent pas pour autant un moyen fiable pour garantir le confort d'utilisation de Windows sur une nouvelle génération de matériel.

Windows 8 a été conçu pour fournir aux développeurs une solution simple leur permettant de créer des logiciels fiables fonctionnant sur un large éventail de matériels, et pour proposer aux utilisateurs une expérience enrichie et cohérente lors de l'utilisation de ces logiciels. Il ne s'agit pas là d'un simple abandon des fenêtres redimensionnables : en replaçant la démarche dans son contexte, on constate qu'elle permet de multiplier les choix de tailles d'écran, de résolutions et de densités. Les développeurs savent que leurs applications fonctionneront et les consommateurs sont certains que leurs applications seront compatibles avec leur matériel. Notre solution vous évite de faire des compromis : tous les logiciels seront pleinement fonctionnels et vous pouvez réellement choisir la taille d'écran qui vous convient (en fonction des autres caractéristiques : prix, autonomie, etc.).

Concevoir des applications pour des densités de pixels plus élevées

Windows 8 facilite également le développement d'applications fonctionnant parfaitement quelle que soit la densité de pixels. En premier lieu, aucun travail manuel n'est requis pour que l'application puisse être mise à l'échelle. Contrairement aux versions précédentes, vous n'avez pas à modifier votre application pour qu'elle s'adapte à la densité de pixels : des frameworks sont là pour le faire à votre place. En utilisant simplement des unités de pixels CSS standardisées ou une disposition XAML, les dispositions des applications sont mises à l'échelle de façon proportionnelle. Lorsqu'une application est agrandie, les images sont étirées. Elles pourraient alors devenir floues, mais Windows 8 permet aux développeurs de conserver des images nettes et belles quelle que soit la densité de pixels.

L'image 

bitmap étirée est floue, alors que l'image affichée à 180 % est nette

   

Dans Windows 8, la plateforme prend en charge les graphismes vectoriels de façon native. Les images exportées au format SVG (Scalable Vector Graphics) ou XAML Art seront mises à l'échelle sans devenir floues. En outre, Windows 8 apporte une fonctionnalité de chargement automatique des ressources permettant aux développeurs d'enregistrer trois versions des images en utilisant une convention d'attribution des noms. Les images correspondant à chacun des pourcentages de mise à l'échelle actuels (100 %, 140 % et 180 %) sont chargées automatiquement pour conserver des images nettes y compris sur les écrans à haute densité de pixels. Les développeurs peuvent aussi utiliser la requête de média CSS3 resolution ou des événements système pour recharger les images à différentes tailles. La mise à l'échelle de Windows 8 en fonction de la densité de pixels permet aux développeurs d'atteindre un niveau de qualité optimal sans gros efforts, puis d'adapter leurs images pour qu'elles soient nettes et esthétiques sur les écrans à haute densité de pixels. L'image bitamp est nette à 100 %, 140 % et 180 %

Tester les applications sur différents écrans

Même si Windows facilite la création d'applications esthétiquement réussies et fonctionnant parfaitement sur différentes tailles d'écran, il est important de tester ces applications sur différents écrans. Nous sommes bien conscients que la majorité des développeurs n'ont pas des dizaines d'appareils à leur disposition. Aussi, nous avons intégré aux outils un dispositif permettant de tester les applications sur différents écrans. Visual Studio 11 intègre ainsi Windows Simulator, qui permet aux développeurs d'exécuter leurs applications sur un large éventail d'écrans, quelles que soient leur taille, leur orientation ou leur densité de pixels. Pour passer d'une taille d'écran à une autre, il suffit de choisir une option dans le menu correspondant.

Écran d'accueil de Windows 8 en mode simulateur ; des commandes 

affichées à droite permettent de tester différentes résolutions

Windows Simulator permet de tester l'application sur différents écrans

Microsoft Expression Blend 5 offre un menu de plateforme permettant de concevoir vos applications pour différentes tailles d'écran et différentes densités de pixels tout au long du développement. Le canevas Blend peut se mettre à jour de façon dynamique, en fonction des dimensions d'affichage que vous choisissez dans le menu de la plateforme.

Plusieurs options de 

menu sont affichées : différentes résolutions d'écran, Afficher le chrome, Substituer la mise à l'échelle, Déployer la cible, Vues et Écran

Microsoft Expression Blend 5 intègre des options permettant de concevoir des applications pour différents écrans

Résumé

Windows 8 a fait l'objet d'un travail approfondi de planification, de réflexion et de développement pour permettre la mise à l'échelle de l'interface sur différents écrans et formats d'appareils. Windows 8 propose à l'utilisateur une expérience prévisible et homogène, quel que soit l'appareil utilisé. Sur les grands écrans, les applications peuvent afficher plus de contenus. Sur les écrans à haute densité de pixels, l'utilisateur profite de graphismes nets, sophistiqués et très lisibles, avec lesquels il est facile d'interagir en utilisant un écran tactile ou un clavier et une souris. Côté développeurs, Windows 8 facilite la compatibilité avec différentes tailles d'écrans et différentes densités de pixels, à travers des techniques de disposition connues et standardisées et une fonctionnalité de mise à l'échelle automatique en fonction de la densité de pixels. Au final, les développeurs peuvent créer des expériences utilisateur sur mesure et irréprochables, quel que soit le format d'appareil utilisé.

Nous serons ravis de vous faire essayer Windows 8 sur différents écrans !

Merci !
David

 

*Une coquille a été corrigée le 22 mars 2012 : la deuxième valeur de densité de pixels était erronée. Toutes nos excuses pour cette erreur.

  • Loading...
Leave a Comment
  • Please add 1 and 2 and type the answer here:
  • Post