Мода приходит и уходит. Еще совсем недавно чуть ли не каждый второй сайт был нарисован в плоском дизайне, потом только ленивый не сделал на своем лендинге параллакс*, а прозрачные кнопки целевого действия до сих пор иногда будоражат умы маркетологов и дизайнеров.
Про UX-дизайн много кто слышал, к счастью, о нем говорят все чаще, но мало кто его использует. Давайте разбираться, почему стоит перейти на него и перестать играть шрифтами.
*Параллакс-скроллинг (с англ. parallax-scrolling) — в веб-дизайне: особая техника, используемая в первую очередь в компьютерной графике, когда фоновые изображения в перспективе двигаются медленнее, чем двигаются элементы, расположенные на переднем плане. Источник: lpgenerator.ru
Что такое UX-дизайн
Для начала разберемся, что такое UX. Как и многие другие понятия в маркетинге, понятие User experience (UX) пришло к нам из английского языка и означает «пользовательский опыт». То есть это восприятие, ожидания и реакция посетителя на производимые действия и на происходящее на сайте до, во время и после захода.
Рассмотрим на примере, чтобы было понятнее. Допустим, вам нужно купить новый телефон. До захода на сайт вы уже ожидаете, что на сайте будет большое количество разных телефонов, которые можно выбрать с помощью фильтров цены и бренда, отсортировать по увеличению стоимости. Также можно будет перейти на карточку товара, чтобы прочитать подробнее о характеристиках и посмотреть фото. Вы явно ожидаете, что можно будет оформить покупку прямо на сайте, положив в телефон в корзину по нажатию кнопки «Купить». Скорее всего, вам будут предложены сопутствующие товары: чехол и защитное стекло под ваш бренд и модель (чтобы не нужно было ничего искать по сайту и не было возможности ошибки). Жирным я выделила то, что вы, скорее всего, ожидаете увидеть в любом магазине бытовой техники, где все эти телефоны продают.
Перейдя на сайт, вы уже будете оценивать не свои ожидания, а соответствие этим ожиданиям и свои ощущения от использования: цвет, дизайн, удобство, полноту информации, качество фото — но уже не на гипотетическом, а на конкретном сайте. А после вы уже оцениваете то, насколько хорошо была решена ваша проблема, рассылки, общение с менеджером, сервис и прочее.
Уточню, что все это происходит неосознанно: вы не сидите с чек-листом и не отмечаете, есть ли какой-то элемент на сайте и правильно ли он используется (как это обычно делаю я при работе с проектами). Сайт просто нравится или вызывает отторжение, удобен или хочется его побыстрее закрыть.
Чем UX отличается от обычного дизайна
Тут вы меня наконец-то остановите и спросите: ты много говоришь про пользовательский опыт, а причем же здесь дизайн? На самом деле почти ни при чем. Это синергия разных специализаций, участвующих в разработке сайта.
Во-первых, это скорее больше относится не к дизайну, а к разработке интерфейса и маркетингу, и только потом уже к цветовым и стилистическим решениям. То есть роль играет не только цвет кнопки, но ее расположение на экране, сопроводительный текст и многое другое.
Во-вторых, это во многом про психологию и поведение человека. С помощью продающих элементов и дизайна сайта мы стараемся направить посетителя по нужному нам пути и улучшить при этом пользовательский опыт на сайте. То есть UX-дизайн — это в первую очередь про удобство и ненавязчивые продажи. В чем-то мы должны потворствовать поведенческим клише, в чем-то — подталкивать к правильному решению, но в любом случае делать сайт для пользователя.
В-третьих, это еще и про копирайтинг, так как тексты и подача информации имеют огромное значение. Особенно это касается заголовков и УТП, ведь это первое, что видит и на что обращает внимание посетитель сайта. Кстати, про то, как составлять заголовки, у нас есть неплохая статья, советую прочитать!
Почему же это все-таки история про дизайн? Потому что основное воплощение — это дизайн-макет, и без правильно отрисованных, с учетом психологии цветовосприятия, элементов нам никуда.
Получается, что понятия «дизайн» и «UX-дизайн», как говорят в Одессе, две большие разницы. Дизайн — это разработка цветовой концепции, отрисовка схематичных макетов, визуальная часть проекта. UX-дизайн — психология и поведение покупателя, юзабилити, расположение и компоновка блоков, текст и многое другое, но также он включает в себя все, что понимается под дизайном.
Почему нужно использовать UX-дизайн при разработке
Думаю, ответ будет достаточно простым и коротким: потому что удобство использования сайта напрямую влияет на ваш доход. Рассмотрим на примере: девочка Маша хочет купить себе новый коврик для йоги и зашла на сайт интернет-магазина.
Плохо: Маша видит, что фото некачественные, описание еле нашла, про доставку просто нигде не написано (или она не нашла). Нажала на кнопку «Заказать», и после долгой загрузки на нее вывалилась форма с 10 полями, в которых нужно ввести имя, фамилию, адрес, а еще любимое блюдо и кличку собаки. «Да ну эту йогу!» — подумала Маша и ушла из магазина.
Хорошо: На фото можно рассмотреть чуть ли не каждую пору коврика, а также узнать все необходимые характеристики и еще стоимость доставки. Но! Рядом написано, что доставка может быть бесплатной при покупке набора. Маша переходит на страницу со спецпредложением и видит, что к коврику в ее любимом розовом цвете предлагается специальная бутылочка, тоже розовая, чехольчик и сборник музыки для йоги на iTunes. «Да это же то, что я искала всю жизнь!» — думает Маша и радостно заказывает набор в один клик.
Увидели разницу? В первом случае магазин не получил ничего, так как сайт совершенно не проработан, сделан не для людей. Во втором — получил не просто прибыль, а продал то, что завалялось на складе, и заработал еще больше, чем планировал, даже с учетом бесплатной доставки. И все это потому, что покупательнице было удобно найти информацию и решить свою проблему.
К чему я это все веду: Если потратить время на разработку и сделать все в соответствии с принципами UX-дизайна, то можно не только сэкономить на последующей рекламе, но и начать зарабатывать сразу (а не ждать несколько лет высокой конверсии на «неправильном» сайте, теряя при этом прибыль).
13 принципов UX-дизайна
Хотите проверить свой сайт на соответствие принципам UX-дизайна? Тогда начнем!
- Интерфейс должен быть простой и понятный. Любые сложности, трата времени на поиск формы заказа или необходимой информации — минус от вашей прибыли.
- Посетитель не должен «включать мозг», чтобы совершить какое-то действие. Если чтобы заполнить форму, нужно как следует подумать, вычислить корень из 175, чтобы вас не посчитали роботом, то ни о каком UX-дизайне речи не идет. Сайт должен быть интуитивно понятным без использования подсказок.
- Однако не нужно объяснять то, что и так понятно. Например, все уже знают, что стрелки нужны для того, чтобы листать картинки, их подписывать не надо.
- Не допускайте большого количества отвлекающих элементов. Разные всплывающие окна (в том числе чаты), мелькающие gif-изображения, яркие цветовые акценты — все это «шум», который отвлекает от основных элементов (надо ли говорить, как это сказывается на конверсии сайта).
- Лучше проверенные элементы и принципы. Оставьте эксперименты модным студиям, вы зарабатываете на своем сайте, а значит, постоянные эксперименты с цветом и расположением элементов — не самый лучший вариант. При этом никто не запрещает настраивать А/В тестирование, просто не бросайтесь с головой в омут новых веяний, подождите первых результатов других компаний.
- Используйте стандартные элементы. Во-первых, потому что людям так понятнее, во-вторых, зачем ломать и строить что-то новое, если и старое исправно работает?
- Посетители не любят читать. Если вы не представитель профессионального сообщества, где ценен контент, не делайте упор на тексты. Лучше всего обновить сайт с помощью инфографики и форматирования.
- Структурируйте информацию. Всю информацию нужно визуально разделить на блоки, в каждом должно быть сгруппировано по 5-7 элементов (если их будет слишком много, это затруднит понимание содержимого).
- Всё необходимое под рукой. Всё самое важное для принятия решения и выполнения целевого действия должно находиться в видимости посетителя сайта и доступно по первому клику. Тот случай, когда правило 3 кликов никто не отменял!
- Один и тот же функционал на разных страницах должен выглядеть одинаково. Как раз сейчас занимаемся крупным проектом, и во время анализа обнаружили такую штуку: один и тот же поиск в разных разделах сайта имел разный набор характеристик, но в итоге приводил на одну и ту же страницу. Так вот, такого быть не должно. То же самое относится и к положению на сайте: если корзина находится в правом верхнем углу, при переходе в каталог она не должна перескакивать и оказываться где-то внизу.
- Пользователь должен найти на сайте решение проблемы. И это не только про контент, это еще и про дизайн и удобство, то есть нужно не только рассказать о проблемах, но и дать понять, что с помощью вашего товара или услуги они решатся с космической скоростью.
- Принцип мостовых перил, или «защита от дурака». Ничего обидного, просто нужно защитить посетителя от ненужных действий на сайте. Как я обычно рассказываю на семинарах, некликабельные элементы не должны выглядеть кликабельными, а рядом с кнопками целевого действия не должно быть кнопки отмены или сброса данных. Сделайте прямой путь к завершению целевого действия с наименьшим соблазном отклониться от курса.
- Нужно забыть про сайты из 90-х. И даже про сайты из 2000-х. Старайтесь быть в тренде и время от времени обновлять свой сайт. Почему? Во-первых, ваши клиенты “молодеют”, поколения меняются, и вот уже миллениалы стали взрослыми и хотят покупать на сайтах. На красивых современных сайтах (в их понимании).
Исчерпываются ли этим списком рекомендации и правила? Конечно, нет! Не зря же мы, маркетологи, тратили и тратим кучу времени на их изучение. Но стоит посмотреть на сайт совершенно другими глазами, понять, выполняются ли эти 13 принципов на вашем сайте, и начать меняться. Если же у вас нет времени на глубокий анализ вашей площадки, мы можем провести его за вас, а также все подробно расскажем, проконсультируем и дадим рекомендации. Всем высокой конверсии и удобных сайтов!
Автор: Дарья Задунаева, интернет-маркетолог
Статья на сайте YARPROMO
