La tendance est aux interfaces naturelles (NUI), et le keynote de Bill Buxton au MIX l'a bien souligné.

La charte graphique et ergonomique de Windows Phone 7 a donc été entièrement repensée en vue d'obtenir un maximum d'efficacité sur ce point. En repartant d'une feuille blanche, les concepteurs ont pu répondre précisement aux objectifs visés :

  • une interface entièrement tactile,
  • une utilisation facile et agréable (simplicité, performance, dynamisme, prise en compte du contexte),
  • un visuel élégant, épuré et aéré, mettant en avant le contenu (et non le contenant),
  • un visuel personnalisable (thèmes),
  • la gestion des données et des tâches élémentaires tant personnelles que professionnelles.

Les concepteurs ont puisé leur inspiration dans la signalétique urbaine, qui s'avère simple et efficace. En conséquence, le nom de code choisi pour ces specifications ergonomiques a été "Metro". Il doit en effet s'avérer aussi simple de naviguer parmi les applications de  son Smartphone que de circuler dans un lieu public. En rentrant du MIX à Las vegas, j'ai observé la signalétique des aéroports et constaté à quel point ce choix est judicieux.

Dans Windows Phone 7, simplicité et performance obligent, exit les coins arrondis, les dégradés de couleur et autres chromes plus ou moins lourds. La typographie, normée, offre lisibilité et esthétique.

Place a la sobriété pour mettre l'ergonomie au service du contenu. La couleur et le graphisme sont exploitées pour valoriser le contenu quand cela est nécessaire.

Le système propose différents thèmes permettant de choisir uniquement la couleur de fond (sombre ou claire) et la couleur d'accentuation.

Les gestes tactiles suivants sont supportés : appui, appui maintenu, double-appui (zoom), défilement, feuilletage, pincement/étirement (2 points). Pour augmenter l'efficacité du comportement tactile, les contrôles tels que les boutons disposent d'une surface sensible au toucher supérieure à leur surface d'affichage (qui représente 60 à 100% de la surface sensible). La surface sensible recommandée est de 9 mm, soit 34 pixels à 96 DPI (7 mm ou 26 pixels au minimum). L'espacement entre les éléments est au minimum de 2 mm (8 pixels).

Les fonctionnalités des applications peuvent être organisées soit sous la forme de pages, soit sous la forme d'une vue panoramique (ou hub).

Avec la CTP de Silverlight, il est d'ores et déjà possible de développer une application à base de pages. Un mécanisme de navigation associé à des contrôles de type hyperlien permet de naviguer entre les pages. Le bouton physique Précédent peut être utilisé pour revenir à la page précédente dans une application.

Les applications panoramiques présentent leurs informations sur une surface supérieure à la taille de l'écran, découpée en sections parmi lesquelles on navigue par défilement horizontal. Les principales fonctionnalités de base du système sont fournies sous la forme de hubs (people, pictures, games, office, marketplace, etc.) qui agrègent les contenus par thématique.

Bien qu'il soit possible de construire une telle interface avec Silverlight, aucun composant de haut-niveau n'est actuellement disponible.

Comme pour Silverlight 4, le concept de pivot est supporté. Il s'agit ici d'une vue panoramique présentant plusieurs filtres sur des données. Un contrôle Silverlight devrait être disponible dans une prochaine release.

Une application peut disposer d'une barre d'outils, limitée à 4 boutons et associable à un menu.

Lors d'un changement d'orientation, les boutons pivotent automatiquement.

Le menu Démarrer s'active au moyen du bouton physique central. Il est constitué de vignettes interactives (lives tiles) qui peuvent présenter des notifications gérées par exemple au moyen du service de push de Windows Azure.


L'appareil dispose d'un clavier virtuel, mais certains modèles pourront disposer d'un clavier physique. Le clavier virtuel s'affiche automatiquement quand une zone de saisie prend le focus, et dispose d'outils d'aide à la saisie. Il dispose de plusieurs modes de saisie : texte, adresses (e-mail, SMS), numéro de téléphone, URL, recherche, etc.

Le bouton physique Rechercher (loupe) permet d'effectuer une recherche contextuelle. Les autres boutons physiques sont le déclencheur de l'appareil photo et le bouton de volume (et bien sûr le bouton de mise en marche).

Enfin, l'appareil dispose des capteurs suivants : GPS, accéléromètre, boussole, détecteur de lumière, détecteur de proximité, et bien entendu microphone et capteur d'image.

En conclusion, on est donc très loin de la charte graphique et ergonomique de Windows Mobile 6. Mais cette stratégie de rupture permet a Microsoft de se libérer des contraintes du passé et de réaliser un produit attrayant et de grande qualité, capable de rivaliser avec ses principaux concurrents (iPhone, Android, Symbian S60 5). Les outils de développement ajoutent beaucoup à l'intérêt de cette plate-forme, qui m'a personnellement beaucoup séduit.

Références :