Как сделать сайт удобным

Удобство — не «красиво»

Сайт удобен, если человек без подсказки находит услугу, понимает условия и отправляет заявку. Цвет кнопки вторичен. Вторичен и «современный» визуал, если меню прячет разделы, форма требует лишние поля, а текст услуги — полотно без абзацев.

Разница сценария и оформления — отдельный разбор: UX и UI: в чём разница. Здесь практика трёх мест, где ломается работа сайта: навигация, формы, чтение.

Навигация

Навигация отвечает на три вопроса: где я, куда могу пойти, как вернуться. Если ответ только «посмотрите шапку из двенадцати пунктов», человек уйдёт в поиск по сайту — или с сайта.

Меню

Меню — не каталог амбиций компании. Это список задач посетителя. «Миссия» и «Партнёры» редко первая задача. Первая — услуга, продукт, цена или контакт.

Пункт меню оправдан, если за ним страница с собственной работой. Пункт «Ещё» с двадцатью ссылками — склад, не навигация.

Для корпоративного сайта обычно хватает: услуги или продукты, несколько разделов под реальный спрос, о компании как доказательство, контакты. Журнал — если его ведут. Кейсы — если есть что показать, не стоковые фото.

Дублировать одно и то же тремя ярлыками («Услуги», «Решения», «Направления») нельзя: посетитель не знает, чем они отличаются, и не обязан угадывать внутренний жаргон.

Имена пунктов — язык клиента. «Департамент комплексных решений» в шапке — барьер. «Внедрение 1С» или «Сопровождение сайта» — уже можно выбрать.

Ориентиры на странице

Заголовок страницы должен совпадать с пунктом, по которому пришли. Хлебные крошки нужны, когда вложенность больше одного уровня. Подсветка текущего раздела в меню — мелочь, без которой «где я» решается наугад.

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

Футер — повтор ключевых разделов, телефон, реквизиты. Не вторая карта сайта на восемь колонок мелкотой.

Сквозные ссылки в шапке на все города, все бренды и все PDF «скачать презентацию» превращают навигацию в шум. Города — в отдельный раздел или селектор, если география действительно меняет услугу.

Формы

Форма — место, где удобство проверяется жёстче всего. Человек уже готов оставить контакт. Дальше вы либо принимаете заявку, либо устраиваете экзамен.

Состав полей

Каждое поле отвечает на вопрос: зачем это менеджеру до первого звонка. Имя и способ связи — да. Комментарий — по желанию. ИНН, должность и «как вы о нас узнали» из десяти пунктов — нет, пока это не сделка с юридической обязательностью на входе.

Телефон и почта одновременно обязательными — лишнее трение. Один канал обязателен, второй опционален.

Маска телефона не должна ломать вставку номера из записной книжки и международный формат, если вы работаете не только в одном коде страны.

Подписи полей — существительные, не загадки. Плейсхолдер не заменяет подпись: он исчезает, когда человек начал ввод.

Поведение формы

Кнопка говорит, что произойдёт: «Отправить заявку», не «OK» и не «Далее», если далее ничего нет.

После отправки — явное подтверждение на месте или отдельный экран «заявка принята». Тишина после клика выглядит как поломка.

Ошибки — рядом с полем, человеческим языком: «Укажите телефон», не код ответа сервера. Не очищать всю форму из-за одной опечатки.

Файл в приложении — только если без файла заявка бессмысленна. Иначе это барьер «зайду с компьютера».

Капча и согласие на рассылку, спрятанные внизу серым, добавляют отказы и юридический шум. Согласие на обработку — коротко и рядом с кнопкой, не романом.

Если заявка уходит только на почту, без записи и без цели в аналитике, через месяц вы не узнаете, жива ли форма. Это уже не «удобство кнопки», а дыра в учёте. Её разбирают вместе с конверсией сайта.

Чтение

Текст на экране читают сканированием: заголовок, подзаголовки, списки, первый абзац блока. Полотно без структуры не читают, даже если оно «продающее».

Широкая колонка на десктопе утомляет. Узкая с рваными переносами — тоже. Абзацы короче, чем в Word. Списки — для перечислений, не для каждого предложения.

Контраст текста и фона должен выдерживать дневной свет, не только макет в тёмной комнате. Серый мелкий текст на сером — частая причина «сайт неудобный», которую списывают на «аудиторию не ту».

Кегль и межстрочный интервал важнее декоративного шрифта в шапке. Если гарнитура красивая, но нет нормальных кавычек, «ё» и тире — это брак вёрстки, не стиль.

Ссылки в тексте отличаются от абзаца не только цветом. Не делать весь абзац одной ссылкой «подробнее». Не подчёркивать то, что не кликается.

Выключки по ширине с дырами между словами на русском сайте почти всегда хуже обычного левого края.

Телефон как основной контур

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

Кнопки и пункты достаточно крупные, чтобы попасть пальцем. Соседние ссылки в меню не должны открываться «мимо».

Номер телефона открывает звонок. Карта не перехватывает жест страницы навсегда. Модальное окно не запирает прокрутку так, что закрыть его нельзя.

Клавиатура на поле телефона — числовая. На поле почты — с «@». Это мелочь, которую видно сразу.

Что проверить перед запуском

Пройдите сценарий чужими руками: человек не знает вашу оргструктуру и названия отделов.

1. С главной попасть в нужную услугу за два-три шага.
2. Понять, что вы делаете, без слайдера из шести баннеров.
3. Найти телефон и форму на узком экране, не играя в «гамбургер».
4. Отправить форму с ошибкой в поле и увидеть, что исправлять.
5. Прочитать услугу целиком, не закрывая попапы каждые десять секунд.

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

Чек-лист

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

Чего удобство не чинит

Понятная форма не спасёт пустой оффер. Ясное меню не заменит услугу, которой нет на сайте. Если человек не понимает, зачем вы, это не «ошибка UX навигации» — на первом экране нет обещания.

Удобство — гигиена. Дальше работают смысл страницы, скорость ответа и то, совпадает ли трафик с тем, что вы продаёте.