Hình thức của các khối cung cấp các gợi ý quan trọng về cách sử dụng các khối đó. Sau đây là một số điều cần cân nhắc khi tạo kiểu cho các khối của riêng bạn.
Sử dụng đường viền hiển thị
Trong những năm 2000, giao diện "Aqua" rất thịnh hành và mọi đối tượng trên màn hình đều được trang trí bằng các điểm nổi bật và bóng đổ. Trong những năm 2010, giao diện "Material Design" đã trở thành xu hướng và mọi đối tượng trên màn hình đều được đơn giản hoá thành hình dạng rõ ràng, phẳng và không có đường viền. Hầu hết các môi trường lập trình khối đều có các hiệu ứng làm nổi bật và bóng xung quanh mỗi khối, vì vậy, khi các nhà thiết kế đồ hoạ ngày nay nhìn thấy điều này, họ luôn loại bỏ những hiệu ứng trang trí lỗi thời này.
Như bạn có thể thấy trong ví dụ trên về 5 khối (từ scriptr.io), những "đồ trang trí lỗi thời" này rất quan trọng để phân biệt các khối được kết nối có cùng màu.
Đề xuất: Nếu bạn đổi giao diện cho Blockly, đừng để các xu hướng hiện nay làm hỏng ứng dụng của bạn.
Thêm mũi tên chỉ hướng
Ý kiến phản hồi của trẻ em ở Hoa Kỳ (mặc dù thú vị là không phải của trẻ em ở các quốc gia khác) cho thấy trẻ em thường nhầm lẫn giữa bên trái và bên phải. Vấn đề này đã được giải quyết bằng cách thêm các mũi tên. Nếu hướng là tương đối (ví dụ: đối với hình đại diện), kiểu mũi tên sẽ rất quan trọng. Mũi tên thẳng → hoặc mũi tên rẽ ↱ sẽ gây nhầm lẫn khi hình đại diện hướng về hướng ngược lại. Hữu ích nhất là mũi tên tròn ⟳, ngay cả trong trường hợp góc xoay nhỏ hơn góc mà mũi tên cho biết.
Đề xuất: Bổ sung văn bản bằng biểu tượng Unicode khi có thể.
Sử dụng nhiều loại đầu nối ngang và dọc
Blockly có hai loại kết nối khác nhau: hình dạng trò chơi ghép hình theo chiều ngang và các rãnh xếp chồng theo chiều dọc. Một giao diện người dùng tốt phải cố gắng giảm thiểu số lượng thành phần thiết kế. Do đó, nhiều nhà thiết kế cố gắng làm cho cả hai loại kết nối trông giống nhau (như minh hoạ bên dưới).
Điều này gây nhầm lẫn cho người dùng mới khi họ tìm cách xoay các khối để phù hợp với các kết nối không tương thích. Blockly giúp các phần tử lập trình trở nên trực quan và hữu hình, vì vậy, bạn phải lưu ý đến việc vô tình đề xuất các hoạt động tương tác không được hỗ trợ của người dùng.
Do đó, Blockly sử dụng hình dạng trò chơi ghép hình vừa khít để kết nối giá trị và một rãnh căn chỉnh rõ ràng về mặt hình ảnh để xếp chồng câu lệnh.
Đề xuất: Nếu bạn đổi giao diện cho Blockly, hãy đảm bảo các kết nối ngang và dọc trông khác nhau.
Cho thấy rằng các câu lệnh lồng nhau có thể được xếp chồng
Khối hình chữ "C" luôn có một đầu nối ở phía trên bên trong, nhưng một số môi trường cũng có đầu nối ở phía dưới bên trong (ví dụ: Wonder Workshop) trong khi một số môi trường khác thì không (ví dụ: Blockly và Scratch). Vì hầu hết các khối câu lệnh đều có cả đầu nối trên và dưới, nên một số người dùng không thấy ngay rằng các câu lệnh sẽ vừa với một "C" không có đầu nối dưới.
Sau khi người dùng nhận ra rằng một khối câu lệnh vừa với một "C", họ cần phải tìm ra rằng nhiều câu lệnh cũng sẽ vừa với khối đó. Một số môi trường lồng ghép kết nối thấp hơn của câu lệnh đầu tiên vào cuối "C" (ví dụ: Wonder Workshop và Scratch), trong khi một số môi trường khác để lại một khoảng trống nhỏ (ví dụ: Blockly). Việc lồng ghép chặt chẽ không để lại gợi ý nào cho thấy có thể xếp chồng thêm các khối khác.
Hai vấn đề này tương tác không tốt với nhau. Nếu có một đầu nối bên trong ở dưới cùng (Wonder Workshop), thì kết nối của câu lệnh ban đầu sẽ rõ ràng hơn, nhưng sẽ mất khả năng phát hiện tính năng xếp chồng. Nếu không có trình kết nối bên trong (Blockly) thì kết nối của câu lệnh ban đầu sẽ không rõ ràng, nhưng bạn có thể phát hiện được tính năng xếp chồng. Việc không có trình kết nối dưới cùng bên trong và lồng trình kết nối dưới cùng của câu lệnh (Scratch) có khả năng phát hiện kém nhất khi được kiểm thử bằng Blockly.
Theo kinh nghiệm của chúng tôi, việc kết nối câu lệnh ban đầu là một thách thức nhỏ hơn đối với người dùng so với việc khám phá tính năng xếp chồng. Và một khi được phát hiện, người dùng sẽ không bao giờ quên thông tin trước đó, trong khi thông tin sau đó cần được nhắc. Blockly đã thử cả phương pháp Wonder Workshop và Scratch cho đến một ngày xảy ra lỗi kết xuất, tạo ra khoảng trống nhỏ. Chúng tôi nhận thấy sự cải thiện rõ rệt trong các nghiên cứu về người dùng với Blockly do lỗi này (hiện là một "tính năng" mà chúng tôi tự hào).
Đề xuất: Nếu bạn đổi giao diện cho Blockly, hãy giữ lại giao diện người dùng xếp chồng hiện có.