Expérimenter avec une tétière inversée

Résumé : sur mobile j’ai changé la barre de menu du blog.

Pendant long­temps, quand on ouvrait mon blog sur télé­phone on voyait ça :Navigation blogmobile v1

Ça fait un gros pâté de texte non ? Nom du blog, puis liens, puis titre de l’ar­ticle. Les liens du menu, notam­ment, sont plus directs et effi­caces qu’un menu-burger, mais ils font très lourds sans vrai­ment être parlants ou inciter à cliquer. Comment rendre ce menu plus discret sans perdre en utili­sa­bi­lité ? Une solu­tion : un menu-tiroir masqué par défaut, mais pas un menu-burger pour autant. Pour l’ou­vrir, il suffit de scroller vers le haut ou d’ap­puyer sur la mani­cule. Essayez de vous-même sur un télé­phone, une fenêtre étroite ou regardez cette vidéo :

Pourquoi ce choix ? J’avais envie d’expérimenter autour de l’idée de la page web comme canevas infini (pour reprendre une expres­sion de Scott McCloud). Une page web n’est pas un rectangle avec des fron­tières claires ni un sens de lecture prédé­fini.

Image prise à Frank Chimero

Ça ne veut pas dire qu’on peut faire n’im­porte quoi : les limites sont celles de la compré­hen­sion du lecteur. Ici on reste sage et ce menu inversé est même plus ergo­no­mique qu’un menu-burger. D’abord il est tout à fait décou­vrable : la mani­cule est bien mise en évidence, on peut appuyer dessus ou sur toute la largeur de l’écran et le menu est suggéré par une saillie. Ensuite, parce qu’au lieu de devoir repérer et viser un bouton, il suffit d’un simple geste de scroll. Comme le dit Joshua Porter, « le défi­le­ment est une conti­nua­tion, le clic une déci­sion ». Enfin, ce geste n’est pas arbi­traire mais cohé­rent avec la manière dont le menu appa­rait : scroller vers le haut fait appa­raitre progres­si­ve­ment plus de page, c’est le prin­cipe même du scroll. Alors que dans l’ab­solu un bouton-burger pour­rait être placé n’im­porte et le menu pour­rait appa­raitre n’im­porte comment.

Bref, je trouve ça pas mal. Me bercé-je d’illu­sions ? Un avis ? Avez-vous croisé des idées simi­laires ?

You do the meth : tous les jeux de mots des génériques de Bob’s Burgers

Vous voyez dans le géné­rique des Simpsons le texte que Bart écrit depuis 25 saisons ? Dans Bob’s Burgers c’est pareil, il y a deux jeux de mot dans le décor, presque toujours nouveaux. Je me suis amusé à les extraire avec un petit script basé sur ffmpeg (et peu d’huile de coude pour capturer les photo­grammes ayant des time­code diffé­rents).

Il y a 126 photo­grammes pour 134 épisodes (de la S1 au milieu de la S8), ce qui fait 8 épisodes sans géné­rique.

VOIR LES IMAGES EN PLEIN ÉCRAN Lire la suite

Petit panorama de la ville hostile

banc de camden
Un banc anti SDF, anti-dealer, anti-tagueur, anti-skater

Architecture hostile, design désa­gréable, mobi­lier anti-SDF, autant de termes qui tournent autour de la même idée. Petit pano­rama non exhaustif.

D’abord, des intro­duc­tions au sujet :

Quelques concepts :

Enfin, deux sites recen­sant ces dispo­si­tifs hostiles :

Archisuit
Archisuit, un exemple de contour­ne­ment

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 para­digme tactile sur un OS clas­sique et en plus de le faire coha­biter avec une inter­face de type desktop. 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ésumer ainsi : mes données perso synchro­ni­sées partout, sur des applis trans-plateforme (télé­phone, ordi, Xbox…) mais dotées d’une UI s’adap­tant au contexte (taille de l’écran, souris ou tactile…).

Parenthèse : ils pour­suivent ainsi un travail assez nova­teur en matière de respon­sive design – j’en a parlé ici.

Prenez OneNote : non seule­ment 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 appa­rait pour y accéder.

Le problème, c’est que le travail d’adap­ta­tion a été minime pour beau­coup des nouvelles appli­ca­tions natives. Par exemple, dans une fenêtre étroite Groove Music marche très bien – normal, elle est très proche de sa contre­partie sur Windows 10 Mobile. Mais redi­men­sionner la fenêtre ne tire pas du tout partie de la taille d’écran. Le contenu est découpé en plein de vues étri­qué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 respec­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 relevé trois problèmes presque systé­ma­tiques dans ces nouvelles appli­ca­tions.

Premier problème : ☰

L’utilisation du bouton « hamburger » sur mobile est discu­table mais compré­hen­sible. Sur desktop ça l’est moins, surtout quand c’est de manière non-conventionnelle. Dans les « grosses » appli­ca­tions, il sert d’in­ter­rup­teur pour masquer/afficher les libellés du menu. Dans les appli­ca­tions légères, il fait appa­raitre ces libellés tempo­rai­re­ment (comme un « flyover » ou « popover »). Comme on le voit dans cette anima­tion, ce n’est pas d’une utilité renver­sante eu égard à sa posi­tion préémi­nente.

Oui, c’est bien le Menu démarrer, même lui y a droit. Un menu de navi­ga­tion avec son propre bouton de navi­ga­tion, merci Microsoft. L’icône habi­tuel­le­ment la plus struc­tu­rante d’une app est trans­formée en simple post-it, puisque cliquer dessus sert juste à rappeler la signi­fi­ca­tion des icônes. Si celle-ci posait vrai­ment problème il y avait d’autres solu­tions, comme affi­cher tous les titres de menu lors d’un survol prolongé. Courrier est le seul cas où ce hamburger est justifié puis­qu’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 suspen­sion. C’est encore un décalque du mobile, qui trans­gresse au passage des conven­tions desktop, sans gain évident. Elle ouvre des commandes supplé­men­taires et fait appa­raitre 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’in­fo­bulle au survol, alors que c’est une conven­tion ancienne et répandue.
  2. Ces libellés ne sont pas omni­pré­sents : certaines appli­ca­tions ont les points de suspen­sion mais affichent le libellé en perma­nence à côté (Photos, Alarme), ou utilisent une info­bulle (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 ridi­cule est qu’il n’y a parfois qu’une seule icone et donc qu’un seul libellé à affi­cher.

2016-10-24_20h08_13.png

Si c’était un bonus, le compor­te­ment ne serait pas une mauvaise idée puisqu’il enseigne en passant aux utili­sa­teurs la signi­fi­ca­tion des picto­grammes. Mais remplacer une conven­tion archi-classique par un compor­te­ment 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 appa­rait à gauche du titre, à la place de la tradi­tion­nelle icône de l’ap­pli­ca­tion. 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’im­plé­men­ta­tion est mal fichue. L’historique de navi­ga­tion est à la fois lacu­naire (dans les para­mètres système le Retour passe d’une vue avancée à l’ac­cueil en sautant une vue inter­mé­diaire) et pollué par des étapes inutiles. Par exemple le chan­ge­ment de rubrique est enre­gistré. Si vous ouvrez vingt fois les rubriques A puis B puis A B… de la barre de navi­ga­tion verti­cale puis cliquez vingt fois sur le bouton retour, vous rouvrirez vingt fois ces rubriques. Autre exemple : lors d’une recherche dans la Boutique, chaque chan­ge­ment de filtre ajoute une étape à l’his­to­rique 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 fonda­men­ta­le­ment, ce bouton 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 diffé­rents), avoir une fonc­tion centra­lisé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 exac­te­ment 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 capa­cités de navi­ga­tion et peut donc se passer d’une telle panacée.

Contrairement aux problèmes précé­dents, cette fonc­tion est moins une erreur basique qu’une réponse inadaptée à une ques­tion compli­quée. J’aurais simple­ment préféré que Microsoft ajoute ce bouton au cas par cas, quand c’était vrai­ment néces­saire : Word et Courrier n’en ont pas, Groove Music n’au­rait pas dû en avoir, mais le Store en a un et c’est justifié vu la profon­deur de son arbo­res­cence. Voici comment Apple ajoute un bouton retour global à certaines appli­ca­tions (Photos, Mac App Store).

photos_01_mac-100577934-orig

Le futur sera trivial

J’aime beau­coup le concept de futur trivial (« future mundane ») de Nick Foster, qu’il a présenté dans un article et lors d’une confé­rence. Qu’est-ce à dire ?

Millenium Falcon

Thèse 1 : « dans le futur, les tables resteront branlantes » (source de la formule)

Comprendre : la tech­no­logie restera impar­faite, soumise à l’usure, pleine d’im­prévus, et vecteur de désa­gré­ments, petits ou gros.

Thèse 2 : une société humaine change par accrétion.

  • Elle évolue selon des rythmes diffé­ren­ciés. Comme le suggère le schéma ci-après, la mode change plus vite que les infra­struc­tures.
  • Elle évolue de manière non séquen­tielle : une tech­no­logie n’est pas adoptée instan­ta­né­ment et univer­sel­le­ment, et des tech­no­lo­gies de géné­ra­tion diffé­rente peuvent coha­biter et se mélanger. Pour reprendre l’exemple favori de David Edgerton, on n’a jamais autant utilisé de chevaux que pendant les deux guerres mondiales. Je recom­mande d’ailleurs vive­ment les articles et livres de cet histo­rien des sciences.

2016-09-29_23h49_56

On peut inter­préter ce concept de plusieurs manières :

  • Pessimisme (90% des choses sont nulles et le reste­ront).
  • Difficulté à conce­voir un système complexe en anti­ci­pant tous ses aspects. Comme le dit Frederik Pohl : « une bonne histoire de science-fiction doit pouvoir prédire l’embouteillage et non l’automobile ».
  • L’idée que certains micro-phénomènes sont plus révé­la­teurs de chan­ge­ment que les jetpacks et autres voitures volantes.

A ce sujet, on pourra aussi lire le chapitre « Futurs au quoti­dien » de ce livre par Nicolas Nova – d’ailleurs un collègue de Foster.