Journal Une nouvelle interface graphique pour WBO

25
24
juin
2019

Il y quelques temps, j'ai évoqué ici WBO, un logiciel libre de dessin collaboratif en ligne (dépêche).

Le logiciel a bien évolué depuis l'annonce précédente, avec quelques nouvelles fonctionnalités, la plus importante d'entre elles étant le zoom qui facilite la navigation à l'intérieur du tableau. Mais la nouveauté la plus visible est sans doute la nouvelle interface graphique, qui vient d'être déployée, et dont je suis plutôt fier.

Voilà une capture d'écran de la nouvelle interface:

Capture d'écran de WBO

Et, à titre de comparaison, voilà l'ancienne interface:

image

L'histoire

L'ancienne interface avait un large menu qui couvrait toute la partie gauche de l'écran, et le premier objectif était de récupérer de la place pour le contenu. La première étape a donc été de supprimer tous les termes inutiles dans le menu:

  • Le titre. Inutile d'écrire "Menu" en haut du menu. On comprend bien que c'est un menu!
  • Les sections. Plus de séparation entre les outils de dessin et la sélection de paramètres comme la couleur de dessin.
  • Le nom des outils.

Le dernier point est probablement le plus sensible, l'icône des outils de dessin n'étant pas forcément un très bon indicateur de leur fonctionnalité. J'ai donc décidé de faire apparaître le nom de l'outil lorsque son icône est survolée. Les écrans tactiles n'ont pas de notion de "survoler", j'ai donc implémenté une animation CSS qui agrandit le bouton de l'outil pour afficher son nom lorsqu'il est survolé, puis le rétrécit après quelques instants pour ne pas gêner la visibilité. L'interface est ainsi aussi pratique à utiliser depuis un mobile.

N'hésitez pas à venir tester la nouvelle interface sur l'instance officielle, où à installer le logiciel sur votre propre serveur depuis le dépôt github.

  • # Rien à voir en effet :-)

    Posté par  (site web personnel, Mastodon) . Évalué à 6.

    C'est nettement plus élégant que la première version. Il y a de quoi en être fier.

    Il faudrait envisager une dépêche pour célébrer cette nouvelle interface.

    « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

  • # tout effacer

    Posté par  . Évalué à 3.

    il n'y aurait pas une fonctionalité RAZ, afin d’éviter de laisser dans la nature des tableau de réunion ?

  • # Pas compris

    Posté par  (site web personnel) . Évalué à 3.

    Les écrans tactiles n'ont pas de notion de "survoler", j'ai donc implémenté une animation CSS qui agrandit le bouton de l'outil pour afficher son nom lorsqu'il est survolé

    Visiblement une erreur mais j'ai pas compris. Du coup j'ai été essayer (c'était le but hein ?) et c'est lorsqu'il est sélectionné, jusqu'à ce qu'on clic ailleurs. Ça rend bien.

    Par contre, le dessin de test anonyme est un peu surchargé, il vaudrait peut-être mieux rediriger chaque utilisateur vers un dessin temporaire différent ?

    • [^] # Re: Pas compris

      Posté par  (site web personnel) . Évalué à 2.

      Je n'ai pas été très clair… je voulais dire qu'il y a une animation qui ouvre puis referme le bouton après un certain temps, même si on garde la souris dessus. Cela évite que le bouton reste perpétuellement ouvert sur mobile.

      J'aime personnellement beaucoup l'ambiance du tableau anonyme, et j'y passe moi-même beaucoup de temps à griffonner, parfois avec des inconnus. C'est une chouette expérience, et je ne voudrais pas la supprimer.

      Par contre, il y aurait des optimisations à faire pour charger plus rapidement les gros tableaux.

      • [^] # Re: Pas compris

        Posté par  . Évalué à 2.

        Ce qui pourrait aider, c'est aussi une information visuelle sur le fait que la page est en train de charger. A la première ouverture, avec la quantité de dessins présents, des ralentissements se font sentir. Ca offre une sensation désagréable car on croit que l'affichage est saccadé alors qu'il suffit d'attendre quelques secondes de plus pour avoir un affichage fluide.

        • [^] # Re: Pas compris

          Posté par  (site web personnel) . Évalué à 3.

          C'est effectivement une fonctionnalité utile, et facile à implémenter. Je l'ai donc ajoutée :) Il y a maintenant un message qui s'affiche pour indiquer que le chargement est en cours.

          • [^] # Re: Pas compris

            Posté par  . Évalué à 3.

            C'est génial ! Quelle réactivité ! Quelle efficacité ! Bravo !

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.