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