Aux origines de l'interface des Windows Phone 7

Florian Innocente |

Creative Director chez Microsoft, Mike Kruzeniski détaille sur son blog les origines de Metro, l'interface originale des Windows Phone 7. Dans un billet intitulé "Des Transports jusqu'aux pixels“ il raconte que l'équipe de design des Windows Phone appuya sur le bouton reset lorsqu'elle se rendit compte il y a deux ans que les choix retenus pour Windows Mobile n'étaient plus tenables.

Ils sont alors inspirés de ce qu'ils considéraient comme des exemples réussis en design, des réalisations de Josef Müller-Brockmann, Massimo Vignelli ou Experimental Jetset, avec à leur compte des choses comme la signalétique du métro New Yorkais ou la marque American Airlines. L'interface du Zune, de la Xbox et du Windows Media Center avaient bénéficié des mêmes influences.

1207metro_transportation_graphics_thumb_231A78CC

Cinq règles ont été définies pour donner un visage et définir le fonctionnement des futurs Windows Phones.

- supprimer de l'interface tout ce qui peut paraître inutile, tant visuellement que fonctionnellement. Afin de se concentrer sur les tâches premières de l'interface, qu'elle procure des sentiments de rapidité, de réactivé, d'ouverture, et contribue à donner le sentiment d'une interface très "smart".

D%C3%A9couvrir%20%7C%20Windows%20Phone%207

- utiliser les animations et transitions entre écrans comme des guides pour la navigation dans l'interface, elles participent, au passage, à donner un caractère à cette interface.

- mettre l'accent sur la qualité de la typographie dans l'interface, dès lors qu'elle participe à l'information qui est donnée.

- privilégier le contenu (ce qui intéresse les utilisateurs) plutôt que le contenant (les gens se moquent des boutons). Expurger de l'écran tout ce qui n'est pas du contenu, pour établir une relation plus directe avec l'utilisateur.

- ne pas essayer de reproduire des matériaux ou objets du monde réel, rester dans un cadre numérique, sans par exemple ces effets de dégradés ou de brillance.

Metro cherche à se détacher d'une culture venue vieille de plusieurs décennies, avec les premières réflexions puis réalisations en interfaces utilisateurs, où l'on a cherché à reproduire à l'écran le monde qui nous entourait. La métaphore du bureau, des documents, des dossiers… Encore aujourd'hui, ces lignes directrices sont utilisées, avec encore plus de détails, quand ce n'est pas en 3D, grâce à la puissance des ordinateurs actuels.

Les premières interfaces étaient construites sur la nécessité d'expliquer ce qu'elles étaient” écrit Kruzeniski “elles étaient comme un bureau, mais en mieux. Elles étaient complètement nouvelles, il était donc nécessaire et approprié d'en passer par une représentation directe.”

bobhome1p
Bob, une surcouche à Windows en 1995

Ce ne serait plus le cas aujourd'hui estime le designer, alors que pourtant cette tendance à se calquer sur la réalité se poursuit “On n'a pas besoin de représenter un livre électronique comme un livre pour que les gens comprennent comment s'en servir. Un livre n'est pas une couverture et sa tranche, ce sont les images et le texte qui composent l'histoire.

photoibooksinterface

Les contenus numériques étant maintenant partout, il ne serait plus nécessaire d'utiliser ces métaphores graphiques, l'information en tant que telle suffit. D'où le parti pris avec Metro d'une interface qui soit l'information.

Kruzeniski dresse un parallèle avec ces interfaces sophistiquées que l'on voit dans les films et qui, de plus en plus, se fondent dans l'environnement. Il estime que ce qui tenait de la science-fiction il y a encore quelques années l'est de moins en moins. “D'abord, les interfaces d'ordinateurs n'ont plus à être soigneusement expliquées au public, au lieu de ça, elles devraient stimuler l'imagination. Ensuite, le délai entre le moment où une technologie apparaît dans un film et sa commercialisation a considérablement réduit. Enfin, l'interface utilisateur devient de plus en plus invisible.”

Safariavart

Ces interfaces Hollywoodiennes sortent des écrans pour se glisser dans ce qui nous entoure, résultat les boutons avec effets de relief ou les métaphores de bureau disparaissent “L'interface est autour de nous, elle vit avec nous, et elle augmente notre espace. C'est juste… de l'information. Lorsque l'information est un objet, c'est un objet. Quand c'est du texte, c'est du texte. Les éléments inutiles disparaissent.

Plusieurs projets ou produits (comme le Kinect) tentent de répondre à cette évolution, mais souvent l'inspiration vient du cinéma “Pour nous, notre inspiration sur le futur de l'interface est issu des expériences autour de l'information montrées dans Minority Report, Avatar, Star Trek et Iron Man 2. Nous aimons bien l'idée d'une information qui existe sans embellissement, se mélangeant avec notre environnement et le complétant ; présente lorsque c'est nécessaire, invisible lorsque ça ne l'est pas. C'est une philosophie qui correspond bien à Metro.”

Kruzeniski conclut en prévenant que l'avenir de Metro passera par une évolution soigneusement réfléchie et prudente. Cette interface est là pour durer, pour servir de fondation, pas simplement pour marquer sa différence par principe. Elle pourrait servir à concrétiser, à long terme, les visions proposées par le cinéma.

C'est notre point de départ pour ce que nous pensons être la prochaine ère en design d'interface utilisateur, une interface qui soit concentrée sur le contenu plutôt que les métaphores, sur l'information plutôt que les outils et sur le mouvement plutôt que les pages statiques. C'est un langage conçu pour clairement augmenter l'information autour de vous, en supprimant le désordre qui l'entoure.

Sur le même sujet :
- Un mois avec Windows Phone 7 : notre verdict


avatar dacunha | 
J'ai aimé l'article. J'avais un pocket pc avant d'essayer l'iPhone. L'iPhone a révolutionner les smartphone. C'est bien que Microsoft ne fait pas juste bêtement copier l'iOS. On verra comment il évoluera leur os. Pour le moment je trouve les tuiles très laide, si il pouvait avoir du relief au moin.
avatar PO_ | 
Personnellement j'aime bien ce que Microsoft a fait avec métro. Ça change des paradigmes habituellement mis en place sur les autres plateformes mobiles, il manque plus qu'ils en fassent une version adaptée pour les tablettes (en prenant quelques exemples du mort-né "Courier"). Il faudrait aussi que les ingénieurs Apple se bougent la fesse pour dépoussiérer l'interface de l'iPhone qui commence à prendre un coup de vieux ! Pour exemple j'aime bien ce que les équipes de TapBot ont mis en place dans leurs applications. C'est toujours de l'iOS mais les détails sont plus fin que sur l'interface générale des ibidules. Et qu'ils revoient aussi leur multitâche (je parle de l'interface, le mécanisme en lui même est très bien) parce que voir une icône c'est bien, mais voir un aperçu comme dans safari mobile ça serait mieux !
avatar JonathanMds | 
Moi je n'ai pas encore essayé mais de loin comme ca, j'aime beaucoup leur interface. Ce que j'aime moins c'est l'arrogance des pubs Windows comme d'habitude qui est pire que celle des pub Mac (on dirait qu'ils ont révolutionné le smartphone alors qu'ils sont a la mega bourre) Cf la pub du stade ou au café... Pitoyable
avatar Yassinou59 | 
@ noedz : les tels WP7 n'ont rien de haut de gamme... Pour le moment en tous cas.
avatar jewan | 
Les specs requise pour faire tourner l'OS sont tres clairement sur du haut de gamme.
avatar tigre2010 | 
C'est joli certes mais il y a tout une philosophie microsoftienne auquel j'y adhère pas. Faire plaisir aux masses, c'est le nouveau fer de lance quand avant on s'en cognait. Bref de la poudre aux yeux.
avatar iphonele | 
Je trouve l'interface très intéressante. Mais les couleurs choisies sont trop criardes et se mêlent mal aux parties ajoutées (Applis et Hub tiers). Je suis d'accord pour dire que iOS aurait besoin d un petit coup de jeune. On trouve quelque Appli qui se rapprochent visuellement de Windows phone, d' inspiration 'helvétique' comme Calvetica par exemple ou l'appli de la croix rouge. Dans une moindre mesure la nouvelle version de l'appli 'Le Monde' aussi.
avatar PO_ | 
@ setsix : Pour la virgule je peux arriver a comprendre mais pour le point tu as sur iOS une fonction bien plus pratique que chez la concurrence : avec un double clic sur la touche espace il se fait tout seul et la majuscule du prochain mot est automatique.
avatar tigre2010 | 
@ setsix : Quand tu achetés un outil aussi novateur que l'iPhone, tu t'attends pas à ce sur tout coule de source donc tu lis la notice. Ou tu suis les Keynotes.
avatar tigre2010 | 
@ setsix : Tout de même, les notices Apple dépasse rarement 3 pages.
avatar 2fast | 
Et depuis la version 1.0 d'iPhone OS.
avatar SuBWaReZ | 
Il y a une chose avec laquelle je suis d'accord concernant les interfaces : reproduire la réalité est complètement dépassé et inutile. C'est pourquoi je n'aime pas les applications Carnet d'Adresse de l'iPad ou iBooks. Pour moi le faux bois sur iPad est d'aussi mauvais goût que celui en plastique de certaines voitures bas de gamme. Idem pour les applications de presse qui reproduisent un kiosque. Je préfère une application comme celle de l'iPod qui présente les pochettes de CD comme des images au sein d'une interface numérique élégante.
avatar tpromis | 
J'ai vu Minority Report il y a pas si longtemps et je doit avouer que quand j'ai vu les interfaces des ordinateurs de ce film j'ai été assez impressionné. D'autant plus qu'il est vrai que ça ce concrétise. Il y a d'excellentes idées d'interfaces dans ce film.
avatar 2fast | 
En fait, les idées font bien pour le cinéma, mais en réalité elles sont affreuses. Juste pas intuitives. Ça fait chic quand on voit Tom Cruise gesticuler dans tous les sens mais il faudrait apprendre tous les gestes, enfiler les gants qui vont bien et garder les deux bras levés. Bref l'inverse de l'instantanéité qu'on désire pour accéder à ce qui nous intéresse vraiment, le contenu. Minority Report, c'est l'interface envahissante qui nécessite un mur pour fonctionner.
avatar Lou117 | 
"ne pas essayer de reproduire des matériaux ou objets du monde réel, rester dans un cadre numérique, sans par exemple ces effets de dégradés ou de brillance." Tout l'inverse d'Apple donc :) ptimac : le double clic sur la barre d'espace c'est bien mais il faut le savoir ! Je l'apprends avec ton message par exemple... :/ Loin d'être intuitif ça !
avatar Isiquonphigue | 
@ Lemmings : Tu aurais du lire le petit livret d'Apple en ouvrant ta boite d'iPhone, si mes souvenirs sont bons, ce raccourci pour le point y est décrit ;)
avatar karak | 
Il y a vraiment quelques bonnes idées dans Métro.
avatar jewan | 
D'ou les miliers de thèmes dispos.
avatar bmxeur91 | 
L'interface est juste incroyable et super fluide. C'est pour ça que j'en ai acheté un, je trouvais celle d'iOS vieillissante. Dommage que l'OS soit un peu TROP dépouillé niveau fonctionnalités... :D
avatar tigre2010 | 
@ Rezv@n : Dépouillé est un évidence. Tout système a tendance à se compliquer par la suite. Et vint un moment ou faut tout mettre a la poubelle (c'est là le plus dur). iOS repart sur des bases simples (intuitive), un nouvelle philosophie et qui sera étendu a toute la gamme de produit Apple. Sans pour autant décrier à l'ancienne bien sur, et garder une cohérence. Donc les petits jeun's qui veulent des mobile jetable qui changent tous les 3 mois, c'est tout simplement pas possible. WP7 est séduisante et ne s'inscrit pas dans un cadre professionnel reprenant des standards mais plus a du Xbox Live ou de Média Center. Je doute qu'il y est une cohérence graphique et ergonomique entre Windows 8 (?) et WF7. Sauf si MS copie Lion :-)
avatar JGL | 
Je trouve de plus en plus que Microsoft bosse bien. Ils innovent et créent des choses bien! Metro est en effet décalé et réussi. Chapeau
avatar Homer Simpson | 
Je trouve les réflexions présentées dans l'article vraiment intéressantes, en particulier sur l'opportunité ou non de représenter des objets du monde réel dans l'interface. iBook est un bon exemple. En effet, représenter des livres dans des étagères n'est peut-être pas nécessaire. Mais iBook propose aussi une vue en liste. En fait, ce qui nous gêne nous français, c'est surtout le look ringard des étagères (qui correspond à l'intérieur de l'américain moyen). Épurer l'interface pour les concepts maintenant connus est certainement une très bonne idée. Mais s'inspirer d'interfaces vues au cinéma, fussent-elles aussi impressionnantes que dans Minority Report, ne me convainc pas du tout. Cela traduit il me semble un manque cruel d'imagination et de vision d'ensemble quant à la manière d'implémenter efficacement l'idée du fond prévalant sur la forme. De plus, les interfaces présentées dans Minority Report ont essentiellement un objectif cinématographique. Il s'agit d'impressionner, de plonger le spectateur dans un univers futuriste. Ça en jette : montage avec plans qui se succèdent rapidement, transparence, zooms et déplacements d'objets rapides, etc. Mais ce qu'on nous montre, ce ne sont que des éléments d'interfaces. On est très loin des spécifications d'un système complet compréhensible par M. et Mme ToutLeMonde.
avatar vconcept | 
@ Sonny972 : Bien vu pour l'accès au deuxième clavier, en 3 ans j'avais jamais fais attention à ça !
avatar JackOne | 
iOS vieillissant....mais bien sûr! iOS est un OS je dirais "d'applications" où l'utilisateur est dirigé dans chacune des nombreuses applications disponibles pour les multiples tâches que l'on peut réaliser. En d'autres termes iOS est centré application et son interface n'est pas vieillissante (ça ne veut rien dire) mais adapté à ce concept. Google et autre ont ensuite repris ce concept. Le machin Metro est plus une interface pour les utilisateurs qui n'utilisent que quelques applications types (mail, social, info..) avec une interface type raccourcie centrée informations où le principe et de se muscler les doigts à fore de défilement. A travers la page Méteo très moche que l'on ne peut vraiment modifier, on un défilement de carré qui affiche des informations de quelques applications ou qui sont des raccourcis à des applications. C'est bien mais que se passe-t-il si on a une centaine d'applications dans son téléphone. Bien dans l'état des choses le principe même de Metro (qui se dit une interface pour gagner du temps...selon la pub) sera faire des mouvement et des mouvements de doigt pour trouver son application que ce soit au sein de la page Metro ou la page qui liste verticalement toutes les applications. Ahh oui l'interface est incroyable! Oui pour ceux qui ne font pas grand chose de leur téléphone.
avatar JackOne | 
"mettre l'accent sur la qualité de la typographie dans l'interface, dès lors qu'elle participe à l'information qui est donnée. Justement ils auraient pu soigner l'interface visuelle et la typographie car elle est horrible (cf le clavier ci dessus). C'est du blanc sur du fond noir, ça donne pas envie, ça ressemble à des interface de 20 ans d'âge.
avatar JackOne | 
"Les contenus numériques étant maintenant partout, il ne serait plus nécessaire d'utiliser ces métaphores graphiques, l'information en tant que telle suffit." Non mais il faut aussi donner envie à l'utilisateur d'accéder à l'information numérique. Si c'est afficher des lignes blanches sur un fond noir et espérer que les utilisateurs vont oublier leur livre pour du numérique, il rêve un peu. Représenter plus ou moins un livre électronique comme un livre (iPad) ça attire l'utilisateur, ça lui donne un cadre commun, un confort, un environnement familier. D'ailleurs c'est ce que fera sûrement Microsoft avec sa futur application "iBook".
avatar JackOne | 
@Lemmings concernant le double tap sur la barre d'espace. On se demande s'il a bien un iPhone. Pas besoin de manuel il suffit d'explorer un peu son téléphone. Dans les préférences du clavier il a différentes options et pour la dernière on peut lire : http://img291.imageshack.us/i/photogf.png/
avatar Amine49 | 
@daito, ta mauvaise foi est tout à fait impressionnante. "il suffit "d'explorer un peu son téléphone", c'est ça t'as raison, tu tripotes toutes les touches en même temps en faisant toutes les combinaisons imaginables jusqu'à obtenir l'effet recherché ? c'est ta vision de l'ergonomie d'un clavier ? tu es un bon petit fanboy, mais la réalité est que le clavier apple n'est pas intuitif, c'est tout
avatar vconcept | 
@ glopglop1 : Il parle pas d'explorer le clavier mais les réglages qui expliquent cette fonction, rien de bien sorcier...
avatar Abudah237 | 
@ glopglop1 : Ah bon, c'est quoi un clavier intuitif pour toi, my friend the mighty troll ?
avatar alexmab | 
@ Mithrandir : Le pire c'est que pour moi le clavier de l'iPhone 3G, à l'époque, a joué un rôle décisif lorsque je l'ai essayé pour la 1ère fois: je voulais alors l'iPhone :) Depuis je n'ai pas trouvé mieux, meme si les claviers des nouveaux Android à ecran 4' et + que j'ai essayé sont assez sympa
avatar JackOne | 
"Mais iOs avait le même souci sauf que tu défilais vers la droite." Humm pas vraiment ou du moins pas dans la même ampleur. Avant les dossiers on pouvait mettre pas mal d'applications dans une seule "page" avec une disposition en ligne et en colonne alors que là dans Metro on a de gros carrés qui oblige vraiment beaucoup de défilement. Même dans la fenêtre consacrée aux applications dans WP7, les icônes ne sont disposées que verticalement en liste ce qui oblige là encore à beaucoup plus de défilement. "Une interface épurée n'empêche pas que les applications soit puissantes. Il suffit de voir excel sur WP7. L'applica".... Ce n'était pas mon point, je parlais plus de la gestion de plusieurs centaines d'applications.
avatar jipeca | 
Ça tiens debout. Mais dans certain cas, comme celui d'iBooks d'Apple, la métaphore du réel est nécessaire, qui achèterai un pour 15€ du texte sur fond blanc. De plus, si on pousse la réflexion plus loin, la signalétique du métro new-yorkais comme inspiration est une métaphore du réel.
avatar JackOne | 
"il suffit "d'explorer un peu son téléphone", c'est ça t'as raison, tu tripotes toutes les touches en même temps en faisant toutes les combinaisons imaginables jusqu'à obtenir l'effet recherché ? Non mais tu es aveugle ou tu ne sais pas lire ou pire.... Je n'ai pas parlé de rechercher cette fonction en tripotant au hasard sur le téléphone mais de simplement lire ce qui est écrit dans les préférences de iOS (c'était le sens du terme "explorer"). Il est clairement indiqué la possibilité de mettre un point suivit d'un espace en double tapotant sur la barre d'espace. Regarde c'est ici : http://img291.imageshack.us/i/photogf.png/
avatar bmxeur91 | 
Apple a quand même de la chance de t'avoir, daito. Tu la défends et lui écrit des éloges à longueur de journées, insultant et critiquant au passage tout produit concurrent et toute personne osant en dire du bien. Bravo, vraiment.
avatar alexmab | 
@ Rezv@n : Je comprends ta réaction mais à lire tes commentaires tu es toujours opposé à Apple ou à faire la promotion de ses concurrents. Cependant tu as ton propre avis à toi c'est pour ca que je prends le temps de lire. Moi non plus je suis pas objectif à 100% je le sais.
avatar mimounlouna | 
tout le monde peut supporter une dose de mauvaise foi, mais il y a 4 ou 5 lascars sur ce site pour lequel c'est maladif
avatar tigre2010 | 
Dans le cinéma ça en jette toujours. Si vous regardez " le Joe ou la terre s'arrêtera ", en l'espace de 30 seconde, on voit le Surface de MS et le mur tactile de Jeff Han de suite. On se demande pourquoi ne pas utiliser l'un ou l'autre, surtout pour montrer des images. Mais le cinéma a un avantage, il explore plus loin les idées.
avatar JackOne | 
Aux lovers de tout ce qui n'est pas d'Apple : Où dans ce que j'ai écrit il y a de l'insulte ou de l'éloge...je veux que vous l'indiquez précisément!
avatar neg2gwada | 
Autant l'interface de métro me semble completement nouvelle, autant je ne peux pas adhérer a une telle "épuration". Quand on voit le screen du clavier, ca fait limite peur tant de blanc et de plat...
avatar spiritjak | 
Lol raisonnement de cons. Aucun style. Aucun design dans windaube phone 7. Je pense que il y avait ce genre de design il y a 10 ans.
avatar jewan | 
Mais tout a fait. .....
avatar Abudah237 | 
Les technologies futuristes qu'on voit dans les films n'apparaissent souvent jamais, non pas parce qu'elles ne peuvent être réalisées, mais souvent parce qu'elles correspondent à la façon dont les scénaristes voient le futur, qui n'est pas le futur. Minority Report est un bon exemple: les murs d'images virtuelles manipulées par Tom Cruise ça fait très bien dans un film, malheureusement c'est complètement anti ergonomique de faire du multitouch à la verticale, et très fatiguant.
avatar Abudah237 | 
En fait en lisant bien ce que dit le mec de Microsoft, c'est du marketing très classique. Aucune réelle explication de leur concept, sauf en des termes très vagues, des comparaisons avec le cinema, etc... Franchement, dire que leur concept est basé sur des interfaces qui ne sont là que quand on a besoin d'elles, c'est du pur discours marketing. Ca ne se rattache à rien de concret. L'ergonomie, ce n'est pas ça, désolé...
avatar Abudah237 | 
"privilégier le contenu plutôt que le contenant". Et alors, quand on a dit ça, on n'a rien dit... C'est un peu inquiétant, cette absence de vision de Microsoft derrière leur propre interface.
avatar JackOne | 
@Fabinou, Ce n'est pas moi qui a parlé "d'éloge" mais Rezv@n. Donc merci de confirmer que le mot ne correspond absolument pas à ce que j'ai c'écrit. Ensuite je ne vois pas les insultes. Peux tu me les montrer avec toute l'OBJECTIVITE qui te caractérise?? Mais avant, voici la définition du terme insulte : "Paroles ou attitude (interprétables comme) portant atteinte à l'honneur ou à la dignité de quelqu'un (marquant de l'irrespect, du mépris envers quelque chose). "
avatar Abudah237 | 
@ Fabinou_ : L'interface d'Android est aussi basée sur des icônes. Quand aux widgets, jexnf connais personne sur Android qui les utilise vraiment. C'est un gadget. Windows 7 est basé sur un concept différent, mais mon point de vue c'est que comme souvent avec eux Microsoft n'est pas allé au bout de son idée. Un Hub Microsoft Office c'est contraire au principe même de Metro. En plus apparemment l'intégration des applis externes dans les Hubs n'est pas possible si elle ne vient pas de Microsoft (il faudra un update de MS pour que twitter soit intègré au Hub people). Le principe intéressant de Metro, c'est que les applis sont intégrées de façon transparente en fonction des usages qu'on en fait, sauf qu'en fait si on enlève les applis par défaut de Microsoft, on retrouve une litanie de Tiles moins pratiques que des icônes.
avatar alexmab | 
En tout cas je l'ai essayé et ce j'ai aimé le plus c'est sa fluidité
avatar JackOne | 
@Fabinou, Encore une fois ce n'est pas moi qui a utilisé les termes "insultes" et "éloge". Ensuite concernant Windows phone 7 ce que je fais c'est uniquement de la critique, marquée de plaisanteries (comme l'histoire de se muscler les doigts) mais que de la critique. Là encore le terme dénigrement est bien trop exagéré! Concernant iOS, l'interface n'a pas beaucoup changée mais a été largement améliorée et peaufinée. C'est bien la logique intelligente de l'évolution d'une interface. On pose des bases solides et on améliore pour proposer une expérience de plus en plus mâture, ça ne sert de tout changer tous les ans juste pour le plaisir de changer. L'OS des ordinateurs est basé sur le paradigme des icônes depuis 30 ans, je n'ai pas l'impression que les utilisateurs soient lassées des icônes! L'interface de Mac OS X repose sur les mêmes fondements depuis 10 ans mais a été améliorée sur des différents aspects, je ne sens pas une lassitude générale chez les utilisateurs Mac. Donc l'idée d'une interface vieillissante pour iOS ne repose sur aucuns fondements concrets et pertinents. Du moins tes arguments ne valent rien.
avatar kuban | 
Continue à creuser Fabinou_, tu vas toucher le fond bientôt... :D Daito ne fait que donner un avis subjectif qui ne te conviens pas. (et en plus pertinent, aujourd'hui, Window mobile 7 n'est pas fait pour avoir 200 applications, iOS si). Tu as un autre avis (A mort les applications et les icônes) tout aussi pertinent et subjectif. Accepte que l'autre puisse vivre sans être toi.

Pages

CONNEXION UTILISATEUR