Blocs personnalisés: bonnes pratiques

Au fil des ans, les équipes Blockly et Blockly Games ont appris de nombreuses leçons applicables aux développeurs d'applications basées sur Blockly. Vous trouverez ci-dessous un ensemble d'erreurs que nous avons commises ou des erreurs couramment commises par d'autres.

Il s'agit de leçons générales que nous avons apprises à l'aide du style visuel de Blockly. Il est possible qu'elles ne s'appliquent pas à tous les cas d'utilisation ou à tous les conceptions. Il existe peut-être d'autres solutions. Il ne s'agit pas non plus d'une liste exhaustive des problèmes que les utilisateurs peuvent rencontrer et de la façon de les éviter. Chaque cas est un peu différent et peut avoir ses propres compromis.

1. Style de la bordure

Dans les années 2000, l'apparence "Aqua" était stylisée, et chaque objet à l'écran était décoré de surbrillances et d'ombres. Dans les années 2010, l 'apparence de Material Design est stylisée et chaque objet à l'écran a été simplifié, avec une forme propre, plate et sans bordure. La plupart des environnements de programmation de blocs comportent des tons clairs et des ombres autour de chaque bloc. Ainsi, lorsque les graphistes d'aujourd'hui les voient, ils suppriment invariablement ces décorations obsolètes.

Comme le montre l'exemple ci-dessus composé de cinq blocs (issu de scriptr.io), ces "décorations obsolètes" sont essentielles pour distinguer des blocs connectés de même couleur.

Recommandation: Si vous remasquez Blockly, ne laissez pas la mode du moment abîmer votre application.

2. Imbriquer des sous-piles

Les blocs en C ont invariablement un connecteur en haut, mais certains environnements ont également un connecteur à l'intérieur du dessous (par exemple, Wonder Workshop), tandis que d'autres n'en ont pas (comme Blockly et Scratch). Étant donné que la plupart des blocs d'instructions ont un connecteur supérieur et inférieur, certains utilisateurs ne voient pas immédiatement que les instructions s'inséreront dans un "C" sans connecteur inférieur.

Une fois que les utilisateurs ont compris qu'un bloc d'instruction s'intègre dans un "C", ils doivent déterminer que d'autres instructions conviennent également. Certains environnements imbriquent la connexion inférieure de la première instruction dans la partie inférieure du "C" (par exemple, Wonder Workshop et Scratch), tandis que d'autres laissent un petit espace blanc (par exemple, Blockly). Une imbrication confortable ne laisse pas supposer à l'utilisateur qu'il est possible d'empiler davantage de blocs.

Ces deux problèmes interagissent mal l'un avec l'autre. S'il existe un connecteur interne inférieur (atelier Wonder), la connexion de l'instruction initiale est rendue plus évidente, mais au détriment de la possibilité de découvrir l'empilement. S'il n'existe aucun connecteur interne (Blockly), la connexion de l'instruction initiale n'est pas évidente, mais l'empilement est visible. L'absence de connecteur inférieur et l'imbrication du connecteur inférieur de l'instruction (Scratch) ont été les moins performants en termes de visibilité lors des tests avec Blockly.

D'après notre expérience, la connexion de l'énoncé initial représentait moins de défi pour les utilisateurs que la découverte de l'empilement. Une fois découvertes, la première n'est jamais oubliée, la seconde a besoin d'une invite. Blockly a essayé les approches Wonder Workshop et Scratch, jusqu'à ce qu'un bug de rendu s'est produit un jour, ce qui a ajouté un petit fossé. Nous avons constaté une nette amélioration des études utilisateur avec Blockly en raison de ce bug (désormais une "fonctionnalité" dont nous sommes fiers).

Recommandation: Si vous modifiez Blockly, quittez l'UI d'empilement existante.

3. Connexions symétriques

Blockly propose deux types de connexion différents: les formes horizontales des puzzles et les encoches verticales. Une bonne interface utilisateur doit s'efforcer de minimiser le nombre d'éléments de conception. Par conséquent, de nombreux concepteurs essaient de faire en sorte que les deux types de connexion soient identiques (comme illustré ci-dessous).

Cela crée de la confusion chez les nouveaux utilisateurs qui recherchent des moyens de rotation des blocs afin qu'ils puissent entrer dans des connexions incompatibles. Blockly rend les éléments de programmation visuels et tangibles. Il faut donc veiller à ne pas suggérer par erreur des interactions utilisateur qui ne sont pas compatibles.

Par conséquent, Blockly utilise une forme de puzzle bien ajustée pour les connexions de valeurs et une encoche d'alignement visuellement distincte pour l'empilement d'instructions.

Recommandation: Si vous redimensionnez Blockly, assurez-vous que les connexions horizontales et verticales sont différentes.

4. Noms des variables et des fonctions

Les programmeurs débutants ne s'attendent pas à ce que location_X et location_x soient des variables différentes. Par conséquent, Blockly suit l'exemple des méthodes BASIC et HTML en rendant les variables et les fonctions non sensibles à la casse. Scratch utilise une approche plus subtile (comme illustré à droite) et est sensible à la casse pour les noms de variables, mais pas pour les vérifications d'égalité.

En outre, Blockly n'exige pas que les variables et les fonctions soient conformes au schéma [_A-Za-z][_A-Za-z0-9]* classique. Si l'on veut nommer une variable List of zip codes ou רשימת מיקודים, ce qui convient parfaitement.

Recommandation: Ignorez la casse et autorisez tous les noms.

5. Variables globales

Les programmeurs débutants ont également des difficultés à comprendre la portée. Par conséquent, Blockly suit l'exemple de Scratch en rendant toutes les variables globales. Le seul inconvénient des variables globales est que la récursion est plus délicate (il faut transférer et insérer des variables dans une liste), mais cette technique de programmation dépasse le cadre des utilisateurs cibles de Blockly.

Recommandation: Le champ d'application n'est pas pris en charge, laissez-le pour plus tard.

6. Instructions

Blockly Games est spécialement conçu pour s'auto-enseigner. Aucun enseignant ni plan de cours ne sont nécessaires. Pour ce faire, la première version de Blockly Games comportait des instructions à chaque niveau. La plupart des élèves ne les liraient pas. Nous les avons réduits à une seule phrase, augmenté la taille de la police et mis en surbrillance dans une bulle jaune. La plupart des élèves ne les liraient pas. Nous avons créé des pop-ups modals avec les instructions. La plupart des élèves fermaient instinctivement les fenêtres pop-up sans les lire, puis se perdaient.

Enfin, nous avons créé des fenêtres pop-up qui ne peuvent pas être fermées. Ils sont programmés pour surveiller les actions de l'élève et ne se ferment que lorsqu'il a effectué l'action requise. Ces pop-ups contextuels sont difficiles à programmer, mais assez efficaces. Il était également important qu'ils se trouvent dans le champ de vision sans interférer avec l'espace de travail.

Recommandation: Les instructions doivent être courtes et persistantes, mais pas désagréables.

7. Propriété du code

Les exercices conçus pour enseigner un concept spécifique fournissent souvent des solutions partielles que l'élève doit modifier pour obtenir l'effet souhaité. Pour ce faire, une classe de blocs non modifiables, non déplaçables et non suppressibles a été créée dans Blockly. Toutefois, les élèves détestaient ces exercices à compléter. Ils n'ont aucun sentiment d'appropriation sur la solution.

Concevoir des exercices de forme libre qui enseignent les mêmes concepts est plus difficile. Une technique qui a fait ses preuves consiste à utiliser la solution de l'élève pour un exercice comme point de départ du prochain exercice.

Recommandation: N'écrivez pas de code à la place de l'utilisateur.

8. Mise en page de l'espace de travail

Il existe deux façons raisonnables de mettre en page un écran de gauche à droite. Par exemple, vous pouvez commencer par la barre d'outils à gauche, l'espace de travail au milieu et la visualisation de la sortie à droite. Cette mise en page est utilisée par la version 1 de Scratch et Made with Code.

L'autre méthode commence par la visualisation de la sortie à gauche, la barre d'outils au milieu et l'espace de travail à droite. Cette mise en page est utilisée par la version 2 de Scratch, ainsi que par la plupart des applications Blockly.

Dans les deux cas, l'espace de travail doit s'agrandir pour occuper la taille d'écran disponible, car les utilisateurs ont besoin d'autant d'espace que possible pour programmer. Comme le montrent les captures d'écran ci-dessus, la première mise en page ne fonctionne pas correctement sur les grands écrans, car le code de l'utilisateur et la visualisation de la sortie sont séparés. La deuxième mise en page permet d'ajouter de l'espace pour des programmes plus volumineux, tout en conservant les trois sections proches les unes des autres.

Il est également logique que les utilisateurs examinent d'abord le problème qu'ils tentent de résoudre, puis regardent les outils fournis, puis commencent à programmer.

Bien sûr, l'ordre complet doit être inversé pour les traductions en arabe et en hébreu.

Dans certains cas, par exemple lorsque vous utilisez un petit nombre de blocs simples, il peut être judicieux de placer la boîte à outils au-dessus ou en dessous de l'espace de travail. Blockly accepte le défilement horizontal dans la boîte à outils pour ces cas, mais il doit être utilisé avec précaution.

Recommandation: Placez la visualisation du programme à côté de la barre d'outils.

9. Quitter la stratégie

La programmation basée sur des blocs constitue souvent un point de départ. Dans le contexte de l'enseignement de la programmation informatique, il s'agit d'un mécanisme de passerelle qui rend les élèves dépendants, avant de les amener à des tâches plus difficiles. La durée de cette période de programmation par blocs pour les élèves fait l'objet de débats passionnés, mais si votre objectif est d'enseigner la programmation, elle doit être temporaire.

De ce fait, les environnements de programmation par blocs utilisés pour l'enseignement doivent avoir une rampe de sortie adaptée à leurs élèves. Blockly Games dispose de quatre stratégies:

  1. Tout le texte des blocs (par exemple, "if", "while") est en minuscules pour correspondre aux langages de programmation textuels.
  2. La version JavaScript du code de l'élève s'affiche toujours après chaque niveau pour accroître son niveau de connaissance.
  3. Dans l'avant-dernier jeu, le texte du bloc est remplacé par du code JavaScript réel (comme indiqué à droite). À ce stade, l'étudiant programme en JavaScript.
  4. Dans le jeu ultime, l'éditeur de blocs est remplacé par un éditeur de texte.

Les environnements de programmation par blocs utilisés pour enseigner la programmation doivent disposer d'un plan concret pour l'obtention des diplômes de leurs élèves. Une stratégie de sortie solide permet également de calmer ceux qui pensent que la programmation par blocs n'est pas une "vraie programmation".

Recommandation: Tenez compte des objectifs finaux de l'utilisateur et concevez-le de manière appropriée.