7 практических советов по улучшению юзабилити сайта

Что такое юзабилити?

Юзабилити (от английского usability — удобство использования) — это качественная оценка того, насколько пользователю легко, удобно и комфортно работать с сайтом.

Юзабилити сайта оценивается по 5 основным качественным критериям:

1. Простота и легкость обучения. Насколько легко и быстро пользователи могут выполнять основные задачи при первом посещении интернет-магазина.

‍
2. Эффективность использования. Насколько интерфейс интернет-магазина интуитивно-понятный и насколько быстро пользователь может свободно ориентироваться на сайте и совершать все необходимые ему действия.

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

‍
4. Серьезность и количество ошибок. Как часто и как много ошибок совершает пользователь при работе с сайтом, и насколько легко он может понять и исправить ошибку.

‍
5. Удовлетворенность. Насколько пользователю «понравился» сайт и работа с ним и смог ли он решить вопрос или решить нужную задачу.

Юзабилити и UX

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

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

Юзабилити и доступность сайта

Юзабилити и доступность сайта — это связанные, но отдельные аспекты. Оба этих понятия важны для создания инклюзивного дизайна. Так же как хороший UX включает в себя юзабилити, хорошее юзабилити включает в себя доступность сайта.

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

Почему юзабилити сайта важно для бизнеса

Вот несколько причин, по которым  важно соблюдать принципы юзабилити сайтов:

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

Основные ошибки юзабилити сайта

Вот основные ошибки usability, которые стоит учитывать:

• Интернет-магазин не адаптирован под устройства разных типов;
• Дизайн сайта перегружен лишними элементами, которые отвлекают пользователя от целевого действия;

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

• Непродуманная навигация;

• Медленная скорость загрузки;
• Неуместное и непродуманное использование Call-to-Action (CTA) кнопок;
• Использование популярных стоковых фотографий;
• Нет связи с пользователями и других форм социального доказательства (форм обратной связи, отзывов, и т.д.);
• Перегруженность текстом;
• Излишний или неуместный креатив — всегда отталкивайтесь от вашей целевой аудитории. Так как то, что остроумно для вас может быть глупым или непонятным для ваших пользователей.

7 советов как сделать дизайн удобным для пользователя

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

1. Предоставьте гарантии надежности.

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

2. Сделайте поиск по сайту максимально удобным.

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

3. Продумайте навигацию по сайту.

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

‍4. Сделайте дизайн адаптивным и mobile-friendly.

В мире более 6,3 миллиардов мобильных пользователей, поэтому корректное отображение элементов страницы на различных мобильных устройствах уже давно must-have. За счет адаптивного дизайна можно снизить процент отказов и увеличить глубину просмотра, что влияет на ключевые KPI интернет-магазина, такие как показатель конверсии сайта.

‍5. Не перегружайте дизайн различными элементами.

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

6. Структурируйте и оптимизируйте контент.

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

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

Как проработка юзабилити сайта может отразиться на доходе интернет-магазина

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

1. Главная страница.

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

Решение:

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

2. Карточка товара.

Краткая информация о товаре на странице была плохо структурирована и не читалась. В характеристиках было недостаточно информации. Например, указано минимальное количество банок, но не указано максимальное.

На странице отсутствовали cross-sale и upsell блоки похожих товаров и товаров, покупаемых вместе. У пользователей не было альтернативы, в случае если просматриваемый товар им не подошел. Пользователи по итогу могли не перейти на просмотр других товаров и уйти к конкурентам.

Решение:

Проработали описание товара: визуально отделили название характеристики от значения, дополнили характеристики. Для автоклавов указали максимальную вместительность, для ректификационных колонн - производительность и % спирта, для титанов - объем и время нагрева, для коптильни - размер.
Добавили cross-sale и upsell блоки.

3. Кнопка «Купить» в карточке товара.

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

Нам удалось снизить процент отказов просто добавив блок с кнопкой «Купить» внизу страницы.

4. Адаптивная версия сайта.

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

Решение:

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

Результат:

Благодаря ряду таких незначительных изменений нам удалось:

• Увеличить коэффициент конверсии на 82%;
• На 84% увеличилось количество добавление товара в корзину;
• На 11% увеличилось количество оформленных заказов;
• Коэффициент отказов уменьшился на 14%;
• Коэффициент выходов снизился на 11%;
• Длительность просмотра увеличилась на 10,27%.

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

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