Что такое UX и UI-дизайн? Как провести юзабилити-аудит сайта? Чек-лист от Molinos

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

Чтобы этого не происходило, сайт должен быть удобным, или говоря на профессиональном языке, user-friendly.

Но как понять, что сайт удобный? И что вообще такое удобство, когда мы говорим о сайте?

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

Разбираемся, что это такое и как оценить удобство и эффективность сайта самостоятельно.

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

Приходите на бесплатную консультацию и получите ответы на все вопросы о вашем сайте от экспертов с сильными кейсами.

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

➡️ Например, чтобы заказать товар, пользователю нужно открыть сайт, зайти в каталог, добавить товар в корзину и оплатить его. За понятную навигацию, наличие кнопок «добавить в корзину» и «оплатить» как раз отвечает UX.

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

А за внешний вид отвечает UI.

UI расшифровывается как User Interface — пользовательский интерфейс.

UI — это визуальное оформление сайта (шрифты, иконки, картинки), которое должно быть привлекательным и понятным для пользователя.

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

Главная задача любого сайта — чтобы пользователь совершил целевое действие.

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

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

➡️ Удобство = конверсия. А за удобство отвечают UX и UI.

Чтобы создать понятный сайт или узнать, насколько эффективно работает уже существующий, специалисты проводят аудит юзабилити.

Для начала разберемся с юзабилити.

➡️ Юзабилити сайта (Usability) – это степень его удобства для пользователя.

Что такое удобство в этом случае?

Это когда пользователь смог:

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

➡️ Качественный юзабилити — это когда человек может легко и быстро получить нужную ему информацию и решить свою задачу. По сути, это показатель, который объединяет UX и UI.

➡️ Аудит юзабилити — это анализ сайта, который помогает выявить ошибки, которые мешают пользователю совершить целевое действие.

Когда проводят аудит юзабилити:

• На этапе разработки — когда нужно оценить удобство для пользователя перед запуском;

• Когда сайт уже работает, но уровень конверсии не устраивает — мало заявок, звонков или подписок;

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

Подробнее о том, что такое юзабилити и почему это так важно — мы рассказали в статье в формате комикса:

6 самых популярных вопросов про юзабилити

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

Вот симптомы того, что существующему сайту нужен аудит юзабилити:

• конкуренты имеют более современный интерфейс, а люди привыкают к общепринятым стандартам и сценариям, и сайт им не соответсвует;

• перегружена служба поддержки — сайт не отвечает на вопросы пользователей, пользователь не понимает, что ему делать, и звонит оператору;

• количество негативных отзывов о работе с сайтом увеличивается.

😍 В идеальном мире для аудита собирают команду тестировщиков или специальную фокус-группу из целевой аудитории, которой дают задание — например, заказать товар на сайте или оставить заявку на услугу. Далее обрабатывают результаты — время, которое пользователь провел на сайте, справился ли он с задачей и какие трудности у него возникли.

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

Но в реальном мире возможность заказать фокус-группу или тестировщиков есть не всегда. Поэтому специалисты проводят аудит самостоятельно.

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

Рассказываем, как провести аудит юзабилити самостоятельно и какие элементы оценивать.

Задача – выяснить, какие метрики проседают.

На что смотреть:

✅ глубина просмотра — сколько страниц посетил пользователь за один сеанс,

✅ доля отказов — процентное соотношение количества посетителей, которые покинули сайт прямо со страницы входа или посмотрели не более одной страницы сайта,

✅ время на сайте.

Посмотреть эти данные можно в отчетах Яндекс. Метрики или Google Analytics 4.

Например, в Яндекс. Метрике эти показатели находятся во вкладке «Поведение»

Если хотите оценить поведенческие факторы на конкретной странице, используйте отчет «Страница входа»:

В GA 4 эти данные можно найти во вкладке «Источники трафика»:

• Высокий процент отказов, как правило, связан с тем, что на странице нет CTA (call to action-элементов), то есть призыва к какому-то действию — у пользователя нет мотивации задерживаться на сайте.

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

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

📍 Также проанализировать поведенческие факторы более детально поможет Вебвизор — это инструмент от Яндекса. Он записывает экран пользователя во время посещения сайта. Так можно узнать, на что пользователь обратил внимание, где задержался, а где наоборот быстро пролистнул информацию и что ему было непонятно.

Интересный момент: в Вебвизоре легко отследить «клики ярости» — когда человек быстро и очень много раз нажимал на одну кнопку.

📍 Во вкладке «Карты» есть пункт « Аналитика форм». Это еще один инструмент, который помогает отследить, сколько пользователей заполнили формы и какая у нее конверсия. Можно узнать, какие поля не заполняют и после каких уходят с формы.

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

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

Что относится к технической стороне:

✅ Валидность кода HTML, CSS и JS — из-за неправильной верстки элементы могут отображаться неправильно, а функционал не работать или работать с перебоями.

Проверить валидность страниц можно с помощью сервисов:

для HTML и CSS — https://jigsaw.w3.org/css-validator/

для JS — https://ru.piliapp.com/javascript-validator/

✅ Скорость загрузки сайта

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

Пример: долгая загрузка картинок на сайте мебельной фабрики «Монолит»

✅ Ответ сервера

На сайте обязательно должна быть страница 404.

Что нужно сделать:

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

Контент — это то, ради чего пользователи приходят на сайт.

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

Что проверить:

✅ Заголовки

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

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

✅ Стиль изложения

Стиль изложения, или так называемый Tone of Voice (TOV) должен соответствовать целевой аудитории.

Если это обычный покупатель или юзер, не нужно использовать сложные профессиональные термины. Или же использовать, но с пояснением.

И наоборот — специалистам не надо объяснять каждое понятие, они и так их используют в работе.

Вообще, Bing — это просто поисковая система…, но в этом случае это неочевидно.

✅ Форматирование текста

Важные мысли нужно выделить жирным шрифтом или цветной подложкой.

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

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

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

✅ Единый стиль

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

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

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

Удобная навигация это:

✅ Небольшое количество уровней вложенности – не более 3-4.

✅ Количество пунктов меню на каждом уровне вложенности — не более 7-8.

✅ ЧПУ — человекопонятный URL. Если пользователь посмотрит на адрес страницы, он легко поймет где находится и через какой раздел на нее попал.

✅ Ссылки легко отличить от обычного текста.

Ошибка: обычные заголовки напоминают ссылки, хотя это просто текст.

✅ В каталоге товаров есть фильтр — чтобы пользователь мог быстрее найти нужный товар или услугу.

✅ В конце страницы с товаров есть раздел «Похожие», чтобы пользователь мог посмотреть аналогичные товары и сравнить.

✅ Есть поиск по сайту.

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

Узнать, как именно пользователь взаимодействует с сайтом, с какими барьерами он сталкивается и как их убрать, поможет CJM (Customer Journey Map) — карта путешествия клиента. Как ее составить — рассказали в статье:

CJM: что, зачем и как? Разработайте лучший клиентский опыт уже сегодня

Что проверить:

✅ Цветовое оформление и стилистика сайта соответствуют его тематике.

На этом сайте собрано бинго: яркий шрифт, который своеобразно контрастирует с фоном, две кнопки с номером телефона (чтобы точно позвонили) и фотография с космосом на фоне (почему космос, если сайт про продажу машин?).

✅ Шрифты читабельные — подходящий размер, стиль и контрастность.

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

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

✅ При переходе между страницами сохраняет преемственность структуры сайта.

✅ Адаптивность — сайт корректно отображается на разных устройствах.

Как посмотреть, как выглядит сайт, если нет разных устройств?

Например, широкоформатного экрана или планшета?

Используйте сервис http://adaptivator.ru/ – он покажет, как выглядит сайтна разных экранах.

Важно: на всех устройствах контент должен быть одинаковым — может меняться его размер и формат, но сам контент должен оставаться прежним!

Конверсионные элементы — это элементы на сайте, которые влияют на то, совершит пользователь целевое действие или нет.

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

Что относится к коммерческим факторам:

✅ Форма заявки или заказа.

✅ Кнопка с CTA — добавить в корзину, купить, оформить заказ, подписаться.

✅ Призывы к действию — например, «записаться», «перейти в каталог», «получить консультацию».

Призыв к действию должен быть простым и понятным.

На сайте студии по наращиванию ресниц вместо кнопки «Записаться», мы видим кнопку «Online» — это неочевидный призыв записаться на процедуру, который становится понятным только после прочтения мелкого шрифта сверху.

✅ Корзина.

✅ Подсказки.

✅ Виджеты.

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

О том, какие коммерческие факторы обязательно нужны на разных сайтах — рассказала Яна Францук, руководитель SEO-отдела:

Чек-лист коммерческих факторов для вашего сайта

У пользователя должна быть возможность узнать кто вы и как с вами связаться.

Что проверить:

✅ логотип есть на всех страницах сайта;

✅ настроенный фавикон — маленький логотип, который находится слева от сайта в выдаче и сохраняет при отображении самой вкладки;

Например, на сайте «Авто-Рим» фавикон не настроен — из-за этого его легко потерять во вкладках и случайно закрыть.

✅ номер телефона и другие контакты на всех страницах (как правило, в правом верхнем углу);

Важно указывать номер телефона в понятном и привычном формате с пробелами, скобками и дефисами. А также делать его кликабельным, чтобы пользователь мог сразу по нему позвонить, а не вводить самостоятельно.

✅ наличие страницы «О нас»;

✅ наличие страницы «Контакты» — форма обратной связи, адрес, телефон, почта, карта проезда и другие важные сведения.

Проверив все эти пункты, ваш сайт уже точно станет лучше и удобнее.

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

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

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