12 советов по улучшению юзабилити многостраничных сайтов и интернет-магазинов

1 216
- 11 минут

12 советов по улучшению юзабилити многостраничных сайтов и интернет-магазинов

Примерно 45-50% посетителей сайтов могут покинуть его и не совершить покупку, если им не понравится внешний вид сайта. Другие же 50-55% могут смириться с дизайном из 2000-х годов, но они также покинут ваш ресурс, если он будет им неудобен и будет всячески тормозить процесс выбора и заказа товаров или услуг.

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

  1. Шапка сайта

Шапка сайта традиционно носит несколько функций:

  • “Определитель” (туда ли я попал?) —  помогает пользователям понять куда они попали. Логотип и дескриптор в шапке сайта являются носителями данной функции. С логотипом все понятно (он служит ссылкой на главную и обозначает принадлежность сайта какой-либо компании). Дескриптор — это короткое описание предложения компании. Дескриптор обязателен на сайте (попробуйте только по логотипу определить чем занимается компания — интересная задача, не правда ли:)).

  • Информационная функция. Часто туда помещают информацию о режиме работы, доставке, акциях и спецпредложениях.

  • Маркетинговая и конверсионная функция. Эти функции выполняют телефоны, кнопки “Call-to-action” и корзина (в случае с интернет-магазинами).

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

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

Задача главной страницы — сжато рассказать о предложении, мотивировать к заказу и показать, как его совершить. Ни в коем случае нельзя оставлять ее пустой или наполнять SEO-текстом. Выполняйте следующие рекомендации:

  • Яркие баннеры на первом экране. Покажите самые “сочные” изображения товаров или поместите на первый экран баннер со скидками или спецпредложениями.

  • Преимущества компании. Четко сформулируйте 4-8 преимуществ сотрудничества с вашей компанией (меньше не стоит — мало, более тоже нет — не стоит занудствовать). Формулируйте преимущество кратко (4-8 слов) и иллюстрируйте содержание иконками.

  • Ссылки на основные разделы сайта. Визуализация в виде карточек самое лучшее решение этой задачи.

  1. Навигация

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

  • Горизонтальное меню. Пункты этого меню должны отражать категории товаров и услуг. Оптимально, чтобы в каждой категории было не более трёх уровней. Кстати, не стоит увлекаться правилом “трех кликов” или подобными им. Пользователи с удовольствием кликнут 10 раз ( при условии, что эти клики легки и не несут когнитивной нагрузки), чем сделают три “сложных” клика (и при этом будут каждый раз по минуте думать правильно ли они поступают).

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

  • Футер — нижняя часть сайта. Обычно там размещают ссылки на важные разделы или на второстепенные страницы, которые не размещены в основном меню. Для “прокачки” юзабилити разместите в футере страницы: контакты, информационные страницы, сервисные страницы, политика конфиденциальности и ссылки на соцсети.

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

  • Кнопка “Наверх”. Она помогает пользователю из любого места страницы быстро попасть в её начало.

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

  1. Страницы товаров или услуг

Страницы этой категории можно разделить на три вида: каталоги товаров или услуг; карточки товаров; страницы услуг.

  • Страницы каталога. Обязательные элементы: фото товаров, их название и краткое описание, цена и кнопка для заказа. Важным трендом в ecommerce является наличие кнопки заказа товаров в один клик (примерно 45-48% покупок совершается именно с помощью этой кнопки).

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

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

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

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

5. Checkout. Страница заказа

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

  • Минимум полей. Всегда перед добавлением полей задавайте себе вопрос: “А нужно ли это поле?”. Если достаточно для заказа одного поля, то оставляйте только его.

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

  • Не используйте капчу.

  • Яркая и заметная кнопка отправки заявки.

  • Наличие надписи о согласии на обработку персональных данных со ссылкой на политику конфиденциальности компании. Добавить этот пункт обязательно в соответствии с Федеральным законом от 27.07.2006 N 152-ФЗ "О персональных данных".

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

  • Корзина. Основные принципы создания страницы “Корзины” таковы: визуализируйте товары в корзине (через фото, название, цену и функции изменения количества и удаления товара), укажите общую стоимость вашего заказа, отделите шаги оформления заказа (данные покупателя, выбор способа доставки и оплаты, указание адреса) визуально, обязательно указывайте стоимость доставки и конечную стоимость покупки. Разместите кнопку перехода к оформлению заказа на виду у пользователя.

6. Скорость загрузки

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

С помощью сервисов аналитики Яндекс.Метрика и Google Analytics определите самые важные страницы вашего сайта (они приносят больше всего трафика).

Проверьте страницы инструментом Pagespeed Insights от Google. Обратите внимание, что важным показателем является не сама оценка сервиса, а те рекомендации, которые он дает ниже.

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

7. Поиск

Есть два способа, которыми люди ищут то, что они хотят на сайте:

  • Перемещаются по категориями и с помощью других элементов навигации.

  • Вводят искомый запрос в поле поиска.

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

  • Поиск не учитывает морфологию языка, опечатки и дефисы;

  • Поле для ввода поискового запроса не достаточно велико;

  • В результатах поиска выдается информация не связанная с искомой.

8. Не докучайте пользователям 

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

Однако, не стоит забывать про A/B тесты. Протестируйте прибыль с сайта без всплывающих окон и с ними. Если же окажется, что всплывающие окна позволяют заработать больше, то вам придется делать выбор между счастьем пользователей и вашим заработком.

9. Дайте повод задержаться

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

  • Создавайте интересный контент. Для коммерческих проектов и интернет-магазинов важно наличие интересного описания услуги/товара. На их изучение пользователи тратят больше времени.

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

10. Адаптивный дизайн

50% интернет-пользователей предпочитают смартфон ноутбуку или стационарному компьютеру. Важно, чтобы не приходилось растягивать содержимое страницы по экрану или тратить время на перемещение от левого края к правому. Наличие мобильной версии сайта сегодня строго рекомендуется (к примеру, без нее Гугл не будет продвигать сайт в поисковой выдаче).

11. Авторизация с помощью почтовых сервисов или соцсетей

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

12. Удобство чтения

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

Итог

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

Интересна услуга?
Давайте обсудим детали!
Оставьте Ваши контактные данные
и мы перезвоним