Дизайн и удобство сайта: интерфейс, который доводит до заявки

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

UX и UI: что за что отвечает

Эти два сокращения часто используют как синонимы, хотя отвечают они за разное. UX (user experience) — это устройство взаимодействия: какие задачи человек решает на сайте, в каком порядке, что он видит на каждом шаге, где может застрять. UI (user interface) — это конкретное воплощение: сетка, шрифты, цвета, кнопки, иконки, отступы.

Разница видна на примере. Если посетитель не понимает, куда нажать, чтобы узнать цену, — это вопрос UX, и перекраска кнопки его не решит. Если он понимает, куда нажимать, но не может прочитать подпись, — это UI.

Мы всегда разводим эти два слоя в работе. Сначала договариваемся о структуре и сценариях, потом рисуем. Обратный порядок обходится дороже: переделка визуала — это правки в макете, переделка логики — это правки в макете, вёрстке и часто в программной части.

Дизайн начинается не с макета

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

Дальше — вопросы о посетителях. Не в виде абстрактного портрета, а по существу:

• С каким вопросом человек приходит на сайт и что он уже знает о вашей услуге.
• Что для него решающий довод, а что — второстепенное.
• Какие возражения регулярно звучат в разговорах с менеджерами.
• С какого устройства приходит основная часть аудитории.
• Сколько времени он готов потратить, прежде чем уйти к конкуренту.

Ответы на эти вопросы обычно уже есть у компании — в переписке, в записях звонков, в вопросах, которые задают на встречах. Их не нужно придумывать, достаточно выписать. Хороший источник — формулировки клиентов: люди говорят «программа для учёта заявок», а не «система автоматизации бизнес-процессов», и интерфейс лучше говорить с ними на их языке.

Структура и путь посетителя

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

Несколько правил, которые мы применяем:

• Одна страница — одна задача. Страница услуги отвечает на вопрос об услуге, а не рассказывает заодно историю компании.
• Глубина вложенности — не больше трёх кликов от главной до любой значимой страницы.
• Названия разделов — на языке посетителя. «Услуги» понятнее, чем «Решения», «Цены» понятнее, чем «Коммерческие условия».
• С каждой страницы есть очевидный следующий шаг. Тупиковых страниц, где человеку нечего делать дальше, быть не должно.

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

Главная страница: из чего она состоит

Главная страница выполняет сразу две работы: объясняет, чем занимается компания, и разводит посетителей по нужным разделам. Она редко бывает страницей продажи, но почти всегда — страницей ориентации.

Набор блоков, который в нашей практике работает устойчиво:

1. Первый экран. Название деятельности простыми словами, одно предложение о том, что вы делаете и для кого, и одно целевое действие. Без слоганов, которые подходят любой компании.
2. Услуги или направления. Короткий перечень со ссылками, без длинных описаний.
3. Примеры работ. Три-шесть проектов с указанием задачи и результата. Это самый убедительный блок на большинстве корпоративных сайтов.
4. Как мы работаем. Этапы и то, что клиент получает на каждом шаге.
5. Доказательства. Клиенты, отзывы, сертификаты, сроки на рынке.
6. Ответы на частые вопросы. Снимают возражения до обращения.
7. Контакты и форма. Телефон, почта, адрес, часы работы — не только в подвале.

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

Читаемость и доступность: шрифты, размеры, контраст

Большая часть сайта — это текст, и удобство чтения влияет на результат сильнее, чем выбор оформительского стиля.

Что мы задаём в макете:

• Размер основного текста. На экране комфортный размер обычно начинается от 16 пикселей, на мобильных — не меньше. Мелкий текст «для аккуратности» читают хуже.
• Межстрочный интервал. Примерно полтора размера шрифта для длинных абзацев.
• Длину строки. Слишком широкая колонка утомляет: глазу трудно находить начало следующей строки. Ориентир — порядка 60-80 знаков.
• Иерархию заголовков. Разница между уровнями должна быть заметна без сравнения бок о бок.
• Количество начертаний. Одной-двух гарнитур достаточно. Каждое лишнее начертание — это ещё один файл шрифта и лишние килобайты при загрузке.

Контраст — отдельная тема. Светло-серый текст на белом фоне выглядит на макете элегантно, но плохо читается на недорогом экране, при ярком свете и людьми с ослабленным зрением. Существуют рекомендации по доступности (WCAG), где для обычного текста задано соотношение контраста не ниже 4,5 к 1; проверить это можно бесплатными инструментами прямо по макету.

Доступность — это не только контраст. Нормальный интерфейс работает с клавиатуры, у изображений есть текстовые описания, поля формы подписаны, а не подсказаны только серым текстом внутри поля, который исчезает при вводе. Смысл никогда не передаётся одним цветом: если ошибка в форме отмечена только красной рамкой, человек с нарушением цветовосприятия её не заметит — нужна ещё и подпись. Всё это делается на этапе дизайна почти бесплатно и очень дорого добавляется потом.

Изображения и графика

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

Технические требования к изображениям такие же важные, как художественные. Мы задаём для каждого типа картинки точные пропорции, чтобы карточки не разъезжались, готовим современные форматы вроде WebP, отдаём разные размеры для телефона и десктопа и включаем отложенную загрузку для всего, что находится ниже первого экрана. Тяжёлые изображения — самая частая причина медленного сайта, а скорость входит в пользовательский опыт наравне с навигацией.

Мобильная версия и адаптивность

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

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

На что мы смотрим в мобильном виде:

• Размер областей нажатия. Ссылки и кнопки должны быть достаточно крупными, чтобы попадать пальцем без промаха; ориентир — около 44 пикселей по меньшей стороне.
• Отсутствие горизонтальной прокрутки. Широкая таблица или картинка, вылезающая за экран, ломает всю страницу.
• Порядок блоков. При сужении колонки складываются в одну, и важное содержимое иногда уезжает под второстепенное.
• Меню. Свёрнутое меню должно открываться и закрываться предсказуемо и не перекрывать содержимое навсегда.
• Формы. Правильный тип клавиатуры для телефона и почты экономит посетителю несколько нажатий.

Формы, кнопки и отклик интерфейса

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

Что снижает барьер:

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

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

Не менее важно, как интерфейс отвечает на действия. Небольшие отклики — подсветка кнопки при наведении, индикатор отправки, плавное раскрытие блока, подтверждение «заявка принята» на отдельной странице — снимают неопределённость. Человек должен видеть, что система его услышала. Здесь достаточно сдержанности: анимация длительностью в доли секунды помогает, а долгие эффекты при каждом прокручивании мешают и замедляют страницу.

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

Доверие: что снимает сомнения перед заявкой

Между «интересно» и «оставлю заявку» стоит проверка доверия. Посетитель ищет подтверждения, что компания существует, работает давно и делает то, что обещает. На сайте юридической компании эту работу делают квиз, живые отзывы и кейсы, которые подтягиваются прямо из CRM.

Работают на это:

• Страница «О компании». Не история в жанре мемуаров, а факты: чем занимаемся, с какого года, сколько человек в команде, как устроена работа, где находимся. Живые фотографии команды и офиса дают больше, чем абзац о ценностях.
• Кейсы. Формат «задача — что сделали — что получилось» убедительнее, чем галерея скриншотов.
• Отзывы с указанием автора и компании. Анонимный отзыв не работает.
• Полные контактные данные. Адрес, телефон, реквизиты, часы работы.
• Прозрачность по деньгам. Даже вилка цен или пример расчёта лучше, чем «стоимость по запросу».

Макеты, прототипы и дизайн-система

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

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

Дизайн-система — это набор согласованных решений: цвета, шрифтовые стили, отступы, состояния кнопок, поля форм, карточки, сообщения об ошибках. Для сайта из пяти страниц она избыточна, для сайта из ста страниц — необходимость. Что она даёт:

• Новые страницы собираются из готовых элементов, а не рисуются заново.
• Сайт остаётся единообразным даже спустя годы правок разными руками.
• Вёрстка становится дешевле: компоненты пишутся один раз.
• Обсуждение правок ведётся предметно: меняется элемент системы, а не отдельная страница.

Что проверить в макете перед вёрсткой

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

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

Как проверять решения после запуска

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

С чего мы начинаем:

1. Настроить цели в аналитике. Отправка формы, звонок по ссылке, переход в мессенджер, оформление заказа. Без этого любые рассуждения об удобстве остаются мнением.
2. Посмотреть, где обрываются сценарии. Отчёты по страницам входа и выхода показывают, на каком шаге теряются посетители.
3. Посмотреть записи и карты кликов. Часто выясняется, что люди нажимают на неинтерактивные элементы или не доходят до блока, ради которого сделана страница.
4. Спросить у отдела продаж. Менеджеры знают, какие вопросы задают чаще всего, — это прямая подсказка о том, чего не хватает на сайте.

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

A/B-тестирование — инструмент более требовательный. Он сравнивает два варианта страницы на живом трафике и показывает, какой работает лучше. Смысл в нём появляется тогда, когда посещаемость достаточна, чтобы разница не оказалась случайностью, а проверяется одно изменение за раз. Если трафика мало, разумнее опираться на наблюдение за пользователями и на здравый смысл: заметные проблемы обычно видны и без статистики.

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

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