ลักษณะที่ปรากฏของบล็อก

ลักษณะของบล็อกจะให้เบาะแสสําคัญเกี่ยวกับวิธีใช้ สิ่งที่ควรพิจารณาเมื่อจัดสไตล์บล็อกของคุณเองมีดังนี้

ใช้เส้นขอบที่มองเห็นได้

ในช่วงปี 2000 สไตล์ "Aqua" เป็นที่นิยม และวัตถุบนหน้าจอทุกชิ้นได้รับการตกแต่งด้วยไฮไลต์และแสงเงา ในช่วงปี 2010 รูปแบบ "การออกแบบเชิงวัสดุ" ได้รับความนิยม และวัตถุบนหน้าจอทุกรายการได้รับการทำให้เรียบง่ายเป็นรูปร่างที่สะอาด แบน และไม่มีขอบ สภาพแวดล้อมการเขียนโปรแกรมแบบบล็อกส่วนใหญ่จะมีการไฮไลต์และแรเงารอบๆ แต่ละบล็อก ดังนั้นเมื่อนักออกแบบกราฟิกในปัจจุบันเห็นสิ่งนี้ ก็จะนําการตกแต่งที่ล้าสมัยเหล่านี้ออกเสมอ

ดังที่เห็นในตัวอย่างบล็อก 5 รายการด้านบน (จาก scriptr.io) "การตกแต่งที่ล้าสมัย" เหล่านี้มีความสำคัญต่อการแยกความแตกต่างของบล็อกที่เชื่อมต่อกันซึ่งมีสีเดียวกัน

คําแนะนํา: หากจะเปลี่ยนภาพ Blockly อย่าให้เทรนด์ในปัจจุบันทำให้แอปของคุณใช้งานไม่ได้

เพิ่มลูกศรบอกทิศทาง

ความคิดเห็นจากเด็กในสหรัฐอเมริกา (แต่น่าแปลกใจที่ไม่ได้มาจากประเทศอื่นๆ) แสดงให้เห็นว่าเด็กๆ จำนวนมากสับสนระหว่างซ้ายและขวา ปัญหานี้ได้รับการแก้ไขด้วยการใส่ลูกศร หากทิศทางสัมพันธ์กัน (เช่น กับรูปโปรไฟล์) ลักษณะของลูกศรก็มีความสำคัญ ลูกศรไปทางขวา → หรือลูกศรเลี้ยว ↱ จะสร้างความสับสนเมื่อรูปโปรไฟล์หันไปทางตรงกันข้าม สิ่งที่มีประโยชน์มากที่สุดคือลูกศรวงกลม ⟳ แม้ในกรณีที่มุมที่เลี้ยวเล็กกว่าที่ลูกศรระบุ

คําแนะนํา: เสริมข้อความด้วยไอคอน Unicode ในทุกที่ที่ทําได้

ใช้ขั้วต่อแนวนอนและแนวตั้งที่แตกต่างกัน

Blockly มีการเชื่อมต่อ 2 ประเภท ได้แก่ รูปร่างแบบแนวนอนของเกมต่อและรอยบากที่ซ้อนกันแนวตั้ง อินเทอร์เฟซผู้ใช้ที่ดีควรพยายามลดจำนวนองค์ประกอบการออกแบบ ดังนั้น นักออกแบบจํานวนมากจึงพยายามทําให้การเชื่อมต่อทั้ง 2 ประเภทมีลักษณะเหมือนกัน (ดังที่แสดงด้านล่าง)

ผลที่ตามมาคือผู้ใช้ใหม่อาจสับสนเมื่อค้นหาวิธีหมุนบล็อกเพื่อให้พอดีกับการเชื่อมต่อที่เข้ากันไม่ได้ Blockly แสดงองค์ประกอบการเขียนโปรแกรมเป็นภาพและจับต้องได้ ดังนั้นจึงต้องระมัดระวังการแนะนำการโต้ตอบของผู้ใช้ที่ไม่รองรับโดยไม่ตั้งใจ

ดังนั้น Blockly จึงใช้รูปร่างแบบตัวต่อที่พอดีกันสําหรับการเชื่อมต่อค่า และรอยต่อที่มองเห็นได้ชัดเจนสําหรับการซ้อนคำสั่ง

คําแนะนํา: หากจะเปลี่ยนภาพ Blockly ให้ตรวจสอบว่าการเชื่อมต่อแนวนอนและแนวตั้งดูแตกต่างกัน

แสดงว่าคำสั่งที่ฝังซ้อนกันสามารถซ้อนกันได้

บล็อกรูปตัว "C" จะมีขั้วต่อที่ด้านในด้านบนเสมอ แต่บางสภาพแวดล้อมก็มีขั้วต่อที่ด้านในด้านล่างด้วย (เช่น Wonder Workshop) ส่วนบางสภาพแวดล้อมก็ไม่มี (เช่น Blockly และ Scratch) เนื่องจากบล็อกคำสั่งส่วนใหญ่มีขั้วต่อทั้งด้านบนและด้านล่าง ผู้ใช้บางรายจึงไม่เห็นทันทีว่าคำสั่งจะพอดีกับ "C" ที่ไม่มีขั้วต่อด้านล่าง

เมื่อผู้ใช้ทราบว่าบล็อกคำสั่ง 1 รายการพอดีกับ "C" แล้ว ผู้ใช้จะต้องทราบว่าคำสั่งมากกว่า 1 รายการก็พอดีเช่นกัน สภาพแวดล้อมบางแห่งจะฝังการเชื่อมต่อที่ต่ำกว่าของคำสั่งแรกไว้ที่ด้านล่างของ "C" (เช่น Wonder Workshop และ Scratch) ขณะที่สภาพแวดล้อมอื่นๆ จะเว้นช่องว่างเล็กน้อย (เช่น Blockly) การซ้อนที่แน่นจนเกินไปทำให้ดูไม่ออกว่าซ้อนบล็อกเพิ่มได้อีก

ปัญหาทั้ง 2 อย่างนี้ส่งผลเสียต่อกัน หากมีขั้วต่อด้านล่างด้านใน (Wonder Workshop) การเชื่อมต่อของคำสั่งเริ่มต้นจะชัดเจนขึ้น แต่จะทำให้ค้นพบการซ้อนกันไม่ได้ หากไม่มีขั้วต่อด้านในด้านล่าง (Blockly) การเชื่อมต่อของคำสั่งเริ่มต้นจะไม่ชัดเจน แต่ระบบจะค้นพบการซ้อนได้ การไม่มีขั้วต่อด้านล่างด้านในและการฝังขั้วต่อด้านล่างของคำสั่ง (Scratch) มีประสิทธิภาพในการค้นพบได้น้อยที่สุดเมื่อทดสอบด้วย Blockly

จากประสบการณ์ของเรา การเชื่อมต่อของข้อความเริ่มต้นเป็นปัญหาที่น้อยกว่าการค้นพบการซ้อน และเมื่อค้นพบแล้ว ผู้ใช้จะไม่ลืมคำแรก แต่จะต้องได้รับการกระตุ้นให้ใช้คำหลัง Blockly ได้ลองใช้ทั้ง Wonder Workshop และแนวทางของ Scratch จนกว่าวันหนึ่งจะเกิดข้อบกพร่องในการเรนเดอร์ซึ่งทำให้ช่องว่างเล็ก ๆ เพิ่มขึ้น เราพบว่าการศึกษาผู้ใช้ด้วย Blockly ดีขึ้นอย่างมากเนื่องจากข้อบกพร่องนี้ (ตอนนี้กลายเป็น "ฟีเจอร์" ที่เราภูมิใจ)

คําแนะนํา: หากจะเปลี่ยนภาพ Blockly ให้ปล่อย UI การซ้อนที่มีอยู่