UI et UX pour petits programmes

Posté le 20-09-2023 par Aliaume Lopez – lecture en 3 minutes (≈ 590 mots)
Partie 1/3 d'une série de posts sur UI and UX for small programs

Cet article est le premier d’une série dont l’objectif est de comparer différentes approches à la création d’interfaces (graphiques ou non) pour des petits programmes.

L’idée a germé lors d’une séance de comptabilité où il était question de retrouver dans un export CSV de mon compte en banque les transactions qui devaient être considérées comme “vacances en groupe” au milieu de plein de dépenses sans aucun rapport. On peut argumenter qu’il est plus simple d’utiliser une application dédiée pour annoter au fur et à mesure les dépenses (il en existe beaucoup). Cependant:

  1. Il faut faire confiance en sa capacité à ajouter (en doublon donc) dans une autre base de données les dépenses au fur et à mesure
  2. Il faut avoir un accès régulier à internet ou une capacité d’utilisation hors ligne.
  3. L’objectif n’est pas de “régulariser” les dépenses entre plusieurs amis, mais bien de savoir combien a été dépensé au total sur un certain poste.
  4. De toute manière la donnée supplémentaire n’existant pas, il faut ajouter l’information externe (vacances ou pas) quelque part.
1.

Notons que cette tâche est assez générique et correspond aussi bien à notre exemple d’annotation de dépenses qu’à la création d’un jeu de données pour faire de l’apprentissage supervisé.

Pour toutes ces raisons, nous allons désormais admettre le besoin suivant : pouvoir annoter facilement un fichier CSV avec un nombre fini de catégories.11

Une première approche … Un tableur

2.

On pense bien sûr à libre office calc…

La manière la plus standard dans le monde pour répondre à la problématique susmentionnée est bien entendu de charger le fichier CSV dans un logiciel de feuille de calcul,22 et d’ajouter une colonne “à la main.” La procédure est alors la suivante

3.

Et ce n’est pas toujours facile !

  1. Ouvrir le fichier CSV.
  2. Sélectionner le bon format de séparateur.
  3. Se rendre compte que les nombres ne sont pas avec le bon format.
  4. Cacher les colonnes inutiles afin que les informations tiennent sur un écran 13 pouces.
  5. Ajouter un en-tête de colonne pour la catégorie.
  6. Parcourir le tableur ligne à ligne.
    1. Pour chaque ligne, essayer de se souvenir de la dépense à partir du nom de la transaction.33
    2. Si la dépense est trop mystérieuse, regarder la date et retrouver le jour de la semaine à partir d’un calendrier.
    3. Si cela reste mystérieux, taper le nom du bénéficiaire dans votre moteur de recherche favori.
    4. Sinon, considérer la dépense comme “personnelle.”
  7. Exporter le fichier en CSV.

Étrangement, ce processus n’est pas si pénible. Mais l’interface est extrêmement compliquée pour une tâche qui semble particulièrement simple et bien définie.

C’était une ruse

Cette longue introduction (sans code) était une ruse pour introduire un problème et une “implémentation de référence” à base d’un logiciel de feuille de calcul qui permet de comparer différentes approches à la création de petits programmes métiers au périmètre extrêmement restreint. Dans les prochains articles, nous verrons comment une approche en ligne de commande avec un script Python trouve ses limites, comment une interface graphique avec Gtk introduit une complexité supplémentaire, mais aussi comment utiliser des technologies “hype” comme React pour répondre à ce problème très simple.

Tout le code écrit se trouvera dans un dépôt public qui servira de carnet de laboratoire pour cette excursion dans la construction de logiciels et d’interfaces “métiers.”


  1. Notons que cette tâche est assez générique et correspond aussi bien à notre exemple d’annotation de dépenses qu’à la création d’un jeu de données pour faire de l’apprentissage supervisé.↩︎

  2. On pense bien sûr à libre office calc…↩︎

  3. Et ce n’est pas toujours facile !↩︎