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

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

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

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

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

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

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

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

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

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

статьи дизайн интерфейсов и ux

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

23–24 апреля, онлайн: Продуктовый дизайн в B2B. UX-Марафон #19

За два дня спикеры поделятся личным опытом в формировании команды, запуске продукта, проведении исследований, работе с гипотезами и аналитикой.

Харизматичный дизайн или использование эмпатии для вовлечения пользователя

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

Делаем жизнь пользователя лучше — UX-исследования для начинающих

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

5 неочевидных вещей, которыми занимается дизайнер интерфейсов в компании

Дизайнер интерфейсов — это уже давно не про простое рисование в фотошопе. В статье рассмотрено, в каких ещё процессах участвует такой специалист.

An Introduction to UX Design

UX Design is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product