Юзабилити сайта и как его улучшить

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

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

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

Юзабилити веб-сайта — это термин, описывающий простоту его использования. Это относится к разным элементам: меню, кнопкам навигации, пагинации, расположению отдельных элементов.

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

Почему важно соблюдать принципы юзабилити?

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

Неудачный опыт взаимодействия пользователей с веб-сайтом — враг электронной коммерции. Из-за плохого юзабилити вы можете потерять 20%, 50% и даже 90% клиентов.

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

Что влияет на юзабилити?

Юзабилити зависит от многих факторов. Все они важны в комплексе — невозможно улучшить юзабилити, настроив простую навигацию и отбросив все остальное.

• Одним из важных важнейших моментов является адаптивный дизайн. Адаптивные страницы правильно выглядят на всех устройствах: огромном мониторе, ноутбуке с дисплеем 15.6 дюймов, планшете, мобильном телефоне. Расположение элементов будет правильным на экране любого размера.
• Расположение и верстка контента. Обычно пользователи приходят на веб-сайт в поисках конкретной информации. Контент должен легко читаться, поэтому размер и цвет шрифта также имеют значение Пустое пространство — еще один важный элемент верстки. Оно разделяет блоки и упрощает восприятие информации.
• Отсутствие технических ошибок. Чтобы веб-сайт был удобным в использовании, ошибки должны быть исправлены. Все предлагаемые функции должны выполняться без проблем: кнопки — работать, страницы по ссылкам — открываться, а товары — добавляться в корзину.
• Структура и навигация. Главная страница должна четко информировать о том, что предлагает веб-сайт. Пункты меню должны давать представление о содержимом страниц. Цель состоит в том, чтобы пользователи могли быстро находить то, что ищут. Обычный способ измерить, насколько легко найти страницу, — это подсчитать количество кликов, необходимых для перехода на нее. Старое правило в 3 клика потеряло актуальность и подойдет разве что для простых блогов. Для крупного интернет-магазина или портала можно ориентироваться на 10–15 кликов.

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

Как улучшить юзабилити сайта?

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

Проработайте шапку сайта

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

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

В шапке может располагаться меню, но это необязательно. Сегодня его все чаще прячут в так называемый «гамбургер» — 3 полоски, клик на которые вызывает меню.

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

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

Проработайте главную страницу сайта

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

На главной можно указать следующую информацию:

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

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

Проработайте элементы навигации

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

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

Хорошая навигация невозможна без продуманной структуры сайта. Выстройте иерархию страниц, создайте понятные категории. Если у вас много товаров, разделите их на подкатегории. Используйте привычные места для элементов навигации: корзина и личный кабинет в верхнем правом углу, меню — вверху или слева, ссылки на страницу «О компании» и «Политику конфиденциальности» — в футере. Эксперименты допустимы, но не забывайте тестировать нововведения.

Проработайте страницы товаров

Именно на странице товара или услуги посетитель совершает целевое действие. Помогите ему в этом:

• Добавьте больше качественных изображений с возможностью увеличения.
• Понятные характеристики и возможность их выбора. Например, размер обуви, цвет коврика для мыши, диаметр автошин.
• Сделайте кнопку «Купить» или «Заказать» заметной, но не переусердствуйте — красная кнопка на половину экрана будет выглядеть нелепо.
• Добавьте отзывы покупателей. Особенно полезной будет возможность для пользователей вставлять собственные фото и видео в отзыв. Эта информация станет той последней каплей, которая убедит клиентов купить товар.
• Используйте допродажи и кросс-продажи. Допродажи легко реализовать с помощью блока «С этим товаром покупают», а кросс-продажи будут полезны, если пользователь перешел на карточку товаров, которого нет в наличии.

Информации о товаре должно быть достаточно, но не нужно длинных полотен текста. Фото и видео расскажут больше. В текстовом формате лучше оформить характеристики и краткое описание для SEO-оптимизации страницы.

Проработайте функционал заказа

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

• пользователь нажимает кнопку «Купить»;
• указывает ФИО, телефон, город и отделение почтовой службы;
• нажимает кнопку «Оформить».

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

Товары в корзине лучше сопровождать небольшим изображением. Создайте для пользователей личный кабинет, в котором будут сохранены данные. Так вы повысите шансы на повторные покупки: посетителю не придется второй раз указывать ФИО и адрес доставки.

Увеличьте скорость загрузки страниц

Медленная загрузка — одна из главных причин «отказа» посетителей. Сегодня никто не ждет 5 секунд, пока страница загрузится. Важно, чтобы страницы быстро грузились на всех устройствах, ведь сегодня большинство людей просматривают сайты с мобильных устройств. Проверить скорость загрузки страниц можно разными инструментами, но самый популярный из них — Google PageSpeed Insights. Инструмент показывает текущую скорость и дает рекомендации по ускорению.

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

• используйте сжатие изображений и современные форматы (.webp, .svg);
• удалите неиспользуемые плагины и скрипты;
• оптимизируйте код CSS и JS;
• используйте асинхронную загрузку скриптов, размещайте их в конце страниц;
• настройте кэширование;
• подключите CDN — сеть доставки контента;
• перенесите сайт на быстрый хостинг.

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

Выводы

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

• снижение конверсии;
• падение поискового трафика.

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