Sur quelques anicroches avec les applications universelles de Windows 10

illus écosystème apps

La double erreur de Windows 8, c’était de vouloir forcer un paradigme tactile sur un OS classique et en plus de le faire cohabiter avec une interface de type desktop. Cela entrainait des trucs aberrants comme les applications « Metro » ouvertes et pourtant absentes de la barre des tâches du bureau.

Avec Windows 10, la stratégie de Microsoft parait plus maligne et peut se résumer ainsi : mes données perso synchronisées partout, sur des applis trans-plateforme (téléphone, ordi, Xbox…) mais dotées d’une UI s’adaptant au contexte (taille de l’écran, souris ou tactile…).

Parenthèse : ils poursuivent ainsi un travail assez novateur en matière de responsive design – j’en a parlé ici.

Prenez OneNote : non seulement les boutons du ruban deviennent plus compacts quand on réduit la largeur 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 bouton retour apparait pour y accéder.

Le problème, c’est que le travail d’adaptation a été minime pour beaucoup des nouvelles applications natives. Par exemple, dans une fenêtre étroite Groove Music marche très bien – normal, elle est très proche de sa contrepartie sur Windows 10 Mobile. Mais redimensionner la fenêtre ne tire pas du tout partie de la taille d’écran. Le contenu est découpé en plein de vues étriquées : pour se faire une idée globale de ce que j’ai d’un artiste en local, je dois ouvrir sa fiche, puis cliquer sur un album ou sur « Vue Morceaux ». N’importe quel lecteur de musique digne de ce nom montre deux niveaux à la fois : des artistes et leurs albums respectifs, ou les albums d’un artiste avec ses chansons. iTunes montre même les trois niveaux : artistes, albums et chansons.

iTunes Artist View

Plus généralement, j’ai relevé trois problèmes presque systématiques dans ces nouvelles applications.

Premier problème : ☰

L’utilisation du bouton « hamburger » sur mobile est discutable mais compréhensible. Sur desktop ça l’est moins, surtout quand c’est de manière non-conventionnelle. Dans les « grosses » applications, il sert d’interrupteur pour masquer/afficher les libellés du menu. Dans les applications légères, il fait apparaitre ces libellés temporairement (comme un « flyover » ou « popover »). Comme on le voit dans cette animation, ce n’est pas d’une utilité renversante eu égard à sa position prééminente.

Oui, c’est bien le Menu démarrer, même lui y a droit. Un menu de navigation avec son propre bouton de navigation, merci Microsoft. L’icône habituellement la plus structurante d’une app est transformée en simple post-it, puisque cliquer dessus sert juste à rappeler la signification des icônes. Si celle-ci posait vraiment problème il y avait d’autres solutions, comme afficher tous les titres de menu lors d’un survol prolongé. Courrier est le seul cas où ce hamburger est justifié puisqu’il présente de vraies différences de contenu entre modes compact et complet.

Deuxième problème : …

La barre de commandes comprend une icône en points de suspension. C’est encore un décalque du mobile, qui transgresse au passage des conventions desktop, sans gain évident. Elle ouvre des commandes supplémentaires et fait apparaitre le nom de toutes les cônes.

2016-10-25_00h34_01.png

Elle présente quatre problèmes :

  1. Ces libellés remplacent l’infobulle au survol, alors que c’est une convention ancienne et répandue.
  2. Ces libellés ne sont pas omniprésents : certaines applications ont les points de suspension mais affichent le libellé en permanence à côté (Photos, Alarme), ou utilisent une infobulle (Edge).
  3. Il n’y a parfois qu’une seule entrée dans le menu (Cf. les apps Téléphone et Messages)
  4. Il n’y a parfois aucun menu et cliquer dessus affiche juste les libellés. Le plus ridicule est qu’il n’y a parfois qu’une seule icone et donc qu’un seul libellé à afficher.

2016-10-24_20h08_13.png

Si c’était un bonus, le comportement ne serait pas une mauvaise idée puisqu’il enseigne en passant aux utilisateurs la signification des pictogrammes. Mais remplacer une convention archi-classique par un comportement plus lourd n’est pas très une bonne idée.

Problème annexe : cette barre de commandes est le plus souvent en haut, mais pas toujours. Exemple : l’Enregistreur vocal.

Troisième problème : ⇐

Terminons par le bouton retour : il apparait à gauche du titre, à la place de la traditionnelle icône de l’application. Pourquoi pas, ça s’inscrit dans la tendance de remplir la barre de titre ou de la fusionner avec d’autres. Mais c’est gênant en pratique et en théorie.

C’est gênant en pratique car l’implémentation est mal fichue. L’historique de navigation est à la fois lacunaire (dans les paramètres système le Retour passe d’une vue avancée à l’accueil en sautant une vue intermédiaire) et pollué par des étapes inutiles. Par exemple le changement de rubrique est enregistré. Si vous ouvrez vingt fois les rubriques A puis B puis A B… de la barre de navigation verticale puis cliquez vingt fois sur le bouton retour, vous rouvrirez vingt fois ces rubriques. Autre exemple : lors d’une recherche dans la Boutique, chaque changement de filtre ajoute une étape à l’historique alors que dans ce contexte le retour devrait seulement être hiérarchique.

À noter que ces deux exemples violent les directives de conception de Microsoft. Pas bien.

Plus fondamentalement, ce bouton retour est gênant dans son principe. Dans un environnement contraint (le mobile) ou hétérogène (navigateur, avec des sites tous différents), avoir une fonction centralisée pour balayer le moindre état passé de l’UI a un sens, car ça donne une ligne de survie à l’utilisateur. À tout instant je peux revenir exactement où j’étais, même en ayant oublié comment j’y suis arrivé. Tout ce que j’ai à connaître, c’est le bouton retour. Alors qu’un OS de bureau fournit à l’écran plus de capacités de navigation et peut donc se passer d’une telle panacée.

Contrairement aux problèmes précédents, cette fonction est moins une erreur basique qu’une réponse inadaptée à une question compliquée. J’aurais simplement préféré que Microsoft ajoute ce bouton au cas par cas, quand c’était vraiment nécessaire : Word et Courrier n’en ont pas, Groove Music n’aurait pas dû en avoir, mais le Store en a un et c’est justifié vu la profondeur de son arborescence. Voici comment Apple ajoute un bouton retour global à certaines applications (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 parlais du manque de cohérence entre les applications de Pocket. Il s’agissait pour beaucoup de points isolés qui s’accumulaient, alors que les exemples suivants sont plus graves : les interfaces sont incohérentes dans leur principe.

L’histoire est coutumière : un site Web entame une grosse refonte pour se moderniser. On voit arriver une page d’accueil flambante neuve et différents gabarits plus sobres et mieux pensés. Cela dit, quand on cherche dans les coins on trouve quelques pages qui ne respectent pas la nouvelle charte. Mais bon c’est pas grave, qui se soucie des mentions 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 ressemble actuellement à ça :

Page d'accueil Pole Emploi

Pas mal pas mal. Sauf que cette « révolution numérique  », « user-centric et disruptive  », 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 structure largement différente, et une utilisabilité sur laquelle je ne m’étendrai pas. J’ajoute aussi une capture de l’espace pour entreprise, qui a une gueule encore diffé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 imaginer les décennies de dette technique et d’inertie architecturale pour ce genre de gros SI. Ce qui semble pour l’utilisateur une section parmi d’autres est peut-être un module à part, avec une technologie incompatible et géré par un département différent (une bonne illustration du principe de Conway). Je ne doute pas que les gens qui y travaillent soient les premiers frustrés. Mais bon, l’homogénéisation est prévue pour une V2, hein ? Hein ?

Sauf que ce n’est pas toujours le cas. Parfois, au fil des refontes ou des ajouts, les divergences s’aggravent au lieu de se résorber. Le site de la MAAF a trois gabarits largement hétérogènes, tantid que le site des impôts en a quatre (ou disons deux avec des fortes variantes chacun), plus désuets à mesure que l’on s’enfonce dans les profondeurs du site. L’absence de cohérence se ressent, car à l’utilisation l’on est facilement amené à passer d’un gabarit à l’autre. Oh, encore un autre exemple avec deux screenshots 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écialiste pour ajouter des couches d’IHM à Windows sans rénover ou enlever les anciennes. C’est parfois une preuve de sagacité (le sélecteur de couleur est correct et à peine bougé) en vingt ans, parfois d’immobilisme (il a fallu quinze ans et Vista pour avoir une réelle mise à jour de Paint). Ce que je trouve le plus fascinant, c’est le panneau de configuration : avec ses successions de panneaux toujours plus avancés et vieillots, on traverse une bonne partie de l’histoire du systè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 maximisées dotées avec une barre de navigation latérale. Mais mystérieusement, les deux ont été conservés. Il y a donc des fenêtres redondantes (Désinstaller des programmes), d’autres qui n’ont pas été migrées vers la charte Windows 10 (Centre de réseau et partage).

Parametres Windows

Panneau de configuration Windows 10

Ensuite, on arrive aux panneaux à taille fixe et à onglets, qui datent de Windows 95. Les paramètres de l’explorateur de fichiers en est le meilleur exemple : à part le retrait et surtout l’ajout de certaines options, il n’a pas bougé en vingt ans – et il en aurait bien besoin, avec cette liste interminable dans un cadre minuscule.

Options de l'explorateur de fichier

Un dernier exemple

L’historique de Google Chrome ne ressemblent pas aux favoris, qui ne ressemblent pas du tout à la fenêtre de téléchargement (voir screenshots). C’est apparemment temporaire, mais pourquoi une transition aussi désordonné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.