«Сделайте красиво!» Спор о деньгах и удобстве в UX/UI-дизайне

Что важнее в UX/UI-дизайне коммерческого сайта — красота, удобство или результат для бизнеса? И обязательно ли выбирать что-то одно? Вместе с экспертами DIGITAL SECTOR разбираем шесть спорных утверждений о дизайне сайтов.

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

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

Чтобы разобраться, как находить баланс между красотой, удобством и интересами бизнеса, мы предложили шесть спорных тезисов трём экспертам DIGITALSECTOR. Исполнительный директор Надежда Кадырлеева рассматривает дизайн с позиции бизнеса, арт-директор Владислав Шинкин — с позиции визуального оформления, а руководитель отдела качества Владимир Младов — с позиции удобства и надёжности сайта.

«Я бы не стала утверждать, что для бизнеса красота вторична. Представьте сайт премиального отеля, который выглядит как обычная форма бронирования. Да, номер можно выбрать, оплатить, всё технически работает. Но где впечатление от отеля? Где ощущение уровня сервиса, за который гость собирается платить?

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

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

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

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

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

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

Так создаётся самое важное — дизайн-система проекта. Иначе сегодня у нас красивый главный экран, а через год — набор страниц, которые словно разрабатывали разные компании».

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

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

А вот если мы хотим сравнить, какое из двух дизайнерских решений лучше влияет на конверсию, можно использовать A/B-тестирование. Разумеется, при достаточном объёме трафика и корректной организации эксперимента.

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

Пример из практики. При разработке сайта отеля «Метрополь» важно было передать исторический характер и премиальный уровень гостиницы, сохранив удобное онлайн-бронирование. Для визуального оформления использовали элементы ар-деко, традиционные шрифты с засечками и характерную цветовую палитру. Одновременно проработали пользовательские сценарии от главной страницы до выбора и оплаты номера, интегрировали сайт с TravelLine. По данным опубликованного кейса, показатель LCP нового сайта улучшился на 44%.

«Мне кажется, мы иногда слишком увлекаемся идеей всё упростить. Ну убрали мы два шага из оформления заказа. И что? Пользователю действительно стало удобнее или мы просто получили красивую цифру для отчёта?

Представьте интернет-магазин, где при оформлении заказа решили сократить количество экранов. Теперь покупателю нужно одновременно выбрать доставку, указать адрес, применить промокод, заполнить контактные данные и выбрать способ оплаты. Формально шагов стало меньше, но человеку приходится разбираться со всем сразу.

Я бы начала с анализа воронки оформления заказа. Сколько пользователей переходят от корзины к оформлению? На каком этапе уходят? Как меняется доля завершённых заказов после изменения сценария?

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

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

Хороший интерфейс не обязательно содержит меньше информации. Он помогает человеку разбираться с ней в правильной последовательности».

«Я бы обратил внимание на сценарии, которые редко показывают на демонстрации. Например, пользователь заполнил форму и ошибся в индексе. Система должна не просто сообщить, что произошла ошибка, а указать проблемное поле и сохранить остальные данные.

Или человек нажал кнопку оплаты, но ответ от платёжного сервиса задерживается. В таком случае важно показать состояние операции и не допустить повторного списания из-за повторного нажатия.

Для этого недостаточно красиво оформить форму. Нужны корректная обработка ошибок, проверка данных и защита от повторного выполнения операции. Именно такие детали часто определяют, завершит человек покупку или бросит её на последнем этапе».

«Я бы не ставила перед каждым сайтом задачу полностью заменить менеджера. Всё зависит от продукта и модели продаж.

Когда компания продаёт сложное оборудование или индивидуальные ИТ-решения, консультация может быть естественной частью сделки. Клиенту нужно обсудить требования, совместимость, условия поставки или особенности проекта. Поэтому в B2B я бы отдельно определяла, какие задачи сайт должен закрывать самостоятельно, а на каком этапе подключается специалист.

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

Для оценки эффективности такого сайта полезно анализировать не только обращения, но и повторяющиеся вопросы клиентов. Если сотрудники постоянно объясняют сведения, которые посетители должны находить самостоятельно, это повод пересмотреть подачу информации».

«Сайт, как и упаковка, никому ничего не должен. Очень важно учитывать, что сайт — это этап воронки продаж. Естественно, нам всегда хочется, чтобы конверсия была около 100%, но так не бывает.

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

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

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

«Я бы предложил проверить, насколько легко клиент может найти нужную информацию без менеджера. Для начала можно собрать типовые обращения из отдела продаж и поддержки, а затем сопоставить их с содержанием сайта. Дополнительно посмотреть поисковые запросы внутри самого ресурса: что люди ищут и по каким запросам не получают подходящих результатов.

Так мы увидим, какой информации посетителям не хватает. Например, они регулярно ищут документацию по совместимости оборудования, а она находится в неожиданном разделе.

Отдельная задача — передача обращения менеджеру. Если клиент уже указал интересующую модель и технические параметры, эти данные должны попадать в CRM вместе с заявкой.

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

Пример из практики. Похожую задачу самостоятельного выбора продукта DIGITALSECTORрешал в потребительском сегменте — при редизайне сайта производителя оконных систем VEKA. Команда анализировала данные Яндекс.Метрики, тепловые карты и навигационные цепочки пользователей. На основе этих данных переработали структуру сайта, карточки товаров и представление ключевых характеристик. Особое внимание уделили каталогу продукции, калькулятору и интерактивным элементам, которые помогают посетителю разобраться в ассортименте.

«Хорошо продуманная интерактивность — это как отличный официант: всегда рядом, но никогда не заметен.

Интерактивность — это когда разработчик подумал за клиента, что ему сейчас понадобится, и дал ему кнопку, которую можно для этого нажать, поставил её в нужное место и покрасил в понятный цвет. То же самое можно сказать про анимацию. Лучший опыт — это бесшовный опыт, тот, который не замечаешь. Как у Эпл, короче».

«А я бы сразу задала вопрос: сколько такая интерактивность будет стоить не только сейчас, но и через год?

Допустим, мы разработали интерактивный каталог с подробными 3D-моделями. А у заказчика регулярно обновляется ассортимент. Кто будет готовить новые модели, добавлять характеристики, поддерживать совместимость с браузерами? Если каждое изменение требует участия разработчика, стоимость сопровождения может оказаться существенной.

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

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

Потому что высокая популярность красивой игрушки ещё не означает, что мы удачно вложили деньги».

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

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

При этом не всегда требуется разрабатывать две полноценные версии. Иногда достаточно предусмотреть текстовое представление данных или альтернативное управление».

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

Вывод простой: если скорость загрузки сайта — критичный параметр, то, разумеется, жертвовать ей нельзя. При этом есть огромный сегмент интернета, у которого другая цель (впечатления, статус, музейная красота, образ и т. д.), но об этом в другой раз».

«И здесь важно договориться о конкретных показателях. Потому что фраза «сайт должен быстро работать» для тестирования слишком неопределённая.

Я бы использовал Core Web Vitals — три показателя, которые характеризуют разные стороны пользовательского опыта.

LCP (Largest Contentful Paint) показывает, как быстро появляется самый крупный содержательный элемент страницы в видимой области. Хорошим считается значение не более 2,5 секунды.

INP (Interaction to Next Paint) оценивает отзывчивость интерфейса после взаимодействий пользователя. Хороший ориентир — не более 200 миллисекунд.

CLS (Cumulative Layout Shift) характеризует неожиданные смещения элементов. Хорошее значение — не более 0,1.

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

Например, при плохом LCP мы можем обнаружить, что основной баннер загружается слишком поздно. При проблемах с INP — найти тяжёлые JavaScript-обработчики, которые мешают интерфейсу быстро реагировать на действия».

«А меня в этой ситуации больше всего интересует стоимость поздних изменений.

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

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

«Было бы очень удобно списывать все проблемы с заявками на дизайн. Не покупают — меняем кнопки, не оставляют контакты — переделываем главную. Но давайте сначала разберёмся, кого мы вообще приводим на сайт и что этим людям предлагаем.

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

Я бы начала с анализа источников трафика и качества обращений. Причём смотрела бы не только на количество заявок, но и на то, сколько из них превращается в реальные переговоры и продажи.

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

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

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

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

«А я бы помог определить, на каком именно этапе возникает проблема. Здесь важно не ограничиваться общим показателем конверсии.

Предположим, аналитика показывает, что на страницу услуги пришла тысяча посетителей, а заявку отправили десять. Конверсия составляет 1%. Но сама по себе эта цифра ещё не объясняет причину.

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

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

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

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

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

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

Что обязательно нужно сделать к запуску? Какие функции можно отложить? Где мы готовы потратить больше ресурсов, а где достаточно простого решения?

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

«А я бы ещё просил согласовывать дизайн не только на идеальных примерах.

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

Поэтому мне важно видеть интерфейс с настоящим контентом и нестандартными состояниями. Именно там часто проявляется качество проектирования».

«И последнее: спорные решения полезно фиксировать вместе с их обоснованием. Не просто «выбрали второй вариант», а почему выбрали, какие ограничения учли и по каким признакам поймём, что решение сработало.

Это помогает и при приёмке проекта, и при его дальнейшем развитии. Через полгода новая команда сможет понять логику решения, а не пытаться угадать, почему интерфейс устроен именно так».

Если сайт не передаёт характер бренда, посетители не доходят до заявки или бронирования, а важные функции остаются незамеченными, возможно, стоит пересмотреть его UX/UI-дизайн и пользовательские сценарии.