Как создать детский веб-сайт: 6 лучших практик UI и UX

Вопреки распространенному мнению, в современном мире интернетом пользуются не только подростки и «бумеры». Согласно исследованию, проведенному Nielsen Norman Group, дети в возрасте от 3 до 12 лет теперь умеют пользоваться веб-сайтами и приложениями.

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

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

Что значит создать сайт, удобный для детей?

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

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

Защитите ваши навигаторы от детей

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

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

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

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

Избегайте акселерометров

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

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

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

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

Коснитесь, а не нажимайте

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

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

Используйте изображения, а не текст.

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

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

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

Ваш сайт должен быть удобным для повторения

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

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

Пусть кнопки будут кнопками.

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

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

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

Последние мысли

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

Удачи!

Биография автора

Джессика Камински — репетитор по математике в Brighterly. Она имеет степень бакалавра и магистра математики в Остравском университете. Опытный репетитор по математике с почти десятилетним стажем, Джессика увлечена тем, чтобы помочь маленьким детям научиться любить математику.