Chaque panneau mérite son URL : ouvrir une dépense sans perdre le fil

conception produit

La plupart des apps de dépenses prélèvent une petite taxe permanente, et on finit par ne plus remarquer qu’on la paie.

Vous parcourez une liste de quarante dépenses d’un voyage, en vérifiant chacune sur votre relevé bancaire. Vous en ouvrez une. L’app vous emmène sur un autre écran. Vous vérifiez le montant, vous faites Retour, et vous revoilà en haut de la liste — quarante lignes au-dessus de l’endroit où vous étiez, sans savoir laquelle vous veniez de traiter. Multipliez ça par quarante.

La solution n’est pas une page plus rapide. C’est de ne pas partir du tout.

Ce qu’une vue détaillée doit vraiment faire

Ouvrez une addition depuis une liste, et quatre choses doivent être vraies en même temps. La plupart des implémentations n’en réussissent que deux :

  1. Vous gardez votre place. La liste reste là où elle était, sans perdre le défilement, avec la ligne ouverte mise en évidence pour que vous sachiez où vous en êtes.

  2. Retour fait ce qu’on attend de lui. Il ferme ce que vous avez ouvert, au lieu de quitter l’écran.

  3. Ce que vous regardez a une adresse. Rafraîchissez, c’est toujours là. Envoyez l’adresse à quelqu’un, et il voit ce que vous voyez.

  4. Vous pouvez suivre un fil. Une addition mentionne une personne, cette personne a d’autres additions. Remonter ce fil ne devrait pas vous éjecter de la liste que vous lisiez.

Une fenêtre modale vous donne les deux premières, mal, et jamais la troisième. Une page entière vous donne la troisième et sacrifie la première. Ce qu’il vous faut, c’est les deux, et pour les avoir, il faut cesser de traiter « ce qui est ouvert » comme une chose que l’app retient en privé.

Le mettre dans la barre d’adresse

Dans HiBill, tout ce qui est ouvert dans le panneau latéral est inscrit dans l’URL de la page — une transaction sous la forme ?peek=, une personne sous la forme ?person=. Rien de malin là-dedans. C’est simplement le constat que le panneau ouvert fait partie de l’endroit où vous êtes, et que l’endroit où vous êtes a sa place dans la barre d’adresse.

Tout le reste découle de cette seule décision, sans effort supplémentaire :

  • Un rafraîchissement le garde. Pas une reconstitution, pas une approximation. La même addition, sur la même liste, à la même position de défilement.

  • Le lien est un vrai lien. Copiez l’adresse, envoyez-la à la personne avec qui vous avez partagé le billet d’avion, et elle ouvre exactement l’addition que vous regardiez. Les règles d’accès ne changent pas — quelqu’un qui n’est pas sur la transaction ne voit toujours rien —, donc pour envoyer une addition à quelqu’un qui n’a pas de compte, il reste le partage public.

  • Retour veut dire retour. Pas « quitter la page ». Le navigateur garde déjà une pile de tout ce que vous avez ouvert ; le bouton Retour la redescend, une addition à la fois, et ne quitte la page qu’une fois la pile vide.

C’est pour ce dernier point que le panneau a aussi son propre bouton Retour, tout au début de son en-tête. Il ne fait rien de plus que le bouton Retour du navigateur. Il est là parce que, sur un ordinateur portable, votre main est sur le pavé tactile et le panneau est à droite, et demander aux gens d’aller jusqu’à la barre du navigateur pour annuler un geste fait dans l’app, c’est une petite impolitesse.

Une transaction ouverte dans le panneau latéral, à côté de la liste Activité

Suivre un fil sans quitter la liste

C’est la quatrième exigence qui est intéressante.

Ouvrez un dîner depuis le fil d’activité. La répartition affiche quatre noms. Cliquez sur l’un d’eux : au lieu de se fermer et de vous emmener ailleurs, le panneau devient cette personne — son solde, les transactions que vous partagez. Cliquez sur l’une d’elles, et le panneau devient cette addition.

Max Keller ouvert dans le panneau latéral, à côté de la liste Personnes

Vous pouvez descendre trois ou quatre étapes le long de ce fil — une addition, quelqu’un dessus, une autre de ses additions — sans que la liste de départ ait bougé. Puis Retour, Retour, Retour, et vous êtes exactement là où vous étiez, avec la réponse à la question qui vous avait fait partir. C’est toute la fonctionnalité. Le reste, ce sont des finitions.

Des finitions qui valent le coup, cela dit. Quand une transaction est ouverte, l’en-tête du panneau porte des flèches précédente et suivante qui parcourent la liste d’où vous l’avez ouverte, dans l’ordre d’affichage. Les touches ↑ et ↓ font la même chose. Passer en revue un mois de dépenses revient à garder une touche enfoncée et à lire, et c’est exactement ce que devrait être une revue. Sur ordinateur, enfin, le bord gauche du panneau se fait glisser, parce que 520 pixels conviennent à un dîner de deux lignes mais pas à un reçu de trente articles — votre largeur est retenue pour la prochaine fois.

Pourquoi ce n’est pas une fenêtre modale

Une modale aurait demandé moins de travail. Nous n’en avons pas voulu, pour deux raisons.

Une modale tue la liste. Assombrie, impossible à faire défiler, impossible à cliquer. Or la liste, c’est le contexte — souvent, ce que vous voulez, c’est comparer l’addition ouverte aux trois qui l’entourent, ou continuer à défiler pour en ouvrir une autre. Ici, pas de voile assombri. La liste en dessous reste vivante, et cliquer dessus ne referme pas brutalement le panneau.

Une modale prend le clavier en otage. Dans une modale, Échap ne peut vouloir dire qu’une chose, et en général c’est « tout jeter ». Dans le panneau, Échap pendant que vous écrivez un commentaire vous fait sortir du champ, et ne ferme le panneau qu’au deuxième appui. Échap dans un champ de filtre de la page derrière ne touche pas du tout au panneau. Ce sont de petites règles, mais elles font toute la différence entre un clavier utile et un clavier dangereux.

Le seul endroit où une modale a raison d’être, c’est le téléphone, où il n’y a pas la place pour deux choses côte à côte. Sur téléphone, le panneau prend donc tout l’écran — et l’adresse indique toujours ce qui est ouvert, si bien qu’un lien envoyé depuis votre téléphone ouvre la même chose sur l’ordinateur de quelqu’un d’autre.

Le voir en action

C’est disponible dès maintenant pour tout le monde, sur l’accueil, dans le fil d’activité, sur Personnes et dans l’historique d’une personne. Cliquez sur n’importe quoi.

Le fonctionnement détaillé est décrit dans ouvrir les transactions et les personnes dans le panneau latéral, et si vous découvrez HiBill, comment fonctionne HiBill vous fait faire le tour complet.

À lire aussi