يقدّم مظهر الكتل أدلة مهمة حول كيفية استخدامها. في ما يلي بعض النقاط التي يجب مراعاتها عند تصميم الكتل الخاصة بك.
استخدام حدود مرئية
في الألفية الجديدة، كان المظهر "الأزرق المائي" رائجًا وكان يتم تزيين كل عنصر على الشاشة بإبرازات وظلال. في العقد الأول من الألفية الجديدة، أصبح أسلوب "التصميم المادّي" رائجًا وتم تبسيط كل عنصر على الشاشة ليصبح شكلًا نظيفًا ومسطّحًا بلا حدود. تحتوي معظم بيئات البرمجة باستخدام الكتل على تمييز و ظلال حول كلّ كتلة، لذلك عندما يرى مصمّمو الرسومات هذه التصاميم، يزيلونها دائمًا.
كما هو موضّح في المثال أعلاه الذي يتضمّن خمس كتل (من scriptr.io)، فإنّ "الزينة القديمة" هذه ضرورية للتمييز بين الكتل المتصلة التي تمتلك اللون نفسه.
اقتراح: عند إعادة تصميم Blockly، لا تسمح للتصاميم الحديثة بتعطيل تطبيقك.
إضافة سهام اتجاهية
أظهرت الملاحظات الواردة من الأطفال في الولايات المتحدة (على الرغم من أنّه لم يتم تلقّي ملاحظات من بلدان أخرى) التباسًا كبيرًا بين اليمين واليسار. تم حلّ هذه المشكلة من خلال إضافة الأسهم. إذا كان الاتجاه نسبيًا (بالنسبة إلى الصورة الرمزية، على سبيل المثال)، يجب مراعاة نمط السهم. إنّ السهم المستقيم ← أو سهم الدوران ↱ قد يسببان الارتباك عندما يكون الصورة الرمزية موجّهة في الاتجاه المقابل. إنّ السهم الدائري ⟳ هو الأكثر فائدة، حتى في الحالات التي تكون فيها الزاوية التي تمّ تدويرها أصغر من الزاوية التي يشير إليها السهم.
اقتراح: يمكنك إضافة رموز يونيكود إلى النص متى أمكن.
استخدِم أدوات ربط أفقية وعمودية مختلفة.
تتضمّن Blockly نوعَين مختلفَين من عمليات الربط: أشكال الألغاز الأفقية والشقوق الرأسية للتكديس. يجب أن تسعى واجهة المستخدم الجيدة إلى الحدّ من عدد عناصر التصميم. وبناءً على ذلك، يحاول العديد من المصمّمين جعل كلا نوعَي الاتصال يبدوان متشابهَين (كما هو موضّح أدناه).
ويؤدي ذلك إلى حدوث ارتباك بين المستخدمين الجدد أثناء بحثهم عن طرق لتدوير الكتل حتى يمكن أن تلائم عمليات الربط غير المتوافقة. تجعل أداة Blockly عناصر البرمجة مرئية وملموسة، لذا يجب الانتباه إلى عدم اقتراح تفاعلات غير متوافقة مع المستخدمين عن غير قصد.
وبناءً على ذلك، تستخدم Blockly شكل فسيفساء ملائمًا بإحكام لعمليات ربط القيم، ودرجة محاذاة مرئية متميزة لتجميع الجمل.
اقتراح: في حال تغيير مظهر Blockly، تأكَّد من أنّ الوصلات الأفقية والرأسية تبدو مختلفة.
توضيح أنّه يمكن تجميع عبارات التداخل
تحتوي المكعبات على شكل حرف "C" دائمًا على وصلة في الجزء العلوي الداخلي، ولكن تحتوي بعض البيئات أيضًا على وصلة في الجزء السفلي الداخلي (مثل Wonder Workshop)، في حين لا تحتوي البيئات الأخرى على وصلة (مثل Blockly وScratch). بما أنّ معظم مجموعات العبارات تحتوي على موصل علوي وسفلي، لا يلاحظ بعض المستخدمين على الفور أنّه يمكن وضع العبارات داخل حرف "C" الذي لا يحتوي على موصل سفلي.
بعد أن يدرك المستخدمون أنّ مجموعة عبارات واحدة تلائم شكل "C"، عليهم معرفة أنّ أكثر من عبارة واحدة يمكن أن تلائم الشكل أيضًا. تُدمج بعض البيئات العلاقة السفلية للعبارة الأولى في أسفل الحرف "C" (مثل Wonder Workshop وScratch)، بينما تترك بيئات أخرى فجوة صغيرة (مثل Blockly). لا يترك التداخل الدقيق أيّ إشارة إلى إمكانية تجميع المزيد من الكتل.
تتداخل هاتان المشكلتان مع بعضهما بشكلٍ سلبي. إذا كان هناك رابط داخلي في أسفل النموذج (Wonder Workshop)، يصبح اتصال العبارة الأولية أكثر وضوحًا، ولكن على حساب إمكانية اكتشاف التجميع. إذا لم يكن هناك رابط داخل الجزء السفلي (Blockly)، لن يكون اتصال العبارة الأولية واضحًا، ولكن يمكن اكتشاف التجميع. كان أداء بيئة Scratch الأسوأ من حيث سهولة الاكتشاف، وذلك بسبب عدم توفّر موصل سفلي داخلي ومحاولة دمج الموصل السفلي للعبارة (Scratch).
تبيّن لنا من خلال تجربتنا أنّ ربط البيان الأوّلي يشكّل تحديًا أقل للمستخدمين مقارنةً باكتشاف التجميع. وبعد اكتشافها، لا يتم أبدًاลืมها، في حين أنّ العلامات التجارية الأخرى تحتاج إلى تذكير. جرّبت Blockly كلّ من Wonder Workshop وأسلوب Scratch إلى أن حدث خطأ في العرض أدّى إلى إضافة الفجوة الصغيرة. لقد شهدنا تحسُّنًا ملحوظًا في دراسات المستخدمين باستخدام Blockly بسبب هذا الخطأ (الذي أصبح الآن "ميزة" نعتز بها).
اقتراح: في حال إعادة تصميم Blockly، يجب عدم تغيير واجهة المستخدم الحالية للتكديس.