UI для поколения TikTok: как создавать образовательные веб-интерфейсы для подростков

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

 

Как подростки пользуются интернетом

Аналитическая компания Nielsen провела исследование и выяснила, каким образом тинейджеры воспринимают информацию и что особенно важно для них в оформлении сайта. 

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

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

---

Читайте по теме:

Зачем бизнес вкладывается в развитие подростков? Мнения предпринимателей и экспертов

Три способа продвигать бренд среди подростков

---

Более того, согласно нашим исследованиям, школьники заходят в соцсети более 10 раз в день. Кроме того, 70% школьников в интернете играют в онлайн-игры, а 66% — смотрят стримы. И конечно, это способствует формированию их визуального вкуса и высоких стандартов к оформлению и структурированию информации. 

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

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

• Подростки предпочитают поглощать информацию маленькими порциями. У них нет времени читать многостраничные тексты — проще посмотреть ролик на YouTube; 
• Подросткам важна конкретика — они будут переходить по тем ссылкам, которые полностью отвечают их запросам;
• Главное — чтобы было интересно, однако для каждого «интересно» значит что-то свое.

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

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

Так, при разработке дизайна стоит отталкиваться от двух факторов:

• Исследований аудитории. Например, мы учитываем потребности ученика и руководствуемся CustDev подходом к разработке (Customer Development — тестирование идеи, исходя из потребностей пользователя).

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

• Возрастных особенностей. Подростки 12-17 лет — неравномерная аудитория с разными ценностями. Поэтому при проведении CustDev исследований мы начинаем с того, что стараемся их точно сегментировать.

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

 

Принципы дизайна интерфейса для подростков 

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

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

«Дизайн должен решать задачи пользователей и бизнеса. У нас методист ставит дизайнеру образовательные задачи, а продакт-менеджер — бизнес-задачи. Все их нужно учитывать при разработке дизайн-концепции.

Все сервисы и компании, связанные с релокацией, на одной карте

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

Дизайн помогает решать эти задачи», — рассказывает Екатерина Царева, UX-дизайнер в «Учи.ру».

 

Принцип 2. Каждому возрасту подходит определенная дизайн-концепция

Если младшеклассники откликаются на детское оформление сайтов, то школьники 5-6 классов, наоборот, стремятся отойти от всего детского и хотят чувствовать себя взрослыми.

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

 

Принцип 3. Подросток — это в первую очередь современный человек

Он существует в digital-контексте с ранних лет. Поэтому обладает визуальным вкусом и высокими стандартами к оформлению и структурированию контента. Пользователи вне зависимости от возраста плохо воспринимают большой объем информации.

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

---

Читайте также: Тренды UI/UX-дизайна в 2022 году

---

 

Принцип 4. Подростки делают только то, что им нравится

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

Они просто переключатся на другую вкладку, которая им понравится, поэтому нужно бороться за их внимание. Современность дизайна тоже играет свою роль — подросткам будет неприятно пользоваться платформой, если ее оформление осталось далеко в 2000-х. 

---

Так, 3D эффекты для наглядной демонстрации пространственных моделей, нарратив, геймификация и анимация — действенные способы увеличить вовлеченность учеников и добавить удовольствие в процесс обучения.

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

А в «Моем теле» дети знакомятся с организмом человека с помощью интерактивного анимированного анатомического атласа.

---

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

Фото на обложке предоставлено автором.