février
2012
Un article de Hathortos
La création d’applications Metro Style sous Windows 8 va apporter de nouvelles obligations pour les développeurs. En effet, il faut bien comprendre que les applications publiées sur le futur Market Place seront potentiellement utilisées sur une grande variété d’appareils. On pense bien évidemment aux ordinateurs classiques, mais également aux ordinateurs équipés d’un écran tactile, aux tablettes, aux PC Portable, … Chaque écran ayant de plus une résolution qui peut varier du simple au double et un format qui peut différer (16/9, …).
Pour gérer cette grande diversité d’affichage, Microsoft pose quelques recommandations utiles mais aussi certaines obligations. Passons en revue tous ces éléments.
Snap, Filled ou plein écran
Toute application Metro Style disponible sur le Market Place doit obligatoirement implémenter 3 types d’affichage : Snap, Filled et le traditionnel Plein écran.
Nous ne détaillerons pas le mode plein écran puisqu’il s’agit du format d’affichage traditionnel dans lequel l’application occupe la totalité de l’écran. Intéressons nous plutôt aux modes Snap et Filled. Sous Windows 8, l’utilisateur a en effet la possibilité d’afficher deux « applications » en même temps, l’une occupant environ 1/3 de l’écran et l’autre le reste. Vos applications étant susceptibles d’être affichées en mode réduit (Snap) ou en mode Filled, il est impératif de penser à adapter l’affichage pour offrir une expérience utilisateur optimale en toute circonstance ! Vous devez toujours avoir cet objectif en tête.
En effet, si l’utilisateur ne peut plus utiliser convenablement votre application en mode réduit, celle-ci perdra fortement en intérêt (et sera rapidement supprimée).
Comme le montre la capture d’écran ci-dessus, le mode Snap occupe 320 px en largeur. Cette valeur est universelle, quelque soit la résolution ou la taille de votre écran. C’est donc la valeur du mode Filled (ici 1024 px de largeur) qui sera susceptible de varier selon la taille de votre écran.
Prenons maintenant l’exemple d’une application, affichée ci-dessous en plein écran :
L’utilisateur peut y découvrir une série de Grid contenant divers éléments. Sans adaptation de l’affichage, le mode Snap serait inutilisable :
Comme vous pouvez le constater, la vue n’est pas du tout optimisée et l’utilisateur devra sans cesse scroller pour parcourir toutes les Grid.
La capture ci-dessous montre en revanche une bonne adaptation de l’affichage pour le mode Snap :
La vue étant réduite, l’affichage a été fortement revu pour s’étirer en hauteur et non plus en largeur. La navigation en sera beaucoup plus facile et agréable.
Signalons que l’affichage Snap peut être placé à gauche ou à droite de l’écran
Détecter le type d’affichage
Pour terminer sur cette partie, voyons comment détecter les changements au niveau de l’affichage. Pour cela, il est possible d’utiliser la propriété Value de la classe ApplicationLayout ou de s’abonner à l’évènement LayoutChanged.
Rappelons pour ceux qui découvrent Windows 8 que l’utilisateur ne peut plus redimensionner à sa guise la taille d’une fenêtre. Pour être exact, il n’y a plus de fenêtre. Une application est donc, soit en plein écran, soit en mode Snap, soit en mode Filled (ou éventuellement en arrière plan). Il n’y a pas d’autres cas possible.
Portrait ou paysage
Une application Metro Style est susceptible d’être affichée en mode portrait ou en mode paysage. Sur les périphériques tels que les tablettes, l’accéléromètre permet d’ailleurs à l’utilisateur de basculer d’un mode à l’autre en tournant simplement son appareil.
Il est conseillé d’adapter l’affichage en mode portrait pour rendre l’utilisation de votre application toujours aussi agréable. Dans l’exemple ci-dessous, cela se traduit par une réorganisation des éléments des différentes Grid afin d’utiliser pleinement la hauteur disponible.
Il est cependant possible de bloquer l’orientation si nécessaire. Dans ce cas, l’affichage ne basculera pas, même si l’utilisateur tourne sa tablette. Signalons également que l’affichage Snap n’est pas disponible en mode portrait, ce qui est logique puisque la largeur est fortement réduite. En résumé, votre application sera toujours affichée en plein écran en mode portrait.
Pour détecter les changements d’orientation, vous pouvez au choix utiliser la propriété CurrentOrientation ou l’évènement OrientationChanged.
Une variété de résolution
La encore, la résolution des écrans sur lesquels vont s’afficher les applications Metro Style peut fortement varier. Cependant, Microsoft a placé certaines limites. Tout d’abord, la résolution minimale ne peut pas être en dessous de 1024*768. Ainsi, toutes les tablettes Windows 8 devront obligatoirement avoir un écran avec une résolution égale ou supérieure à cette valeur. La résolution considérée comme « de base » est de 1366*768.
Avec des densités de pixels pouvant fortement varier, l’expérience tactile peut s’en trouver détériorée. En effet, un élément manipulable (un bouton par exemple) sera forcément plus petit si la résolution est plus élevée.
Il est donc important d’adapter la taille des éléments selon la résolution afin de maintenir une expérience tactile unique et agréable.
Windows effectue cette mise à l’échelle automatiquement selon 3 pourcentages : 100 %, 140 % et enfin 180 %. Pour un résultat optimal, il est conseillé de préférer les images vectorielles aux images bitmap. Quand ce n’est pas possible, il est recommandé de fournir 3 versions de chaque image, une version pour chaque niveau de mise à l’échelle (100%, 140% et 180% donc).
Enfin, signalons que si vous avez besoin de détecter la résolution de l’écran et ses éventuels changements, vous pouvez utiliser la propriété Bounds et l’évènement SizeChanged.
Conclusion
Le design d’une application devient un élément aussi important que ses fonctionnalités. Le design ne se résume plus uniquement à donner un rendu visuel sympa à une application. Loin de là. Le design est l’étape nécessaire pour avoir une application agréable à utiliser en toute circonstance. Une application doit donc en prendre toutes les notions évoquées plus haut pour offrir une expérience utilisateur de qualité.
Bien entendu, chaque développeur ne peut pas s’approviser designer et toutes les entreprises ne vont pas embaucher une personne pour s’occuper uniquement de cet aspect. Mais même sans être designer, il est possible, en suivant certaines guidelines, d’avoir une application agréable à regarder et à utiliser. De ce point de vue, les applications Metro Style sont une aide non négligeable. Avec les diverses règles mises en place par Microsoft et l’apparition de nouveaux contrôles, il est en effet beaucoup plus aisé de réaliser une application au look sympa et ergonomiquement efficace.