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