детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта
Юзабилити

Обратная сторона юзабилити: детские сайты

Автор: Аслан Патов15.09.2014

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

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

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

Структура сайта: интуитивность, возведенная в абсолют

Говоря о юзабилити детского сайта, мы безо всякого преувеличения говорим об абсолютном юзабилити. Действительно, при разработке ресурса для цветов жизни есть где разгуляться мастерству оптимизатора. Дело в том, что вопреки старому заблуждению, дети хуже владеют навыками взаимодействия с сайтами, их сетевой опыт в принципе чрезвычайно ограничен. Прибавим к этому пикантную особенность самых маленьких представителей ЦА – банальное неумение читать и получим задачу создать предельно простой в использовании (но по-прежнему насыщенный и интересный) сайт, на котором недопустимы двусмысленные или спорные моменты.

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

В первую очередь, решительно увеличиваем в размере элементы меню. Мы делаем это не только для удержания внимания ребенка, помогая ему не теряться, но и для того, чтобы маленький посетитель не мог промахнуться, кликая по привлекающей его иконке – всегда держим в уме физиологические особенности ЦА, которые характеризуются отсутствием ловкости в обращении с мышью и клавиатурой. Чтобы по-настоящему прочувствовать, КАК ребенку сложно ими манипулировать, просто посадите за просмотр Сети первого попавшегося под руку малыша и понаблюдайте за его действиями.

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

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Меню сайта Barbie оставляет приятное впечатление благодаря мгновенному и четкому выделению каждого пункта при приближении курсора.

Гигантскими элементами меню Cartoon Network можно точно и успешно управлять даже в нетрезвом состоянии.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Свинка Пеппа собственной персоной подсказывает малышам значение каждой из иконок.

Строитель Боб пошел по тому же пути.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

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

Эмоциональный отклик: цвета, атмосфера и настроение

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

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Небезызвестный PBS Kids.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Красочные Cbeebies.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Looney Tunes

Атмосфера радости, приветливость и дружелюбие – это именно то, что в первую очередь запечатлится в памяти ребенка и простимулирует его вернуться на страницу снова. Самый простой и эффективный способ создать подобное эмоциональное наполнение – поселить на сайте веселых и милых сказочных персонажей, которых дети воспринимают как друзей или неких авторитетов. Персонифицировать и оживить страницу можно как с помощью берущего на себя все внимание героя-талисмана (первые приходящие на ум примеры – Микки Маус и Спанч Боб), так и благодаря целой компании мультяшных созданий:

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Фифи, милейшее цветоподобное создание, просто не может не вызвать радостные эмоции.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Вездесущий Спанч Боб.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

На сайте Улицы Сезам малышей встречают легендарные персонажи этого успевшего стать классикой проекта.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Упомянутая выше Свинка Пеппа с канала Nickelodeon в окружении друзей.

Раз уж речь зашла о персонажах, играющих, как правило, самую важную роль на сайте, то давайте сразу обсудим замечательную возможность сделать их еще более близкими детям. Анимация – отличный шанс увеличить интерактивность ресурса в разы. Что может быть более захватывающим для ребенка, чем «живой» любимый персонаж, пытающийся установить с малышом теплые взаимоотношения? Вот хорошие примеры сайтов, на которых обитают анимированные говорящие герои:

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Весьма удачная идея от Disney – собрать вместе и оживить своих самых главных женских персонажей. Кажется, девочки в восторге.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Барни, интерактивный тираннозавр.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

На страничке Pingu детей сразу же встречает главный герой.

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

Глубокий дизайн

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Простые и привычные предметы, представленные в трехмерном виде.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Пейзажи, виднеющиеся в дали.

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

 

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Отступление от каноничной сетки.

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Курсорные метаморфозы

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

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

Flash в детском юзабилити: занять самых нетерпеливых.

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

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

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Свинка Пеппа бежит вперед вместе с загрузкой страницы.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Заполнение градусника – тоже вполне неплохая идея.

Видео контент

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Огромная официальная коллекция всех видео, связанных с вселенной Hot Wheels.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Даша-Путешественница – один из самых успешных образовательных сериалов для малышей дошкольного возраста.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Игровой контент

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Улица Сезам, интересная и полезная.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Cbeebies, удачно реализованный развивающий проект от BBC.

Выходим за пределы Сети

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

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта

Peppa`s Paintbox.

детские сайты, юзабилити, детский сайт, вебсайт, ux, ui, юзабилити сайта.

Sesame Print and Colour.

Вопрос ответственности и реклама

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

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

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

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

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Аслан Патов
Создатель проекта.
Комментарии
Оставить отзыв

You must log in to post a comment