Основы UX-дизайна: как сделать отличный сайт

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

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

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

Основы UX-дизайна

Не нужно быть профессиональным дизайнером, чтобы создать качественный веб-сайт. Однако без понимания основ UX-дизайна вы не сможете принимать верные решения относительно внешнего вида и структуры вашего проекта.

1. Грамотно продуманный UX-дизайн облегчает пользователям процесс покупки.
2. От качества UX-дизайна напрямую зависит ваша прибыль.
3. Хороший UX-дизайн положительно влияет на позиции вашего сайта в поисковой выдаче.

Все это – лишь малая часть того, что вы узнаете из данного раздела. Мы поможем вам разобраться в основах UX-дизайна с точки зрения его влияния на бизнес.

Что такое UX-дизайн

UX-дизайн, также известный как “дизайн взаимодействия”, - это процесс создания веб-сайта или приложения, который обеспечивает удобство использования.

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

Точно так же UX-дизайн делает это для вашего веб-сайта.

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

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

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

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

Главная цель качественного UX-дизайна – предоставление нужной информации в нужное время для того, чтобы пользователь мог легко перемещаться по вашему веб-сайту и достичь своей цели.

Это краткое описание UX-дизайна. На самом деле, это гораздо больше, и вам также следует понимать разницу между UI- и UX-дизайном. Но пока вы сосредоточены на удобстве использования, вы делаете правильный выбор и, в конце концов, получите отличный веб-сайт.

Почему UX-дизайн так важен

Я знаю, что уже говорил о важности UX-дизайна, но можешь ли ты привести реальные доказательства того, что он действительно влияет на бизнес?

1. UX-дизайн упрощает путь пользователя к покупке

Есть много способов, которыми пользователь может найти ваш сайт:

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

И это далеко не все!

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

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

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

2. UX-дизайн непосредственно влияет на вашу прибыль

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

Вопросы UX, которые непосредственно влияют на потенциальных клиентов и продажи, могут включать:

1. Меню: размер, расположение, опции, копипаст
2. Кнопки призыва к действию: контекст, расположение, копипаст
3. Корзина: количество шагов до покупки, копипаст, сообщения об ошибке
4. Формы: расположение, количество полей, копипаст внутри и вокруг полей
5. Контент о доверии и надежности: расположение, видимость
6. Закрытый контент: расположение, формы доступа
7. Надежность: видимые признаки защиты данных, общения
8. Удобство для мобильных устройств: легкость выполнения задач на любом устройстве

Слабость в любом из этих компонентов UX может стоить вам продаж

3. UX-дизайн влияет на позицию вашего сайта в поисковой выдаче

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

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

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

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

1. Быстрая загрузка
2. Адаптивный контент для мобильных устройств Безопасный сайт (HTTPS)
3. Без вторжений, мешающих потоку пользователей (всплывающие окна, прочие лидогенерирующие запросы)
4. Убедительное представление контента, привлекающее к более продолжительному пребыванию на сайте
5. Правильные уведомления, появляющиеся в нужное время, и понятные пути к следующим действиям, чтобы стимулировать просмотр большего объёма контента за сеанс (и снижение показателя отказов)
6. Доступен для всех пользователей.

UX в действии: создание идеального дизайна сайта

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

1. Ориентируйтесь на одну основную аудиторию
2. Продумайте несколько путей перемещения по сайту
3. Разместите меню в интуитивно понятных местах
4. Будьте разумными в выборе пунктов меню
5. Используйте возможности футера разумно
6. Обеспечьте четкое написание меню и кнопок призыва к действию
7. Используйте возможности нижнего колонтитула разумно
8. Знайте, когда нужно нажать, а когда прокрутить
9. Разрешите скрывать сложную информацию за кликами
10. Разрешите сайту начать диалог
11. Разместите социальное доказательство возле CTA на конверсионных страницах
12. Применяйте стратегический подход в отношении контента
13. Используйте стратегически выноски и CTA в футере.

1. Ориентируйтесь на одну основную аудиторию

Хотя у большинства компаний две или три основные аудитории веб-сайта, сложно создать контент, который был бы одинаково интересен всем.

Хороший веб-сайт обладает структурой контента, навигацией и сообщениями, которые, главным образом, направлены на то, чтобы помочь основной аудитории достигнуть своих целей. Это усилит сигналы активности на странице (т.е. взаимодействия с поисковыми системами) и увеличит количество конверсий. Это не означает, что вы должны полностью игнорировать остальные аудитории.

У вас могут быть инструменты навигации, такие как CTA и пункты меню, ведущие вторичную и третичную аудитории на страницы со своими сообщениями и пользовательскими путями.

2. Продумайте несколько путей движения по сайту

Ваш веб-сайт - это не просто прямая линия от A до B. Существует множество способов, с помощью которых ваши клиенты могут пройти путь от входа к совершению конверсии. Когда дело доходит до B2B аудитории, мы также знаем, что они могут посещать наши сайты несколько раз, прежде чем совершат конверсию.

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

3. Размещайте меню в удобных местах

Будь то ноутбук, планшет, стационарный компьютер или телефон, вы хотите упростить поиск контента на вашем веб-сайте. Пользователи ожидают, что смогут использовать меню, и они ожидают найти их в “обычных” местах.

Скрытые гамбургерные меню на десктопе “это всё равно, что разместить двери автомобиля на крыше, потому что без них боковые стороны автомобиля смотрятся лучше”, - говорит наш основатель и главный UX-дизайнер Шон Джонстон.

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

4. Будьте разумны в выборе пунктов меню

Это вопрос, который мы затрагиваем в каждой статье, которую мы пишем о UX-дизайне. Слишком много опций может привести к тому, что пользователь ничего не выберет. Хорошо продуманное меню должно предлагать чёткий выбор вариантов, аккуратно разделенных на логичные группы.

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

5. Будьте разумны во всех опциях

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

• Слишком много уточнений для различных типов контента.
• Слишком много препятствий (всплывающие окна, прочие лидогенерирующие запросы).
• Слишком много меню.

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

6. Обеспечьте чёткое написание меню и кнопок призыва к действию

Каждый раз, когда пользователь просит перейти на другую страницу вашего сайта, вы просите его поверить, что это того стоит. Очень важно понимать, как правильно это сделать!

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

Несмотря на то, что эти инструменты навигации часто содержат всего одно или два слова, они оказывают огромное влияние на вашу конверсию. Вы можете использовать простые слова, например “просмотреть всё” или “зарегистрироваться”, но не бойтесь добавить немного индивидуальности, если ваша аудитория это оценит. Главное - убедиться, что всегда понятно, что произойдет после нажатия на кнопку.

7. Используйте возможности футер-области

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

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

8. Знайте, когда нужно нажать, а когда прокрутить страницу

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

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

9. Разрешить скрывать сложную информацию за нажатиями

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

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

Этот подход особенно хорош для страниц с ответами на часто задаваемые вопросы.

10. Разрешите вашему сайту начать диалог

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

11. Разместите социальное доказательство рядом с кнопками призыва к действию на конверсионных страницах

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

Исследования G2 показали, что 92% B2B покупателей с большей вероятностью сделают покупку после чтения авторитетного отзыва. Отзывы могут реально увеличить конверсию на 34%! Лучшее место для размещения такого супер убедительного контента - рядом с кнопками CTA (call to action), ведущими на конверсионные страницы.

12. Будьте стратегическими в отношении похожего контента

Стоит повторить: способ, которым пользователи взаимодействуют с вашим сайтом, влияет на его рейтинг в поисковых системах. Заставлять пользователей просматривать больше контента - полезно для вашей воронки продаж и SEO.

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

13. Будьте особенно стратегичными в использовании выносок и кнопок призыва к действию в футере

Ещё одна особенность веб-сайта, облегчающая взаимодействие с пользователем (если использовать ее правильно) - это выноска. Обычно она содержит текст, изображение и как минимум одну кнопку CTA для перехода на другую страницу вашего сайта. Если они размещены в нижней части страницы, они обычно называются “кнопками призыва к действию”.

Особенность использования выносок и этих кнопок в футере состоит в том, что они должны предполагать естественный следующий шаг. Если кнопка не имеет смысла на данном этапе пути покупателя, ее, скорее всего, не нажмут. Вряд ли кто-то захочет связываться с вами через индивидуальный веб-сайт агентства после прочтения статьи в блоге. Также не имеет смысла открывать страницу “Карьера”, когда человек просматривает примеры вашей работы - этот контент обычно нацелен на две разные аудитории.

Вот примеры естественных следующих действий:

1. Меню: размер, расположение, опции, копипаст
2. Публикация в блоге - похожие публикации, подписка на новостную рассылку, закрытый контент.
3. Страница “О компании” - страница команды, страница “Карьера”, другой контент, раскрывающий историю вашей компании.
4. Услуги - связанные проекты или исследования, страница с контактами.
5. Тематические исследования - страница с контактами, заказ демоверсии.

14. Поток на вашей странице должен представлять собой историю

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

Хороший веб-сайт развивается как история. Если вам кажется, что информация на странице не связана логически или темы выбраны случайно, то вам следует вернуться к своей изначальной истории.

15. Уделите внимание своим скрытым страницам

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

• Страница благодарности, которая видна только после заполнения формы.
• Подтверждение подписки на новостную рассылку.
• Подтверждение загрузки контента.
• Страница ошибки 404.
• Страница с нулевыми результатами, отображаемая, когда нет подходящих результатов для запроса пользователя.

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