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