Qu’est-ce que Metro ?

J’avais parlé des raisons qui me poussent à écrire sur Windows Phone 7. Metro, l’expérience utilisateur novatrice de Windows Phone 7 en fait partie intégrante. Avant de se pencher sur ce qu’est Metro, regardons tout de suite ce que n’est pas Metro. Metro n’est pas :

  1. Une technologie / une application.
  2. Un composant de Windows Phone 7.
  3. Un Framework.

Qu’est-ce que Metro ?

Dans ce cas qu’est-ce que Metro ? C’est un ensemble de principes sur lesquels sont basée des technologies et des applications. Windows Phone n’est pas le premier système à l’intégrer, étant donné que Metro a été pensé à l’origine pour Windows Media Center. Avant de rentrer dans les détails, prenons quelques exemples d’interfaces construites sur ce modèle.

Comme je l’ai dit, Metro a été pensé pour Windows Media Center. De cet exemple on voit apparaître quelque similitude avec l’interface de Windows Phone 7, en particulier la typographie (la police de caractère Segoe faisant partie intégrante de l’interface Metro). On voit également que le contenu de l’utilisateur (en l’occurrence la vidéo en train d’être visionnée) sert de graphisme pour l’application tout comme les photos sur Windows Phone 7 servent de fond pour le hub photo.

La nouvelle version du Dashboard de la Xbox360 qui arrivera à l’automne avec Microsoft Kinect est un autre exemple d’interface purement Metro, claire avec sa disposition organisée et sa typographie caractéristique. Tout comme les « carreaux » de l’écran d’accueil de Windows Phone 7, on retrouve du contenu à l’intérieur de rectangles.

Le Zune HD a posé les bases du concept d’un certain nombre de composants de Windows Phone 7. En particulier le Pivot, ce composant central de l’interface utilisateur de Windows Phone 7 est apparu sur Zune HD. En outre les règles de typographie, les couleurs et l’iconographie de Windows Phone 7 sont eux aussi issu du baladeur de Microsoft.

Quels sont les principes de Metro ?

Microsoft défini Metro comme un langage de conception, et comme tous langage il répond donc à un certain nombre de règles. Voyons à présent quelles sont ces règles.

Clair, fluide, rapide

L’application doit être claire et intuitive. L’interface utilise les marges pour combler l’espace sans être surchargée. Chaque écran se concentre sur sa tâche principale, évitez donc au maximum les écrans fourre-tout. Le but est de faire beaucoup de chose à partir de très peu d’éléments et de garder toujours ce côté organisé.

L’utilisateur ne doit pas avoir le temps d’attendre l’application, même lors de tâches de longue durée. Il doit y avoir toujours à l’écran quelque chose pour attirer l’attention de l’utilisateur (ex : ProgressBar).

Typographie, iconographie, contenu

Le style de Metro serait sans doute très différent sans sa police de caractères Segoe UI (Segoe WP sous Windows Phone 7). Le texte dans les applications Windows Phone 7 ne sert pas qu’à afficher des contenus, il fait partie de la décoration de l’application au même rang que les images et les icônes.

L’iconographie est également au cœur du style Metro. Ils permettent de faire passer des messages sans la barrière de la langue. Le nom « Metro » vient d’ailleurs de la signalétique des transports, où les indications très sobres et directes doivent permettre à tous les voyageurs de trouver leur chemin. Les applications Metro doivent donc de la même manière permettre aux utilisateurs de trouver leur chemin dans les écrans de l’application. Les icônes doivent êtres simples et sont le plus souvent monochromes pour profiter du contraste avec la couleur du fond sur lequel ils sont implantés.

Enfin le contenu est primaire dans l’application Metro. Cela permet à une application d’être hautement personnalisé et donc perçu différemment par ses multiples utilisateurs. Il faut donc réduire au maximum le nombre de contrôles qui ne sont pas du contenu.

Tactile, dynamique, en mouvement

Metro rassemble aussi un certain nombre de recommandation sur l’aspect tactile de l’application, en particulier la taille des éléments tactiles. En effet sur un système qui se veut complètement utilisable aux doigts et bénéficiant d’au moins 4 points simultanément, toute l’interface doit être interactive. Lors des interactivités, l’application doit montrer immédiatement que les mouvements sont pris en compte.

Enfin les transitions et animations ont un grand rôle à jouer dans l’application Metro : les transitions permettent de distraire l’utilisateur pendant le chargement des composants de l’application. Les animations permettent de simuler une interaction physique avec l’utilisateur.

Comment concevoir une application Metro ?

Microsoft a rendu disponible un document qui explique un grand nombre de best practices sur la conception d’application pour Windows Phone 7. Avant de vous lancer dans le développement je vous conseille de lire attentivement ce guide. Vous pouvez télécharger le Windows Phone UI Design and Interaction Guide à l’adresse suivante : http://go.microsoft.com/?linkid=9713252. Vous pouvez en outre lire le document explicatif du concept de Metro : http://go.microsoft.com/fwlink/?LinkID=189338

Ensuite il va vous falloir penser à comment votre idée d’application peut se traduire en langage Metro. Suivez bien les recommandations du guide, elles permettent à votre application d’être cohérente avec le système lui-même et avec les autres applications.

Sachez cependant qu’il n’y a pas une seule façon de faire une application sur un thème donnée qui soit conforme au style. Par exemple Microsoft a créé deux applications météo bien distinctes avec le style Metro ; Metro ne doit donc pas être un frein à la créativité mais un guide.

N’oubliez pas non plus que l’utilisateur doit être au centre de l’application. Essayer de penser en tant qu’utilisateur afin de faire les meilleurs choix pour les utilisateurs. L’utilisateur appréciera également si votre application se plie à sa personnalité et à son contenu. La personnalisation est donc un élément clé à ne pas oublier pendant la conception.

Une fois votre idée fixée sur le papier, vous pouvez passer au développement. N’oubliez pas, les contrôles de Silverlight pour Windows Phone 7 ont été entièrement stylisés pour respecter le style Metro. Cela ne vous empêche pas d’éditer leur aspect visuel, mais tâchez de rester dans l’esprit Metro, en évitant par exemple les boutons chromés ou les contrôles avec beaucoup de nuances de couleurs.

Microsoft a créé un style graphique attrayant basé sur un certain nombre de critères. En normalisant ces critères dans le langage de conception Metro, l’opportunité est offerte aux développeurs de créer des applications qui vont en quelque sorte étendre Windows Phone 7. Une chose est sûre, le prochain système d’exploitation mobile de Microsoft va offrir une expérience utilisateur particulièrement soignée et cohérente.

Publicités

6 Responses to Qu’est-ce que Metro ?

  1. Ping: Twitted by shad78

  2. Julie says:

    Très bien ce blog, et super article 😉

  3. Je sais que cet article date déjà d’il y a un temps mais ça ne m’empêche pas de le commenter.
    Je suis tombé dessus en recherchant « Interface Métro » dans le moteur de recherche Bing, dont l’article se positionne en 8ème résultat de la seconde page et j’avoue qu’il a bien répondu à la question que je me posais depuis longtemps, là où Wikipédia, se trouvant souvent en tête de gondole, a pas su répondre correctement à ça. Donc déjà je dis merci pour avoir répondu à mes interrogations derrières ce mot.

    J’avoue que j’aimerais pouvoir expérimenter ce nouveau guide d’interface, déjà étant quelqu’un qui aime bien essayer et découvrir de nouvelles choses notamment dans ce domaine, mais aussi par ce qu’il me semble différent du Windows actuel qui lui a le défaut de ne pas avoir une interface monolithique entre les logiciels. Je suis aussi curieux de savoir si sur ordinateur cette interface pourra évoluer ou si elle est condamnée aux tablettes et smartphones/ordiphones.

    • smornas says:

      Bonsoir ! Merci, je suis content que cela puisse aider les lecteurs à comprendre le concept de Metro qui est assez complet !

      Ce qui est bien avec Metro, c’est que c’est un concept qui peut être étendu, et détourné (dans le bon sens). Par exemple, Microsoft est en train de moderniser ses sites webs pour adopter le style Metro. Il est également possible de créer des applications pour Windows 7, comme c’est le cas du client MetroTwit. Metro sera également très présent dans la prochaine version de Windows.

      Bien sûr, si vous avez un Windows Phone 7, c’est l’occasion de se lancer dans le développement d’application en utilisant le guide Metro ! 🙂

  4. Ping: La vraie nature de WinRT « Sebastien Mornas's Blog

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :