В посте хочу поделиться «best practices» создания развивающих сайтов, для детей. Сразу оговорюсь: под словом «дети» я впредь буду иметь в виду не вундеркиндов, которые обыгрывают пап в шахматы и прочли все двенадцать томов «Детской энциклопедии», а обычные малыши, которые учатся читать, считать, постигают элементарную логику.
При создании веб сайта так и подмывает создать стандартный набор страниц: Контанты, Помощь, Карта Сайта — это все нужно, но не детям, а родителям и поисковому серверу, поэтому, ссылки на них лучше задать на стартовой странице, где родители помогают детям войти в систему, зарегистрироваться. Может, их родители захотят позвонить в службу поддержки или отослать резюме. Как только вход в систему осуществлен — все, начинается детская часть сайта.
Пример
Если вы покажете ребенку форму с полями ввода и текстовыми подсказками, он подумает «почему не началась игра, пойду позову папу». Ошибки в данном примере две:
Разберем по порядку:
если наш маленький пользователь не замечает сообщение — выход есть, нужно это сообщение произнести. Для лучшего эффекта — лучше найти человека с приятным голосом и попросить их записать несколько wav файлов. После — использовать звук ан странице.
или
Итак, вроде протоптана тропинка — мы можем передавать информацию визуально и с помощью звука. Форма с полями все еще здесь? Надо бы ее перенести на часть сайта для родителей.
другой пример
Ветвление сайта иногда достигает невероятных размеров. Сайт ориентирован на детского потребителя, а дети
Решение: меню и прочие элементы контроля выбрасываем — а как переходить с одной страницы на другую? программы/сайта нужно преобразовать в линейную структуру.
Пример преобразования
страница содержит меню:
много веток, за каждой стоит свой сценарий.
преобразовываем в линейную структуру:
звуковое сообщение: Привет, давай начнем занятие, нажми кнопку, если готов
далее идет учебное занятие
звуковое сообщение: Молодец, теперь время поиграть, нажми кнопку, если готов
идет игра
звуковое сообщение: Молодец, ты побил свой рекорд и получаешь трофеи
звуковое сообщение: нажми на кнопку чтобы начать новое задание, или нажми «Выход»
Меню преобразовалось в последовательность действий, а главное, игры идут не сначала, а на десерт. Программа руководит учебным процессом, она не задает много вопросов, не просит заполнить форм, просто сиди и занимайся.
Оно должно быть осязаемым, если кому-то не столь важно подсветилась ли кнопка при наведении курсора миши, а важно перечислена ли сумма со счета на счет после нажатия — то для детей важно, чтобы эта кнопка не только подсвечивалась при наведении, но и издавала звук при нажатии — это дает малышу понять, что он попал по кнопке.
Когда игра стартует — нельзя начинать ее сию секунду, в настоящем мире мало что происходит мгновенно. Поэтому надо предупредить: «настарт, внимание, марш» или «3 2 1» или по крайней мере немного дольше показать прогресс загрузки (preloader)
За проделанную работу нужно давать вознаграждение. Иначе пропадает позитивная мотивация, остается только негативная «если не сделаешь задание — не получишь конфету»
В качестве призов могут быть виртуальные «трофеи» или псевдо-деньги, на которые потом можно купить, например, новые антенны для виртуального робота.
Персонажи играют важную роль в восприятии. Звери — беспроигрышный вариант и для мальчиков и для девочек. Однако разделять пользователей на мальчиков и девочек не стоит, бывают девочки, которые интересуются робототехникой.
Конечно, для детского сайта нужен художник.
Кнопки, поля ввода — большое, с подсвечивающимся фокусом. Водимые буквы и цифры — тоже большие, чтобы пользователь легко попал мышкой.
Не такое уж простое дело — сделать простой детский сайт. Домашнее задание — подумайте, а как бы выглядела детская социальная сеть.
Отказываемся от взрослых догм
При создании веб сайта так и подмывает создать стандартный набор страниц: Контанты, Помощь, Карта Сайта — это все нужно, но не детям, а родителям и поисковому серверу, поэтому, ссылки на них лучше задать на стартовой странице, где родители помогают детям войти в систему, зарегистрироваться. Может, их родители захотят позвонить в службу поддержки или отослать резюме. Как только вход в систему осуществлен — все, начинается детская часть сайта.
Пример
Если вы покажете ребенку форму с полями ввода и текстовыми подсказками, он подумает «почему не началась игра, пойду позову папу». Ошибки в данном примере две:
- ребенок не будет читать сообщений, не заметит или не захочет
- ребенок не будет вводить много данных, даже если будет знать что ввести
Разберем по порядку:
если наш маленький пользователь не замечает сообщение — выход есть, нужно это сообщение произнести. Для лучшего эффекта — лучше найти человека с приятным голосом и попросить их записать несколько wav файлов. После — использовать звук ан странице.
<audio controls>
<source src="privet.wav" type="audio/wav">
</audio>
или
var privetWav = new Audio('privet.wav');
privetWav.play();
Итак, вроде протоптана тропинка — мы можем передавать информацию визуально и с помощью звука. Форма с полями все еще здесь? Надо бы ее перенести на часть сайта для родителей.
другой пример
Ветвление сайта иногда достигает невероятных размеров. Сайт ориентирован на детского потребителя, а дети
- не привыкли пользоваться вложенными меню, breadcrumbsm, картой сайта
- часто не осознают на какой ступени сайта они находятся
- дети не так фанатично ценят время как взрослые, ускоренных доступ, горячие клавиши им ни к чему
- дети не самостоятельны в учебном/развивающем процессе, если можно играть или изучать — они предпочтут играть
Решение: меню и прочие элементы контроля выбрасываем — а как переходить с одной страницы на другую? программы/сайта нужно преобразовать в линейную структуру.
Пример преобразования
страница содержит меню:
- пройти занятие,
- посмотреть свои оценки
- поиграть в игру
- завершить занятия
много веток, за каждой стоит свой сценарий.
преобразовываем в линейную структуру:
звуковое сообщение: Привет, давай начнем занятие, нажми кнопку, если готов
далее идет учебное занятие
звуковое сообщение: Молодец, теперь время поиграть, нажми кнопку, если готов
идет игра
звуковое сообщение: Молодец, ты побил свой рекорд и получаешь трофеи
звуковое сообщение: нажми на кнопку чтобы начать новое задание, или нажми «Выход»
Меню преобразовалось в последовательность действий, а главное, игры идут не сначала, а на десерт. Программа руководит учебным процессом, она не задает много вопросов, не просит заполнить форм, просто сиди и занимайся.
Делаем пользовательский интерфейс «игрушечным».
Нажатие кнопки.
Оно должно быть осязаемым, если кому-то не столь важно подсветилась ли кнопка при наведении курсора миши, а важно перечислена ли сумма со счета на счет после нажатия — то для детей важно, чтобы эта кнопка не только подсвечивалась при наведении, но и издавала звук при нажатии — это дает малышу понять, что он попал по кнопке.
эффект «сейчас что-то будет».
Когда игра стартует — нельзя начинать ее сию секунду, в настоящем мире мало что происходит мгновенно. Поэтому надо предупредить: «настарт, внимание, марш» или «3 2 1» или по крайней мере немного дольше показать прогресс загрузки (preloader)
вознаграждение.
За проделанную работу нужно давать вознаграждение. Иначе пропадает позитивная мотивация, остается только негативная «если не сделаешь задание — не получишь конфету»
В качестве призов могут быть виртуальные «трофеи» или псевдо-деньги, на которые потом можно купить, например, новые антенны для виртуального робота.
Персонажи
Персонажи играют важную роль в восприятии. Звери — беспроигрышный вариант и для мальчиков и для девочек. Однако разделять пользователей на мальчиков и девочек не стоит, бывают девочки, которые интересуются робототехникой.
Конечно, для детского сайта нужен художник.
Кнопки, поля ввода — большое, с подсвечивающимся фокусом. Водимые буквы и цифры — тоже большие, чтобы пользователь легко попал мышкой.
Вместо завершения
Не такое уж простое дело — сделать простой детский сайт. Домашнее задание — подумайте, а как бы выглядела детская социальная сеть.
