Оглавление длинной страницы: как помочь клиенту найти нужный раздел

Оглавление сокращает путь к ответу

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

Далее рассматриваем большую страницу услуги, где посетителю нужно разобраться в составе работ, цене и условиях, прежде чем обращаться в компанию; оглавление помогает выбрать интересующий вопрос, если под каждым заголовком уже есть законченный ответ, который можно прочитать без возвращения к началу. Сначала готовят содержание. Отсутствующий ответ добавляют в текст, а разбросанные по странице пояснения объединяют в одном разделе. Иначе ссылки лишь обозначат места, где читатель снова вынужден искать недостающие сведения, и новый элемент навигации не решит его задачу.

Пункты, которые можно принять по содержанию

1. Подпись предсказывает ответ. «Стоимость работ» яснее, чем «Подробнее», если ссылка ведёт к цене. Посетитель понимает назначение пункта до нажатия, а заголовок после перехода подтверждает ожидание.
2. Порядок соответствует странице. Пункты идут в той последовательности, в которой расположены разделы. Исключение для специально выделенного действия обсуждают отдельно, чтобы оглавление не обещало ложную структуру.
3. Нет конкурирующих одинаковых названий. Два пункта «Условия» требуют уточнения: оплаты, выполнения или обращения. Различие помогает выбрать правильный раздел без пробных нажатий.
4. Полезные ответы не спрятаны. Если цена и ограничения находятся внутри большого раздела, стоит оценить ссылку на подходящий подзаголовок. Добавлять все мелкие заголовки подряд не обязательно.
5. Оглавление заметно в нужном месте. Оно появляется до длинного текста и не требует угадать назначение иконки. На телефоне заголовок «На этой странице» или другой ясный текст объясняет, что раскрывается.

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

Сколько пунктов оставить

Показать несколько главных ответов лучше, чем перенести в оглавление каждое выделенное слово, если из-за этого список занимает почти столько же места, сколько краткое содержание услуги и заставляет прокручивать его отдельно. Приоритет получают самостоятельные вопросы. Внутри сложного раздела можно добавить местные переходы или подзаголовки. Это сохраняет обзор страницы. Главное оглавление остаётся коротким по смыслу, даже если отдельные подписи достаточно длинные.

Для навигации между категориями магазина нужен другой инструмент. Выбор мегаменю каталога разобран отдельно. Здесь каждый пункт остаётся в пределах одной страницы.

Адрес ведёт к разделу и после повторного открытия

Якорная ссылка содержит адрес страницы и фрагмент после знака #. По описанию MDN браузер использует этот фрагмент для перехода к части документа. Серверу он в составе запроса не передаётся. Поэтому открытие страницы и попадание к нужному месту — связанные, но разные действия. Исполнитель настраивает их, а заказчик проверяет результат обычным переходом по полной ссылке.

Проверка прямого входа

• Адрес меняется понятно. После перехода из оглавления в адресе можно распознать выбранный раздел. Для примера ссылка на цену может заканчиваться на #price — это обозначение для обсуждения, а не обязательное имя.
• Полный адрес открывается в новой вкладке. Скопируйте ссылку на раздел и откройте её отдельно. Нужный текст доступен без предварительного нажатия на оглавление в этой вкладке.
• Обновление не теряет назначение. После перезагрузки страницы посетитель попадает к тому же смысловому блоку, даже если изображения или шрифты загружаются позже.
• Назад возвращает предсказуемо. После нескольких переходов браузер не превращает кнопку возврата в беспорядочные прыжки и не выбрасывает неожиданно на другой сайт.
• Прямая ссылка показывает скрытый ответ. Если цель находится в сворачиваемом блоке, она открывается или посетитель получает понятный способ увидеть её содержимое.

Повторяющиеся адресные метки недопустимы. MDN указывает, что идентификатор id уникален в документе. Если у двух разделов одинаковая метка, адрес перестаёт однозначно обозначать нужный ответ.

Что происходит при обновлении текста

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

Для приёмки пригодится перечень используемых ссылок на разделы. Его не обязательно делать большим реестром: достаточно адресов, которые уже уходят клиентам или встречаются в других материалах. После существенной правки страницы они открываются повторно. Так редактор видит, сохранились ли переходы из прежних материалов после переименования раздела.

Переход оставляет заголовок и управление на виду

На длинной странице закреплённая шапка иногда закрывает начало раздела: посетитель видит середину абзаца и вынужден прокручивать назад, чтобы прочитать заголовок и убедиться, что ссылка привела к цене нужной услуги, а не к похожему блоку с другими условиями. Движения страницы недостаточно. Исполнитель учитывает отступ, например с помощью свойства scroll-margin-top, описанного MDN. Заказчику достаточно проверить результат на разных экранах: заголовок виден, начало ответа доступно для чтения, дополнительные панели ничего не перекрывают.

Телефон и небольшой экран

1. Цель видна целиком по смыслу. Заголовок не закрывается шапкой, панелью согласия или другим закреплённым блоком. Читатель понимает, какой вопрос раскрывается ниже.
2. Пункт можно нажать. Соседние ссылки не настолько тесны, чтобы палец выбирал другой раздел. Длинная подпись переносится, сохраняя читаемость и связь с одним действием.
3. Оглавление не запирает прокрутку. После раскрытия списка можно прочитать его и вернуться к основному тексту. Внутренняя прокрутка не маскирует часть пунктов.
4. Поворот телефона сохраняет управление. После изменения ориентации цель и кнопки остаются доступны. Открытая панель не занимает весь экран без выхода.
5. Текст выдерживает увеличение. При увеличении страницы пункты и заголовки не обрезаются и не уезжают под соседнюю колонку.

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

Для людей, включивших уменьшение движения на устройстве, браузер предоставляет предпочтение prefers-reduced-motion, с которым исполнитель может связать спокойное поведение переходов и отказаться от необязательной анимации прокрутки. Это учитывают отдельно от внешнего вида. Достаточно сравнить обычный режим с режимом уменьшенного движения на устройстве. При обоих вариантах ссылка приводит к тому же ответу. Меняется способ перемещения, а не доступность содержания.

Клавиатура после перехода

• Пункт достигается клавишей Tab. Видимое выделение показывает, какая ссылка сейчас выбрана. Нажатие Enter выполняет переход.
• Следующее действие понятно. После перехода посетитель может продолжить чтение и двигаться к действиям выбранного раздела, а не вынужден заново проходить всю шапку.
• Фокус не скрыт полностью. Закреплённые элементы не закрывают активный элемент целиком. Это соответствует смыслу критерия WCAG 2.4.11.

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

Самопроверка после наполнения страницы

Принимать оглавление лучше после наполнения: на коротком демонстрационном тексте заказчик не увидит, как длинная подпись переносится на телефоне, куда сдвигается раздел после загрузки изображения и остаётся ли последний заголовок над закреплённой панелью, когда страница уже прокручена до конца. Проверка зависит от содержания. Готовую страницу открывают обычным способом и по прямым ссылкам, затем выполняют переходы на телефоне и клавиатурой. Исправленная запятая не требует полного повторения; изменение разделов, изображений или закреплённых элементов может повлиять на прежний результат.

Что записать в замечании

• Исходное действие. Откуда открыт адрес: из оглавления, письма или новой вкладки. Это помогает отличить дефект прямого входа от ошибки нажатия.
• Ожидаемый ответ. Какой раздел человек хотел увидеть и по какой подписи его выбрал. Если ожидание не совпало с содержанием, замечание может относиться к редактуре.
• Фактическая позиция. Какой текст оказался на экране, что его перекрыло и где осталось управление. Снимок дополняет описание, но не заменяет его.
• Условия просмотра. Устройство, браузер, ориентация и наличие открытых панелей. Для ошибки клавиатуры указывают последовательность нажатий.
• Результат исправления. Тот же переход повторяется после правки. Закрывают замечание по действию, которое прежде не получалось.

Удобная приёмка заканчивается самостоятельным поиском ответа, когда человек, не участвовавший в разработке страницы, находит нужный раздел по подписи, открывает его по ссылке и продолжает чтение без подсказки автора макета. Здесь не требуется придумывать норматив времени или обещать рост заявок. Наблюдаемая трудность уже подсказывает изменение: неясная подпись, скрытый заголовок, недоступный пункт или потеря позиции после открытия. Эти проблемы исправляются по отдельности. После правки сценарий повторяют на том же вопросе.

После редактуры ссылки проверяют повторно. Когда маркетолог переименовывает или объединяет разделы, ему нужен понятный способ сообщить исполнителю о влиянии на оглавление и уже используемые адреса.

Признаки готового оглавления

1. По названиям понятно, где искать цену, условия и способ обращения.
2. Каждая ссылка приводит к своему разделу из оглавления и при отдельном открытии адреса.
3. Шапка и другие панели оставляют заголовок читаемым.
4. Телефон, увеличение и клавиатура сохраняют доступ ко всем пунктам.
5. Редактор знает, какие адреса сохранить при следующем обновлении страницы.

Если все эти действия получились, оглавление выполняет свою работу: человек выбирает ответ и читает его. Дополнительное оформление можно обсуждать уже на этой основе, не меняя понятный путь ради анимации.