UX для детей: основные принципы

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

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

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

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

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

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

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

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

Если использование значка необходимо, то нужно сделать так, чтобы его толкование было понятным и недвусмысленным для детского восприятия. Некоторые значки можно заменить или продублировать надписями — но учтите, что вы должны говорить на одном языке с детьми. Например, вопрос «придумай имя пользователя» может сбить с толку второклассника, поэтому лучше заменить его простым вопросом «Как тебя зовут?».

Например, вопрос «придумай имя пользователя» может сбить с толку второклассника, поэтому лучше заменить его простым вопросом «Как тебя зовут?»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В целом при создании товаров для подростков можно ориентироваться на два общих принципа:

• Во-первых, качественно адаптировать и структурировать информацию, подавать ее дозированно и с хорошей упаковкой.

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

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

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

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

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

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

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

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