Corico

Français

English

Français

English

Thème

Interface ​

L'exigence de Romain : simple, mais sans transiger sur la qualité visuelle et esthétique de l'ensemble. Chacune de ses remarques sur l'interface est une décision : elle est notée ici avec sa raison, dans le même commit que le changement.

Principes ​

  • Un seul geste par écran. Chaque écran a une action principale, visible d'emblée : l'enseignant la répète trente fois, une pile de copies à côté de lui.
  • Le papier et l'encre. Un fond papier, une encre bleu nuit pour les actions, et le rouge, couleur de la correction, réservé au micro. Clair ou sombre selon le système, les deux étant soignés.
  • Le vouvoiement. Remarque de Romain : l'interface, le guide et les sous-titres de la vidéo disent « vous », jamais « tu ».
  • « Appareil », pas « ordinateur ». Remarque de Romain : l'outil marche sur un téléphone comme sur un ordinateur, alors l'interface et le guide disent « appareil », et « ordinateur » seulement pour un vrai ordinateur, comme dans « Effacer les données de cet appareil ».
  • Une vraie finition. La police Inter, servie avec le site et jamais par un CDN ; un lecteur maison plutôt que celui du navigateur, différent partout ; la typographie française, avec une espace insécable devant :, ?, ! et ;.
  • La même place d'une étape à l'autre. Les étapes de l'enregistrement gardent la même hauteur, pour que les boutons ne sautent pas sous le doigt.
  • Des mouvements calmes. De brefs fondus entre les étapes, et aucun pour qui demande à son système de réduire les animations.

Décisions ​

  • Le micro montre qu'il entend : un chrono et le niveau de la voix pendant l'enregistrement, et un anneau lent autour du bouton, pour qu'on ne puisse pas oublier un micro ouvert.
  • Réécoute avant de déposer : un mémo n'est envoyé que sur demande.
  • Le QR code seulement sur demande : remarque de Romain, l'afficher après le dépôt encombre la vue pour rien : ce qui compte, c'est la planche d'étiquettes. Un petit lien l'affiche, noir sur blanc dans une tuile blanche, même en thème sombre.
  • N'importe quel ordre, et tout à la fin : remarque de Romain. Un mémo peut être enregistré sans être déposé ; la liste indique ce qui reste à déposer, et un bouton dépose tout.
  • Rien de perdu sur un mauvais clic : remarque de Romain. Un nouvel enregistrement s'écoute à côté de l'ancien, qui ne part qu'avec « Valider et remplacer l'ancien enregistrement ».
  • Publier au même endroit : remarque de Romain. Refaire un mémo se termine par « Publier au même endroit », avec dessous, en petit et en gris, « Le QR code reste le même ».
  • Pas de déconnexion : remarque de Romain, il n'y a aucune connexion. On relie son Nextcloud une fois. Un bouton discret efface les données de cet appareil, après une confirmation qui dit ce qui reste et ce qui se perd.
  • L'avertissement sur les liens est toujours visible, jamais caché derrière un clic, partout où un QR code s'affiche et sur la page qui génère le PDF (confidentialité).
  • Un rappel au bon moment : l'écran d'enregistrement rappelle de ne pas nommer l'élève, car les mémos ne sont pas chiffrés sur Nextcloud.
  • Application installable, à jour toute seule, comme Kolekti : demande de Romain. La page se recharge d'elle-même quand une nouvelle version est prête, sauf pendant un enregistrement, un dépôt, une écoute, un formulaire commencé ou une association : un bandeau dit alors qu'une nouvelle version est prête, qu'elle se chargera une fois le travail terminé, et propose Recharger tout de suite.
  • Un seul cadre autour d'un champ : remarque de Romain, le contour de focus au clavier s'ajoutait au cadre du champ, ce qui gênait. Il reste sur les boutons et les liens.
  • Reprendre une liste, ajouter un élève : remarque de Romain. Un élève ajouté à un devoir rejoint les suivants, pas les passés, pour ne pas fausser leur décompte.
  • Une roue en face du nom pendant un dépôt : remarque de Romain, c'est plus explicite qu'un compteur seul.
  • L'aide, la langue et le thème dans un seul menu : demande de Romain, trois boutons feraient beaucoup dans un en-tête qui doit rester calme, pour des choses dont on se sert rarement. Un menu en haut à droite de chaque écran, à trois traits plutôt que ⋮, réservé à ce qu'on peut faire d'un devoir ou d'une classe. L'aide vient en dernier, comme d'habitude, et ouvre le guide dans un nouvel onglet, pour qu'un formulaire commencé ou un enregistrement reste tel quel. L'autre langue est nommée dans cette langue. Tant qu'on ne les a pas choisis, le thème est celui du système et la langue celle du navigateur.
  • Le nom de l'élève sur l'étiquette : remarque de Romain, qui privilégie le 35 × 35. Il indique sur quelle copie coller, et aucune planche n'a à garder de place pour lui. Sur le 35 × 35, demande de Romain une fois ses planches reçues : un grand QR code et le nom sur une petite ligne, jamais deux, prénom d'abord, centré sous le code ; le nom n'est coupé par « … » que là où il reste 1,5 mm d'un côté.
  • Un QR code sans traits : remarque de Romain, les traits entre les carrés gênaient l'œil. Il est dessiné d'une seule forme, à l'écran comme dans le PDF, comme les marqueurs de Kolekti.
  • Corriger et retirer, à l'écart : une demande de Romain. Un menu ⋮ en haut d'un devoir ou d'une classe, jamais sur les écrans d'enregistrement : le geste principal reste seul. Toute suppression dit d'abord ce qui part et ce qui reste.
  • Une planche entamée, une étiquette de nouveau : une demande de Romain, une classe remplit rarement une planche. La première étiquette libre se touche sur un dessin de la planche, et les étiquettes à imprimer se cochent, les deux repliés par défaut.
  • Une limite s'explique : une demande de Romain. Sur une limite du relais, la page dit quoi faire plutôt que de donner un code d'erreur.
  • Ajouter, fusionner, couper, dans la logique de la page : une demande de Romain. Un enregistrement ajouté s'écoute à côté de l'autre, comme un nouveau l'a toujours été ; la fusion vient en premier quand elle a été demandée. La coupe se fait avec deux poignées sur un dessin du son, le passage en rouge, comme le micro. Rien ne change avant « Garder cette version ».
  • Un appareil perdu, en trois étapes : une demande de Romain. Un lien discret sur l'accueil mène à une page qui dit quoi faire dans l'ordre, et qui est honnête sur ce qui ne se reprend pas.
  • Imprimer avant de corriger, proposé là où l'on imprime : une demande de Romain. La page des étiquettes propose de préparer les QR codes de ceux qui n'en ont pas, et dit ce que l'élève entend d'ici là. La liste continue de ne compter que les vrais mémos, avec un discret « QR code prêt », pour que rien n'ait l'air fait.
  • Accompagner le choix d'un seul QR code pour l'année : une demande de Romain, qui veut que l'enseignant sache ce que ça coûte. Le choisir ouvre ce que ça apporte, ce que ça coûte et que faire si un QR code est volé, avec une case à cocher ; annuler laisse les choses en l'état. La page de la classe et celle de l'élève continuent ensuite de dire que faire d'un QR code volé, et en créer un nouveau est proposé sur place, avec son étiquette.
  • Scanner le QR code de Nextcloud sur un téléphone : une remarque de Romain, saisir un long mot de passe sur un téléphone est pénible. Le bouton n'apparaît que sur un écran tactile, sur l'écran qui relie Nextcloud ; la caméra n'est demandée qu'en le touchant, et un code d'un autre serveur est refusé.
  • Dire ce que c'est avant de demander quoi que ce soit : remarque de Romain, s'ouvrir sur une demande d'identifiant était abrupt. Le premier écran dit à qui s'adresse l'outil, ce qu'il fait et où vont les enregistrements, pour qui n'en sait rien, en expliquant ses mots et sans fixer ni la longueur ni la nature du message, avec un lien vers le guide et un bouton Commencer ; les identifiants viennent ensuite.
  • Ni longueur ni genre de message imposés : remarque de Romain, un mémo peut être un conseil ou un commentaire complet, et ne remplace rien forcément : aucun texte ne dit « quelques phrases » ni « court ».
  • Une liste importée ne montre que les noms : demande de Romain, un export Pronote a beaucoup de colonnes. L'aide du champ dit qu'il est accepté ; le champ montre les noms trouvés, à relire, et jamais le reste du fichier.
  • Où trouver les identifiants, sur demande : remarque de Romain, un chemin à suivre écrit au-dessus du formulaire se lisait mal. Un bouton, « Où trouver mes identifiants Nextcloud ? », ouvre les étapes dans une fenêtre, par-dessus le formulaire, pour que ce qui est tapé reste, avec un lien vers le guide.
  • Jamais le mot de passe de l'ENT : demande de Romain. Un avertissement toujours visible au-dessus des champs dit de ne pas saisir l'identifiant et le mot de passe de l'ENT, et le message de refus le redit, car c'est l'erreur la plus probable.
  • Écouter dans l'outil : remarque de Romain, être envoyé sur Nextcloud pour écouter était désagréable. Écouter fait entendre le mémo ici ; Tester le lien, près du QR code, l'ouvre comme l'élève.
  • Un mémo déposé, sans trop de boutons : remarque de Romain, la page en avait trop. Un gros bouton rond pour écouter, le son récupéré dans Nextcloud seulement à l'appui, puis son lecteur ; le QR code en bouton avec un œil, barré tant qu'il est masqué ; refaire, ajouter et couper réunis sous Modifier.
  • Supprimer un mémo : question de Romain, ce n'était pas possible. Supprimer ce mémo, en dernier sous Modifier, en rouge, après une confirmation. Supprimer ne casse jamais un QR code imprimé (Romain) : le mémo redevient deux notes de musique, comme avant l'enregistrement, sur le même fichier et le même lien ; seul un mémo privé, sans lien, perd son fichier.
  • Les enregistrements non déposés, vus tout de suite : demande de Romain, c'est l'information importante. Sur l'accueil, « 2 à déposer » sur le devoir ; sur sa page, un nuage avec une flèche vers le haut, orange, après son titre, le micro restant devant les élèves ; le même nuage sur Déposer les 2 mémos.
  • D'un élève à l'autre : demande de Romain, pour réécouter les mémos un par un sans repasser par la liste. Des flèches en haut de la page d'un élève, précédent et suivant dans l'ordre de la liste ; la flèche de gauche ramène à la liste.
  • Le travail des autres appareils sans recharger : remarque de Romain. La sauvegarde est regardée chaque minute tant que l'outil est affiché : ce qu'un autre appareil a fait est proposé, « Un autre appareil a modifié vos données », et n'est pris qu'avec Récupérer, jamais sans demander ; les enregistrements non déposés restent tels quels. Un petit ⟳ à côté de l'état de la sauvegarde récupère aussitôt.
  • L'état de la sauvegarde ne fait jamais bouger la carte : remarque de Romain, la carte sautait à chaque changement de la ligne en dessous. Cette ligne garde toujours sa place, haute de deux lignes, même vide ou repliée sur un téléphone.
  • Supprimer, dit sans les deux notes : remarque de Romain, « deux notes » prêtait à confusion (une note, c'est aussi une note sur la copie) : la confirmation dit « Le mémo est effacé, mais son QR code reste valable : il attend un nouveau mémo. »
  • Ce qu'attend un QR code prêt, dit simplement : remarque de Romain, « ce mémo arrivera derrière » n'était pas explicite : « il fera entendre ce mémo dès son dépôt ».
  • Le message d'un autre appareil, un bandeau teinté : choix de Romain parmi quatre, vus en captures réelles. En bas de l'écran, teinté de bleu comme les encadrés des pages, aux couleurs du thème, plutôt que le bandeau inversé de Vuetify.
  • Des infobulles là où elles disent quelque chose, en quelques mots : demande de Romain, qui les trouvait trop longues : l'essentiel, pas tout (« Vérifiez votre calage par transparence »). Sur les boutons qui ne sont qu'une icône (menu, ⋮, flèches, ⟳, l'œil du mot de passe, le crayon et la croix d'un élève) et sur les états d'une copie (à déposer, à valider, QR code prêt, en ligne), jamais sur un bouton dont les mots le disent déjà ; sur la page des étiquettes, ce que mesure chaque réglage et comment se servir de la feuille de calage. Jamais par-dessus le menu qu'un bouton a ouvert. Aux couleurs du thème, comme le bandeau des autres appareils, pas celles du navigateur ; seulement là où un pointeur survole, un appui les laissant ouvertes sur un écran tactile.
  • Pas d'infobulle après un appui, même sur un ordinateur à écran tactile : remarque de Romain, sur un PC tactile un appui sur Retour laissait l'infobulle sur le bouton de la carte suivante. Les infobulles ne s'ouvrent que si la souris est ce qui a servi en dernier ; elle les ramène dès qu'elle bouge.
  • Un appareil personnel ou partagé, et un mot de passe local : une inquiétude de Romain, un enseignant qui laisse son accès Nextcloud sur un navigateur partagé. Demandé à la connexion et à l'association, sans réponse donnée d'avance : Personnel, ou Partagé, comme en salle des profs, où rien n'est écrit sur l'appareil (pas même le stockage de session, que « restaurer la session précédente » rend) et où 30 minutes sans activité font tout oublier, sauf s'il reste des enregistrements à déposer. Sur un appareil personnel, un mot de passe local facultatif de 8 caractères au moins, demandé à l'ouverture et après 30 minutes ; oublié, l'appareil est effacé et associé de nouveau. Le tout dans Cet appareil, au menu, avec comment révoquer l'accès dans Nextcloud. Plus de formulaire pour les mots de passe : un navigateur propose de retenir ce qu'un formulaire envoie.
  • Ce qu'efface la perte de la clé, dit à chaque fois : une demande de Romain, oublier le mot de passe local effaçait tout sans le dire. Corico ne tient pas la liste des appareils associés : partout où la clé disparaît (mot de passe oublié, effacer cet appareil, appareil partagé), un avertissement orange dit que si aucun autre appareil n'est associé au compte, tout est perdu pour de bon : devoirs, listes de classe, liens entre élèves et mémos ; les mémos déposés et les QR codes imprimés restent. Pas lors d'une association : un autre appareil a la clé.
  • Un seul ordre sur tous les appareils : remarque de Romain, les devoirs venaient dans un autre ordre sur le téléphone. Le plus récent en haut, selon sa création, sur tous les appareils ; ceux créés avant que la date soit gardée, par titre.
  • Un seul titre par devoir dans une classe : remarque de Romain, deux devoirs du même nom ne se distinguaient plus. Créer ou renommer un devoir le refuse, en disant pourquoi.
  • Les mémos rangés en dossiers : demande de Romain, les mémos côte à côte dans un seul dossier étaient difficiles à retrouver. Un dossier par classe et, dedans, un par devoir, à leur nom ; renommer déplace le dossier ; les mémos déjà déposés y sont rangés. Deux classes ne peuvent pas porter le même nom.
  • Le même écart entre tous les boutons de l'accueil : remarque de Romain, sur un téléphone Installer l'application touchait Associer un autre appareil. Chaque bouton de l'accueil est à 8 px du suivant, celui d'installation aussi.
  • Rien au-delà du bord sur un téléphone : remarque de Romain, avec un grand texte l'ordre de la fusion et les boutons de connexion dépassaient. Un bouton pleine largeur passe sur deux lignes s'il le faut ; les deux choix de l'ordre de la fusion prennent chacun la moitié de la largeur.
  • Le code d'association se met en forme tout seul : demande de Romain. Une seule case, en majuscules, le tiret ajouté de lui-même après le quatrième caractère.
  • Le nom : remarque de Romain, le nom provisoire ne plaisait pas. Corico, « corriger des copies » et le « cocorico » du coq, la voix de l'enseignant qui corrige, ludique exprès ; le slogan reste « La correction qui parle ». Les raisons, les noms écartés et les autres usages du nom : Nom et identité visuelle.
  • Le logo : choix de Romain parmi trois. Un coq qui parle, des ondes sonores sortant du bec, posé sur une copie d'élève, en couleur ; pour l'onglet et l'application installée, le coq seul, encore reconnaissable à 16 px. Plutôt grand dans l'en-tête, 52 px dans l'application et 44 px dans la documentation (Romain) : plus petit, on voyait mal la copie. Jamais à côté du QR code sur les copies. Le nom à côté en Fredoka, ronde et amicale comme le coq, servie par la page elle-même (Nom et identité visuelle).