От беспозвоночного к прямоходящему: эволюция одного интерфейса в картинках — Офтоп на

Кроме программирования и системного мышления, “кодвардс” учит детей еще и тому, что ошибки это нормально, и что рефлексия полезна. год на рынке — достаточный срок, чтобы оглянуться назад и провести ревизию тех граблей, на которые мы успели наступить во время разработки.

Прежде чем перейти к самокопанию, коротко расскажу про продукт. “Кодвардс” — это платформа для обучению детей 7-12 лет программированию в игровой форме. На уроках дети сначала изучают теорию, которую потом закрепляют на практике, выполняя задания на компьютере.

Дети — народ особенный, и то, что работает со взрослыми, с ними может запросто работать ровно наоборот или не работать вовсе. Поэтому приходится включать режим внутреннего ребенка и много наблюдать за живыми детьми со стороны, чтобы понять, как они взаимодействуют с продуктом и что нужно cделать, чтобы взаимодействие с интерфейсом не мешало образовательному процессу.

Мы изначально и сознательно отказались от использования в продукте блочного программирования и сразу погружаем в текстовое, чтобы дети учились видеть и понимать структуру кода, ориентироваться в нем и готовить его для удобного чтения другими. Тогда им будет легче переходить на актуальные языки программирования, если они решат развиваться в этом направлении.

Для более плавного погружения в предмет и снижения порога входа у нас используется гибридный редактор, позволяющий составлять команды как с помощью только клавиатуры, так и с помощью динамического меню псевдо-кнопок, по сути повторяющего функционал авто-подстановки.

Таким образом, HUD практической части нашего продукта состоит из четырех составляющих: 1) игровое поле, где показывается игровая ситуация и результаты выполнения программы; 2) тестовый редактор кода; 3) динамический (он же визуальный) редактор кода; 4) сервисные кнопки для обращения к другим компонентам платформы.

О том, как с течением времени менялся интерфейс, и почему пришлось убить большую зеленую кнопку, и пойдет речь ниже.

Все еще декабрь 2021

1. Недо-концепт прожил меньше недели. А потом что-то случилось. То ли приближение новогодних праздников сказалось, то ли кто-то вспомнил про дизайн, но к концу декабря “Кодвардс” обрел и приличный логотип, и гармоничную цветовую палитру. Основным цветом стал фиолетовый. Позже его признают цветом 2021 года, но мы об этом и не догадывались.

2. Прогресс-бар окончательно канул в лету, хотя позже мы попытались воскресить его специально для акции “Час кода” (см. Декабрь 2021). Вместо него показывается номер текущего задания.

3. Идентификатору пользователя пришлось потесниться ради иконок выхода и карты заданий. Позже ID повторит судьбу прогресс-бара: в нашем случае не так важно отображать имя пользователя, потому что прежде чем перейти к программированию, ученики и учитель проходят через личный кабинет, где могут проверить, что они, это они.

4. Большая зеленая кнопка обруталилась, став прямоугольной. Иконка и надпись поменялись местами, потому что такой паттерн привычнее.

5. “Черный секси”, постановил консилиум, и в продакшн пошла темная версия. Решение лежало на поверхности — ровно так выглядят среды разработки у нормальных программистов, — но реализовалось в нашем интерфейсе только сейчас. Текст кода получил цветовую кодировку и простейший синтаксис по той же причине.

6. Объектный слой в визуальном редакторе расширился в высоту до двух строк. Реальной необходимости в этом не было, так как такого количества объектов в заданиях нет, но было полезно подумать об этом “на вырост”. Иконки изменились на изображения реальных объектов игрового поля в надежде упростить процесс взаимодействия.

Думали, так будет нагляднее. Практика показала, что в некоторых случаях такие указатели могут только запутывать, и что динамические состояния плохо поддаются иллюстрированию: изобразить метод PUT (класть) одной картинкой почти нереально. Кроме того эстетическая составляющая явно страдает от такой мешанины.

7. Игровое поле стабилизируется. Lowpoly-стилистика подводного мира приобретает узнаваемые черты.

Декабрь 2021

1. Это мокап! Поэтому критически относиться к резкой перемене цветовых настроений не нужно. Хотя есть подозрение, что неосознанное желание отправить в мусорку оранжево-коричневый цвет уже набирало силу. Временно взяли серый. У логотипа появляются признаки осмысленности.

2. Прогресс-бар пока на месте, еще мечтаем о накоплении пользователем опыта.

3. Большая зеленая кнопка получила соседку “Очистить”, цель которой сводилась к полному очищению кода из редактора для новой попытки.

4. Текстовый редактор исчезает в градиенте, как лента сообщений в iMessage. Тактически неверное решение, так как во время работы с кодом видны будут верхние строки программы, а не последние, над которыми идет работа. И редактирование кода становится проблематичным, когда большая часть кода видна плохо.

5. Первая серьезная смена парадигм. Визуальный редактор уехал вниз, под код. Теперь должно быть лучше видно, что происходит с активной строкой. Кнопки стали прямоугольными, облегчая работу с надписями и иконками.

6. В левом углу игрового поля получил прописку Профессор Вершинин. По идее, его задача – помогать ученику советами, но, по факту, он этого еще не умеет.

Декабрь 2021

Когда в районе сентября “Кодвардс” стал официальным партнером Всероссийской акции “Час кода” (почитать о создании тренажера для акции можно здесь) мы поняли, что время пришло. То, о чем мы думали весь год, должно стать явью. Интерфейс 2.

Март 2021

1-3. Без изменений.

4. Существенное нововведение: кнопки “Шаг вперед” и “Сбросить” для выполнения единственной строки и остановки выполнения программы, соответственно.

5. Не считая небольшой цветокоррекции в сторону меньшей яркости, изменений не было.

6. Привели в приличное состояние пиктограммы. Неактивные псевдо-кнопки становятся полупрозрачными, пока на них не укажет мышка.

7. Норм.

Ноябрь 2021

1. Коричнево-оранжевый… Самим страшно вспоминать, но когда-то в нашем интерфейсе существовали именно эти цвета. Кто виноват уже не так важно. “Кодвардс” только начинал себя осознавать как продукт и как социальная группа. Это видно и по логотипу, узнаваемость которого стремится к нулю.

2. На верхней плашке присутствует прогресс-бар по количеству заданий в уроке. Прикладная ценность его не очевидна, но пусть пока живет.

3. Если присмотреться, под идентификатором пользователя виден показатель накопленного опыта. Очень хотелось прикрутить этот RPG-элемент, но для реализации пришлось бы придумывать формулы и соответствующий функционал. Плюс, в играх повышение уровня подразумевает какую-то вознаграждающую механику, а не просто смену циферки, что тоже требует разработки.

4. Большая зеленая кнопка с надписью “Запустить мой код”, которая должна запускать исполнение написанной программы, находится под верхней плашкой. Пока еще это не кажется нам проблемой, хотя и надпись, и иконка, и само расположение кнопки просто кричат о том, что с этим надо что-то делать. А еще она круглая, единственная в интерфейсе.

5. Текстовый редактор кода выглядит как простенький блочный конструктор, хотя это противоречит идеологии продукта! Ну ладно, тогда идеология еще дозревала в головах, и червь сомнения не подтачивал несущие опоры нашего UI/UX. Текущая строка выделяется, но до момента подтверждения почти прозрачна.

6. Визуальный редактор (он же динамический редактор с псевдо-кнопками) крепится к правой стенке экрана. Итого три плашки друг на друге, ох… Зато сами кнопки уже взаимозависимы и не дают строить команды неверно: за объектом тянется метод, аргумент определяется методом. Логика работает!

7. Игровая поле квадратное, фон в шахматную клетку. Так проще задавать траекторию движения объектов, и детям не нужно объяснять знать про углы и градусы.

Для игрового мира выбираем low poly – хайповенько, тиражируемо, но требует тщательной шлифовки на отрисовке. Особенно когда доходит до перспективы. Впереди длинный путь поисков своего стиля.

Немаловажным был вопрос экономии ресурсов. Платформа работает в вебе, требует постоянного интернет-подключения, а с учетом, весьма средненького уровня оборудования и связи в региональных школах, нагрузка на канал должна быть максимально низкой.

Мда, без слез не взглянешь, что называется. Но в тот момент мы руководствовались принципом “работает и ладно”, да и кроме нас этих ужасов никто не видел.

Онлайн-курс по программированию для детей 7-12 лет

Школа робота

Январь 2021

1-5. Вернувшись с каникул, ничего менять не стали.

6. А здесь убрали картинки, вернув пиктограммы. Их стилистика хромает на обе ноги, понять, что означает псевдо-кнопка часто проще по надписи, а не по рисунку. До сих при наборе команды одинаково видны все варианты, что может вести к ложным нажатиям.

https://www.youtube.com/c/Codewards/videos?sort=p

7. Самая привлекательная часть экрана работает как надо. Под капотом случаются необходимые правки как в левел-дизайне, так и в стиле, но они точечные и на интерфейс не влияют.