UI/UX для корпоративного сайта: как сделать удобно

Что такое UI и UX

Разделим понятия:

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

Принципы UX для B2B

B2B-аудитория отличается от B2C. Это деловые люди, которые ищут конкретную информацию и ценят время. Принципы UX для B2B:

• Ясность — с первого экрана понятно, что делает компания;
• Конкретика — цифры, факты, кейсы, а не общие слова;
• Скорость — нужное находится за 2–3 клика;
• Доверие — команда, документы, сертификаты, отзывы;
• Простота — минимум шагов до заявки;
• Мобильность — всё работает на смартфоне.

Правило: если посетитель не понимает, чем занимается компания, за 5 секунд — UX не работает. Если не находит нужное за 3 клика — UX не работает. Если не может оставить заявку за минуту — UX не работает.

Проектирование форм

Формы — ключевой элемент корпоративного сайта. Именно через них приходят заявки. Плохая форма = потерянные клиенты.

Правила проектирования форм:

• Минимум полей — только необходимое: имя, телефон, email. Всё остальное — потом;
• Понятные подписи — не «введите текст», а «Ваше имя»;
• Крупные поля — удобно заполнять на мобильном;
• Валидация на месте — ошибки видны сразу, а не после отправки;
• Понятная кнопка — «Оставить заявку», «Получить консультацию», а не «Отправить»;
• Обратная связь — после отправки видно, что заявка ушла;
• Согласие на обработку данных — обязательно по 152-ФЗ.

Идеальная форма для корпоративного сайта: 3 поля (имя, телефон, email) + согласие. Чем меньше полей — тем выше конверсия.

Навигация и структура

Навигация определяет, насколько легко посетитель находит нужное. Правила:

• Не больше 7 пунктов в главном меню;
• Понятные названия — «Услуги», «О компании», «Кейсы»;
• Логичная иерархия — важное наверху;
• Одинаковая на всех страницах — не переделывается под каждую страницу;
• Мобильное меню — удобно открывается и закрывается;
• Хлебные крошки — показывают путь к текущей странице;
• CTA в шапке — кнопка «Оставить заявку» всегда видна.

Дополнительно: поиск для сайтов с большим количеством контента, футер с картой сайта, sticky-меню при скролле.

Сценарии пользователей

Сценарии — это пути, по которым посетители идут по сайту. Хороший UX проектирует сценарии заранее.

Типовые сценарии для корпоративного сайта:

• Знакомство — «Кто вы? Что делаете?» → главная, о компании;
• Поиск решения — «Можете ли вы решить мою задачу?» → услуги, кейсы;
• Оценка доверия — «Кто у вас работает? С кем работали?» → команда, клиенты, отзывы;
• Проверка условий — «Сколько стоит? Какие сроки?» → цены, документы;
• Контакт — «Как с вами связаться?» → формы, контакты;
• Повторное обращение — «Где посмотреть информацию о вас?» → блог, документы.

Каждый сценарий должен быть проработан: посетитель должен найти ответ на свой вопрос за 2–3 клика. Если сценарий не работает — UX требует переработки.

UI: визуальные принципы

UI отвечает за визуальную часть. Вот ключевые принципы:

• Единый стиль — цвета, шрифты, элементы одинаковые по всему сайту;
• Воздух — не перегружать страницы, оставлять пустоту;
• Контраст — важные элементы выделяются;
• Типографика — читаемые шрифты, правильные размеры;
• Иконки — простые и понятные;
• Кнопки — крупные, заметные, с понятными подписями;
• Формы — удобные для заполнения;
• Изображения — качественные, в едином стиле.

Правило: UI должен работать на UX, а не против него. Красивая кнопка, которую не видно — плохой UI. Красивый шрифт, который не читается — плохой UI.

Типичные ошибки

Наши рекомендации