Bonjour ,

Le serveur de compilation étant dans un état assez avancé, et n'ayant rien programme de graphique depuis ... très longtemps , je me suis laissé réfléchir à Logram Assistant, le programme qui affichera l'aide de Logram, mais également beaucoup plus.

Logram Assistant a une histoire assez longue. Depuis plusieurs années, avant que Logram n'apparaissait aux yeux de tous, j'avais déjà dans l'idée de guider l'utilisateur dès le premier démarrage.

La première version de ce programme fus un simple duo convertisseur/afficheur. Le premier converti un fichier XML en un fichier HTML, le second utilise KHTML pour l'afficher.

Le rendu était assez horrible, plein de fonctionnalités manquaient, ce n'était pas beau.

Ensuite, vers septembre, est arrivé la deuxième version d'assistant, se présentant comme une boîte de dialogue Qt. Cette version avait plein de fonctionnalités, était assez simple, efficace, agréable à utiliser et à coder, mais trop «classique», et d'apparence un peu chargée pour l'utilisateur :

J'ai alors mis à plat un cahier des charges de ce que Logram Assistant devait être :

• Il doit être beau et en jeter. C'est entièrement subjectif et stupide, mais l'utilisateur qui fait «Waaaaahhh» devant Logram au premier démarrage supportera un «Ooooooh» avant de l'abandonner. Un bel assistant permet d'avoir un petit bug quelque-part, mais de garder l'utilisateur. Microsoft a parfaitement compris ça «Ouaaaah les effets de transparence, Waaaaah la nouvelle barre des tâches, Waaaaah le logo d'Internet Explorer, Waaaah le thème de Windows Media Player, Oooooohhh le prix exhorbitant, Oooooh que c'est lent sur un PC un peu léger, Oooooooh il faut acheter MS Office séparément pour savoir taper des lettres, etc, mais bon, j'achète !»
• La création de pages de documentation doit être facile, car plus c'est facile, plus il y en aura
• La gestion des traductions doit être parfaite.
• La navigation doit être aisée
• Associé au 1: utilisation des dernières fonctionnalités de Qt (Qt Animation Framework), pour montrer que ce n'est pas réservé au mobile

Une source d'inspiration a été le souvenir du la Visite Guidée Windows XP, qui était en Flash, mais assez bien faite.

Logram assistant devra en avoir les avantages sans les inconvénients.

J'ai donc pris mon courage a deux mains, et commencé à réfléchir. J'ai commencé par l'interface, car une belle interface motive à réfléchir au reste. Je m'arme donc d'Inkscape, et voici ce qui en ressort quelques heures plus tard :

Cette première image montre la page d'accueil de Logram Assistant, avec les fameuses trois parties, permettant à l'utilisateur de commencer quelques soient ses connaissances.

La difficulté du design est d'arriver à faire en sorte que ce soit assez clean pour ne pas gêner la lecture, et en même temps avec un effet «Wow» suffisant.

Quand Assistant s'ouvrira, le texte des entrées apparaîtra en fondu rapidement, tandis que les images arriveront de la droite dans un effet «Je glisse sur un plateau rond», avec simulation de la 3D par un mouvement parabolique (vous verrez quand ce sera codé ).

Tous les éléments de «l'user-friendlyness» sont là. De grosses icônes captent le regard des paresseux qui ne veulent pas lire, et permet de facilement savoir de quoi on va parler (c'est le but d'une icône quoi ). Le texte en dessous, en plus du titre, auparavant placé sur le bouton sans explications, permet de savoir avec précision ce qu'on va apprendre.

C'est la règle d'or d'Assistant 3 : on écrit le minimum pour en dire le plus possible. Tous les lecteurs ne savent pas spécialement lire beaucoup de texte. Il faut dire tout ce qu'on a à dire avec des mots simples. De plus, ça facilite le travail des traducteurs .

Cette interface est donc simple et suffisamment recherchée, avec un potentiel d'animations subtiles suffisant. C'est un simple menu, mais présenté joliment.

Voici la suite :

Ici, on a toujours les icônes, mais plus petites, car il faut de la place, et le texte prend plus d'importance. L'utilisateur a cliqué, il s'est décidé à apprendre, il veut en savoir plus.

On lui présente donc les sous-catégories. Ici, l'animation, toujours subtile et dans le but d'adoucir le tout, est facilement présente. Un fondu des textes et de la barre verticale blanche, ainsi que l'arrivée des images par je-ne-sais-où (j'ai pas encore réfléchi à ça ).

À nouveau, un simple clic permet de choisir ce qu'on va lire. Un petit fil d'ariane, avec des icônes, permet de savoir où on se trouve.

La page contient l'information, et doit être simplifiée pour faciliter la lecture. Ici, le texte est un peu petit, difficilement lisible sur de petits écrans. Il sera agrandi.

Le contenu de la page est mis bien en valeur par cette forme blanche un peu spéciale. Se trouve sur la gauche le titre de la page et une introduction.

Ainsi, le lecteur pressé n'a pas à survoler la page en risquant de manquer des choses. Il lit l'introduction, voit si ça l'intéresse, et voilà.

Côté animation, la transition entre un menu et une page bougera l'icône de la page vers l'endroit où elle se trouve ici, donnant une belle impression de continuité. Le reste disparaîtra en fondu, la zone blanche se transformera (je dois encore trouver comment faire, mais en jouant avec des QRegion, ça devrait être possible), le texte apparaîtra comme en glissant (il tombera du haut de la page).

Cette fois-ci, le scroll sera permis. J'hésite encore entre un bête scroll plat, pas très joli, ou un système plus poussé permettant d'avancer d'un paragraphe dans le texte.

Réalisation

Tout d'abord, je ne sais pas si cette interface vous plait, mais si c'est le cas, je compte en faire une bibliothèque pour qu'elle soit utilsée dans Logram Assistant, mais également d'autres programmes de «prise en main de l'utilisateur», comme l'installateur et l'utilitaire permettant d'installer/supprimer des groupes de programmes (OpenOffice.org, les applis KOffice, choisir son navigateur web, etc).

Ensuite, ça utilisera normalement uniquement Qt, donc pas de dépendance à KDE et bonne intégration dans Logram DE.

Côté Assistant de la chose, les pages seront des fichiers XML contenant les méta-informations (icône, intro, menu), et également le texte sous forme d'éléments.

Ainsi, il sera facile de mettre du texte (avec formatage HTML que support le QGraphicsView, qui sera utilisé), d'insérer des images, ainsi que des vidéos utilisant Phonon, ou encore des boutons lançant des commandes (lancement d'applis par exemple), etc.

Un peu de QtScript serait également possible pour scripter les pages, à la manière du Javascript, et fournissant alors un contenu plus dynamique (mais je ne vois pas encore l'utilité).

Voilà, j'attends vos commentaires