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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. Норм.

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

За интерфейс взялись дизайнеры из нашей материнской компании Redmadrobot, вместе с которыми мы твердо решили вывести продукт на качественно новый уровень UI/UX.

1. Верхняя плашка исчезла. Точнее сократилась до размеров гибридного редактора, лишилась логотипа и вместила Карту, Номер задания и Выход. На экране стало чище, а полезная функциональность на единицу площади выросла.

2. Самым значимым нововведением продукта 2.0 стало появление системы подсказок, которые ученик может посмотреть, если выполнение задания вызывает у него трудности. Каждое задание может иметь до трех подсказок, посмотреть которые можно кликнув на аватарку Профессора над редактором, куда он переехал, лишившись прописки на игровом поле. Баблы с текстом как в чате смотрятся вполне органично и не мешают рабочему процессу.

3. Немного изменили верстку текстового редактора для гармоничности. Добавили крестик, стирающий строку целиком. Раньше, для исправления ошибки в коде, дети жали Backspace до упора, стирая не только ошибку, но и всю строку или даже весь код. Крестик призван защищать их от необдуманных и непоправимых разрушений. Экспериментировали с пиктограммой ластика вместо крестика, но остановились на более привычном варианте.

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

5. Еще одна значительная перемена — переезд кнопок управления на игровое поле. Таким образом мы логически разнесли процесс написания и редактирования кода и его проверку в игровом окружении: закончив писать программу, переходишь на поле и смотришь, как творится магия.

Большая зеленая кнопка умерла быстро и безболезненно. На смену ей пришел трехкнопочный “плеер”, который и воспринимается легко, и смотрится органично. Долго спорили о внешнем виде кнопок. Хотели то шторку, то подложку, чтобы отделить управляющие кнопки от игрового поля. Сошлись на компромиссном варианте, когда полупрозрачная подложка появляется при наведении.

Вопреки опасениям, почти не пришлось менять левел-дизайн локаций, кнопки перекрывали интерактивные объекты буквально в паре-тройке мест.

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

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