Sur quelques anicroches avec les applications universelles de Windows 10

illus écosystème apps

La double erreur de Windows 8, c’était de vou­loir for­cer un para­digme tac­tile sur un OS clas­sique et en plus de le faire coha­bi­ter avec une inter­face de type desk­top. Cela entrai­nait des trucs aber­rants comme les appli­ca­tions « Metro » ouvertes et pour­tant absentes de la barre des tâches du bureau.

Avec Windows 10, la stra­té­gie de Microsoft parait plus maligne et peut se résu­mer ain­si : mes don­nées per­so syn­chro­ni­sées par­tout, sur des applis trans-plateforme (télé­phone, ordi, Xbox…) mais dotées d’une UI s’adaptant au contexte (taille de l’écran, sou­ris ou tac­tile…).

Parenthèse : ils pour­suivent ain­si un tra­vail assez nova­teur en matière de res­pon­sive desi­gn – j’en a par­lé ici.

Prenez OneNote : non seule­ment les bou­tons du ruban deviennent plus com­pacts quand on réduit la lar­geur de l’écran, mais c’est même l’organisation de l’app qui change, puisque la liste des notes est relé­guée dans une vue dédiée et un bou­ton retour appa­rait pour y accé­der.

Le pro­blème, c’est que le tra­vail d’adaptation a été minime pour beau­coup des nou­velles appli­ca­tions natives. Par exemple, dans une fenêtre étroite Groove Music marche très bien – nor­mal, elle est très proche de sa contre­par­tie sur Windows 10 Mobile. Mais redi­men­sion­ner la fenêtre ne tire pas du tout par­tie de la taille d’écran. Le conte­nu est décou­pé en plein de vues étri­quées : pour se faire une idée glo­bale de ce que j’ai d’un artiste en local, je dois ouvrir sa fiche, puis cli­quer sur un album ou sur « Vue Morceaux ». N’importe quel lec­teur de musique digne de ce nom montre deux niveaux à la fois : des artistes et leurs albums res­pec­tifs, ou les albums d’un artiste avec ses chan­sons. iTunes montre même les trois niveaux : artistes, albums et chan­sons.

iTunes Artist View

Plus géné­ra­le­ment, j’ai rele­vé trois pro­blèmes presque sys­té­ma­tiques dans ces nou­velles appli­ca­tions.

Premier problème : ☰

L’utilisation du bou­ton « ham­bur­ger » sur mobile est dis­cu­table mais com­pré­hen­sible. Sur desk­top ça l’est moins, sur­tout quand c’est de manière non-conventionnelle. Dans les « grosses » appli­ca­tions, il sert d’interrupteur pour masquer/afficher les libel­lés du menu. Dans les appli­ca­tions légères, il fait appa­raitre ces libel­lés tem­po­rai­re­ment (comme un « flyo­ver » ou « popo­ver »). Comme on le voit dans cette ani­ma­tion, ce n’est pas d’une uti­li­té ren­ver­sante eu égard à sa posi­tion pré­émi­nente.

Oui, c’est bien le Menu démar­rer, même lui y a droit. Un menu de navi­ga­tion avec son propre bou­ton de navi­ga­tion, mer­ci Microsoft. L’icône habi­tuel­le­ment la plus struc­tu­rante d’une app est trans­for­mée en simple post-it, puisque cli­quer des­sus sert juste à rap­pe­ler la signi­fi­ca­tion des icônes. Si celle-ci posait vrai­ment pro­blème il y avait d’autres solu­tions, comme affi­cher tous les titres de menu lors d’un sur­vol pro­lon­gé. Courrier est le seul cas où ce ham­bur­ger est jus­ti­fié puisqu’il pré­sente de vraies dif­fé­rences de conte­nu entre modes com­pact et com­plet.

Deuxième problème : …

La barre de com­mandes com­prend une icône en points de sus­pen­sion. C’est encore un décalque du mobile, qui trans­gresse au pas­sage des conven­tions desk­top, sans gain évident. Elle ouvre des com­mandes sup­plé­men­taires et fait appa­raitre le nom de toutes les cônes.

2016-10-25_00h34_01.png

Elle pré­sente quatre pro­blèmes :

  1. Ces libel­lés rem­placent l’infobulle au sur­vol, alors que c’est une conven­tion ancienne et répan­due.
  2. Ces libel­lés ne sont pas omni­pré­sents : cer­taines appli­ca­tions ont les points de sus­pen­sion mais affichent le libel­lé en per­ma­nence à côté (Photos, Alarme), ou uti­lisent une info­bulle (Edge).
  3. Il n’y a par­fois qu’une seule entrée dans le menu (Cf. les apps Téléphone et Messages)
  4. Il n’y a par­fois aucun menu et cli­quer des­sus affiche juste les libel­lés. Le plus ridi­cule est qu’il n’y a par­fois qu’une seule icone et donc qu’un seul libel­lé à affi­cher.

2016-10-24_20h08_13.png

Si c’était un bonus, le com­por­te­ment ne serait pas une mau­vaise idée puisqu’il enseigne en pas­sant aux uti­li­sa­teurs la signi­fi­ca­tion des pic­to­grammes. Mais rem­pla­cer une conven­tion archi-classique par un com­por­te­ment plus lourd n’est pas très une bonne idée.

Problème annexe : cette barre de com­mandes est le plus sou­vent en haut, mais pas tou­jours. Exemple : l’Enregistreur vocal.

Troisième problème : ⇐

Terminons par le bou­ton retour : il appa­rait à gauche du titre, à la place de la tra­di­tion­nelle icône de l’application. Pourquoi pas, ça s’inscrit dans la ten­dance de rem­plir la barre de titre ou de la fusion­ner avec d’autres. Mais c’est gênant en pra­tique et en théo­rie.

C’est gênant en pra­tique car l’implémentation est mal fichue. L’historique de navi­ga­tion est à la fois lacu­naire (dans les para­mètres sys­tème le Retour passe d’une vue avan­cée à l’accueil en sau­tant une vue inter­mé­diaire) et pol­lué par des étapes inutiles. Par exemple le chan­ge­ment de rubrique est enre­gis­tré. Si vous ouvrez vingt fois les rubriques A puis B puis A B… de la barre de navi­ga­tion ver­ti­cale puis cli­quez vingt fois sur le bou­ton retour, vous rou­vri­rez vingt fois ces rubriques. Autre exemple : lors d’une recherche dans la Boutique, chaque chan­ge­ment de filtre ajoute une étape à l’historique alors que dans ce contexte le retour devrait seule­ment être hié­rar­chique.

À noter que ces deux exemples violent les direc­tives de concep­tion de Microsoft. Pas bien.

Plus fon­da­men­ta­le­ment, ce bou­ton retour est gênant dans son prin­cipe. Dans un envi­ron­ne­ment contraint (le mobile) ou hété­ro­gène (navi­ga­teur, avec des sites tous dif­fé­rents), avoir une fonc­tion cen­tra­li­sée pour balayer le moindre état pas­sé de l’UI a un sens, car ça donne une ligne de sur­vie à l’utilisateur. À tout ins­tant je peux reve­nir exac­te­ment où j’étais, même en ayant oublié com­ment j’y suis arri­vé. Tout ce que j’ai à connaître, c’est le bou­ton retour. Alors qu’un OS de bureau four­nit à l’écran plus de capa­ci­tés de navi­ga­tion et peut donc se pas­ser d’une telle pana­cée.

Contrairement aux pro­blèmes pré­cé­dents, cette fonc­tion est moins une erreur basique qu’une réponse inadap­tée à une ques­tion com­pli­quée. J’aurais sim­ple­ment pré­fé­ré que Microsoft ajoute ce bou­ton au cas par cas, quand c’était vrai­ment néces­saire : Word et Courrier n’en ont pas, Groove Music n’aurait pas dû en avoir, mais le Store en a un et c’est jus­ti­fié vu la pro­fon­deur de son arbo­res­cence. Voici com­ment Apple ajoute un bou­ton retour glo­bal à cer­taines appli­ca­tions (Photos, Mac App Store).

photos_01_mac-100577934-orig

Archéologie des interfaces – Ou pourquoi il ne faut pas faire une refonte à moitié

Précédemment, je par­lais du manque de cohé­rence entre les appli­ca­tions de Pocket. Il s’agissait pour beau­coup de points iso­lés qui s’accumulaient, alors que les exemples sui­vants sont plus graves : les inter­faces sont inco­hé­rentes dans leur prin­cipe.

L’histoire est cou­tu­mière : un site Web entame une grosse refonte pour se moder­ni­ser. On voit arri­ver une page d’accueil flam­bante neuve et dif­fé­rents gaba­rits plus sobres et mieux pen­sés. Cela dit, quand on cherche dans les coins on trouve quelques pages qui ne res­pectent pas la nou­velle charte. Mais bon c’est pas grave, qui se sou­cie des men­tions légales et des pages d’erreur 404.

Parfois, ce sont des pans entiers d’un site qui détonnent. Exemple : Pôle Emploi, dont la page d’accueil res­semble actuel­le­ment à ça :

Page d'accueil Pole Emploi

Pas mal pas mal. Sauf que cette « révo­lu­tion numé­rique  », « user-centric et dis­rup­tive  », n’est pas encore allée très loin. Dès qu’on se connecte on retombe sur l’ancien, avec un style et une struc­ture lar­ge­ment dif­fé­rente, et une uti­li­sa­bi­li­té sur laquelle je ne m’étendrai pas. J’ajoute aus­si une cap­ture de l’espace pour entre­prise, qui a une gueule encore dif­fé­rente.

Page particuliers Pole Emploi

Page entreprise Pole Emploi

Bien sûr, je sais ce que c’est. Il y a des contraintes de temps et d’argent et je n’ose ima­gi­ner les décen­nies de dette tech­nique et d’inertie archi­tec­tu­rale pour ce genre de gros SI. Ce qui semble pour l’utilisateur une sec­tion par­mi d’autres est peut-être un module à part, avec une tech­no­lo­gie incom­pa­tible et géré par un dépar­te­ment dif­fé­rent (une bonne illus­tra­tion du prin­cipe de Conway). Je ne doute pas que les gens qui y tra­vaillent soient les pre­miers frus­trés. Mais bon, l’homogénéisation est pré­vue pour une V2, hein ? Hein ?

Sauf que ce n’est pas tou­jours le cas. Parfois, au fil des refontes ou des ajouts, les diver­gences s’aggravent au lieu de se résor­ber. Le site de la MAAF a trois gaba­rits lar­ge­ment hété­ro­gènes, tan­tid que le site des impôts en a quatre (ou disons deux avec des fortes variantes cha­cun), plus désuets à mesure que l’on s’enfonce dans les pro­fon­deurs du site. L’absence de cohé­rence se res­sent, car à l’utilisation l’on est faci­le­ment ame­né à pas­ser d’un gaba­rit à l’autre. Oh, encore un autre exemple avec deux screen­shots de l’espace client d’EDF ici et ici.

MAAF

MAAF

MAAF

MAAF

impots.gouv.fr

impots.gouv

impots.gouv

impots.gouv

impots.gouv

Windows, ce palimpseste

Microsoft est un spé­cia­liste pour ajou­ter des couches d’IHM à Windows sans réno­ver ou enle­ver les anciennes. C’est par­fois une preuve de saga­ci­té (le sélec­teur de cou­leur est cor­rect et à peine bou­gé) en vingt ans, par­fois d’immobilisme (il a fal­lu quinze ans et Vista pour avoir une réelle mise à jour de Paint). Ce que je trouve le plus fas­ci­nant, c’est le pan­neau de confi­gu­ra­tion : avec ses suc­ces­sions de pan­neaux tou­jours plus avan­cés et vieillots, on tra­verse une bonne par­tie de l’histoire du sys­tème d’exploitation.

D’abord, l’accueil datant de Windows 10. Ensuite, celui datant de XP. Les deux suivent le même concept : une grille d’icônes ouvrant des fenêtres maxi­mi­sées dotées avec une barre de navi­ga­tion laté­rale. Mais mys­té­rieu­se­ment, les deux ont été conser­vés. Il y a donc des fenêtres redon­dantes (Désinstaller des pro­grammes), d’autres qui n’ont pas été migrées vers la charte Windows 10 (Centre de réseau et par­tage).

Parametres Windows

Panneau de configuration Windows 10

Ensuite, on arrive aux pan­neaux à taille fixe et à onglets, qui datent de Windows 95. Les para­mètres de l’explorateur de fichiers en est le meilleur exemple : à part le retrait et sur­tout l’ajout de cer­taines options, il n’a pas bou­gé en vingt ans – et il en aurait bien besoin, avec cette liste inter­mi­nable dans un cadre minus­cule.

Options de l'explorateur de fichier

Un dernier exemple

L’historique de Google Chrome ne res­semblent pas aux favo­ris, qui ne res­semblent pas du tout à la fenêtre de télé­char­ge­ment (voir screen­shots). C’est appa­rem­ment tem­po­raire, mais pour­quoi une tran­si­tion aus­si désor­don­née vers le Material Design ?

Adieu Aero

Microsoft a annoncé récemment que la version bureau de Windows 8 (c’est-à-dire la version classique, pas celle dédiée au mobile et suivant le paradigme Metro) abandonnerait Aero. Pour ceux qui ne voient pas ce que c’est : vous voyez le nouveau look de Windows depuis Vista ? C’est Aero. Je dois avouer que j’ai appris cette disparition avec un plaisir certain, tant ce thème était un amoncellement d’effets graphiques s’inspirant des cotés les plus superficiels et eye candy de Mac OS. L’effet de glow autour du titre dans une fenêtre, le changement de couleur brutal au deux tiers de la bordure, la transparence, les bandes en diagonale censés faire “vitre”, etc. Isolément, rien de tout ça n’est forcément horrible mais l’ensemble est overdesigné et manque de cohésion.

 Il y a un dernier aspect du thème Aero qui m’horripile, ce sont les bordures des fenêtres. C’est l’illustration parfaite d’un point important en utilisabilité : le look & feel d’un logiciel n’est pas cosmétique, il n’est pas seulement là pour appuyer l’identité visuelle du produit ou pour faire joli. Il aide à traiter l’information, ou au contraire peut se mettre en travers. En l’occurrence, à quoi servent les bordures ? A identifier les limites d’une fenêtre, c’est tout. Pour une tache aussi simple, quelque chose de minimal devrait bien suffire.

Quel est le problème avec ces bordures, pour qu’elles soient un tel contre-exemple ?

Elles sont trop larges. Comparez une fenêtre de Mac OS 10.7 et une de Windows 7 : malgré le minimalisme de la première, on arrive très bien à distinguer la fenêtre de l’arrière-plan : la différence de couleur, les barres de titre et d’état et le léger ombrage suffisent largement.

Mac OS
Mac OS

Windows
Windows

Elles sont trop chargées. Je compte : l’ombrage, une ligne blanche de rehaut, une zone de couleur personnalisable, une seconde ligne blanche et enfin une dernière ligne qui sépare la fenêtre et son contenu. C’est beaucoup et pas très easy on the eyes. Les lignes blanches sont, à mon avis, trop claires, ce qui donne un effet de contraste trop prononcé. A cela s’ajoute éventuellement des bordures propres à chaque logiciel. Ici, une capture de The Gimp pour Windows, dans la brand new 2.8 et en mode multi-fenêtré. Tout ce chrome me fait mal aux yeux, presque littéralement : même inconsciemment, c’est une complexité que l’esprit doit traiter.

Enfin, ce problème se conjugue avec un autre : l’effet de transparence est déjà critiquable, mais le faire figurer dans une zone si étroite est une très mauvaise idée. La bordure est une zone censée se faire oublier, au lieu de ça on a droit à un effet riche, différent suivant la position de la fenêtre, le fond d’écran et la personnalisation, tout ça sur dix ou vingt pixels. Ce n’est pas grand-chose, c’est à la périphérie, mais justement : c’est un peu comme si on travaillait avec un Vasarely au coin de l’œil. La largeur des bordures est paramétrable, mais ça ne résout pas le problème, au contraire : plus larges, elles deviennent trop visibles et gâchent de la place ; plus étroites, elles apparaitront encore plus chargées. On peut mettre à 0 la valeur remplissage des bordures dans les paramètres avancés du menu “couleur de la fenêtre” [1], mais c’est un cache-misère qui ne change ni fondamentalement les principes du thème ni les paramètres par défaut.


EDIT : Après avoir vu tourner une Release Preview de Windows 8, l’effet de transparence est toujours là par défaut mais le reste du thème est nettement plus clean.


[1] Une autre fois, on parlera du panneau de configuration, ce labyrinthe où transparait toute les couches historiques de Windows.