ブロックの外観は、ブロックの使用方法に関する重要な手がかりとなります。独自のブロックにスタイルを設定する際には、次の点を考慮してください。
枠線を表示する
2000 年代は「アクア」スタイルが流行し、画面上のすべてのオブジェクトがハイライトとシャドウで装飾されていました。2010 年代には「マテリアル デザイン」のスタイルが流行し、画面上のすべてのオブジェクトが、境界のないすっきりとしたフラットな形状に簡素化されました。ほとんどのブロック プログラミング環境では、各ブロックの周囲にハイライトとシャドウが設定されています。そのため、今日のグラフィック デザイナーは、これらの時代遅れの装飾を必ず削除します。
上記の 5 つのブロックの例（scriptr.io から）に示すように、これらの「古い装飾」は、同じ色の接続されたブロックを区別するために不可欠です。
推奨: Blockly をリスキニングする場合は、最新の流行にアプリが対応しなくなることのないようにしてください。
方向矢印を追加する
米国の子どもたち（他の国ではそうではないのが興味深い）からのフィードバックでは、左右の区別が混乱していることが明らかになりました。この問題は、矢印を追加することで解決されました。方向が相対的なもの（アバターなど）の場合は、矢印のスタイルが重要になります。アバターが反対方向を向いている場合、→ の直進矢印や↱ の右折矢印は混乱を招きます。回転角度が矢印が示す角度よりも小さい場合でも、円形の矢印 ⟳ が最も役立ちます。
推奨: 可能な場合は、テキストに Unicode アイコンを追加します。
水平方向と垂直方向で異なるコネクタを使用する
Blockly には、水平方向のパズル形状と垂直方向の積み重ねノッチの 2 種類の接続タイプがあります。優れたユーザー インターフェースでは、デザイン要素の数を最小限に抑える必要があります。そのため、多くのデザイナーは、両方の接続タイプを同じように見せようとします（下記を参照）。
その結果、互換性のない接続にブロックを合わせるためにブロックを回転する方法を求めて、新規ユーザーが混乱することになります。Blockly では、プログラミング要素が視覚的かつ具体的に表示されるため、サポートされていないユーザー操作を誤って提案しないように注意する必要があります。
そのため、Blockly では、値の接続にぴったりと合うパズルの形状を使用し、ステートメントの積み重ねには視覚的に明確な調整ノッチを使用しています。
推奨事項: Blockly をリスキニングする場合は、水平接続と垂直接続が異なるようにしてください。
ネストされたステートメントを積み重ねることができることを示す
「C」字型のブロックには必ず内部上部にコネクタがありますが、内部下部にもコネクタがある環境（Wonder Workshop など）もあれば、ない環境（Blockly や Scratch など）もあります。ほとんどのステートメント ブロックには上部と下部のコネクタがあるため、下部コネクタのない「C」の中にステートメントが収まることをすぐに理解できないユーザーもいます。
1 つのステートメント ブロックが「C」内に収まることを理解したら、複数のステートメントも収まることを理解する必要があります。一部の環境では、最初のステートメントの下部接続を「C」の底部にネストします（Wonder Workshop や Scratch など）。他の環境では、小さな隙間を開けます（Blockly など）。ぴったりと収まるように積み重ねると、さらにブロックを積み重ねることができることを示すヒントが残りません。
これらの 2 つの問題は相互に悪影響を及ぼします。内部底面コネクタが存在する場合（Wonder Workshop）、最初のステートメントの接続がより明確になりますが、積み重ねを検出する機能が失われます。内部の下部コネクタが存在しない場合（Blockly）、最初のステートメントの接続は明確ではありませんが、スタッキングは検出可能です。内部の下部コネクタがなく、ステートメントの下部コネクタをネストしている（Scratch）場合、Blockly でテストした際の検出性は最も低くなりました。
Google の調査では、最初のステートメントの接続は、スタッキングを見つけるよりもユーザーにとって負担が少ないことが判明しました。後者はプロンプトが必要であるのに対し、前者は一度見つけると忘れることはありません。Blockly は Wonder Workshop と Scratch の両方のアプローチを試しましたが、ある日レンダリング バグが発生し、小さなギャップが追加されました。このバグ（現在は誇らしい「機能」です）により、Blockly のユーザー調査で著しい改善が見られました。
推奨事項: Blockly をリスキニングする場合は、既存のスタッキング UI をそのまま使用してください。