Я Валерия, UI/UX-дизайнер в Appex.Media. Почти каждый проект начинается с фразы «хочу красивый сайт». Я отвечаю вопросом: красивый для кого? Собственнику нравится одно, а клиенту нужно быстро найти услугу, понять цену и оставить заявку. Иногда это совпадает, часто нет. Ниже расскажу, чем UX отличается от UI, какие дизайн-решения сильнее всего влияют на заявки, как я проектирую сайт, когда его задача продавать, как проверяю результат и когда редизайн вообще не нужен.
UX и UI: в чём разница
UX (user experience) про то, легко ли человеку дойти до цели: найти нужное, понять цену, записаться. UI (user interface) про внешний вид: цвета, шрифты, кнопки, иллюстрации. Я делаю и то и другое, и порядок у меня всегда один: сначала логика, потом визуал. Красивый интерфейс поверх запутанной логики даёт сайт, с которого уходят. Понятная логика в аккуратной оболочке даёт сайт, который продаёт.
Если описывать сайт как систему, у UX есть свои объекты: пользователь с его задачей, сценарий (путь от входа до заявки), страница, блок на странице и действие (кнопка, форма, звонок). Хороший UX означает, что для каждого типичного пользователя есть короткий сценарий без тупиков. UI отвечает за то, чтобы на каждом шаге этого сценария было видно, куда смотреть и что нажимать.
Что владельцы ждут от дизайна
Самое частое ожидание: новый дизайн сам по себе увеличит продажи. Это работает, если старый сайт мешал клиентам: был непонятным, медленным или неудобным на телефоне. Если же проблема в цене, предложении или в том, что на заявки отвечают через полдня, новый дизайн ничего не изменит. Второе ожидание: дизайн это про вкус, и его можно оценить на глаз. Я предлагаю оценивать по цифрам: сколько людей дошли до формы, сколько её отправили, где чаще всего уходят.
Дизайн и деньги: что говорят исследования
McKinsey в исследовании «The business value of design» пять лет наблюдали за 300 публичными компаниями. У компаний с самым сильным подходом к дизайну выручка росла примерно на 10% в год, у остальных на 3-6%. Мне в этом исследовании важна одна деталь: выигрывали компании, у которых дизайн-решения опирались на данные о пользователях и проверялись тестами, а внешняя красота сама по себе роли почти не играла.
Дизайн-решения, которые сильнее всего влияют на заявки
Когда я разбираю чужой сайт, проблемы почти всегда находятся в одном из этих мест:
- Визуальная иерархия. Главное крупно, второстепенное мельче. За несколько секунд человек должен понять, что вы предлагаете и куда нажимать.
- Кнопка действия, которая контрастирует с остальной страницей и повторяется после ключевых блоков.
- Читаемость: размер шрифта, длина строки, контраст текста и фона. Серый текст на светло-сером фоне выглядит изящно и плохо читается.
- Живые фото вместо стоковых. Если своих снимков нет, мы с Татьяной делаем их с помощью ИИ-фотосессии в фирменном стиле.
- Мобильная версия. Я проектирую её отдельно, а не сжимаю десктоп до ширины телефона.
- Скорость. Тяжёлые анимации и огромные картинки замедляют сайт и снижают конверсию, поэтому изображения я сразу готовлю в лёгком формате.
- Предсказуемость. Кнопка выглядит как кнопка, ссылка как ссылка, меню там, где его ищут. Оригинальность в навигации почти всегда стоит заявок.
Страницы, где дизайн решает больше всего
Страница услуги. Здесь человек решает, обращаться ли к вам. Ему нужны описание работы, цена или вилка, сроки, примеры и понятная форма. У клининговой компании, с которой работала наша команда, именно отдельные страницы под каждый вид уборки с ценой и составом работ дали кратный рост трафика из поиска и рост позиций в несколько раз. Дизайн таких страниц простой, но каждая отвечает на вопросы клиента в том порядке, в котором он их задаёт.
Страница специалиста. В медицине и других темах, где доверие важнее всего, люди выбирают конкретного человека. На медицинском проекте мы переделывали страницы врачей и услуг: фото, образование, стаж, направления, запись к конкретному врачу. Вместе с исправлением технических ошибок и доработкой структуры это дало рост позиций по основным запросам на 3-4 пункта за 3 месяца.
Как дизайн помогает поиску и нейросетям
Поисковики и ИИ-ассистенты читают страницу иначе, чем человек, но ценят то же самое: понятную структуру. Заголовки, которые отражают содержание блоков, списки вместо сплошного текста, таблицы с ценами, блок вопросов и ответов. Когда я проектирую страницу услуги, я сразу согласую с Михаилом, который отвечает у нас за SEO-продвижение сайтов, какие вопросы клиентов она должна закрывать и в каком порядке. Так один и тот же макет работает и на конверсию, и на видимость в поиске.
Как мы проектируем
- Исследование. Выясняю, кто ваши клиенты, какие вопросы они задают и с кем вас сравнивают. Смотрю аналитику и отзывы, разговариваю с клиентами, читаю обсуждения на форумах и Reddit.
- Прототип. Рисую схему страниц без цвета и картинок, чтобы обсуждать логику, а не вкусы.
- Визуальный дизайн в фирменном стиле.
- Тест на людях. Даю 5-7 людям задачу и смотрю, где они спотыкаются. По данным Nielsen Norman Group, пяти участников хватает, чтобы найти большую часть проблем юзабилити.
- Передаю макеты Алексею в разработку сайта и проверяю, что всё собрано так, как задумано.
Полный список элементов продающего сайта Алексей собрал в статье «Сайт, который приносит заявки», а ориентиры по бюджету я разобрала в статье «Сколько стоит дизайн сайта».
Как проверить, что дизайн работает
После запуска я смотрю на несколько показателей. Карта кликов показывает, нажимают ли люди на то, что мы считали главным. Глубина прокрутки показывает, до какого блока доходит большинство: если форма стоит ниже, до неё просто не долистывают. Записи сессий показывают, где люди возвращаются назад или долго ищут. Конверсия по шагам показывает, где теряется больше всего посетителей между входом на страницу и отправкой заявки. Все эти данные есть в Яндекс Метрике, и через месяц после запуска по ним видно, что дорабатывать в первую очередь.
Частые ошибки в UX
- Слайдер на первом экране, где главная мысль меняется каждые три секунды и никто не успевает её прочитать.
- Меню из пятнадцати пунктов, в котором нужная услуга спрятана в третьем уровне.
- Форма, которая после отправки ничего не сообщает, и человек не понимает, ушла ли заявка.
- Всплывающие окна, которые закрывают контент на телефоне.
Когда редизайн не нужен
Если сайт приносит заявки, а вам просто надоел его вид, полный редизайн может навредить: пропадут привычные пользователям элементы, а поисковики заново оценят страницы. В таком случае я предлагаю точечные изменения по данным аналитики. Полный редизайн оправдан, когда меняется позиционирование, сайт устарел технически или конверсия низкая по всем каналам.
Что вы получите
- Дизайн, построенный на данных о ваших клиентах.
- Прототип, проверенный на реальных людях до разработки.
- Удобную мобильную версию.
- Рост конверсии, который видно в аналитике.
Частые вопросы
Сколько длится проектирование?
Для корпоративного сайта обычно 2-4 недели от исследования до готовых макетов, в зависимости от числа типов страниц.
Можно ли улучшить UX без нового дизайна?
Часто да: поменять порядок блоков, переписать первый экран, упростить форму. Такие правки дают результат быстрее полного редизайна.
Нужен ли UX-дизайн для лендинга?
Да, даже больше, чем для большого сайта: у лендинга одна страница и одна попытка убедить посетителя, поэтому порядок блоков и формулировки решают всё.
Пришлите ссылку на сайт, и я бесплатно найду 5 мест, где дизайн мешает клиентам оставить заявку. Заказать UX-разбор.
В Appex.Media дизайн, разработку, SEO и рекламу делает одна команда, поэтому я с первого макета учитываю требования поиска и рекламных кампаний.
Источники
- McKinsey & Company. The business value of design, 2018.
- Nielsen Norman Group. Why You Only Need to Test with 5 Users, 2000.
Валерия, UI/UX-дизайнер Appex.Media
