Дизайн — статьи о сайтах
У центра обучения сотрудников длинные страницы почти неизбежны: программа курса, форматы, документы по итогам, условия для групп, расписание. Посетитель при этом чаще всего не читает всё подряд. Он ищет ответ на конкретный вопрос. Ниже разберём, какими приёмами страницу можно сделать понятнее без потери содержания.
Сначала выясните, что ищет посетитель
Страницу открывают разные люди. Руководитель подразделения проверяет, подходит ли курс его команде. Специалист по кадрам сверяет длительность и документ по итогам. Бухгалтер ищет реквизиты и порядок оформления. Запишите три-пять вопросов, с которыми приходят на страницу, и сделайте из них основу структуры. Если вопросу не соответствует ни один заголовок, его придётся искать по всему тексту.
Оглавление и якорные ссылки: быстрый переход к нужному
Если страница длиннее двух-трёх экранов, добавьте в начало короткий список разделов. Каждый пункт — ссылка-якорь на заголовок ниже. Формулируйте пункты так, как спросил бы заказчик: «Сколько часов занимает обучение», а не «Параметры». На длинной странице полезна и ссылка «Наверх» после крупных разделов. На телефоне она экономит много прокруток.
Оглавление должно умещаться на первом экране вместе с названием курса и кнопкой заявки. Если пунктов больше семи, объедините близкие или вынесите детали на отдельные страницы.
Заголовки, абзацы и списки: как разбить текст
- Один заголовок — одна мысль. По заголовкам, пролистанным подряд, должно быть понятно, о чём страница.
- Абзац — до пяти-шести строк. Длинный блок без пауз читается хуже, особенно на узком экране.
- Перечисления оформляйте списком: темы модулей, список документов для записи, требования к участникам.
- Ширина строки — примерно 60–80 знаков. Слишком широкий текст на большом мониторе заставляет глаз терять начало следующей строки.
- Размер шрифта основного текста — от 16 пикселей, межстрочный интервал около полутора высот шрифта, контраст тёмного текста на светлом фоне.
Что сворачивать, а что оставить открытым
Блоки-«гармошки» помогают, когда детали нужны не всем: подробное содержание каждого модуля, список вопросов и ответов, условия для крупных групп. Но главное сворачивать нельзя: длительность, формат, итоговый документ, как подать заявку. Эти данные должны быть видны сразу. Заголовок свёрнутого блока должен подсказывать, что внутри: «Программа модуля 2: темы и практические задания» лучше, чем «Подробнее». Проверьте, что блоки открываются касанием на телефоне, а при печати страницы содержимое не пропадает.
Пример: условная страница программы курса
Возьмём вымышленный курс «Работа с клиентскими обращениями» для сотрудников компании. Страницу можно собрать так:
- Первый экран: название, одна фраза о том, для кого курс, краткая сводка (длительность, формат, группа или индивидуально) и кнопка «Оставить заявку».
- Оглавление: «Для кого курс», «Что изучают», «Как проходит обучение», «Что получает сотрудник по итогам», «Для групп и организаций», «Вопросы и ответы».
- Раздел «Что изучают»: пять модулей в виде свёрнутых блоков, в каждом заголовок и две-три строки о результате модуля.
- Раздел «Для групп и организаций»: открытый список — что нужно прислать, как согласуется расписание, как оформляются документы.
- В конце: контакты и повторная кнопка заявки, а не просто завершение текста.
Все формулировки о документах и условиях должен подтверждать сам центр. Сайт лишь показывает их понятно и без противоречий между разделами.
Проверочный список перед публикацией
- Ключевые параметры курса видны без прокрутки и без раскрытия блоков.
- Оглавление есть, пункты названы человеческими словами, ссылки ведут к нужным местам.
- Абзацы короткие, перечисления оформлены списками, заголовки не повторяются.
- Основной шрифт не мельче 16 пикселей, контраст достаточный, строка не растянута.
- Свёрнутые блоки открываются на телефоне и имеют говорящие названия.
- Кнопка заявки доступна в начале и в конце страницы.
- Страница открыта на телефоне и на компьютере: нужный ответ найден за несколько секунд.
Лучшая проверка — попросить коллегу, не знакомого со страницей, найти по ней один из ваших вопросов. Наблюдайте, где он замедляется: именно там структуре нужна правка.
