Utilisabilité des applications web : La conception de Bazdig illustrée

D’un coup je me suis rendu compte que la console SQL que j’utilisais n’était pas pratique. J’ai fait quelques recherches, Bechir en a fait aussi et Hassen aussi. Aucun de nous n’a trouvé de console valable. Alors j’ai décidé de relever le défi. J’ai dit a Hassen de me donner deux week-ends; il m’en a fallu trois mais je pense que j’ai remporté le défi. le résultat c’est Bazdig, une console SQL écrite en PHP. Ce qui suit c’est un guide de mes choix conceptuels d’utilisabilité de Bazdig.

pastilles-numerotees-1.png coloration syntaxique. très utile quand elle est bien faite. ce qui est important dans une requête ce sont les noms des tables et des colonnes. j’ai essayé de les colorer et laisser tout le reste en neutre. ca ne marche pas. il y’en a beaucoup trop et donc ca ne sert plus a rien. ce qui marche mieux, c’est de colorer les reperes. c’est a dire : « select », « from » etc… comme ca on sait tout de suite ou sont les noms de tables et de colonnes.

pastilles-numerotees-2.png le gros bouton « OK ». au début je l’avais mis sur toute la longueur de la page, mais je me suis vite aperçu que la plupart des bases de données avaient plus que 10 tables : le « schema browser » dépassait. je l’ai donc remis a la taille du champs texte et c’est mieux comme ça : tu va en bas pour « OK » et a droite pour explorer la base. Le raccourci clavier pour ce bouton c’est « k ». d’ailleurs les 5 boutons ont des raccourcis, glissez la souris dessus et ils vous diront ce que c’est. j’ai utilise la propriété accesskey de HTML, donc ça dépend du Browser. dans Firefox 2 c’est « ALT-SHIFT-k ».

pastilles-numerotees-3.png le « schema browser » est l’élément qui m’a donné le plus du fil a retordre et je n’en suis toujours pas satisfait. j’ai passé plus que 50% du projet sur ce truc. je ne voulais pas le faire au début : l’idéal aurait été un « autocompleter » qui vous termine les noms de tables pendant que vous les écrivez. mais des fois on ne connaît même pas la structure de la base. il fallait qu’il soit toujours disponible et il fallait que la consultation soit la plus rapide possible. j’ai donc choisi le menu accordéon : ça prends pas de place, donc on peut afficher directement les tables (toujours devant les yeux, il n’y a rien de plus rapide) et c’est rapide a naviguer.

pastilles-numerotees-4.png le titre est ici. il n’y a pas de titre a l’intérieur de la page parce que d’après mon expérience, il est superflu dans les applications. il est sensé servir de repère, mais la même fonctionnalité est fournie par la barre de titre. pour la plupart des applications le gain d’espace est plus important.

pastilles-numerotees-5.png quand vous saisissez une requête et que vous appuyez sur « ok » vous atterissez dans le tableau de résultat. ici j’ai exploité au maximum les fonctionnalités du navigateur et j’ai empoché la sauvegarde des rapports et des requêtes sans rien mettre de ma poche. remarquez comment j’ai utilisé la propriété target= »_new » pour faire ouvrir a Firefox un nouvel onglet : maintenant je peux revenir a ma console en tapant CTRL-TAB, en prime je retrouve ma requête comme je l’ai laissée. Cette page ne fait appel a aucun fichier externe, même pas de feuille de style : tout est dans la page. comme ça, quand je sauvegarde la page, j’ai un seul fichier sur mon bureau. Firefox utilise le titre de la page pour fabriquer le nom de fichier a enregistrer; alors j’ai mis comme titre les noms des colonnes séparées par des espaces. comme ça, on n’a pas a changer le nom de fichier quand on enregistre.

pastilles-numerotees-6.png j’ai choisi d’envoyer la requête SQL avec le protocole HTTP GET ce qui a pour effet d’imbriquer la requête dans l’URL. s’il y a un rapport que je dois consulter tous les jours, je n’ai qu’a le sauvegarder sous forme de « bookmark » (CTRL-d) et a chaque fois que je veux le consulter je clique. Bechir m’a dit que l’URL ne serait jamais suffisant pour les grandes requêtes, après quelques tests je peux conclure que c’est suffisant : n’oublions pas que Bazdig est une console, pas un éditeur. c’est très différent. une console est destinée a exécuter une seule requête à la fois. Franchement si tu fais une requête qui dépasse 200 caractères tu as un problème de modèle de données.

pastilles-numerotees-7.png l’historique infini. c’est cette fonctionnalité qui m’a décidé a prendre mon courage a deux mains et faire une console SQL. Quand on accède a l’historique, Bazdig présente les 10 dernières requête. Notez que si vous exécutez la même requête 10 fois, Bazdig ne la présentera qu’une seule fois dans la liste. La requête sous le pointeur de la souris est mise en valeur avec un fond jaune, c’est pratique pour savoir ou on en est, plus pratique que de séparer les requêtes par des lignes. Quand on clique sur une requête elle apparaît dans la console.

pastilles-numerotees-8.png on peut bien sur chercher une requête dans l’historique. il n’y a que dix résultats qui apparaissent, ne cherchez pas un bouton « page suivante » en bas des résultats, il n’y en a pas. Je suis d’accord avec Jesper Rønn-Jensen, il n’y a pas besoin : si les résultats ne vous plaisent pas , affinez votre recherche.

Ce qu’il reste a faire

  • le « schema browser » est rapide mais pas ergonomique pour un sou. c’est un bug connu des menus accordéon : quand tu met le pointeur de la souris sur un bouton et que tu l’active, celui ci change de position. c’est déroutant pour l’utilisateur. ce que je vais essayer c’est changer la position du pointeur (!!) et le remettre sur le bouton. c’est contre toute logique UX mais ça m’amuse de le faire. Finalement le problème est réglé a 80% en rendant le schema browser mobile : il n’est plus affecté par les dimensions de la fenètre, il reste immobile par rapport au pointeur de la souris.
  • ajouter la coloration syntaxique au historique. il faut garder les mêmes repères entre les interfaces. par contre je vais mettre plus en valeur les commentaires dans l’historique. comme ça on peut mettre des titres dans les requêtes. C’est fait.
  • il y a des clics inutiles par ci, par la, qu’il faut enlever. notamment : je ne suis pas arrivé a trouver le moyen de donner le focus a la zone d’édition quand on accède a la console.
  • la console doit se rappeler de votre base de données, même si vous revenez après une semaine. j’ai essayé de le faire en mettant le timeout du cookie a 1semaine, mais ça n’a pas marché. je vais aussi garder l’historique de vos bases de données et permettre le changement de base avec un seul clic.

1 comment so far

  1. Trinoo on

    Il est vrai que travailler avec phpmyAdmin ne donne pas envie de rester trop longtemps sur l’application, vu l’aspect peu esthétique. L’idée est très interessante.
    Travaillant sur Mac, pour moi Cocoa Mysql était vraiment l’interface idéale pour créer et gérer rapidement des bases de données en MySQL. Elle a évolué avec des fonctionnalités plus complexes, et a changé de nom : Sequel-pro.
    Elle a plus de fonctionnalités, mais ça a gaché un peut l’accessibilité qu’avait l’ancienne version… Dommage .
    Je comprends que par console tu veux dire une console Web. Je pense que pour rivaliser avec ces applications Mac, il faut soit utiliser XUL avec FireFox ou bien du Flex.
    Ils est possible d’arriver à faire pareil avec de l’AJAX, mais de mon point de vu, l’évolution et la maintenance de l’application sera plus difficile.
    Il existe déjà un Add-ons sur Firefox comme Client Mysql : MySQL Sidu

    Bon courage !


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :