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 ?

Pocket et la cohérence c’est pas trop ça

Pocket est un service de lecture différée plutôt chouette et disponible officiellement sur cinq plateformes. Hélas, les interfaces de ces différentes plateformes souffrent d’un certain manque d’homogénéité. C’est même carrément le bordel. J’ai fait un tableau de ces incohérences.

Dans l'ordre, la barre de navigation des versions Web, Android, Windows et Mac
Dans l’ordre, la barre de navigation des versions Web, Android, Windows et Mac

Notez bien que :

  • Je me suis concentré sur l’accès aux fonctions concernées. Il y a d’autres incohérences : dans le reste de la procédure (ex : ajout d’items sur Mac, modification groupée sur iPad), dans le choix des pictogrammes (mode d’affichage sur Windows), dans le concept de base (principe de double panneau avec l’article à droite sur Mac)…
  • Un « non » dans le tableau signifie que la fonction est purement absente.
  • Le site web est responsive mais je n’ai inclus que la version « grand format ».
  • J’ai regroupé Paramètres et Aide par commodité car ils sont toujours placés à côté.

Le tableau, je trouve, montre bien l’étendue des divergences :

  • une moitié des fonctions est indisponible sur au moins une plateforme.
  • Aucune fonction étudiée n’est parfaitement homogène (c’est-à-dire offrant un accès identique sur toutes les versions).
  • Sur les cinq plateformes, on dénombre quatre accès différents pour trois fonctions

Certaines divergences sont facilement explicables :

  • Pocket suit parfois les conventions propres à chaque plateforme. Par exemple, sur Android, les paramètres se trouvent habituellement dans le menu en haut à droite (celui accessible par les trois points) et ce menu n’a pas d’équivalent sur iOS.
  • Certaines fonctions ont moins d’intérêt sur certaines plateformes, par exemple un affichage en grille sur un petit smartphone.
  • Il y a toujours une certaine inertie dans le développement multi-plateformes et il n’est pas facile d’avoir une feuille de route unifiée dans le moindre détail.

Mais ça n’explique pas l’ampleur du problème. J’y vois surtout un manque de volonté des créateurs. Par exemple, la version Windows / Chrome OS utilise les même technologies que la version web (en gros c’est une web app lancée en local). Les deux devraient donc être relativement faciles à faire converger, pourtant la version Windows est l’une des plus divergentes.

Un facteur supplémentaire d’incohérence est temporel : des mises à jour modifient fréquemment les interfaces et ajoutent à la confusion. Je ne saurais dire si l’homogénéité est tendanciellement croissante.

Foin de blabla, voici le tableau.

Fonction iPad Android Web Windows Mac # de divergences
Nav principale Menu hamburger Menu hamburger À gauche Menu déroulant central Non 3 + 1 non
Filtrer par labels Menu hamburger Menu hamburger À gauche 1e ligne, droite En bas 4
Filtrer par type d'articles Menu hamburger Menu hamburger À gauche Gauche, 1e ligne Première ligne 4
Paramètres et aide Menu hamburger Menu, droite Menu, droite Menu déroulant central Barre de menus native 4
Premium Menu hamburger Menu hamburger Menu, droite Menu déroulant central Non 3 + 1 non
Messagerie Menu hamburger Menu hamburger 1e ligne, droite Non Non 2 + 1 non
Modification groupée Menu, droite ou tap long sur item Menu, droite 2e ligne, droite Non Non 2 + 1 non
Ajout d'items Gauche, 1e ligne Non 1e ligne, droite Gauche, 1e ligne Barre de menus native 3
Recherche 1e ligne, droite 1e ligne, droite 1e ligne, droite 1e ligne, droite En bas 2
Mode d'affichage 1e ligne, droite Non 2e ligne, droite Gauche, 1e ligne Non 2 + 2 non

Observatoire des utilisabilités : le texte tronqué

C’est agaçant quand une interface à base de tableaux ou de grille tronque les libellés, les rendant incompréhensibles. Dans les exemples suivants (respectivement Vimeo et l’iTunes Store), beaucoup d’importance est accordée aux images alors qu’elles ne sont guère informatives. La grille est tellement contraignante que les liens sont facilement trop longs et se retrouvent largement tronqués. Il faut donc passer la souris sur chacun d’entre eux pour avoir une infobulle et comprendre de quoi parlent les conférences. Non mais franchement.

Usability fail : Vimeo
Usability fail : Vimeo

Usability fail : iTunes
Usability fail : iTunes

Nouvelle interface de Firefox : premières impressions

Mozilla a livré la première version utilisable de la nouvelle interface pour Firefox, baptisée Australis. On peut l’essayer ici. Mes premières impressions sont mitigées.

Comparaison entre Chrome et Firefox (nouvelle version)
  • Firefox est en bas. Des onglets incurvés et pas obliques et quelques différences au niveau des boutons de navigation, c’est à peu près la seule différence avec Google Chrome. La marge de manœuvre pour innover graphiquement est certes assez étroite, puisque les interfaces des navigateurs sont de plus en plus minimalistes et que l’icône de droite devient presque une norme. Tout de même, un peu d’originalité n’aurait pas fait de mal, ne serait-ce qu’en termes d’image. J’aimais bien la séparation avec les boutons de fenêtre dans ce prototype, mais ça n’a pas l’air d’avoir été retenu.
  • Vouloir alléger l’interface et rendre plus discrets les onglets non-sélectionnés était louable, mais cela crée deux problèmes. D’abord, on se retrouve avec deux thèmes d’onglets différents au lieu d’une variation sur le même thème. Alors qu’auparavant l’onglet non-sélectionné était simplement grisé, il change maintenant totalement d’apparence. Par soucis de cohérence, il aurait fallu aller jusqu’au bout de l’idée et mettre des onglets incurvés partout. Ensuite, il y a tellement peu de chrome qu’on perd en structure. Sur la capture d’écran, le favicon à gauche se balade sans qu’on puisse le rattacher visuellement à quelque chose. Si on a de nombreux onglets d’ouverts, la ligne de séparation est tellement légère qu’il est plus difficile de les distinguer entre eux. Firefox n’est pas le seul à souffrir de cette tendance au dépouillement, voyez par exemple cette impression désordonnée que donne Reeder :

  • Le menu de droite en popover est encore en travaux dont je réserve mon avis définitif mais, à mon humble avis, il y a un gros travail à faire au niveau de l’architecture de l’information et de la priorisation des tâches. Oui, la barre de menus de Mac OS a trente ans et elle embête tout le monde, mais elle est inamovible et il faut faire avec (contrairement à Windows qui s’en passe de plus en plus). Le menu de droite est là pour contourner cette barre en offrant un « best-of » des actions les plus utilisées, mais du coup c’est un méli-mélo sans grande cohérence : « imprimer » à coté de « historique », il y a l’historique mais pas les marque-pages, etc.

  • Un an et demi après la sortie de Mac OS Lion, les barres d’ascenseur ne sont toujours pas conformes : elles ne disparaissent pas quand on ne scrolle pas et ont toujours une zone réservée. Si j’en crois leur bug tracker, ça devrait finir par arriver, mais saperlipopette quoi.

Une petite critique d’iTunes 11

Je prends habituellement soin de rester à l’écart des discussions sur la convergence entre iOS et Mac OS et sur la mauvaise influence que le premier aurait sur le second. Pourtant, avec la sortie d’iTunes 11, j’ai un exemple parfait de modèle d’interaction inspiré par iOS et qui m’a beaucoup dérouté.

J’ai voulu essayer le menu en « popover » qui apparait au survol près d’une chanson, d’un album ou d’un artiste. Je voulais mettre une chanson dans une playlist, donc j’ai passé le curseur sur « ajouter à ». Là, rien ne s’est passé. J’ai commencé à imaginer des trucs, par exemple qu’iTunes avait perdu mes playlists, d’ailleurs la flèche a l’air grisé, d’ailleurs au démarrage un message m’avait dit que ma bibliothèque devait être convertie. La solution est la plus bête qui soit : il faut cliquer pour accéder au sous-menu.

itunes

C’est un cas d’école de ce qu’il ne faut pas faire : tromper les attentes de l’utilisateur. Ce menu a la même fonction qu’un menu contextuel et y ressemble au premier abord, mais en fait non : le sous-menu apparait dans la même fenêtre au lieu de surgir à droite. Cela évite le problème classique des menus et de la trajectoire subtile qu’il demandent, mais on perd à tous les autres niveaux :

  • Le menu contextuel classique est accessible en cliquant-droit n’importe où sur la ligne de la piste concernée. A contrario, imaginez le trajet qu’il faut faire sur un iMac 27” pour accéder au bouton du nouveau menu popover.
  • Il faut un clic en plus à chaque fois.
  • Comme je l’ai dit, on trompe les habitudes de l’utilisateur, tout en conservant le menu classique. L’idée est sans doute d’avoir un menu plus accessible et moins chargé, mais du coup on se retrouve avec un système bâtard, où le menu classique est rempli d’options rarement utilisées (« créer une version AAC », « convertir les balises ID3 ») ou qui ne sont que des vestiges des version précédentes. Notamment, il me semble que « décocher la sélection » n’a plus aucun effet (normal : les checkboxes pour chaque piste ont disparu).

Je ne dis pas que ce système très marqué par iOS est, dans l’absolu, mauvais sur Mac OS, mais en l’état, c’est un ilot de logique tactile au milieu du reste et c’est d’une utilisabilité contestable.

Windows Phone : un an après

J’ai un Windows Phone : le Lumia 800. Il est à la fois beau et ergonomique, une parfaite illustration de la convergence entre forme et fonction. Je l’aime. C’est au niveau du logiciel que ça se complique.

Qu’on me rende mes gradients

Windows Phone est bien, mais après un an d’utilisation, il m’ennuie un peu. Le look & feel est un peu glacial. Les aplats de couleurs vives, à force, ça fatigue les yeux et lasse l’esprit. Toutes les applications se ressemblent, ou bien jurent avec le reste de l’OS. Ces défauts sont le revers de l’approche trop systématique de Microsoft en matière de design. Il faut saluer l’audace qu’a eu l’éditeur de partir de zéro, Windows Phone est a été conçu avec un langage simple, cohérent et doté d’une forte identité. Cette approche a payé, jusqu’à un certain point : l’OS ne commet jamais de faute de goût et on est rarement à plus de deux actions de ce que l’on veut faire. Mais Metro, le langage d’interface en question, est tellement contraignant qu’il donne peu de latitude aux développeurs pour innover. L’idée maitresse, c’est de naviguer latéralement entre plusieurs écrans, comme si le téléphone se déplaçait le long d’un panorama. Il y a des variantes, mais c’est le seul schéma de navigation recommandé par Microsoft. Les HIG d’iOS sont assez détaillées au niveau des éléments de base, mais que je sache elles ne suggèrent pas de structure de haut niveau.

De plus, Metro se veut tellement pur, numérique et “chromeless” qu’il en devient aseptisé. Il doit bien y avoir un juste milieu entre le skeuomorphisme débridé d’Apple et l’interface de Windows Phone, dénuée de textures, de gradient ou d’éléments de mise en page. Il suffit d’aller sur Dribble pour voir qu’on peut faire des visuels chaleureux sans tomber dans le kitsch.

Le problème se pose également pour Windows 8. Beaucoup sont d’avis que la partie tactile est bonne mais mal intégrée avec le reste de l’OS et que cela entraine une expérience batarde. Une critique que j’ai moins entendu est que Microsoft a réutilisé aveuglément les principes de Windows Phone. A mon sens, l’idée d’avoir chaque logiciel en plein écran a été poussée trop loin. On se retrouve avec des splash screens trop minimalistes (vous imaginez ça ou ça sur un écran de bureau ?) et des applis entières là où un widget dans un coin aurait suffi.

Disette d’applis

Il y a un autre problème, qui ne touche pas directement Windows Phone et que Microsoft fait [tout ce qu’il peut pour combattre, il s’agit de l’écosystème d’applications. Pour le dire brutalement, c’est un peu la misère. Un certain nombre d’apps connues ont une version pour Windows Phone, mais il y a toujours des manques. Cela dépend bien sûr des besoins de chacun, mais par exemple je n’ai pas de bon client pour Pocket. Si beaucoup de grands noms sont là, c’est souvent à retard. Par exemple, Instagram devrait arriver seulement avec la sortie de Windows Phone 8. Je ne parle même pas d’applis innovantes ou de jeux originaux : l’immense majorité est sur iOS et parfois, dans un second temps, sur Android.

De plus, les applis existantes sont chères. Plant vs Zombies est à 5€ (contre 2.40€ sur l’iPhone). Bejeweled est à 5€ aussi (contre 0.80€ sur iOS). Notez qu’il y a des exceptions (Final Fantasy est un peu moins cher sur Windows Phone), que la disparité de prix est moins grande dans certaines catégories (notamment les lecteurs de flux RSS) et que tout ce qui est diffusé sur le Marketplace doit avoir une version d’essai. Je reconnais aussi que c’est un problème épineux : la pauvreté de l’offre et les prix élevés sont dûs, pour beaucoup, au peu d’attrait commercial que représente la plateforme pour un développeur. Malgré tout, quand on a un Windows Phone, il ne faut pas avoir des besoins en applications trop spécifiques ou aimer avoir la dernière sortie à la mode.

Bref

Globalement je ne reste pas mécontent de mon achat, mais qui sait ce que sera mon prochain téléphone.