Внешний вид блоков дает важные подсказки о том, как их следует использовать. Вот некоторые вещи, которые следует учитывать при стилизации собственных блоков.
Используйте видимые границы
В 2000-х годах стиль «Аква» был в моде, и каждый объект на экране украшался бликами и тенями. В 2010-х годах в моду вошел стиль «Material Design», и каждый объект на экране был упрощен до чистой, плоской формы без полей. В большинстве сред блочного программирования вокруг каждого блока присутствует подсветка и тень, поэтому, когда современные графические дизайнеры видят это, они неизменно сбрасывают эти устаревшие украшения.
Как видно из приведенного выше примера пяти блоков (из scriptr.io), эти «устаревшие украшения» жизненно важны для различения связанных блоков одного цвета.
Рекомендация: при обновлении оформления Blockly не позволяйте современной моде сломать ваше приложение.
Добавьте стрелки направления
Отзывы детей в США (хотя, что интересно, не из других стран) выявили безудержную путаницу между левыми и правыми. Проблема была решена добавлением стрелок. Если направление относительное (например, относительно аватара), важен стиль стрелки. Прямая стрелка → или стрелка поворота ↱ сбивают с толку, когда аватар смотрит в противоположном направлении. Наиболее полезной является круговая стрелка ⟳, даже в тех случаях, когда угол поворота меньше, чем указывает стрелка.
Рекомендация: по возможности дополняйте текст значками Unicode.
Используйте разные горизонтальные и вертикальные соединители.
Blockly имеет два разных типа соединения: горизонтальные пазлы и вертикальные пазы для штабелирования. Хороший пользовательский интерфейс должен стремиться к минимизации количества элементов дизайна. Соответственно, многие дизайнеры стараются, чтобы оба типа подключения выглядели одинаково (как показано ниже).
Результат создает путаницу среди новых пользователей, которые ищут способы вращать блоки, чтобы они могли вписаться в несовместимые соединения. Blockly делает элементы программирования визуальными и осязаемыми, поэтому следует опасаться непреднамеренного предложения действий пользователя, которые не поддерживаются.
Соответственно, Blockly использует плотно прилегающую форму головоломки для связей значений и визуально четкую выемку для выравнивания для укладки операторов.
Рекомендация: при изменении оформления Blockly убедитесь, что горизонтальные и вертикальные соединения выглядят по-разному.
Покажите, что операторы вложения могут быть сложены друг в друга.
Блоки в форме буквы «С» всегда имеют разъем внутри сверху, но в некоторых средах разъем также есть внутри снизу (например, Wonder Workshop), тогда как в других его нет (например, Blockly и Scratch). Поскольку большинство блоков операторов имеют как верхний, так и нижний соединитель, некоторые пользователи не сразу видят, что операторы поместятся внутри буквы «C», у которой нет нижнего соединителя.
Как только пользователи поймут, что один блок операторов помещается внутри буквы «C», им необходимо выяснить, что более одного оператора также поместятся. В некоторых средах нижнее соединение первого оператора вкладывается в нижнюю часть буквы «C» (например, Wonder Workshop и Scratch), тогда как другие оставляют небольшой зазор (например, Blockly). Плотное размещение не оставляет намека на то, что можно сложить больше блоков.
Эти две проблемы плохо взаимодействуют друг с другом. Если существует внутренний нижний соединитель (Чудо-мастерская), то соединение исходного утверждения становится более очевидным, но за счет возможности обнаружения укладки. Если внутренний нижний соединитель не существует (блочный), то соединение исходного оператора не очевидно, но стекирование можно обнаружить. Отсутствие внутреннего нижнего соединителя и вложение нижнего соединителя утверждения (Scratch) показали худшие результаты с точки зрения обнаруживаемости при тестировании с Blockly.
Наш опыт показал, что соединение исходного оператора представляет собой меньшую проблему для пользователей, чем обнаружение стекирования. И однажды обнаруженное, первое никогда не забывается, тогда как второе требует подсказки. Blockly пробовал и Wonder Workshop, и Scratch, пока однажды не произошла ошибка рендеринга, из-за которой появился небольшой пробел. Благодаря этой ошибке (теперь это «функция», которой мы гордимся) мы увидели заметное улучшение в изучении пользователей Blockly.
Рекомендация: при обновлении оформления Blockly оставьте существующий пользовательский интерфейс стекирования.