Optimisation pour l'affichage en mode Paysage et en mode Portrait

Conception de Windows 8

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

Optimisation pour l'affichage en mode Paysage et en mode Portrait

  • Comments 2

Lors des démonstrations de Windows 8 proposées au cours de différentes manifestations, nous avons en général utilisé une orientation Paysage (écran large). Pourquoi ce choix ? Principalement parce que nous utilisons un projecteur la plupart du temps et que cette orientation est donc plus adaptée. Par ailleurs, ce choix s'explique aussi par le fait que la plupart des premiers appareils compatibles (par exemple la tablette Samsung présentée lors de la conférence //build/ en même temps que la version Developer Preview de Windows) disposent d'écrans larges, qui sont idéaux pour afficher plusieurs applications côte à côte grâce à la nouvelle fonctionnalité « Snap », qui elle-même fonctionne particulièrement bien en mode Paysage. Nous avons travaillé d'arrache-pied pour vous proposer une expérience utilisateur rapide et fluide lorsque vous faites pivoter l'écran. Les utilisateurs préférant une orientation en mode Portrait pourront eux aussi profiter d'une expérience utilisateur optimale. Comme vous pourrez le constater à la lecture de ce billet, ce travail est le résultat d'une analyse approfondie des facteurs qui contribuent à privilégier telle ou telle orientation. Pour mettre à la disposition des développeurs des outils idéaux permettant de créer des applications adaptées aux deux orientations, nous avons même apporté des améliorations à nos outils Visual Studio et Expressions. David Washington, de l'équipe Expérience utilisateur, a rédigé ce billet consacré aux écrans en mode Paysage et Portrait dans Windows 8. Il a également animé la session APP-207T lors de la conférence //build/. --Steven

Les PC fonctionnant sous Windows 8 constituent un tout nouveau type d'appareil : ils englobent à la fois les petites tablettes uniquement tactiles, les ordinateurs portables et les ordinateurs de bureau. En réimaginant Windows 8, nous avons voulu vous proposer une expérience utilisateur optimale, quel que soit le format de l'appareil ou l'orientation de l'écran. Les tablettes offrent plus de flexibilité en termes d'ergonomie, car elles permettent de tenir l'appareil dans l'orientation la plus confortable et la mieux adaptée au contenu.

Les tablettes présentent en outre un immense avantage : vous pouvez les tenir entre vos mains. Il s'agit d'un objet personnel. Pour lire votre hebdomadaire favori ou parcourir un album de photos de mariage, le fait de pouvoir littéralement toucher vos contenus et interagir avec eux crée un véritable lien émotionnel. À l'ère numérique, une bonne partie des éléments que nous jugeons importants sont stockés sur des appareils. Dès les phases de planification de Windows 8, nous avons décidé que l'expérience utilisateur devrait prendre en charge toutes les orientations possibles pour chaque appareil.

Plusieurs principes nous ont guidés lors de la conception de l'expérience utilisateur de Windows 8 pour plusieurs formats :

  • L'expérience utilisateur doit s'adapter à tous les formats d'appareils : petits écrans, grands écrans, ordinateurs portables et ordinateurs de bureau.
  • L'expérience utilisateur doit exploiter au mieux les grands écrans pour les utilisations multitâches et la vidéo en plein écran.
  • Il doit être possible de tenir l'appareil et d'interagir avec le contenu de la façon la plus confortable possible.
  • Les développeurs doivent être en mesure de créer une application compatible avec tous les formats d'affichage et toutes les orientations, sans que cela nécessite de lourdes tâches supplémentaires.

Nous avons passé beaucoup de temps à étudier le comportement des utilisateurs de tablettes, aussi bien en laboratoire qu'à leur domicile. Nous avons observé les utilisateurs maîtrisant déjà les tablettes, mais aussi ceux qui découvraient ce format. Nous sommes restés en contact avec eux pendant des mois. Nous avons étudié les modes de prise en main, les postures, les mouvements de mains et les interactions avec différentes applications, différents positionnements d'appareils et différentes orientations. Nous avons constaté une grande variété dans les usages et nous avons laissé les utilisateurs identifier les facteurs qui les poussent à orienter l'appareil ou à se tenir de telle ou telle façon. Ces choix sont notamment influencés par des facteurs anthropométriques (taille des mains, portée du pouce, etc.), par des facteurs ergonomiques (répétitivité, fatigue, etc.), par des facteurs liés au matériel (accessibilité des boutons physiques, etc.), par des facteurs environnementaux (lieu d'utilisation de la tablette, par exemple : cuisine, chambre, salon, etc.), ainsi que par des facteurs physiques (utilisation debout, assis sur un canapé, assis à un bureau, etc.). Le nombre de combinaisons possibles est stupéfiant et une première conclusion s'impose : les postures, les modes de prise en main et les orientations changent assez fréquemment. Pour résumer, il existe plusieurs façons de tenir un appareil et les utilisateurs cherchent naturellement une position et une orientation confortables, qu'ils considèrent adaptées à leur utilisation de l'appareil à l'instant t.

Personne assise sur un canapé, utilisant une tablette en mode Portrait

Au départ, nous pensions que l'orientation en mode Paysage ou Portrait était avant tout une question de préférence personnelle. Toutes les personnes que nous avons observées ont fait pivoter l'appareil en s'attendant à ce que l'interface change immédiatement d'orientation. Nous avons en revanche été surpris de constater que lorsque les utilisateurs commencent à maîtriser l'appareil et les applications qu'ils considèrent comme importantes, un facteur spécifique influence l'orientation choisie : le type de contenu affiché à l'écran. Si le contenu et l'expérience utilisateur sont plus confortables en mode Paysage, les utilisateurs basculent naturellement l'application en mode Paysage. Inversement, si le contenu et l'expérience utilisateur semblent plus confortables en mode Portrait, l'application est utilisée en mode Portrait. Par exemple, la plupart des utilisateurs préfèrent regarder un film en plein écran en mode Paysage, sans barres noires, alors qu'ils lisent les longs articles et les pages Web en mode Portrait, pour limiter les opérations de défilement. Les préférences exprimées par les utilisateurs sont avant tout influencées par l'expérience utilisateur, qu'ils considèrent meilleure dans une orientation plutôt qu'une autre. Nous avons reçu des questions et des commentaires demandant si Windows 8 est avant tout conçu pour être utilisé en mode Paysage ou en mode Portrait. Selon nous, les deux orientations sont importantes et l'expérience utilisateur peut être optimale dans les deux sens. Plutôt que de choisir un mode de prise en main et une orientation, puis d'optimiser le système en fonction de ce choix, nous avons élaboré une expérience utilisateur qui fait sens quel que soit le mode de prise en main, adaptée à l'application et à son contenu.

En matière d'orientation de l'affichage, nous avons voulu atteindre plusieurs objectifs :

  • Vous devez être en mesure de faire pivoter facilement votre tablette en fonction de la tâche à accomplir ou de votre position.
  • La rotation de Windows doit être rapide et fluide.
  • Windows pivote de façon prévisible dans l'ensemble du système et des applications ; l'utilisateur reste maître de l'orientation.
  • Les développeurs peuvent facilement créer des présentations de haute qualité, privilégiant volontairement une orientation plutôt qu'une autre, selon les expériences utilisateur qu'ils souhaitent proposer.

Windows en mode Paysage

Certaines personnes nous ont demandé pourquoi nous avons privilégié le mode Paysage pour présenter l'interface utilisateur de Windows 8 lors de la conférence //build/. Windows 8 propose de réimaginer tous les PC, pas seulement les tablettes. Le système sera exécuté sur des millions d'ordinateurs portables et d'ordinateurs de bureau (conçus pour Windows 7 ou créés spécialement pour Windows 8) et bon nombre d'entre eux offrent uniquement un mode Paysage. En outre, en mode Paysage, nous pouvons proposer sur les écrans larges une expérience multitâche (deux applications affichées côte à côte) et une lecture vidéo en plein écran sans bandes noires. (Par ailleurs, pour bon nombre de nos démonstrations de plus grande ampleur, nous effectuons des projections sur d'immenses écrans, plus adaptés au mode Paysage.)

Windows 8 a été conçu pour être ergonomique et confortable dans toutes les orientations. Nous avons constaté que l'une des positions les plus confortables pour utiliser une tablette en mode Paysage consiste à la tenir entre vos mains et à toucher l'écran avec vos pouces. Pour cette raison, l'expérience utilisateur a en grande partie été conçue pour être facilement à « portée de pouce ». Nous avons également optimisé le système pour le défilement horizontal, qui s'avère rapide et fluide aussi bien en mode Paysage qu'en mode Portrait.

Applications AllThingsD et Stocks côte à côte en mode Paysage

Windows en mode Portrait

Windows a également été conçu pour fonctionner de façon optimale en mode Portrait. Nous avons étudié de façon approfondie différents scénarios tels que la lecture de l'actualité dans un navigateur Web, la visualisation de photos en mode Portrait et la navigation dans de longues listes de courriers électroniques. Les informations ainsi acquises ont été prises en compte afin de concevoir un système simple d'utilisation dans toutes les orientations. Nous avons optimisé les expériences utilisateur du système (clavier, sélecteur de fichiers, symboles, etc.) de sorte qu'elles fonctionnent aussi bien en mode Portrait qu'en mode Paysage. Nous voulions en effet vous permettre de passer facilement au mode Portrait sans devoir réapprendre à utiliser le système.

Application Stocks en mode Portrait, avec un rapport largeur/hauteur de 3:4, 10:16 et 9:16

Rotation

L'un de nos objectifs étant de rendre la transition de rotation rapide et fluide entre le mode Paysage et le mode Portrait, toutes les équipes Windows ont travaillé à l'optimisation de cette transition à tous les niveaux, de l'accéléromètre physique jusqu'à l'application, en passant par la pile graphique.

L'animation joue un rôle important dans la transition entre le mode Paysage et le mode Portrait. L'animation organise l'apparence d'une transition fluide entre les deux présentations. La durée de l'animation est importante, car cette dernière doit être rapide et réactive, tout en restant suffisamment progressive pour ne pas rendre la transition trop brutale. Desktop Window Manager (DWM), pierre angulaire des animations fluides de Windows 7 et Windows 8, est le chef d'orchestre de cette animation.

Chronologie indiquant les grandes étapes de la transition : mouvement de l'accéléromètre, basculement de l'appareil en mode Portrait, stabilisation de l'accéléromètre (au bout de 100 millisecondes) et fin de l'opération (au bout de 500 millisecondes)

Nous travaillons en permanence à rendre la rotation aussi stable et prévisible que possible, car nous savons à quel point les rotations inopinées peuvent être exaspérantes. Avant de commencer la rotation, le système attend que l'accéléromètre se stabilise, pour empêcher toute rotation accidentelle. Nous souhaitons également vous laisser maîtriser entièrement la fonction de rotation, de façon à ne pas la déclencher accidentellement. Ainsi, nous avons mis en place un dispositif matériel de verrouillage d'orientation, pour compenser la gravité et vous laisser choisir l'orientation souhaitée.

Commandes d'activation et de désactivation du verrouillage de rotation

Des écrans variés

Dans un prochain billet, nous évoquerons en détail la manière dont Windows 8 s'adapte à différents écrans, du point de vue du développeur. Prenons cependant quelques instants pour nous pencher sur la taille de l'écran et la façon dont elle est liée à l'orientation en mode Paysage ou Portrait. Windows 8 fonctionnera sur des PC équipés d'écrans très différents sur le plan de la taille, de la résolution et du rapport largeur/hauteur, des écrans 4:3 dont le format est proche du carré, aux écrans larges 16:9, en passant par toutes les variantes intermédiaires. Notre plate-forme de mise à l'échelle permet à Windows et aux applications d'adapter de façon transparente la mise en page du contenu à ces différents écrans pour utiliser au mieux l'espace disponible. Bon nombre de ces appareils peuvent être utilisés en mode Portrait ou Paysage. Seul Windows offre une telle diversité de possibilités. Ainsi, vous choisissez l'appareil et l'orientation les plus adaptés à vos besoins et à votre utilisation.

Mode Paysage, avec un rapport largeur/hauteur de 4:3, 16:10 et 16:9

La résolution minimale d'affichage des applications de style Metro sous Windows 8 est de 1 024 x 768 pixels. Nous avons opté pour cette résolution minimale, car il s'agit d'une taille courante sur le Web, mais aussi parce qu'une vaste majorité des utilisateurs de Windows (98,8 %) peuvent afficher le système dans cette résolution ou dans une résolution supérieure (voir le graphique ci-dessous).

Environ 42 % des utilisateurs de Windows 7 utilisent une résolution de 1 366 x 768 pixels. Les autres résolutions ne sont utilisées que dans 12 % des cas, voire moins.  Les résolutions de 1 024 x 600 pixels et de 1 280 x 720 pixels sont compatibles uniquement avec les applications de bureau, tandis que les autres résolutions acceptent toutes les applications Windows 8.

Selon nous, il est important de définir une résolution minimale pour les applications, car elle permet aux développeurs de concevoir la vue principale la plus petite possible de leur application, affichable sans fragmentation sur tous les appareils. La résolution minimale permet également de faire en sorte que la présentation des applications ne soit pas corrompue en raison d'un écran trop petit.

La plus petite résolution prenant en charge toutes les fonctionnalités de Windows 8, y compris le fonctionnement multitâche en côte à côte, est de 1 366 x 768 pixels. Nous avons choisi cette résolution parce qu'elle peut afficher une application avec une largeur de 320 pixels (il s'agit également de la largeur par défaut de nombreuses interfaces de téléphones) à côté d'une application principale dans une fenêtre de 1 024 x 768 pixels (taille couramment utilisée sur le Web).

Ces limites sont appliquées au moment de l'exécution. Contrairement aux habitudes actuelles, nous ne proposerons pas de solution pour contourner cette limite, car nous souhaitons avant tout faire en sorte que les applications de style Metro soient conçues pour fonctionner intégralement à la résolution communiquée par l'éditeur. Dans la version Developer Preview, aucun message d'avertissement à ce sujet ne s'affiche : seul un message figurant sur le site de téléchargement informe l'utilisateur de cette limitation. Nous allons évidemment remédier à cela dans la version bêta. Certains utilisateurs exécutant des machines virtuelles à une résolution de 600 x 800 pixels ou des miniportables à une résolution de 1 024 x 600 pixels ont rencontré des difficultés et nous tenons à nous excuser pour les problèmes rencontrés. Rappelons que le taux d'utilisation de machines affichant une résolution de 1 024 x 600 pixels est très faible, car la résolution d'écran des ordinateurs d'entrée de gamme est désormais de 1 280 x 800 pixels, une résolution compatible avec les applications de style Metro, sans affichage en côte à côte. Cette résolution reste bien inférieure aux résolutions entièrement compatibles et nous sommes convaincus que la domination des hautes résolutions va s'accentuer, à mesure que de nouveaux PC seront mis sur le marché.

Rotation et développeurs

Dans Windows 8, les applications elles-mêmes créent l'expérience utilisateur et nous nous sommes efforcés de faciliter le travail des développeurs afin de leur permettre de créer à la fois des vues en mode Paysage et en mode Portrait. Comme sur n'importe quelle autre plate-forme, les développeurs peuvent définir les orientations prises en charge par leurs applications, ainsi que la manière dont l'expérience utilisateur s'adapte à ces orientations. La plupart des développeurs proposeront sans doute une vue Paysage, car la majeure partie du marché des PC est constituée d'ordinateurs portables et d'ordinateurs de bureau. Cependant, si l'expérience utilisateur d'une application est à même de prendre en charge le mode Paysage et le mode Portrait, la compatibilité avec la vue Portrait est relativement simple à mettre en œuvre.

En utilisant les mêmes techniques que pour la mise en œuvre de la fonctionnalité d'affichage d'applications côte à côte ou de la compatibilité avec différentes tailles d'écrans, les développeurs peuvent créer facilement des expériences utilisateur en mode Portrait. Les développeurs HTML5 utiliseront des requêtes CSS Media Queries pour lier leur style de présentation à l'orientation du système. Les développeurs XAML modifieront quant à eux leur présentation en fonction des événements ViewState. En HTML comme en XAML, tous les contrôles et modèles adaptatifs fournis par la plate-forme prendront en charge les deux modes, Portrait et Paysage. Par ailleurs, le système gère automatiquement l'animation de transition, sans effort supplémentaire de la part des développeurs. Si une partie du contenu d'une application est plus adapté à une orientation spécifique, les développeurs peuvent privilégier l'une ou l'autre des orientations. Le système conservera alors l'orientation de l'application, si l'appareil le permet.

Pour tester les applications, Visual Studio 11 et Expression Blend permettent aux développeurs de tester leurs applications en mode Portrait et en mode Paysage, avec différentes tailles d'écrans et différents rapports largeur/hauteur, même s'ils ne disposent pas d'une tablette.

Modes Paysage et Portrait dans le simuateur de Visual Studio 11

Vous pouvez choisir l'appareil qui correspond le mieux à vos préférences et le tenir de la façon plus confortable : l'expérience utilisateur s'adapte à votre prise en main. Les applications peuvent exploiter au mieux les écrans larges grâce au fonctionnement multitâche et rester parfaitement fonctionnelles et agréables, sans nécessiter de lourdes tâches supplémentaires de la part du développeur.

Voici une courte vidéo montrant des transitions entre le mode Paysage et le mode Portrait.


Téléchargez cette vidéo pour la regarder sur votre lecteur habituel :
MP4 haute qualité | MP4 faible qualité

Vous pourrez très bientôt constater par vous-même cette transition !

Merci à vous !
David

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