Юзабилити коммерческого сайта:чек-лист самопроверки

Надоел устаревший сайт? Скорее всего, у Вас уже есть свое видение стиля его интерфейса.

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

Какие его элементы работают, а какие — раздражают.

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

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

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

Хорошо бы начать с общих ошибок юзабилити, над исправлением которых уже работают Ваши конкуренты:

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

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

Из чего состоит понятие “usability”?

О любви поисковиков к веб-ресурсам с интуитивно-понятным дизайном читайте далее.

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

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

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

Не стоит сводить суть юзабилити сайта только к навигации.

Это понятие намного шире и помимо этого включает в себя:

• структуру сайта;
• скорость загрузки страниц;
• дизайн (цвет, шрифт, анимация);
• практичность контента (описания карточек, размер текста и др.).

В чем измеряется юзабилити сайта

Это не абстрактная характеристика, ее можно посчитать количеством кликов и времени, затраченного посетителем на решение своего вопроса.

Чем это число ниже, тем лучше. Согласно международным стандартам эта величина называется «стоимость взаимодействия».

Почему удобный интерфейс сайта – это так важно

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

Вы хотите получать бесплатный трафик?

Вас интересует продвижение своего сайта?

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

Теоретические основы. Принципы юзабилити

Планируете добавить на сайт новый функционал?

Или обновить дизайн или вовсе создать новый лендинг?

Прежде чем начать, учтите главное правило дизайна коммерческих лендингов:

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

Как мудрый маркетолог Вы избежите этих проблем еще на этапе создания или проверки макета сайта.

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

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

Да, этого мало для полноценной подготовки идеального сайта.

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

Рекомендуем для чтения:

1. 13 задач pop-up окон и 22 правила их использования для роста конверсии (без раздражения посетителей)
2. Что такое история сайта и как ее узнать

Строение шапки сайта

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

Почему так важно придерживаться их традиционного расположения?

И чем грозит пренебрежение общими правилами?

Как плохо оформленная шапка запутывает посетителя и лишает Вас продаж — читайте далее.

Можно много говорить о ее дизайне, но главная задача хедера коммерческого сайта — навигация.

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

Таким образом, логотип и меню — главные элементы этой части лендинга.

Дополняют их строка поиска, смена языка, СТА-кнопки и др.

Путем проб и ошибок гуру UX-дизайна пришли к выводу, что лучше:

• Делать шапку фиксированной. Как вариант, позаботиться о том, чтобы она автоматически показывалась при наведении на верхнюю часть страницы. Все для того, чтобы меню сайта всегда было под рукой пользователя.
• Придерживаться среднего размера в 40 × 70 px., максимум 250 px.

Грамотно составленная шапка сайта способна повысить его конверсию.

Мы изучили архитектуру лучших магазинов и определили структуру идеального хедера 2019 года.

Проверьте, насколько элементы Вашего веб-сайта соответствуют этим требованиям.

Логотип

Обычно он занимает почетное место в верхнем левом углу лендинга.

Его задача — узнаваемость бренда. Высота — не более 40-60 px.

• На главной странице логотип должен быть не кликабельным, на остальных — возвращать на главную при нажатии.
• Иногда возле лого можно встретить краткое описание компании:

Однако все чаще эту функцию выполняет следующий блок:

Но дублировать информацию не стоит:

Меню

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

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

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

• «Гамбургер» ☰ лучше всего работает в мобильной версии. В десктопной — это лишний клик, который отдаляет пользователя от покупки.

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

Тем не менее «гамбургер» прекрасно работает в качестве дополнения для второстепенных элементов, которые не поместились в основное меню:

• Называя элементы списка меню, лучше использовать описание, функцию продукта, а не его название. Например, не «Email Verifier», а «программа для проверки email». Как не нужно делать:

Подобрать часто употребляемые слова поможет Google Keyword Planner.

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

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

Контакты

• Людям привычнее видеть этот элемент в правом верхнем углу лендинга.

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

Корзина

Кнопка со ссылкой на нее должна всегда быть перед глазами клиента.

Поэтому на коммерческих сайтах ее также размещают в правой части шапки.

Лучше всего сделать ее большой и заметной.

Личный кабинет

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

Для этого в правой части хедера размещают соответствующую ссылку «Вход», «Регистрация» и т.д.

Плашки акции

Элемент, от которого стоит отказаться в этой части сайта.

Предложение покупки в шапке понизит ее юзабилити.

Это раздражает и отвлекает посетителя от основной функции хедера ー навигации.

К примеру, как делать не надо:

Строка поиска

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

• Время ー деньги: чем быстрее посетитель найдет товар, тем выше шансы, что он его купит. Ускорьте процесс ввода запроса, показав список релевантных результатов.

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

Первый экран сайта

Это лицо Вашего сайта.

Тот самый фантик, оценивая который посетитель решает, кушать ли ему эту конфету.

Именно главный экран отвечает на вопрос «Куда я попал».

Будь то магазин, сервис или агентство, предназначение этого элемента ─ завлечь клиента или продать.

Соответственно, варьируется и его наполнение.

Посетители коммерческих сайтов привыкли видеть следующую структуру первого блока:

1. Заголовок о компании, продукте/услуге + кнопка «Узнать больше».

2. Описание акции, продукта/услуги + призыв купить.

Именно здесь акцентируют внимание на уникальном торговом предложении компании.

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

Юзабилити контента

Наполнение продающего сайта должно соответствовать негласным нормам оформления.

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

Текст, изображения, видео, а особенно анимация.

Узнаем подробнее о том, как должен работать хороший контент.

• Текст. Оптимальный размер основного текста в десктопной версии лендинга должен быть 12-16 px. Хорошую читабельность обеспечит контраст оттенка шрифта и фона.

Цифры лучше писать знаками, не словами.

При этом старайтесь разделять большие числа пробелами или запятыми.

Так человеку будет проще их воспринимать.

Полотна текста актуальны в художественной литературе, но не на продающем лендинге.

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

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

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

2. В локальных и интернет-магазинах — фото продукции.

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

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

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

Лучше всего использовать файлы формата JPEG, так как они самые «легкие».

Фон и цвета картинок для сайта не должны идти врозь с общей концепцией дизайна.

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

Секрет в том, чтобы все происходило поочередно.

На коммерческих сайтах используют анимацию для:

1. Демонстрации товара

2. Привлечения внимания. Подсветка кнопок, текста, появление элементов, блоков сайта.

Идеальная скорость анимации элементов сайта в мобильной версии 0,2-0,3 сек., в десктопной версии — 0,5 сек.

Длительность движения однотипного контента, тех же карточек товара, должна составлять примерно 0,25 сек.

3. Развлечения, узнаваемости. Это может быть милый элемент блока лендинга.

Или единая концепция дизайна, которая объединяет весь сайт и выделяет Вас среди конкурентов.

В обоих случаях это оставляет приятное впечатление и повышает лояльность потенциального клиента.

ВАЖНО: Не используйте технологию flash для анимации, ибо она работает далеко не у всех и вызывает дополнительное окно уведомления при входе на сайт.

• Видео. Его продолжительность должна быть не более двух минут. Этого времени вполне достаточно, чтобы у посетителя сформировалось мнение о товаре.

Вставляя ссылку с YouTube, Вы рискуете потерять клиента.

Рекомендации после окончания ролика могут затянуть его в омут бесконечных видео.

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

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

Всплывающие окна

Как должен работать pop-up, всплывающая форма подписки или объявление об акции, чтобы не раздражать клиента?

Мы вкратце расскажем об основных правилах оформления и функционирования этих элементов.

О том, как создать идеальное всплывающее окно — далее.

Еще один метод пытки посетителей сайта.

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

Что уж говорить, если сам Google разработал блокировщик назойливой рекламы для браузера Chrome.

Крайне внимательно отнеситесь к разработке идеи этого элемента, чтобы не повторить этот «шедевр»:

Конечно же это шутка, но увы, она вполне актуальна.

В оформлении всплывающих окон существует 3 главных «нельзя»:

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

Помимо раздражения клиентов, это может привлечь внимание Google.

Система оповестит Вас о проблеме и даст время на ее исправление, после чего заблокирует этот элемент.

Методом проб и ошибок UX-дизайнеры и маркетологи мира искали решение дилеммы поп-апов.

Вот к чему они пришли:

• Время и частота показа. 1 пользователь — 1 показ элемента через 10-15 секунд после входа на страницу.
• Количество. Оптимальный вариант 3 поп-апа: приветствие — на главной, подписка — на блоге, скроллинговая — любая страница сайта, если на ней нет другого окна.

• Обратная связь. Не молчите, напишите небольшой текст-реакцию на действие человека:

Существует 4 вида попап окон:

• Scroll pop up – окна, которые всплывают при прокрутке страницы
• Entry Pop-Up – окна, которые всплывают при входе, например в раздел, где требуется авторизация
• Timed Pop-Up – окна, которые всплывают спустя время, например 20 секунд.
• Exit pop up – окошко, которое появляется при попытке закрыть вкладку

В этом видео Николай Шмичков расскажет, чем они отличаются и когда применяются

Юзабилити заказа товара

Этап выбора товара/услуги — один из наиболее важных на пути пользователя к покупке.

Каждый элемент презентации продукта формирует впечатление о нем.

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

Страница товара

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

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

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

Удобство оформления страницы услуг

Дизайн лендинга онлайн-сервисов и агентств имеет особую структуру.

Максимальную конверсию имеют блоки, которые состоят из:

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

Основные принципы юзабилити «Корзины» интернет-магазинов

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

• Цена должна быть расписана:

Цена = стоимость единицы х количество + варианты доставки.

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

Юзабилити подвала сайта

Футер — визуальное завершение страницы, но не пути пользователя по Вашему лендингу.

Предназначен показать дальнейшие пути изучения сайта.

А еще он может рассказать о компании и призвать к действию.

О том, что в нем должно быть, далее.

Правильная структура этого элемента способна не только удержать посетителя, но и превратить его в клиента.

• Иконки социальных сетей. Они могут быть и в боковом меню, но лучше всего оставить их на конец пути клиента.

Многие пренебрегают этим советом и размещают их в шапке.

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

Учтите, оттуда мало кто возвращается.

• Контакты. Это может быть вариативный список телефонов, e-mail, адрес компании или ее размещение на карте. К примеру, как это сделали мы:

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

• Карта сайта. Аналогично меню этот путеводитель показывает полный список всех страниц и категорий Вашего сайта. Или наиболее популярных из них.

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

Тестирование юзабилити

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

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

Сделать это можно как с помощью привлеченных профессионалов, так и самостоятельно.

Инструкция ниже.

Оценка степени удобства ресурса для посетителей поможет Вам эффективно:

• создать коммерческий сайт;
• увеличить конверсию уже существующего лендинга;
• добавить новый функционал.

Существует несколько способов понять, насколько хорошо работает Ваш сайт:

• Анализ статистики посещения сайта

Где смотреть:

• в Google Analytics ➝ вкладка «Аудитория» ➝ «Обзор»

• в Яндекс.Метрике ➝ вкладка «Отчеты» ➝ «Стандартные отчеты» ➝ «Посетители»

Если контент сайта не соответствует ожиданиям посетителя, это отразится в графе «отказы».

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

• Глубина просмотра. Чем больше страниц посетит пользователь за один визит, тем лучше.
• Время на странице. Косвенный показатель заинтересованности клиента товаром. Человек может провести на сайте 12 минут, читая описания, или открыть страницу, уйти на соседнюю вкладку и вернуться назад. Учитывайте этот показатель только в сочетании с другими характеристиками.
  Если Вы заметили явные проблемы, стоит получить отзыв реальных людей о юзабилити Вашего сайта.
• Узнать мнение аудитории. Только не подчиненных. Близкие люди вряд ли объективно оценят удобство сайта. Для этой цели используют онлайн-опросы, интервью, создают фокус-группу или привлекают тестировщиков.

• Провести тестирование юзабилити

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

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

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

• Сервисы, в которых можно напрямую общаться с группой людей, которые будут оценивать сайт:
  1. AskUsers.
  2. Five seconds test.

• Проверка скорости загрузки страниц — Google PageSpeed Insights.
• Анализ поведения посетителей сайта:
  1. ClickTale — сервис для анализа поведения пользователя на сайте по видеозаписи его действий.
  2. Обратиться к профессионалам, специализированным агентствам.

Итоги: как быстро убедиться, что Ваш сайт удобный

1. Проверьте скорость загрузки. Она должна быть не более 3 секунд.
2. Убедитесь, что с любой страницы Вашего сайта можно сделать покупку или заказ продукта в 3-4 клика. Максимум в 12.
3. Просмотрите оформление контента (цвета, шрифты, кнопки, картинки, анимация лендинга). Он должен быть читабельным и фокусировать внимание на главном предложении. Чем проще, тем лучше.
4. Проследите за классическим расположением ключевых элементов интерфейса: форм заказа, кнопок, контактов, фильтров, меню и т.д. Привычный дизайн сократит процесс изучения продукта и ускорит момент покупки.

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

И его запомнят как впечатляющий, но непонятный.

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

Да, лендинг — лицо компании, но прежде всего — это инструмент заработка.

Соответственно, он должен приносить продажи, а значит быть удобным, и только потом красивым.