Портрет пользователя был нам хорошо известен: нашей целевой аудиторией были дети 1−4 классов в возрасте примерно от 6 до 11 лет. У них пока ещё низкая способность концентрироваться, они могут отвлекаться от выполнения задач, которые кажутся им скучными, у них снижена моторика и пользовательский опыт по сравнению со взрослыми.

Как обычно, в самом начале мы получили описание задачи от методиста. На этот раз оно включало нарисованную от руки карту созвездий с названиями некоторых звёзд. Задача учеников состояла в том, чтобы восстановить карту, определив созвездия по их изображениям.

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

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

Однако первоначальная карта оказалась слишком большой, чтобы поместиться в карточку задания. Чтобы отобразить всю карту целиком, область клика для некоторых звёзд пришлось бы сделать всего в 18−20 пикселей. Рекомендуемая минимальная область клика для детей — 40 пикселей, что почти в два раза больше. Таким образом, мне пришлось реализовать механизм прокрутки.

Обычно иллюстрации создаются после этапа создания прототипа. Однако в данном случае мы знали, что нам понадобятся изображения размером около 1000×1000 пикселей. Поэтому я запросила иллюстрации на ранней стадии процесса, чтобы в дальнейшем работать с почти готовыми изображениями.

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

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

Поскольку олимпиада была рассчитан в том числе на детей 1−2 классов, важно было дать чёткие и короткие инструкции. Сложное и затянутое объяснение, скорее всего, запутало бы детей и существенно понизило их вовлечённость.

Изначально в задании не было созвездия Гончие псы. Мы решили добавить его, потому что оно состоит всего из двух звёзд, и его легко использовать для объяснения механики.

После того как механика и управление были готовы, перед нами встал вопрос о том, как прорисовывать связи между звёздами в созвездии.

Первоначально мы предполагали, что порядок выбора звёзд будет иметь значение, и связующая линия будет прорисовываться после выбора первых двух звёзд, а потом к графу будет присоединяться каждая новая выбранная звезда. Впоследствии мы отказались от этого, потому что это существенно усложняло задание. Было решено, что связи будут рисоваться только после того, как все звёзды будут выбраны и нажата кнопка «Сохранить».

Для отрисовки созвездий были сформулирован такой алгоритм:

• Если все звёзды были выбраны правильно, и в созвездии не осталось ни одной невыбранной звезды, оно засчитывалось как правильное и рисовалось как оригинальное созвездие.
• Во всех других случаях сначала рисовались все верные соединения, а потом отдельные части графа соединялись кратчайшим путём.

Мы предполагали, что исправление созвездия должно происходить при помощи «откликивания» лишних звёзд и добавления нужных. Однако пользовательское тестирование показало, что для детей понятнее и предпочтительнее, когда они стирают сохранённое созвездие и выбирают звёзды для него заново, даже если это требует большего количества кликов.