Apparence du bloc

L'apparence des blocs fournit des indices importants sur la façon dont ils doivent être utilisés. Voici quelques éléments à prendre en compte lorsque vous stylisez vos propres blocs.

Utiliser des bordures visibles

Dans les années 2000, le style "Aqua" était à la mode et chaque objet à l'écran était décoré avec des surbrillances et des ombres. Dans les années 2010, le style Material Design est devenu à la mode, et chaque objet à l'écran a été simplifié en une forme propre, plate et sans bordure. La plupart des environnements de programmation par blocs comportent des surbrillances et des ombres autour de chaque bloc. Par conséquent, lorsque les concepteurs graphiques d'aujourd'hui voient cela, ils enlèvent invariablement ces décorations obsolètes.

Blocs sans bordures visibles. Il est difficile de voir où se trouvent les limites des blocs.

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

Recommandation: Si vous modifiez l'apparence de Blockly, ne laissez pas les tendances actuelles casser votre application.

Ajouter des flèches de direction

Un bloc avec une flèche circulaire indiquant un virage à droite est dans le sens des aiguilles d'une montre.

Les commentaires des enfants aux États-Unis (mais pas d'autres pays, ce qui est intéressant) ont révélé une confusion généralisée entre la gauche et la droite. Ce problème a été résolu en ajoutant des flèches. Si la direction est relative (par exemple, à un avatar), le style de la flèche est important. Une flèche droite → ou une flèche de virage ↱ est source de confusion lorsque l'avatar est orienté dans la direction opposée. Une flèche circulaire ⟳ est la plus utile, même lorsque l'angle de rotation est inférieur à celui indiqué par la flèche.

Recommandation: Ajoutez des icônes Unicode au texte lorsque cela est possible.

Utiliser différents connecteurs horizontaux et verticaux

Blockly propose deux types de connexions: les formes de puzzle horizontales et les encoches d'empilage verticales. Une bonne interface utilisateur doit s'efforcer de réduire le nombre d'éléments de conception. Par conséquent, de nombreux concepteurs tentent de faire en sorte que les deux types de connexion se ressemblent (comme illustré ci-dessous).

Contre-exemple montrant le même style utilisé pour les connecteurs horizontaux et verticaux.

Cela crée de la confusion chez les nouveaux utilisateurs qui cherchent à faire pivoter des blocs pour qu'ils puissent s'adapter à des connexions incompatibles. Blockly rend les éléments de programmation visuels et tangibles. Il faut donc faire attention à ne pas suggérer par inadvertance des interactions utilisateur qui ne sont pas prises en charge.

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 modifiez l'apparence de Blockly, assurez-vous que les connexions horizontales et verticales sont différentes.

Montrer que les instructions imbriquées peuvent être empilées

Les blocs en forme de "C" comportent invariablement un connecteur sur la partie supérieure intérieure, mais certains environnements comportent également un connecteur sur la partie inférieure intérieure (par exemple, Wonder Workshop), tandis que d'autres ne le font pas (par exemple, Blockly et Scratch). Étant donné que la plupart des blocs d'instructions comportent un connecteur en haut et en bas, certains utilisateurs ne voient pas immédiatement que les instructions peuvent s'insérer dans un "C" qui ne comporte pas de connecteur en bas.

Blocs avec des entrées d'instructions, l'un avec un connecteur en bas et deux sans. Une coche verte indique qu'il est facile de voir qu'un bloc d'instructions s'adapte au bloc avec le connecteur inférieur.

Une fois que les utilisateurs ont compris qu'un bloc d'instructions peut s'insérer dans un "C", ils doivent comprendre qu'ils peuvent également y insérer plusieurs instructions. Certains environnements encapsulent la connexion inférieure de la première instruction en bas de la lettre "C" (par exemple, Wonder Workshop et Scratch), tandis que d'autres laissent un petit espace (par exemple, Blockly). L'imbrication parfaite ne laisse aucun indice indiquant que d'autres blocs peuvent être empilés.

Blocs avec des instructions imbriquées. Le bloc sans connecteur inférieur présente un espace entre l'instruction imbriquée et le bas de l'entrée de l'instruction, ce qui montre qu'il est possible d'ajouter d'autres blocs d'instructions.

Ces deux problèmes interagissent mal entre eux. Si un connecteur inférieur intérieur existe (Wonder Workshop), la connexion de l'instruction initiale est plus évidente, mais au détriment de la possibilité de détecter l'empilement. Si aucun connecteur inférieur interne n'existe (Blockly), la connexion de l'instruction initiale n'est pas évidente, mais l'empilement est visible. L'absence de connecteur inférieur interne et l'imbrication du connecteur inférieur de l'instruction (Scratch) ont été les plus mauvais en termes de visibilité lors des tests avec Blockly.

D'après notre expérience, la connexion de l'énoncé initial est moins difficile pour les utilisateurs que la découverte de l'empilement. Une fois découvert, le premier ne sera jamais oublié, tandis que le second nécessitera un rappel. Blockly a essayé les approches Wonder Workshop et Scratch jusqu'à ce qu'un bug de rendu se produise, ce qui a ajouté un petit écart. Nous avons constaté une amélioration marquée des études utilisateur avec Blockly grâce à ce bug (qui est désormais une "fonctionnalité" dont nous sommes fiers).

Recommandation: Si vous modifiez l'apparence de Blockly, laissez l'UI de superposition existante.