Интерфейс 6+: принципы разработки UX/UI для детей

Когда мы говорим о дизайне для детей, перед глазами обычно возникает красочная картинка с крупными кнопками и мультяшными персонажами. В реальности, разумеется, все далеко не так просто. Создавая «детский» интерфейс, вы должны учитывать десятки нюансов: от навигации до пользовательских путей — чтобы ваш результат отвечал особенностям восприятия ребенка.

Ирина Красильникова

дизайнер интерактивных курсов образовательной онлайн-платформы Учи.ру

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

Однако это не значит, что основные принципы проектирования UX здесь не работают: как и в любом продукте, вся логика взаимодействия пользователя с ним должна быть подчинена вашей цели. Например, если цель — научить ребенка складывать дроби, мы «ведем» ученика от упражнения к упражнению, от простого к сложному, параллельно формируя дерево подсказок — своего рода мини-шагов для достижения поставленной задачи.

Как и при создании продуктов для взрослых, UX-дизайнер должен заранее продумать и проработать все возможные сценарии пользовательского поведения, которые позже, на стадии тестирования, проходят проверку: на понятность, доступность интерфейса и эмоциональный отклик. А предварительные исследования во всех возрастных категориях помогают лучше понять, что именно «зайдет» детям.

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

Никаких «гамбургеров», рекламы и наказаний

Одно из ключевых требований к «детскому» UI — его максимальная понятность. У детей ещё мало опыта работы с интерфейсами, поэтому им сложно «считать» какие-то абстрактные элементы. Например, если для взрослого очевидна связь между иконкой «гамбургер» и меню, то ребенок вряд ли сможет ее уловить — поэтому так важно использовать визуально понятные элементы: стрелки, галочки, крестики и так далее. Если использование иконки необходимо, то нужно убедиться в ее понятном и недвусмысленном для детского восприятия толковании. Некоторые значки можно заменить или продублировать надписями — но при этом держать в голове, что вы должны говорить на одном с детьми языке. Просьба «придумайте имя пользователя», скорее, всего, собьет с толку второклассника, поэтому лучше заменить ее, например, на более простое «Как тебя зовут?». При этом важно детально продумывать состояния элементов, чтоб при ховере, скролле или клике элемент реагировал ожидаемо для пользователя. Например, поле ввода при клике должно сменяться на активное состояние, внутри должна появляться каретка, кнопка при ховере реагировать. В «ярких интерфейсах» вдвойне важно добиться того, чтобы элементы не терялись и выделялись на фоне иллюстраций. С нехваткой интерфейсных привычек тесно связано и отсутствие так называемой баннерной слепоты: дети часто не отличают рекламу от продуктового контента. Так что если без объявлений не обойтись — добавляйте их только в разделы для взрослых: например, личный кабинет родителя.

Ещё одна особенность юных пользователей — ожидание немедленной реакции на любое свое действие. Ребенок не может ждать окончания теста, чтобы узнать результат: после каждого вопроса он хочет видеть, правильно ли он ответил. Отсюда общее правило: за каждый верный шаг — сразу же хвалим, в случае неверного — подсказываем. И ещё: если вы делаете образовательный или развивающий проект, забудьте про модель game over: когда ребенок ошибается, нужно помочь ему найти решение, а не превращать обучение в наказание и стресс.

Вовлечение в процесс

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

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

Кроме смены деятельности, вовлечь ребенка в процесс помогает воздействие на эмоции: здесь выручают знакомые темы, ситуации, любимые персонажи, игровые механики, а также рассказывание историй. Так, в нашем курсе по планированию и постановке целей мы интегрировали весь методический материал в сюжет интерактивного мультфильма: ученик должен принимать решения за главного героя, а от его выбора зависит, как будет разворачиваться ход действий. В результате после прохождения курса многие дети начинали его заново, чтобы узнать другие варианты развития сюжета — и тем самым незаметно для себя закрепляли материал. При тестировании курса мы задавали детям вопросы после прохождения: что запомнилось, что понравилось? Многие с горящими глазами вспоминали процесс и выбор ответов, как будто это был их опыт из реальной жизни: — «Я подарил бабушке картинку! Успел её раскрасить вовремя! Ей очень понравилось!».

От малышей до подростков: возрастные различия

Восприятие человека в 25 и 30 лет практически не отличается — зато для шести- и десятилетнего ребенка разница будет огромной. С возрастом дети меняются, и это нужно учитывать как в логике продукта, так и в его интерфейсе. Так, мы делим наш контент на две группы: для начальной школы и для основной. В первом случае оформление более «мультяшное» и игровое, а для тех, кто еще не умеет читать, предусмотрена озвучка. Дизайн для старших школьников более сдержанный и содержит в себе больше примеров из жизни. Например, для учеников 9-11 классов мы делаем поправки на возраст и интересы, контент в их случае будет бесстрастный, а иллюстрации спокойнее.

Вообще старшая школа — очень сложная неоднородная группа. Приведу пример: все знают золотое правило общения с подростками — не относиться к ним, как к детям. Тинейджеры привыкли считать себя взрослыми и болезненно относятся к любым попыткам оспорить этот факт. Однако когда мы решили протестировать на старших школьниках игровой курс по программированию для 1-6 классов, они отреагировали на него достаточно позитивно. Поскольку курс разрабатывался для детей 7-11 лет, интерфейс был достаточно «детским», с главным героем-динозавриком — но несмотря на это, большинство подростков выразили желание «поиграть».

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

Тонкости адаптации

Типичная ошибка в проектировании детских интерфейсов — невнимание к потребностям так называемых экстремальных пользователей: нечитающих детей, детей с недостаточным опытом взаимодействия с компьютером, детей с низкой концентрацией внимания, детей с нарушениями зрения. Мы в Учи.ру стараемся учитывать все эти особенности при проектировании наших курсов. Кроме того, важно учитывать особенности устройств, на которых могут пользователи будут работать с вашим продуктом. Например, мы всегда держим в голове, что часть учеников решает наши задания на интерактивной доске в школе — и поэтому не располагаем критически важные элементы интерфейса в верхней части экрана, чтобы рост ученика не стал барьером для учебного процесса.

Кроме того, если ваш продукт рассчитан на детей из разных стран, нельзя использовать один и тот же дизайн для всех. В разных частях мира пользователи отличаются не только языком, но и культурой, бытом, который их окружает, фольклором, кухней и так далее — и соответствующие реалии других стран могут быть им незнакомы или интересны. Иначе говоря, такие элементы дизайна, как снежинки или лыжи, вряд ли «зайдут» для ребят из ЮАР и Бразилии. И если в России можно решать задачи на сложение и вычитание с помощью блинов, то для Индии мы рисуем традиционные местные лепешки чапати.

Есть и более неочевидные закономерности: например, мы увидели, что дети из США не поняли упражнение с распределением яблок для ежиков. На интерфейс влияют и особенности методологии: так, в одной стране детям объясняют принципы сложения на кубиках, а в другой — на дисках. В частности, поэтому мы собрали отдельную команду для адаптации нашего продукта под рынок США.

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