Conception en blocs

Au fil des ans, l'équipe Blockly a conçu de nombreux blocs et a aidé d'autres personnes à concevoir les leurs. Voici quelques-unes des leçons qu'il a tirées.

Privilégier les blocs de haut niveau

Dans la mesure du possible, une approche de niveau supérieur doit être adoptée, même si elle réduit les performances d'exécution ou la flexibilité. Prenons l'exemple suivant d'expression Apps Script:

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

Avec un mappage 1:1 qui préserve toutes les fonctionnalités potentielles, l'expression ci-dessus serait créée à l'aide de quatre blocs. Cependant, Blockly vise un niveau supérieur et fournit un bloc qui encapsule l'expression entière. L'objectif est d'optimiser pour les 95 %, même si cela rend les 5% restants plus difficiles. Blockly n'a pas vocation à remplacer les langages textuels. Il est destiné à aider les utilisateurs à surmonter la courbe d'apprentissage initiale afin qu'ils puissent utiliser des langages textuels.

Recommandation: Ne convertissez pas aveuglément l'intégralité de votre API en blocs.

Tenir compte des choix d'entrée utilisateur

Trois blocs de répétition montrant différentes manières de saisir un nombre: liste déroulante, champ numérique et saisie de valeur.

Il existe trois façons d'obtenir un paramètre auprès de l'utilisateur. Un menu déroulant est le plus restrictif et convient aux tutoriels et exercices simples. Un champ de saisie offre plus de liberté et est adapté aux activités plus créatives. Une entrée de bloc de valeur (généralement avec un bloc d'ombre) permet de calculer une valeur (par exemple, un générateur de nombres aléatoires) au lieu d'être simplement une valeur statique.

Recommandation: Choisissez une méthode de saisie adaptée à vos utilisateurs.

Utiliser des blocs conditionnels et de boucle distincts

Contre-exemple montrant des blocs "si/alors" et "tant que" dans la même catégorie.

Les blocs les plus difficiles pour les nouveaux utilisateurs sont les conditions et les boucles. De nombreux environnements basés sur des blocs regroupent ces deux blocs dans la même catégorie "Commandes", les deux blocs ayant la même forme et la même couleur. Cela entraîne souvent de la frustration, car les nouveaux utilisateurs confondent les deux blocs. Blockly recommande de déplacer les conditions et les boucles dans des catégories distinctes de "Logique" et de "Boucles", chacune avec une couleur différente. Il est donc clair qu'il s'agit d'idées distinctes qui se comportent différemment, malgré leurs formes similaires.

Recommandation: Séparez les conditions et les boucles.

Gérer un nombre variable d'entrées

Certains blocs peuvent nécessiter un nombre variable d'entrées. Par exemple, un bloc d'addition qui additionne un ensemble arbitraire de nombres, un bloc if/elseif/else avec un ensemble arbitraire de clauses elseif ou un constructeur de liste avec un nombre arbitraire d'éléments initialisés. Il existe plusieurs stratégies, chacune présentant ses avantages et ses inconvénients.

a) La méthode la plus simple consiste à demander à l'utilisateur de composer le bloc à partir de blocs plus petits. Par exemple, vous pouvez ajouter trois nombres en imbriquant deux blocs d'addition à deux nombres. Autre exemple : ne fournir que des blocs if/else et demander à l'utilisateur de les imbriquer pour créer des conditions elseif.

Blocs d'addition imbriqués: 1 + (2 + 3).

L'avantage de cette approche est sa simplicité initiale (à la fois pour l'utilisateur et le développeur). L'inconvénient est que, dans les cas où il existe un grand nombre d'imbrications, le code devient très lourd et difficile à lire et à gérer pour l'utilisateur.

b) Une autre solution consiste à développer dynamiquement le bloc afin qu'il y ait toujours une entrée libre à la fin. De même, le bloc supprime la dernière entrée s'il y a deux entrées libres à la fin. C'est l'approche utilisée par la première version d'App Inventor.

Bloc qui ajoute quatre entrées de valeur, dont la dernière est vide.

Les blocs qui se développaient automatiquement n'étaient pas appréciés par les utilisateurs d'App Inventor pour plusieurs raisons. Premièrement, il y avait toujours une entrée libre et le programme n'était jamais "terminé". Deuxièmement, l'insertion d'un élément au milieu de la pile était frustrante, car elle impliquait de déconnecter tous les éléments sous la modification et de les reconnecter. Toutefois, si l'ordre n'est pas important et que les utilisateurs peuvent accepter des lacunes dans leur programme, il s'agit d'une option très pratique.

c) Pour résoudre le problème de trou, certains développeurs ajoutent des boutons "+" et "-" aux blocs qui ajoutent ou suppriment manuellement des entrées. Open Roberta utilise deux boutons de ce type pour ajouter ou supprimer des entrées en bas. D'autres développeurs ajoutent deux boutons à chaque ligne afin de permettre l'insertion et la suppression au milieu de la pile. D'autres ajoutent deux boutons "Haut/Bas" à chaque ligne afin de pouvoir réorganiser la pile.

Bloc qui ajoute trois entrées de valeur externes et dispose de boutons "Plus" et "Moins" pour ajouter ou supprimer des entrées.

Cette stratégie est un spectre d'options allant de deux boutons par bloc à quatre boutons par ligne. D'un côté, il y a le risque que les utilisateurs ne puissent pas effectuer les actions dont ils ont besoin. De l'autre, l'UI est tellement remplie de boutons qu'elle ressemble au pont du vaisseau spatial Enterprise.

d) L'approche la plus flexible consiste à ajouter une bulle de modificateur au bloc. Il est représenté par un seul bouton qui ouvre une boîte de dialogue de configuration pour ce bloc. Vous pouvez ajouter, supprimer ou réorganiser des éléments à votre guise.

Bloc qui ajoute trois entrées de valeur et dispose d'un modificateur permettant d'ajouter ou de supprimer des entrées de valeur.

L'inconvénient de cette approche est que ses modificateurs ne sont pas intuitifs pour les utilisateurs novices. L'introduction de mutateurs nécessite une forme d'instruction. Les applications basées sur Blockly qui ciblent les jeunes enfants ne doivent pas utiliser de mutators. Une fois maîtrisées, elles sont d'une aide précieuse pour les utilisateurs expérimentés.

Recommandation: Chaque stratégie présente des avantages et des inconvénients. Choisissez celle qui convient le mieux à vos utilisateurs.