Как UX и UI-дизайн сайта влияют на путь пользователя и заявки

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

Что отвечает за логику, а что за оформление

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

UX шире отдельного экрана, а UI — его важная часть.

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

Как удобство сайта отражается на заявках

Заявок меньше там, где путь к целевому действию длиннее, чем нужно. По оценке из одной экспертной статьи, посетитель решает, остаться или уйти, за 3–5 секунд. В другой экспертной оценке каждый дополнительный переход снижает вероятность заявки на 10–15%. Это мнения авторов, а не измерение для конкретного сайта.

Задачи UX здесь понятны: сократить число шагов, убрать препятствия на пути к действию и упростить сценарии. Структуру экранов под эти задачи закладывают на этапе веб-дизайна сайта.

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

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

В форме заказа оставьте минимум полей и не переспрашивайте лишнее. Что проверить самому:

• опросы и интервью с клиентами;
• карты кликов и тепловые карты;
• записи сессий и регулярный анализ поведения;
• A/B-тестирование;
• способен ли человек выбрать время, понять условия и завершить запись.

Порядок этапов проектирования

Сначала идут исследование и структура, потом визуальное оформление.

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

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

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

Сначала сценарий, потом экран

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

Если вы планируете новый сайт или редизайн, в QIO помогут выстроить этот порядок под вашу задачу.

Источники

• МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ПО СОВЕРШЕНСТВОВАНИЮ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ (В ЧАСТИ НАВИГАЦИИ, ПОИСКА, ПРЕДОСТАВЛЕНИЯ ИНФОРМАЦИИ) ФЕДЕРАЛЬНОЙ ГОСУДАРСТВЕННОЙ ИНФОРМАЦИОННОЙ СИСТЕМЫ "ЕДИНЫЙ ПОРТАЛ ГОСУДАРСТВЕННЫХ И МУНИЦИПАЛЬНЫХ УСЛУГ (ФУНКЦИЙ)" И... \ КонсультантПлюс
• Приказ Министерства связи и массовых коммуникаций РФ от 16.10.2015 N 405 "Об утверждении методических рекомендаций по совершенствованию интерфейсов (в части навигации, поиска, предоставления информации) федеральной государственной информационной системы "Единый портал государственных и муниципальных услуг (функций)" и официальных сайтов федеральных органов исполнительной власти и государственных внебюджетных фондов, используемых при предоставлении государственных услуг в электронном виде" | ГАРАНТ