Сайты для детей — просто ли сделать серьёзный продукт «игрушечно»

в 6:34, , рубрики: accessibility, html5, детские приложения, разработка, разработка сайтов, метки: , ,

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

Отказываемся от взрослых догм

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

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

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

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

<audio controls>
  <source src="privet.wav" type="audio/wav">
</audio>

или

var privetWav = new Audio('privet.wav');
privetWav.play();

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

другой пример
Ветвление сайта иногда достигает невероятных размеров. Сайт ориентирован на детского потребителя, а дети

  1. не привыкли пользоваться вложенными меню, breadcrumbsm, картой сайта
  2. часто не осознают на какой ступени сайта они находятся
  3. дети не так фанатично ценят время как взрослые, ускоренных доступ, горячие клавишы им никчему
  4. дети не самостоятельны в учебном/развивающем процессе, если можно играть или изучать — они предпочтут играть

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

Пример преобразования

страница содержит меню:

  • пройти занятие,
  • посмотреть свои оценки
  • поиграть в игру
  • завершить занятия

много веток, за каждой стоит свой сценарий.

преобразовываем в линейную структуру:

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

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

Делаем пользовательский интерфейс «игрушечным».
Нажатие кнопки.

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

эффект «сейчас что-то будет».

Когда игра стартует — нельзя начинать ее сию секунду, в настоящем мире мало что происходит мгновенно. Поэтому надо предупредить: «настарт, внимание, марш» или «3 2 1» или по крайней мере немного дольше показать прогресс загрузки (preloader)

вознаграждение.

За проделанную работу нужно давать вознаграждение. Иначе пропадает позитивная мотивация, остается только негативная «если не сделаешь задание — не получишь конфету»
В качестве призов могут быть виртуальные «трофеи» или псевдо-деньги, на которые потом можно купить, например, новые антенны для виртуального робота.

Персонажи

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

Конечно, для детского сайта нужен художник.

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

Вместо завершения

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

Автор: httpavel

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js