На странице эффектная анимация, необычные шрифты и яркие иллюстрации. Но посетитель не может найти расписание, прочитать описание на телефоне или понять, отправилась ли заявка. Сайт привлекает внимание, а выполнить нужное действие на нём трудно.
Такой пример помогает объяснить ребёнку, почему веб-дизайн включает гораздо больше, чем оформление. Автору нужно продумать, как человек будет пользоваться страницей и какие сведения понадобятся ему в каждый момент.
Начать с задачи посетителя
Представим учебный сайт школьного спектакля. Посетитель хочет узнать название постановки, дату, время и место. Возможно, ему также нужно понять, требуется ли предварительная запись.
Если вся эта информация спрятана под длинным рассказом о театре, красивый первый экран мало помогает. Дизайнеру нужно решить, что показать сразу, а какие подробности разместить ниже.
Так появляется информационная структура: порядок блоков определяется вопросами посетителя. Цвета и изображения подбираются уже с учётом этой структуры.
Сделать действия понятными
Кнопка должна давать представление о результате нажатия. Надпись «Посмотреть расписание» точнее, чем абстрактное «Вперёд», если за ней открывается расписание.
То же относится к формам. Пользователю нужны понятные подписи полей и сообщение о результате отправки. Если он допустил ошибку, страница должна помочь её исправить: например, указать, какое поле осталось незаполненным.
Ребёнок учится смотреть на интерфейс глазами человека, который видит его впервые. Автору многое кажется очевидным именно потому, что он сам придумал расположение элементов.
Учесть разные способы просмотра
Макет на широком мониторе и та же страница на телефоне могут выглядеть по-разному. Текст переносится, блоки меняют положение, элементы управления оказываются ближе друг к другу.
Поэтому полезно проверять страницу при разной ширине окна. Можно ли прочитать текст? Не перекрывает ли меню важную кнопку? Не приходится ли двигать страницу вбок ради одного абзаца?
Отдельного внимания заслуживает доступность. Например, не следует обозначать ошибку только красным цветом: полезна и текстовая подсказка. Понятные подписи, достаточная читаемость и возможность пользоваться элементами с клавиатуры помогают более широкому кругу людей.
Практическое задание без сложных инструментов
Предложите ребёнку нарисовать на бумаге страницу события. Затем попросите другого человека найти время начала и место проведения. Во время проверки автору лучше не подсказывать.
После этого обсудите наблюдения:
- где человек начал искать информацию;
- какие названия его запутали;
- что он принял за кнопку;
- какие сведения пришлось спрашивать у автора.
Затем можно изменить макет и повторить проверку. Даже бумажный вариант позволяет заметить проблемы до того, как начнётся разработка сайта.
Как оценивать учебную работу
Полезно обсуждать не только то, нравится ли цвет фона. Спросите ребёнка, для кого сделана страница, какое действие на ней главное и почему блоки расположены именно так.
В Академии НАИТ веб-дизайн представлен среди направлений графического обучения. При выборе этого направления стоит обращать внимание и на интерес ребёнка к оформлению, и на желание разбираться в удобстве цифровых продуктов. Эти стороны работы дополняют друг друга.
Вывод
Хороший учебный сайт помогает посетителю решить понятную задачу. Когда школьник умеет объяснить расположение элементов и проверить свой макет на другом человеке, его работа становится осознаннее.
Новосибирская Академия Информационных Технологий знакомит детей с веб-дизайном, компьютерной графикой и созданием собственных цифровых проектов.
