Вообще, объем продаж, доходность и стоимость бренда — это многофакторные модели. Конечный результат — сложение значений всех факторов, понимание, как работает каждый из них — один из ключей к успеху. Сегодня мы поговорим о UX/UI дизайне ваших сайтов и мобильных приложений.
Задача UX/UI — сделать интерфейс понятным и приятным. Можно сказать, что это один из подходов создания дизайна сайтов и приложений, наиболее эффективный. О том, как именно это влияет на продажи, написано ниже, а пока расшифруем аббревиатуры.
Что такое UX
Итак, UX расшифровывается, как “user experience” (X — весьма универсальная буква в английском алфавите), что переводится как “пользовательский опыт”. Проще говоря, это схема расположения компонентов (меню, галереи, тексты, карусели и т.п.) интерфейса, которая делает его удобным и интуитивно понятным.
На выбор конкретной схемы для коммерческих сайтов и приложений влияют факторы: 1) целевые действия, которые требуются от пользователя; 2) имеющийся у людей опыт взаимодействия с подобными интерфейсами; 3) смыслы (эмоциональные, функциональные) бренда, продукта, приложения; 4) ресурсы компании на разработку и поддержку и т.п..
Что такое UI?
UI расшифровывается, как “user interface” — в данном случае речь идет о том, как интерфейс будет оформлен графически и стилистически (цвета, иконки, отступы, шрифты и т.п.). Отчасти задача UI в том, чтобы вызвать эмоцию, не обязательно бурную, но непременно приятную.
Как это влияет на продажи?
Речь, конечно, идет о конкурентном рынке, где клиент выбирает между несколькими брендами и компаниями. В самом начале я сказал, что задача UX/UI — сделать интерфейс понятным и приятным — в этом ключ. Расшифрую через тезисы:
- Удобный интерфейс делает информацию структурно понятной, а целевое действие логичным, удобным и быстрым. Т.е. сокращается время между желанием сделать заказ и совершением покупки (при прочих равных).
- Визуально привлекательный интерфейс, во-первых, вызывает сам по себе приятные эмоции, во-вторых, формирует доверие, в-третьих, также делает информацию и целевые действия понятными и очевидными.
- Проработаны и качественно реализованный UX/UI на основе вашего фирменного стиля выделяет бренд и компанию на фоне остальных однотипных или архаичных сайтов. Т.е. вы получете больше внимания и запоминаемости.
Вам может показаться влияние фактора UX/UI незначительным, но так ли это?
Когда мы разрабатывали дизайн для kubanparts.ru, то выписали все способы, через которые клиенты пытаются заказать автозапчасти: звонок; запрос по VIN; сообщение в мессенджер; поиск по коду; подбор по каталогу.
Составили иерархию привычек пользователей, которая легла в основу UX. Детально проработали интерфейсы на уровне каждого из адаптивов (ПК, смартфон, планшет). Далее выписали дизайны сайтов, которые мы считали привлекательными и современным. И опираясь на это реализовали свой вариант.
Кому-то (кто не в теме запчастей) сайт покажется нелогичным, но конверсия выросла в три раза, а количество дистанционных продаж (с отправкой по краю и в регионы) подскочило в два раза за счет роста доверия (люди перестали бояться платить). Просто факт.
Проведем игру
Давайте представим ситуацию, которую я наблюдаю каждый день, просматривая сайты в различных нишах. Скажем, вы хотите купить диван и нашли какую-то модель на сайтах четырех компаний. Пусть будут одинаковая цена, внешний вид, условия поставок и прочие факторы кроме UX/UI. Итак:
- Компания №1 — архаичный и неадаптивный дизайн (образца 2010), который можно кое как посмотреть только на ПК (такие сайты еще есть). На этом ресурсе не понятно, как и где купить, нет корзины, чата с продавцом.
- Компания №2 — товарный лендинг. Чтобы заказать, нужно позвонить или отправить запрос через форму.
- Компания №3 — типичный интернет-магазин на шаблонном дизайне (вы видели множество похожих сайтов)
- Компания №4 — современный адаптивный дизайн (подстраивается под ПК, смартфон, планшет), собственный и узнаваемый фирменный стиль, лаконичный логотип в духе последнего времени, удобная фотогалерея, есть видео, характеристики на виду, присутствуют рекомендуемые товары, имеются корзина и возможность заказа онлайн, ссылки на карточки маркетплейсов, чат с продавцом, номер телефона, информация о гарантии, доставке и возврате.
Итак, у какой компании из четырех вы купите с наибольшей вероятностью? Очевидно, что результат будет таким:
- Компания №1 — нулевая вероятность.
- Компания №2 — отправите запрос только если откроете их первыми и то не факт.
- Компания №3 — пусть будет 20%. Они получат свой заказ только если у компании №4 не будет товара на складе.
- Компания №4 — 80%, а может и все 100%, потому что: видите уровень компании и это повышает к ней доверие; получаете полную информацию о товаре, и все вопросы в голове закрыты; понимаете, как связаться с продавцом и купить на МП, если вам так удобнее; корзина, заказ и прочие функции работают, а, значит, вы совершите покупку технически легко.
Краткий чек-лист по разработке UX/UI коммерческого сайта
Многие владельцы бизнеса совершают ошибку, когда решив разработать сайт, обращаются к дизайнеру. Давайте разберем очередность действий. Вы увидите, что из шести шагов только два делает дизайнер.
Шаг 1. Постановка задачи.
Нужно понять, что вы хотите получить от сайта — рост дистанционных продаж, конверсия, вовлеченность и т.п. показатели.
Шаг 2. Анализ.
Вам предстоит изучить:
- проблему, которую решает бренд (вечную);
- аудиторию (портреты, пути, привычки, способы таргетирования и т.п.);
- прямых и косвенных конкурентов (что делают они, чтобы понять, на чем вы хотите их обойти сейчас и в будущем);
- смежные ниши (иногда инновации — это заимствования из других направлений).
Шаг 3. Построение схемы маркетинговых коммуникаций.
Это даст понимание, как именно ваш сайт будет получать входящий трафик и перерабатывать его в ретаргетинге, а также целевые действия, которые должен совершить клиент на каждом этапе взаимодействия.
Шаг 4. UX.
И, вот, когда проведена подготовительная работа, вы можете проектировать структуру сайта и его интерфейсы. Техническое задание, которые вы отдадите UX-дизайнеру, будет иметь под собой реальную основу и потенцию к успеху.
Кроме того, важно предусмотреть расширяемую компонентную структуру веб-проекта, чтобы будущие интерфейсы вы делали буквально на лету (об этом чуть ниже).
Шаг 5. UI.
Вся красота сайта — это последний этап работы над дизайном. И здесь важно смотреть на топовых игроков (Skillbox, Яндекс Практикум, Тинькофф и т.п.), чем на шедевры коллег, созданные на Тильде. Изучите типографику, цвета, графику сайтов 20-30 технологически взрослых компаний в РФ и за рубежом — поймете разницу.
В общем, если вы хотите, чтобы вас воспринимали, как серьезную компанию, которая создает ценность для потребителя и полезный продукт, уделите и сделайте дизайн на уровне топов.
Если вы хотите ковыряться где-то на дне рынка, получая наименее платежеспособных клиентов, то экономьте и делайте, как умеете, используйте конструкторы.
Да, некоторые гХХвносайты конвертирируют трафик в лиды, потому что другие игроки тоже упакованы, как бомжи. Но как только на рынок придет компания, которая уделит внимание смыслам и дизайну, лидогенерация у её конкурентов на прежнем уровне закончится.
Шаг 6. Верстка.
Это уже шаблон сайта на HTML, CSS и JS. Тема требует детального рассмотрения, граничит с фронтенд-разработкой. Реализуя этап, вы увидите работу компонентов и при необходимости внесёте корректировки в дизайн.
Не забываем про GIT. Об этом отдельная статья. Храните верстку на своем репозитории, фиксируйте обновления, создавайте ветки проекта.
Важный совет. Создавайте UI-кит.
UI-кит — это набор правил размещения блоков на странице (в зависимости от ширины экрана) и дизайн компонентов, из которых вы быстро соберете почти любой интерфейс. Вы можете его оставить на уровне прорисованной графики, но моя рекомендация — сверстать.
Данный инструмент сохранит время и деньги при дальнейшей разработке. Грубо говоря, это кирпичики вашего сайта, из которых даже веб-мастер без привлечения дизайнера соберет красивый и понятный интерфейс.
Вместо заключения
Ранее незнакомая аббревиатура UX/UI обрела смысл в вашей голове. Вы поняли влияние этого фактора на воронку продаж. Также я дал чек-лист по разработке, а также способ получить расширяемый интерфейс и сократить временные и финансовые издержки при создании новых страниц.
И если вы поняли ценность проработанного UX/UI, хотите это использовать для своего бренда, обращайтесь.
https://maxsharun.ru — здесь примеры наших работ и ссылки. Всем пока!
#uxui #maxsharun #маркетинг