블록의 모양은 블록을 사용하는 방법에 관한 중요한 단서를 제공합니다. 다음은 자체 블록의 스타일을 지정할 때 고려해야 할 몇 가지 사항입니다.
눈에 띄는 테두리 사용
2000년대에는 '아쿠아' 스타일이 유행했으며 화면의 모든 객체가 강조 표시와 그림자로 장식되었습니다. 2010년대에는 'Material Design' 스타일이 유행했으며 모든 화면상의 객체가 깔끔하고 평평하며 테두리가 없는 도형으로 단순화되었습니다. 대부분의 블록 프로그래밍 환경에는 각 블록 주위에 강조 표시와 그림자가 있습니다. 따라서 오늘날의 그래픽 디자이너는 이러한 오래된 장식을 항상 삭제합니다.
위의 5개 블록 예시 (scriptr.io)에서 볼 수 있듯이 이러한 '오래된 장식'은 동일한 색상의 연결된 블록을 구분하는 데 매우 중요합니다.
권장사항: Blockly의 리스킨을 진행하는 경우 최신 유행으로 인해 앱이 손상되지 않도록 하세요.
방향 화살표 추가
흥미롭게도 다른 국가가 아닌 미국 어린이의 의견을 보면 좌파와 우파에 대한 혼란이 만연한 것으로 나타났습니다. 이 문제는 화살표를 추가하여 해결되었습니다. 방향이 상대적 (예: 아바타에 대한 방향)인 경우 화살표 스타일이 중요합니다. 아바타가 반대 방향을 향하고 있을 때 → 직선 화살표 또는 ↱ 회전 화살표는 혼동을 야기합니다. 회전된 각도가 화살표가 나타내는 각도보다 작은 경우에도 ⟳ 원형 화살표가 가장 유용합니다.
권장사항: 가능한 경우 텍스트를 유니코드 아이콘으로 보완합니다.
다른 가로 및 세로 커넥터 사용
Blockly에는 가로 퍼즐 도형과 세로 스택 노치라는 두 가지 연결 유형이 있습니다. 우수한 사용자 인터페이스는 디자인 요소의 수를 최소화해야 합니다. 따라서 많은 디자이너가 두 연결 유형을 동일하게 보이게 하려고 합니다 (아래 참고).
그 결과, 호환되지 않는 연결에 맞게 블록을 회전하는 방법을 찾는 신규 사용자는 혼란을 겪게 됩니다. Blockly는 프로그래밍 요소를 시각적이고 실질적으로 만들므로 지원되지 않는 사용자 상호작용을 실수로 제안하지 않도록 주의해야 합니다.
따라서 Blockly는 값 연결에 밀착된 퍼즐 모양을 사용하고 문 쌓기에 시각적으로 구별되는 정렬 노치를 사용합니다.
권장사항: Blockly의 리스킨을 사용하는 경우 가로 연결과 세로 연결이 다르게 표시되는지 확인합니다.
중첩 문이 중첩될 수 있음을 보여줍니다.
'C'자 블록에는 항상 내부 상단에 커넥터가 있지만 일부 환경에는 내부 하단에도 커넥터가 있는 경우 (예: Wonder Workshop)도 있고 없는 경우 (예: Blockly 및 Scratch)도 있습니다. 대부분의 문 블록에는 상단 및 하단 커넥터가 모두 있으므로 일부 사용자는 문장이 하단 커넥터가 없는 'C' 내에 들어맞는다는 것을 즉시 알지 못합니다.
사용자가 하나의 문 블록이 'C' 안에 들어맞는다는 것을 파악한 후에는 두 개 이상의 문도 들어맞는다는 것을 파악해야 합니다. 일부 환경에서는 첫 번째 문이 'C'의 하단에 중첩됩니다(예: Wonder Workshop 및 Scratch). 반면 다른 환경에서는 작은 간격을 둡니다 (예: Blockly). 좁게 중첩하면 더 많은 블록을 쌓을 수 있다는 힌트를 제공하지 않습니다.
이 두 문제는 서로 상호작용하여 문제를 일으킵니다. 내부 하단 커넥터가 있는 경우 (Wonder Workshop) 초기 문이 더 명확하게 연결되지만 스택을 감지하는 기능은 손해를 봅니다. 내부 하단 커넥터가 없는 경우 (Blockly) 초기 문이 연결되어 있는지 명확하지 않지만 스택은 검색할 수 있습니다. 내부 하단 커넥터가 없고 문이 하단 커넥터를 중첩하면 (Scratch) Blockly로 테스트할 때 검색 가능성에 가장 나쁜 영향을 미쳤습니다.
경험에 비추어 볼 때, 초기 문이 연결되는 것은 사용자에게 비슷한 이미지를 찾는 것보다 쉬운 작업입니다. 일단 발견되면 전자는 결코 잊혀지지 않지만 후자는 메시지가 필요합니다. Blockly는 Wonder Workshop과 Scratch 접근 방식을 모두 시도해 보았는데 어느 날 렌더링 버그가 발생하여 작은 간격이 생겼습니다. 이 버그 (이제 자랑스러운 '기능')로 인해 Blockly를 사용한 사용자 연구가 크게 개선되었습니다.
권장사항: Blockly의 리스킨을 사용하는 경우 기존 스택 UI를 그대로 둡니다.